/* ═══════════════════════════════════════════
   ToothVibe — Styles personnalisés
   ═══════════════════════════════════════════ */

/* ── Palette ToothVibe ── */
:root {
    /* Gradient navbar / login */
    --tv-gradient: linear-gradient(135deg, #0C447C 0%, #0F6E56 100%);
    --tv-blue-deep:    #0C447C;
    --tv-emerald-deep: #0F6E56;

    /* Accents */
    --tv-primary:       #1D9E75;  /* émeraude */
    --tv-primary-dark:  #085041;
    --tv-primary-light: #E1F5EE;
    --tv-secondary:     #185FA5;  /* bleu */
    --tv-secondary-light: #E6F1FB;

    /* Couleurs praticiens */
    --color-titulaire:       #185FA5;
    --color-collaboratrice:  #6a1b9a;
    --color-remplacants:     #1D9E75;
    --color-remplacant:      #1D9E75;
}

/* ── Navbar ToothVibe ── */
.navbar-tv {
    background: var(--tv-gradient) !important;
    border: none;
    padding: 0 1.5rem;
    min-height: 78px;
}
.navbar-tv .navbar-brand {
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
}
.navbar-tv .navbar-brand img {
    height: 42px;
    width: auto;
}
.navbar-tv .nav-link {
    font-size: 0.875rem;
    padding: 0.4rem 0.7rem !important;
    border-radius: 20px;
    transition: background 0.2s;
    color: rgba(255,255,255,0.7) !important;
}
.navbar-tv .nav-link:hover {
    background: rgba(255,255,255,0.1);
    color: white !important;
}
.navbar-tv .nav-link.active {
    font-weight: 600;
    background: rgba(255,255,255,0.2);
    color: white !important;
}
.navbar-tv .navbar-toggler {
    border-color: rgba(255,255,255,0.3);
}
/* Avatar initiales */
.avatar-initials {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    font-weight: 600;
}

/* Cards hover effect */
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease;
}
.card-hover { transition: all 0.2s ease; }

/* Tables */
.table th { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.3px; }
.table td { vertical-align: middle; }

/* Forms */
.form-control-sm, .form-select-sm { font-size: 0.85rem; }

/* Badges */
.badge { font-weight: 500; }

/* Flash messages */
.alert { border-radius: 0.5rem; }

/* Dashboard KPI cards */
.card .fs-4 { font-family: 'Segoe UI', system-ui, sans-serif; }

