/* Styles de base des cartes */
.card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-title-color: var(--etrck-secondary);
    --bs-card-subtitle-color: var(--etrck-secondary);
    --bs-card-border-width: 1px;
    --bs-card-border-color: rgba(var(--etrck-secondary-rgb), 0.125);
    --bs-card-border-radius: 2px;
    --bs-card-box-shadow: none;
    --bs-card-inner-border-radius: 0;
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: rgba(var(--etrck-secondary-rgb), 0.125);
    --bs-card-cap-color: none;
    --bs-card-height: auto;
    --bs-card-color: inherit;
    --bs-card-bg: #F0F0F0;
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
}

/* Style pour les widgets */
.card.card-widget {
    background: #F0F0F0;
    border: 0;
    border-radius: 30px;
    transition: all 0.3s ease;
    width: 100%; /* Prendre toute la largeur de la colonne */
    box-sizing: border-box;
    margin-bottom: 1rem;
}

.card.card-widget:hover {
    transform: scale(1.05);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.card.card-widget h5 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.card.card-widget *{
}

/* Pour la poignée de glisser-déposer */
.card-widget h5.card-title.ui-sortable-handle {
    cursor: grab;
}

/* Placeholder lors du glisser-déposer */
.sortable-placeholder {
    background: rgba(var(--etrck-primary-rgb), 0.125);
    border: 5px dotted rgba(var(--etrck-bg-yellow-rgb), 0.5);
    border-radius: 30px;
    height: 100px;
    width: auto!important; /* Laisse le JavaScript définir la largeur correcte */
    margin-bottom: 1rem;
    box-sizing: border-box;
    display: inline-block;
}

/* Styles pour le dashboard */
#dashboard-area {
    display: flex;
    flex-wrap: nowrap; /* Pas de retour à la ligne pour les colonnes */
    gap: 1.5rem; /* Espacement horizontal entre les colonnes */
}

.dashboard-column {
    width: calc(33.333% - 1rem); /* Ajuste la largeur pour 3 colonnes par ligne */
    display: flex;
    flex-direction: column; /* Les widgets s'empilent verticalement */
}

.card-widget {
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-widget:active {
    cursor: grabbing; /* Indique visuellement que le widget est en train d'être déplacé */
}

.card-widget:active h5.card-title.ui-sortable-handle {
    cursor: grabbing;
}

.card.card-widget h5.card-title i {
    margin-right: 0.5rem;  /* Espace entre l'icône et le texte */
    font-size: 1.2rem;  /* Taille des icônes */
    vertical-align: middle;  /* Aligner les icônes avec le texte */
}