/* ========================================
   BUNQR - Badges
   ======================================== */

/* Badge restriction médicale */
.medical-restrictions-badge-true {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--bunqr-spacing-xs) var(--bunqr-spacing-sm);
    background-color: var(--bunqr-bleu-brume);
    color: var(--bunqr-noir);
    border-radius: var(--bunqr-border-radius-sm);
    font-size: 10px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    height: 24px;
}

.medical-restrictions-badge-true-sm {
    background-color: var(--bunqr-bleu-brume) !important;
    color: var(--bunqr-noir) !important;
    font-weight: 700;
    font-size: 10px;
}

/* Badge autorisation */
.autorisation-badge-true {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--bunqr-spacing-xs) var(--bunqr-spacing-sm);
    background-color: var(--bunqr-bleu-brume);
    color: var(--bunqr-noir);
    border-radius: var(--bunqr-border-radius-sm);
    font-size: var(--bunqr-font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.autorisation-badge-true-sm {
    background-color: var(--bunqr-bleu-brume) !important;
    color: var(--bunqr-noir) !important;
    font-weight: 700;
    font-size: 11px;
}

/* Badge filtre générique */
.filter-badge {
    background-color: var(--bunqr-sable) !important;
    color: var(--bunqr-noir) !important;
    border: none !important;
    font-size: var(--bunqr-font-size-sm);
    font-weight: 500;
    border-radius: var(--bunqr-border-radius-sm) !important;
}

.filter-badge:hover {
    background-color: var(--bunqr-ocre) !important;
}

/* Badge de formation dans la liste des collaborateurs : la couleur porte la validité, puisque le
   filtre ne masque plus les formations échues (décision PO 2026-09-05). Valeurs alignées sur les
   pills de la fiche collaborateur V2 (tokens --fc-* de ConsultDetailsV2.razor.css) pour que les
   deux écrans racontent la même chose. L'état vient de TrainingDiplomaState, jamais d'un calcul
   de date côté UI. */
.filter-badge--valid {
    background-color: #E8F2EC !important;
    color: #0D7A3E !important;
    box-shadow: inset 0 0 0 1px #BFDBC9;
}

.filter-badge--expiring {
    background-color: #FFF1DC !important;
    color: #7A4F1F !important;
    box-shadow: inset 0 0 0 1px #EADFC9;
}

.filter-badge--expired {
    background-color: #FDECEC !important;
    color: #7B1A24 !important;
    box-shadow: inset 0 0 0 1px #F5C7C9;
}

/* L'ocre du hover générique effacerait le code couleur. */
.filter-badge--valid:hover { background-color: #DCEBE2 !important; }
.filter-badge--expiring:hover { background-color: #FBE6C9 !important; }
.filter-badge--expired:hover { background-color: #F9DEDE !important; }

/* Badge initiale accueil */
.badge-initiale-accueil {
    background-color: var(--bunqr-ocre) !important;
    color: var(--bunqr-blanc) !important;
    font-weight: 700;
}

/* Tag rôles */
.role-badge-admin {
    background-color: var(--bunqr-vert);
    color: var(--bunqr-blanc);
    padding: 4px 12px;
    border-radius: var(--bunqr-border-radius-sm);
    font-size: var(--bunqr-font-size-sm);
    font-weight: 600;
}

.role-badge-collab {
    background-color: var(--bunqr-bleu-brume);
    color: var(--bunqr-noir);
    padding: 4px 12px;
    border-radius: var(--bunqr-border-radius-sm);
    font-size: var(--bunqr-font-size-sm);
    font-weight: 600;
}

.role-badge-manager {
    background-color: var(--bunqr-corail);
    color: var(--bunqr-noir);
    padding: 4px 12px;
    border-radius: var(--bunqr-border-radius-sm);
    font-size: var(--bunqr-font-size-sm);
    font-weight: 600;
}


.bunqr-badge {
    font-size: 12px;
    width:80px;
    height: auto;
    padding: 0 2px 0 2px;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
}

.bunqr-badge.scheduled {
    background-color: #D1E7DD;
    border: solid 1px #198754;
    color: #198754;
}

.bunqr-badge.initialised {    
    background-color:#F1E3D3;
    border: solid 1px #AC7436;
    color: #AC7436;
}
.bunqr-badge.global{
     background-color: #FDC5B4;
     border: solid 1px #CD3600;
     color: #CA4626;
 }

.bunqr-badge.required{
    color: #475c73;
    background: #c7e2ff;
    border: solid 1px #475c73;
 }

/* Bouton d'action au gabarit d'un badge (ex. « Confirmer » de la TodoList) : même style que les
   boutons d'action rapide de la gestion des accès (MudButton Outlined/Small, cf. « Périmètres »),
   resserré à la hauteur de .bunqr-badge pour ne pas alourdir la ligne du tableau. */
.bunqr-badge-button.mud-button-root {
    min-width: 80px;
    height: 22px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 1;
    text-transform: none;
}

.bunqr-badge-button .mud-button-icon-start {
    margin-inline-start: -2px;
    margin-inline-end: 4px;
}

.bunqr-badge-button .mud-button-icon-start .mud-icon-root {
    font-size: 14px;
}

/* Flèche du bouton « Présence » (#3006) : resserrée au gabarit du badge. */
.bunqr-badge-button .mud-button-icon-end {
    margin-inline-start: 2px;
    margin-inline-end: -4px;
}

.bunqr-badge-button .mud-button-icon-end .mud-icon-root {
    font-size: 16px;
}

/* Choix du menu « Présence » (#3006) : une pastille de couleur, pas une icône. Le menu vit dans un
   popover MudBlazor, hors de portée du CSS scopé — d'où cette feuille globale. */
.attendance-choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.attendance-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.attendance-dot.present {
    background: var(--mud-palette-success);
}

.attendance-dot.absent {
    background: var(--mud-palette-error);
}

/* Badge cliquable (ex. « Requise » → ouvre le dépôt de document) */
.bunqr-badge.clickable{
    cursor: pointer;
    transition: filter .12s ease, box-shadow .12s ease;
}
.bunqr-badge.clickable:hover{
    filter: brightness(0.96);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.bunqr-badge.clickable:focus-visible{
    outline: 2px solid #475c73;
    outline-offset: 1px;
}

.bunqr-badge.construction-site {
    background-color: #D5DEDD;
    border: solid 1px #48616E;
    color: #49626C;
}