/* ── Dashboard ToothVibe ── */
.kpi-card {
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    border-left: 4px solid var(--tv-secondary);
    transition: transform 0.15s, box-shadow 0.15s;
}
.kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.kpi-card.kpi-blue    { border-left-color: var(--tv-secondary); }
.kpi-card.kpi-red     { border-left-color: #E24B4A; }
.kpi-card.kpi-green   { border-left-color: var(--tv-primary); }
.kpi-card.kpi-orange  { border-left-color: #EF9F27; }

/* Quick access icons */
.quick-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.quick-icon-green  { background: var(--tv-primary-light); }
.quick-icon-blue   { background: var(--tv-secondary-light); }
.quick-icon-orange { background: #FAEEDA; }

/* Footer */
footer { font-size: 0.8rem; }

/* Section collapse animation */
.collapse { transition: height 0.2s ease; }

/* ── Couleurs utilitaires praticiens ── */
.text-titulaire       { color: var(--color-titulaire) !important; }
.text-collaboratrice  { color: var(--color-collaboratrice) !important; }
.text-remplacants,
.text-remplacant      { color: var(--color-remplacants) !important; }

.bg-titulaire         { background-color: var(--color-titulaire) !important; }
.bg-collaboratrice    { background-color: var(--color-collaboratrice) !important; }
.bg-remplacants,
.bg-remplacant        { background-color: var(--color-remplacants) !important; }

/* ── Boutons praticiens ── */
.btn-titulaire        { background-color: var(--color-titulaire); border-color: var(--color-titulaire); color: #fff; }
.btn-titulaire:hover  { background-color: var(--tv-blue-deep); color: #fff; }
.btn-collaboratrice        { background-color: var(--color-collaboratrice); border-color: var(--color-collaboratrice); color: #fff; }
.btn-collaboratrice:hover  { background-color: #4a148c; color: #fff; }
.btn-remplacants        { background-color: var(--color-remplacants); border-color: var(--color-remplacants); color: #fff; }
.btn-remplacants:hover  { background-color: var(--tv-primary-dark); color: #fff; }

.btn-xs { padding: 0.15rem 0.4rem; font-size: 0.78rem; border-radius: 4px; }

/* ── Dashboard encaissements ── */
.stat-label  { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; color: #6c757d; }
.stat-value  { font-size: 1.45rem; font-weight: 700; line-height: 1.2; }
.enc-dashboard-listing-btn { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* ══════════════════════════════════════════════════
   ENCAISSEMENTS — ENC_REFONTE_V1 (inc. A)
   Remplace l'ancien « tableau inline style Excel ».
   D7 : UNE couleur par mode de règlement. L'état d'un
   tiers payant n'est donc PAS porté par la couleur du
   mode, mais par le liseré de ligne et la jauge.
══════════════════════════════════════════════════ */

:root {
    /* Les 5 modes — une teinte chacun */
    --enc-cb-ink:   #185FA5;  --enc-cb-bg:   #E6F1FB;  --enc-cb-br:   #C3DAF1;
    --enc-chq-ink:  #6A1B9A;  --enc-chq-bg:  #F4E7F7;  --enc-chq-br:  #E0C6E8;
    --enc-esp-ink:  #0F6E56;  --enc-esp-bg:  #E1F5EE;  --enc-esp-br:  #BCE4D6;
    --enc-vir-ink:  #41556B;  --enc-vir-bg:  #E9EDF2;  --enc-vir-br:  #CBD5E0;
    --enc-tp-ink:   #9C5D00;  --enc-tp-bg:   #FDF1DD;  --enc-tp-br:   #F0D5A3;

    /* Sémantique d'état — distincte des 5 modes */
    --enc-wait:   #E09A21;
    --enc-late:   #D64542;
    --enc-late-ink: #A32A29;
    --enc-late-bg:  #FBE6E5;

    --enc-rule:      #E3E8EF;
    --enc-rule-soft: #EEF2F7;
    --enc-surface-2: #F7F9FC;
    --enc-muted:     #6B7C8F;
}

.enc-table { font-size: 0.88rem; }
.enc-table thead th {
    position: sticky; top: 0; z-index: 10;
    background: var(--enc-surface-2);
    font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--enc-muted);
    border-bottom: 1px solid var(--enc-rule);
    padding: 5px 8px; white-space: nowrap;
}
.enc-table tbody td {
    padding: 1px 8px; vertical-align: middle;
    border-bottom: 1px solid var(--enc-rule-soft);
    font-variant-numeric: tabular-nums;
}

/* ── Champs de saisie : plus de « case Excel » ── */
.enc-input {
    width: 100%; min-height: 28px;
    padding: 3px 7px; font-size: 0.84rem;
    color: #17232F; background: transparent;
    border: 1px solid transparent; border-radius: 6px;
    transition: background 0.12s, border-color 0.12s;
}
.enc-input:hover:not(:focus) { background: #F2F6FB; border-color: var(--enc-rule); }
.enc-input:focus {
    outline: none; background: #fff;
    border-color: var(--enc-cb-ink);
    box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.14);
}
select.enc-input { cursor: pointer; }
.enc-input-mini { width: auto; min-height: 30px; font-size: 0.8rem;
                  background: #fff; border-color: var(--enc-rule); }
.enc-montant { font-weight: 700; font-size: 0.88rem; }
.enc-montant-ro {
    display: inline-block; font-weight: 700; font-size: 0.88rem;
    padding: 2px 7px; color: #17232F; cursor: default;
    border-bottom: 1px dotted var(--enc-muted);
}
.enc-patient { font-weight: 600; }

/* Reste dû, sous le montant */
.enc-reste {
    display: block; font-size: 0.63rem; font-weight: 700;
    letter-spacing: 0.02em; color: var(--enc-tp-ink);
    padding-right: 8px; margin-top: -3px; line-height: 1.15;
}
.enc-reste.is-late { color: var(--enc-late-ink); }
/* Trop-percu : la somme des versements depasse le montant attendu. */
.enc-reste.is-excess { color: var(--enc-late-ink); font-weight: 800; }
.tp-reste.is-excess { color: var(--enc-late-ink); }
tr.data-row.st-excedent td { background: rgba(214, 69, 66, .055); }
tr.data-row.st-excedent td:first-child { box-shadow: inset 3px 0 0 var(--enc-late); }
tr.data-row.st-excedent:hover td { background: rgba(214, 69, 66, .1); }

/* ── Pastilles de mode : une couleur chacune (D7) ── */
.mode-cell { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.72rem; font-weight: 700; white-space: nowrap;
    border: 1px solid; border-radius: 999px; padding: 1px 9px;
    line-height: 1.35;
}
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip-amt { font-weight: 600; opacity: 0.85; }
.chip-sub { font-weight: 500; opacity: 0.82; font-size: 0.72rem; }
.chip.c-cb       { color: var(--enc-cb-ink);  background: var(--enc-cb-bg);  border-color: var(--enc-cb-br); }
.chip.c-cheque   { color: var(--enc-chq-ink); background: var(--enc-chq-bg); border-color: var(--enc-chq-br); }
.chip.c-especes  { color: var(--enc-esp-ink); background: var(--enc-esp-bg); border-color: var(--enc-esp-br); }
.chip.c-virement { color: var(--enc-vir-ink); background: var(--enc-vir-bg); border-color: var(--enc-vir-br); }
.chip.c-tp       { color: var(--enc-tp-ink);  background: var(--enc-tp-bg);  border-color: var(--enc-tp-br); }
.chip-legacy {
    font-size: 0.68rem; font-style: italic; color: var(--enc-muted);
    border: 1px dashed var(--enc-rule); border-radius: 999px; padding: 2px 8px;
}

/* ── ENC_MODE_20260921 : changer le mode d'une ligne enregistrée ──
   Le bouton reste effacé jusqu'au survol de la ligne, comme la corbeille :
   c'est une correction, pas une action de tous les jours. `opacity` et non
   `display`, pour qu'il reste atteignable au clavier (voir :focus-visible). */
.btn-mode-edit {
    font-size: 0.7rem; font-weight: 700; cursor: pointer;
    border: 1px dashed var(--enc-rule); background: #fff;
    color: var(--enc-muted); border-radius: 6px; padding: 0 7px;
    line-height: 1.5; opacity: 0; transition: opacity 0.15s;
}
tr:hover .btn-mode-edit { opacity: 1; }
/* Sans souris (tablette), il n'y a pas de survol : le bouton doit rester là. */
@media (hover: none) { .btn-mode-edit { opacity: 1; } }
.btn-mode-edit:hover { color: #17232F; border-color: var(--enc-muted); border-style: solid; }
.btn-mode-edit:focus-visible {
    opacity: 1; outline: 2px solid var(--enc-cb-ink); outline-offset: 2px;
}
.btn-mode-edit[aria-expanded="true"] { opacity: 1; border-style: solid; color: #17232F; }

/* Le sélecteur déplacé dans la ligne : il prend toute la largeur de la
   cellule pour ne pas bousculer les pastilles qu'il vient compléter. */
.mode-pick-inline {
    flex-basis: 100%; align-items: center; gap: 4px;
    margin-top: 6px; padding-top: 6px;
    border-top: 1px dashed var(--enc-rule);
}
.mode-pick-inline { gap: 3px; }
.mode-pick-inline .mode-btn { min-height: 24px; font-size: 0.71rem; padding: 0 8px; }
.mode-pick-inline .mode-btn[disabled] { cursor: default; }
.btn-mode-cancel {
    font-size: 0.72rem; font-weight: 700; cursor: pointer; margin-left: 4px;
    border: none; background: none; color: var(--enc-muted); text-decoration: underline;
}
.btn-mode-cancel:hover { color: #17232F; }

/* Une pastille remise à zéro est masquée par le script : `display:inline-flex`
   l'emporterait sur le `display:none` de l'attribut `hidden` sans cette règle. */
.chip[hidden], .mt-attente[hidden] { display: none; }

/* ── Jauge d'avancement du tiers payant ── */
.gauge { width: 76px; height: 6px; border-radius: 99px; background: var(--enc-rule); overflow: hidden; flex: none; }
.gauge i { display: block; height: 100%; border-radius: 99px; background: var(--enc-tp-ink); transition: width 0.25s; }
.gauge.is-full i { background: var(--enc-esp-ink); }
.gauge.is-late i { background: var(--enc-late); }
.gauge-num { font-size: 0.74rem; font-weight: 700; color: #3D4D5E; white-space: nowrap; }
.gauge-num .of { font-weight: 500; color: var(--enc-muted); }

.btn-disclose {
    font-size: 0.72rem; font-weight: 700; cursor: pointer;
    border: 1px solid var(--enc-rule); background: #fff;
    color: var(--enc-muted); border-radius: 6px; padding: 0 7px;
    line-height: 1.5;
}
.btn-disclose:hover { color: #17232F; border-color: var(--enc-muted); }
.btn-disclose:focus-visible { outline: 2px solid var(--enc-tp-ink); outline-offset: 2px; }

/* ── État de la ligne : liseré à gauche ── */
tr.data-row.st-attente td:first-child { box-shadow: inset 3px 0 0 var(--enc-wait); }
tr.data-row.st-retard  td { background: rgba(214, 69, 66, 0.055); }
tr.data-row.st-retard  td:first-child { box-shadow: inset 3px 0 0 var(--enc-late); }
tr.data-row:hover td { background: #F5F9FE; }
tr.data-row.st-retard:hover td { background: rgba(214, 69, 66, 0.1); }
tr.data-row.saving { opacity: 0.55; }
tr.data-row.saved td:first-child { box-shadow: inset 3px 0 0 var(--enc-esp-ink); }
tr.data-row.just-added td { animation: encFlash 2s ease-out; }
@keyframes encFlash { from { background: #DCF3E8; } to { background: transparent; } }

/* ── Panneau tiers payant ── */
.tp-detail-row > td { padding: 0 !important; background: #F0F4F9; }
.tp-detail-row > td { box-shadow: inset 3px 0 0 var(--enc-wait); }
.tp-panel { display: grid; grid-template-columns: 1fr 1fr; }
.tp-part { padding: 13px 16px; }
.tp-part + .tp-part { border-left: 1px solid var(--enc-rule); }
.tp-part h4 {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; margin: 0 0 3px;
}
.tp-part.tp-secu h4     { color: #8A6A2F; }
.tp-part.tp-mutuelle h4 { color: #A8752B; }
.tp-state { font-size: 0.82rem; font-weight: 700; margin-bottom: 9px; color: var(--enc-tp-ink); }

.vers-list { list-style: none; margin: 0 0 9px; padding: 0; display: grid; gap: 4px; }
.vers-list li {
    display: flex; align-items: center; gap: 9px; font-size: 0.82rem;
    background: #fff; border: 1px solid var(--enc-rule);
    border-radius: 6px; padding: 5px 10px;
}
.v-amt { font-weight: 700; min-width: 74px; text-align: right; font-variant-numeric: tabular-nums; }
.v-date { color: var(--enc-muted); font-size: 0.78rem; }
.v-del {
    margin-left: auto; border: none; background: none; cursor: pointer;
    color: var(--enc-muted); opacity: 0.45; font-size: 0.8rem; padding: 0 2px;
}
.v-del:hover { opacity: 1; color: var(--enc-late-ink); }
.v-del:focus-visible { outline: 2px solid var(--enc-late); outline-offset: 2px; opacity: 1; }
.vers-empty { font-size: 0.8rem; color: var(--enc-muted); font-style: italic; padding: 2px 0 9px; }

.vers-add { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vers-add .v-in-amt  { width: 88px; text-align: right; }
.vers-add .v-in-date { width: 140px; }
.btn-vers-add {
    font-size: 0.75rem; font-weight: 700; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--enc-tp-br); background: var(--enc-tp-bg);
    color: var(--enc-tp-ink); border-radius: 6px; padding: 6px 11px;
}
.btn-vers-add:hover { filter: brightness(0.97); }
.btn-vers-add:focus-visible { outline: 2px solid var(--enc-tp-ink); outline-offset: 2px; }
.btn-vers-add[disabled] { opacity: 0.5; cursor: wait; }

.tp-foot {
    grid-column: 1 / -1; border-top: 1px solid var(--enc-rule);
    padding: 9px 16px; display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; font-size: 0.82rem; color: #3D4D5E;
    background: var(--enc-surface-2);
}
.tp-foot b { font-variant-numeric: tabular-nums; }
.tp-reste { font-weight: 700; color: var(--enc-tp-ink); }
.tp-age { margin-left: auto; font-size: 0.78rem; color: var(--enc-muted); }
.tp-age.is-late { font-weight: 700; color: var(--enc-late-ink); }

/* ── En-tête de mois ── */
tr.mois-header-row td {
    background: var(--enc-surface-2);
    border-top: 1px solid var(--enc-rule); border-bottom: 1px solid var(--enc-rule);
    padding: 3px 10px !important; font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: #3D4D5E;
}

.mois-sans-ligne { font-weight: 500; font-style: italic; text-transform: none;
                   letter-spacing: 0; color: var(--enc-muted); margin-left: 8px;
                   font-size: .72rem; }

/* ── Encart de total mensuel (D10) ── */
tr.total-mois-row td {
    background: var(--enc-surface-2);
    border-top: 1px solid var(--enc-rule); border-bottom: 2px solid var(--enc-rule);
    padding: 11px 10px !important;
}
.mt-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt-lab { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em;
          text-transform: uppercase; color: var(--enc-muted); }
.mt-sum { font-size: 1.1rem; font-weight: 700; color: var(--enc-esp-ink); }
.mt-sum-lab { font-size: 0.78rem; color: var(--enc-muted); margin-left: -4px; }
.mt-retro {
    font-size: 0.78rem; font-weight: 700; color: var(--enc-chq-ink);
    background: var(--enc-chq-bg); border: 1px solid var(--enc-chq-br);
    border-radius: 999px; padding: 3px 10px;
}
/* ENC_TP_MOIS_20260928 — TP en retard : même rouge que les lignes en retard. */
.mt-attente {
    font-size: 0.78rem; font-weight: 700; color: var(--enc-late-ink);
    background: var(--enc-late-bg); border: 1px solid var(--enc-late);
    border-radius: 999px; padding: 3px 10px;
}
.mt-break { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

/* ── Ligne de saisie ── */
tr.enc-new-row td {
    background: #F1FBF6; border-bottom: 2px solid var(--enc-esp-ink);
    padding: 10px !important; vertical-align: top;
}
.enc-new-lab {
    display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--enc-esp-ink); margin-bottom: 5px;
    /* Hauteur FIGEE et pas de retour a la ligne : sans cela « Nouveau règlement »
       occupe deux lignes dans l'etroite colonne Date et decale son champ de 16 px
       par rapport a tous les autres. Le texte deborde sur la cellule voisine,
       dont le libelle est vide : invisible a l'oeil. */
    height: 16px; line-height: 16px; white-space: nowrap;
}
tr.enc-new-row .enc-input { background: #fff; border-color: var(--enc-rule); }
.enc-btn-add { font-weight: 700; white-space: nowrap; min-height: 28px; }
.mode-extra { margin-top: 7px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.enc-mini-lab { font-size: 0.68rem; font-weight: 700; color: var(--enc-muted);
                text-transform: uppercase; letter-spacing: 0.05em; }
.enc-hint { font-size: 0.72rem; color: var(--enc-muted); font-style: italic; }

/* Sélecteur de mode */
.mode-pick { display: flex; gap: 5px; flex-wrap: wrap; }
.mode-btn {
    font-size: 0.755rem; font-weight: 700; cursor: pointer;
    border: 1px dashed var(--enc-rule); background: transparent;
    color: var(--enc-muted); border-radius: 999px; padding: 0 12px;
    min-height: 28px;                 /* meme hauteur que les champs de saisie */
    transition: all 0.12s;
}
.mode-btn:hover { border-style: solid; color: #17232F; }
.mode-btn:focus-visible { outline: 2px solid var(--enc-esp-ink); outline-offset: 2px; }
.mode-btn[aria-pressed="true"] { border-style: solid; }
.mode-btn[aria-pressed="true"].m-cb       { color: var(--enc-cb-ink);  background: var(--enc-cb-bg);  border-color: var(--enc-cb-br); }
.mode-btn[aria-pressed="true"].m-cheque   { color: var(--enc-chq-ink); background: var(--enc-chq-bg); border-color: var(--enc-chq-br); }
.mode-btn[aria-pressed="true"].m-especes  { color: var(--enc-esp-ink); background: var(--enc-esp-bg); border-color: var(--enc-esp-br); }
.mode-btn[aria-pressed="true"].m-virement { color: var(--enc-vir-ink); background: var(--enc-vir-bg); border-color: var(--enc-vir-br); }
.mode-btn[aria-pressed="true"].m-tp       { color: var(--enc-tp-ink);  background: var(--enc-tp-bg);  border-color: var(--enc-tp-br); }

/* ── Supprimer ── */
.btn-delete { background: none; border: none; padding: 0; cursor: pointer; line-height: 1;
              opacity: 0.25; transition: opacity 0.15s; }
tr:hover .btn-delete { opacity: 1; }
.btn-delete:focus-visible { outline: 2px solid var(--enc-late); outline-offset: 2px; opacity: 1; }

/* ── Légende ── */
.enc-legend {
    display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
    margin-top: 10px; padding: 9px 12px;
    background: var(--enc-surface-2); border: 1px solid var(--enc-rule-soft);
    border-radius: 8px; font-size: 0.76rem; color: #3D4D5E;
}
.legend-ttl { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em;
              text-transform: uppercase; color: var(--enc-muted); }
.legend-k { display: inline-flex; align-items: center; gap: 6px; }
.legend-bar { width: 4px; height: 15px; border-radius: 2px; flex: none; }
.lb-wait { background: var(--enc-wait); }
.lb-late { background: var(--enc-late); }
.lb-none { background: var(--enc-rule); }

/* Écran étroit : le panneau tiers payant passe sur une colonne */
@media (max-width: 900px) {
    .tp-panel { grid-template-columns: 1fr; }
    .tp-part + .tp-part { border-left: 0; border-top: 1px solid var(--enc-rule); }
    .mt-break { margin-left: 0; }
    .tp-age { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .enc-input, .gauge i, .mode-btn, .btn-delete { transition: none !important; }
    tr.data-row.just-added td { animation: none; }
}

/* ── Indicateur de sauvegarde ── */
#saveIndicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 20px;
    display: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .container-fluid { padding-left: 1rem; padding-right: 1rem; }
    .navbar .nav-link { padding: 0.5rem 0.6rem !important; font-size: 0.9rem; }
    .stat-value { font-size: 1.1rem; }
}

/* ══════════════════════════════════════════════════
   IMPORT RELEVÉS — Styles
══════════════════════════════════════════════════ */

/* Tableau relevé */
.table-releve { font-size: 0.85rem; }
.table-releve th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.3px; }
.table-releve td { vertical-align: middle; padding: 0.3rem 0.5rem; }

/* Ligne non attribuée */
.ligne-row.row-non-attribuee { background: #fff8e1 !important; }
.ligne-row.row-non-attribuee:hover { background: #fff3cd !important; }

/* Select catégorie compact */
.select-categorie {
    font-size: 0.8rem;
    padding: 0.15rem 1.5rem 0.15rem 0.4rem;
    height: auto;
    border-color: #dee2e6;
}
.row-non-attribuee .select-categorie { border-color: #ffc107; background-color: #fffde7; }

/* Libellé cell */
.libelle-cell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Date input releve */
.input-date-releve { background: transparent; }

/* Upload justificatif btn */
.btn-upload-justif { cursor: pointer; }
.btn-upload-justif:hover { border-color: #0d6efd; color: #0d6efd; }

/* ══════════════════════════════════════════════════
   COMPTABILITÉ — Styles
══════════════════════════════════════════════════ */

.table-compta { font-size: 0.82rem; }
.table-compta th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.3px; }
.table-compta td { vertical-align: middle; padding: 0.25rem 0.4rem; }

/* Section row */
.section-row { background: #e3f2fd !important; }
.section-row td { padding: 0.4rem 0.5rem; font-size: 0.85rem; }

/* Category row */
.cat-row:hover { background: #f5f5f5 !important; }

/* Section total */
.section-total-row { background: #f0f0f0 !important; border-top: 2px solid #bbb; }
.section-total-row td { padding-top: 0.35rem; padding-bottom: 0.35rem; }

/* Grand total */
.grand-total-row { background: var(--tv-blue-deep, #0C447C) !important; color: #fff !important; }
.grand-total-row td { padding: 0.5rem 0.4rem; font-size: 0.85rem; }

/* Badge small */
.badge-sm { font-size: 0.65rem; padding: 0.15rem 0.35rem; vertical-align: middle; }

/* Purple text for cab2 */
.text-purple { color: #6a1b9a !important; }

/* Annual table columns */
.table-annuelle .col-cat { min-width: 200px; max-width: 250px; }
.table-annuelle .col-mois { min-width: 60px; }
.table-annuelle .col-total { min-width: 75px; }
.table-annuelle .col-dispatch { min-width: 70px; }
.cat-name-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

/* Sticky left column for annual table */
.sticky-left { position: sticky; left: 0; background: inherit; z-index: 1; }
.section-row .sticky-left { background: #e3f2fd; }
.section-total-row .sticky-left { background: #f0f0f0; }
.grand-total-row .sticky-left { background: var(--tv-blue-deep, #0C447C); }
thead .sticky-left { z-index: 2; }

/* ══════════════════════════════════════════════════
   ANALYSE — Styles
══════════════════════════════════════════════════ */

.table-analyse { font-size: 0.8rem; }
.table-analyse th { font-size: 0.72rem; text-transform: uppercase; }
.table-analyse td { padding: 0.2rem 0.4rem; }

/* ══════════════════════════════════════════════════
   PRESENTATION_V2 — bandeaux compacts & encarts cliquables
══════════════════════════════════════════════════ */

/* ── Bandeau d'information compact ──
   Style de référence : « Pointage à réconcilier » et « Congés » du tableau de
   bord. Une seule ligne, un liseré de couleur à gauche, des badges cliquables.
   Le détail chiffré, quand il y en a, se déplie en dessous. */
.tv-strip {
    border: 1px solid #e9ecef;
    border-left: 4px solid #6c757d;
    border-radius: 0.5rem;
}
.tv-strip > .card-body {
    /* TB_HAUTEUR_20260918 : +10 % de hauteur (demande Vivien, 18/09/2026).
       Le bandeau d'une ligne passe de 37 à 41 px : seul l'espacement vertical
       augmente (8 -> 10 px de chaque côté), la typographie ne bouge pas. */
    padding: 0.625rem 0.9rem;
    font-size: 0.875rem;
}
.tv-strip-label { font-weight: 600; }

/* TB_DIRECTION_20260918 — discipline des couleurs, premier pas.
   Les neuf couleurs de bandeau passent par des variables : un seul endroit
   à retoucher ensuite. Une seule teinte change, et pour une bonne raison :
   « teal » et « green » étaient DEUX VERTS quasi identiques (#1D9E75 et
   #198754) portant des sens différents — impossible à distinguer d'un coup
   d'œil. « teal » devient l'émeraude PROFONDE de la marque.
   Les sept autres ne bougent pas : chaque bandeau contient des pastilles
   Bootstrap (bg-danger, bg-warning…) et des icônes (text-info, text-success)
   dans ces mêmes teintes ; déplacer le liseré sans elles créerait un
   désaccord visible à l'intérieur du bandeau. */
:root {
    --tv-strip-blue:   #185FA5;   /* = --tv-secondary */
    --tv-strip-green:  #198754;
    --tv-strip-teal:   #0F6E56;   /* = --tv-emerald-deep */
    --tv-strip-orange: #fd7e14;
    --tv-strip-yellow: #ffc107;
    --tv-strip-red:    #dc3545;
    --tv-strip-cyan:   #0dcaf0;
    --tv-strip-purple: #6f42c1;
    --tv-strip-grey:   #6c757d;
}
.tv-strip-blue   { border-left-color: var(--tv-strip-blue); }
.tv-strip-green  { border-left-color: var(--tv-strip-green); }
.tv-strip-teal   { border-left-color: var(--tv-strip-teal); }
.tv-strip-orange { border-left-color: var(--tv-strip-orange); }
.tv-strip-yellow { border-left-color: var(--tv-strip-yellow); }
.tv-strip-red    { border-left-color: var(--tv-strip-red); }
.tv-strip-cyan   { border-left-color: var(--tv-strip-cyan); }
.tv-strip-purple { border-left-color: var(--tv-strip-purple); }
.tv-strip-grey   { border-left-color: var(--tv-strip-grey); }

/* Bandeau dépliable : le chevron pivote à l'ouverture. */
.tv-strip-toggle { text-decoration: none; color: inherit; cursor: pointer; }
.tv-strip-toggle:hover { color: inherit; }
.tv-strip-toggle .tv-chevron { transition: transform 0.15s; }
.tv-strip-toggle[aria-expanded="true"] .tv-chevron { transform: rotate(180deg); }

/* Zone de détail dépliée sous un bandeau. */
.tv-strip-detail {
    border-top: 1px solid #f1f3f5;
    padding: 0.6rem 0.9rem 0.2rem;
}

/* ── Encart entièrement cliquable (remplace les boutons « Accéder ») ── */
a.tv-card-link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
a.tv-card-link:hover .kpi-card,
a.tv-card-link:focus-visible .kpi-card {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}
a.tv-card-link:focus-visible .kpi-card {
    outline: 2px solid var(--tv-primary);
    outline-offset: 2px;
}
a.tv-card-link .tv-card-go {
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s;
}
a.tv-card-link:hover .tv-card-go { opacity: 1; transform: translateX(2px); }

/* Empêche un libellé long de faire déborder un conteneur flex. */
.min-width-0 { min-width: 0; }
.min-width-0 > * { overflow: hidden; text-overflow: ellipsis; }

/* ── Filtres en menus déroulants (listes Communication) ── */
.tv-filter-menu { max-height: 320px; overflow-y: auto; min-width: 240px; }
.tv-filter-menu .form-check { margin-bottom: 0; }
.tv-filter-menu .form-check-label { cursor: pointer; }

/* ═══ TP_DASH_20260918 — tableau de bord ═══════════════════════════ */

/* ═══ TB_ALIGN_20260918 — TOUS LES BANDEAUX À LA MÊME HAUTEUR ═══════
   Un bandeau dont le contenu est en ligne prend la hauteur de ligne du
   bandeau (21 px) : il mesure donc 10 + 21 + 10 = 41 px. Ceux dont le
   contenu est en `d-flex` (notifications, pointage, compteurs) suivaient
   leur enfant le plus haut — bouton, encadré ou badge bordé — et
   dépassaient de 1 à 10 px : les colonnes ne s'alignaient plus.
   On ramène ces trois éléments à 21 px, et `min-height` tient le reste. */
.tv-strip > .card-body {
    /* Hauteur IDENTIQUE pour tous : la boîte de ligne d'un contenu en ligne
       n'est pas prévisible au pixel près (un badge de 20 px posé sur la ligne
       de base fabrique une ligne de 22 px). On centre donc le contenu dans une
       boîte flex de hauteur minimale fixe : 10 + 21 + 10 = 41 px. Le bandeau
       ne grandit plus que s'il passe à la ligne, ce qui reste voulu. */
    min-height: 41px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 0.3rem;
}
/* Un bandeau dépliable prend toute la largeur DISPONIBLE, sinon son chevron ne
   serait plus à droite.
   ⚠ TB_SALARIEE_20260918 — c'était `flex: 1 1 100%`, réglé sur le tableau de
   bord d'un ADMIN, où le dépliant est toujours seul dans son bandeau. Sur
   celui d'une SALARIÉE, « Mes compteurs » lui adjoint les boutons « Mes
   congés » et « Pointer » : la base 100 % les renvoyait à la ligne suivante
   (bandeau à 71 px au lieu de 41, boutons de travers). `auto` occupe la place
   restante et laisse les voisins sur la même ligne — et quand le dépliant est
   seul, il remplit toujours la largeur : l'affichage admin ne bouge pas. */
.tv-strip > .card-body > .tv-strip-toggle { flex: 1 1 auto; }
/* ⚠ Aplatir les boutons ne vaut QUE pour le « × » et la flèche des alertes :
   sans cela leurs 31 px feraient un bandeau de 51. La règle visait d'abord
   tous les `.btn-sm` d'un bandeau — elle écrasait donc aussi les vrais boutons
   d'action d'une salariée, réduits à 21 px sans aucune marge. Elle ne porte
   plus que sur les bandeaux de notification, reconnaissables à leur
   `data-notif-url` ; ailleurs un bouton garde sa taille et le bandeau grandit
   avec lui (`min-height` est un minimum, pas une hauteur fixe). */
.tv-strip[data-notif-url] > .card-body .btn-sm {
    --bs-btn-padding-y: 0;
    line-height: 19px;      /* + 2 px de bordure */
}
/* `vertical-align: middle` est indispensable : posé sur la ligne de base, un
   badge de 20 px fait une ligne de 22 px (la place du jambage sous la ligne
   s'ajoute) et le bandeau gagnait 1 px. */
.tv-strip > .card-body .badge {
    line-height: 1;
    vertical-align: middle;
    /* Un badge centré sur la ligne ne doit pas descendre plus bas que le
       jambage du texte, sinon la boîte de ligne gagne 1 px et le bandeau qui
       la contient aussi. À 14 px de texte, la limite est 19,1 px de haut :
       ce padding met le badge bordé à 18,8 px. */
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

/* Titre d'une colonne thematique du tableau de bord. */
.tv-col-titre {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: #8894A2; margin: 0 0 6px 2px;
}
.tv-col-titre .bi { opacity: 0.8; }


/* Encadré cliquable (pointage à réconcilier) : c'est la BOÎTE qui est le
   bouton, pas seulement le nom. */
.tvd-box {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid #E4C98A; background: #FFFDF6; border-radius: 8px;
    /* TB_ALIGN_20260918 : 19 px + 2 px de bordure = 21 px, la hauteur de ligne
       d'un bandeau — sans quoi cet encadré rendait le bandeau plus haut que
       les autres et la colonne cessait d'être alignée. */
    padding: 0 10px; line-height: 19px;
    color: #6A4E12; font-size: 0.82rem; font-weight: 600;
    transition: background 0.12s, box-shadow 0.12s, transform 0.12s;
}
.tvd-box:hover { background: #FDF3DC; box-shadow: 0 1px 4px rgba(0,0,0,.12); transform: translateY(-1px); color: #6A4E12; }
.tvd-box:focus-visible { outline: 2px solid #854F0B; outline-offset: 2px; }
.tvd-box-nom { font-weight: 700; }

/* Tiers payant en attente, sur le tableau de bord. */
.tpd-prat-head { cursor: pointer; }
.tpd-prat-head[aria-expanded="true"] .tv-chevron { transform: rotate(180deg); }
.tpd-ligne { border-top: 1px dashed #E7ECF2; }
.tpd-ligne:first-child { border-top: 0; }
.tpd-head {
    display: flex; align-items: baseline; gap: 8px; width: 100%;
    border: 0; background: none; text-align: left; cursor: pointer;
    padding: 4px 2px 4px 22px; font-size: 0.82rem; border-radius: 6px;
}
.tpd-head:hover { background: #F4F8FC; }
.tpd-head:focus-visible { outline: 2px solid var(--enc-tp-ink, #854F0B); outline-offset: -2px; }
.tpd-patient { font-weight: 600; color: #22303D; flex-grow: 1;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpd-date { color: #7A8794; font-size: 0.75rem; white-space: nowrap; }
.tpd-reste { font-weight: 700; color: #854F0B; white-space: nowrap;
             font-variant-numeric: tabular-nums; }
.tpd-reste.is-late { color: #B42318; }
.tpd-chevron { color: #9AA6B2; font-size: 0.7rem; transition: transform 0.15s; }
.tpd-head.is-open .tpd-chevron { transform: rotate(180deg); }
.tpd-panel { background: #F0F4F9; border-radius: 8px; margin: 2px 0 6px 22px;
             box-shadow: inset 3px 0 0 var(--enc-wait, #E4C98A); }
.tpd-ligne.is-solde .tpd-patient { text-decoration: line-through; opacity: 0.6; }
.tpd-ligne.is-solde .tpd-reste { color: #1D9E75; }
.tpd-ligne.is-excedent .tpd-reste { color: #B42318; }
/* Le panneau partagé tient sur une colonne dans cette largeur réduite. */
.tpd-panel .tp-panel { grid-template-columns: 1fr; }
.tpd-panel .tp-part + .tp-part { border-left: 0; border-top: 1px solid var(--enc-rule, #E7ECF2); }

/* ═══ TB_TYPO_20260918 — Shantell Sans, AUTO-HÉBERGÉE ═══
   Police variable (400 à 700) téléchargée depuis Google Fonts puis servie
   par le NAS : aucune requête vers Google depuis les postes du cabinet, et
   l'application reste correcte sans Internet.
   `font-display: swap` : le texte s'affiche tout de suite dans la police de
   secours, sans écran blanc, puis bascule. */
@font-face {
    font-family: 'Shantell Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/shantell-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Shantell Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/shantell-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════
   TB_DIRECTION_20260918 — DIRECTION GRAPHIQUE

   Trois décisions, prises en maquette puis sur une copie de l'application :

   1. FOND — le dégradé de la marque (bleu profond → émeraude, 135°) couvre
      toute la hauteur de l'ÉCRAN, assombri en haut, s'éclaircissant vers le
      bas jusqu'au fond de page. Vitesse « rapide » : clair aux deux tiers.
      La barre de navigation devient transparente et le dégradé passe
      derrière elle : navbar, titre et page ne font plus qu'un aplat.
      Le bandeau est FIXE : il ne défile pas avec le contenu.

   2. TYPOGRAPHIE — Shantell Sans partout, chiffres compris (choix Vivien).
      Auto-hébergée (voir @font-face ci-dessus).

   3. ⚠ CONSÉQUENCE À CONNAÎTRE — le bandeau étant fixe, un texte n'est
      lisible en blanc QUE s'il reste dans la zone sombre, c'est-à-dire en
      haut du document : l'en-tête de page. Tout le reste doit vivre dans une
      carte (fond blanc). D'où la classe `.tv-sur-bandeau`, à poser sur les
      en-têtes de page — et sur rien d'autre.
   ═══════════════════════════════════════════════════════════════ */

body {
    background: #EEF3F6;
    font-family: 'Shantell Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #16222B;
    min-height: 100vh;
    line-height: 1.5;
}

.tv-bandeau {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(4,20,38,.32) 0%, rgba(4,20,38,0) 22%,
                        rgba(238,243,246,0) 35%, rgba(238,243,246,.85) 58%, #EEF3F6 70%),
        linear-gradient(135deg, #0C447C 0%, #0F6E56 100%);
}
.navbar-tv { background: transparent !important; position: relative; z-index: 2; }
/* TB_MODALE_20260921 — ⚠ NE JAMAIS REMETTRE DE `z-index` SUR CETTE LIGNE.
   `position: relative` suffit à poser main et footer au-dessus du bandeau :
   les deux sont positionnés, et main vient après le bandeau dans le document.
   Un `z-index` chiffré, lui, fait de main un CONTEXTE D'EMPILEMENT. Les modales
   Bootstrap sont écrites dans le bloc `content`, donc DANS main : elles s'y
   retrouvaient enfermées (plafond z-index 1), tandis que leur voile
   (`.modal-backdrop`, z-index 1050) est posé par Bootstrap sur `<body>`, hors de
   main. Le voile passait donc PAR-DESSUS la modale : l'écran se grisait et il ne
   se passait plus rien (Synthèse des réunions, Règles et lignes des relevés,
   entretiens RH, export de préparation de paye — les 7 modales de l'application). */
main, footer { position: relative; }

/* En-tête de page posé sur le bandeau : textes et boutons passent en clair.
   À ne poser QUE sur un en-tête de page (voir l'avertissement ci-dessus). */
main h2,
.tv-sur-bandeau, .tv-sur-bandeau h1, .tv-sur-bandeau h2, .tv-sur-bandeau h3,
.tv-sur-bandeau h4, .tv-sur-bandeau h5 { color: #FFFFFF; }
main h2 small, main h2 .text-muted,
.tv-sur-bandeau .text-muted, .tv-sur-bandeau small,
.tv-sur-bandeau label { color: rgba(255,255,255,.76) !important; }
.tv-sur-bandeau .btn-outline-secondary, .tv-sur-bandeau .btn-outline-primary,
.tv-sur-bandeau .btn-outline-info, .tv-sur-bandeau .btn-outline-success {
    color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.10);
}
.tv-sur-bandeau .btn-outline-secondary:hover, .tv-sur-bandeau .btn-outline-primary:hover,
.tv-sur-bandeau .btn-outline-info:hover, .tv-sur-bandeau .btn-outline-success:hover {
    background: rgba(255,255,255,.22); color: #fff;
}
/* Les pastilles gardent leur couleur : elles portent un sens. */
.tv-sur-bandeau .badge { color: inherit; }

/* Les cartes flottent sur la couleur : ombre bleutée, pas de bordure. */
.card {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(4,20,38,.14), 0 14px 30px rgba(4,20,38,.14);
}
.tv-strip { border: 0; border-left: 4px solid #6c757d; }
.badge { border-radius: 8px; }
/* Le pied de page porte la classe Bootstrap `border-top`, dont la règle est
   elle aussi en !important : il faut donc une sélectivité au moins égale
   (`footer.border-top`) pour effacer ce trait, inutile sur le dégradé. */
footer, footer.border-top { border-top: 0 !important; color: #64748B; }

/* ── Print styles ── */
@media print {
    .navbar, footer, .btn, .alert { display: none !important; }
    .card { border: 1px solid #dee2e6 !important; box-shadow: none !important; }
    /* TB_DIRECTION_20260918 : sur le papier, ni dégradé ni texte blanc. */
    .tv-bandeau { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    main h2, .tv-sur-bandeau, .tv-sur-bandeau h1, .tv-sur-bandeau h2,
    .tv-sur-bandeau h3, .tv-sur-bandeau h4, .tv-sur-bandeau h5,
    .tv-sur-bandeau .text-muted, .tv-sur-bandeau small, .tv-sur-bandeau label {
        color: #000 !important;
    }
}