/* =========================================================================
   BIOPOINT AI CORE - LA FENETRE DU PLANNING (fenetre_planning.css)
   =========================================================================
   Une seule feuille pour toutes les vues du planning - gerant (journee, mois,
   edition), salarie et borne - afin que le vert et le rouge soient les MEMES
   partout :

     VERT   de J a J+14   emploi du temps OFFICIEL (force majeure seulement)
     ROUGE  de J+15 a J+31 previsionnel, modifiable dans le respect de la loi

   LA COULEUR NE SUFFIT PAS. Chaque case porte aussi un mot (« Officiel »,
   « Prévisionnel ») et une icone : un salarie daltonien doit lire ce qu'un
   autre voit. Les pastilles sont pleines, texte blanc, contraste superieur a
   4,5:1 dans les deux themes (WCAG AA) ; les fonds de case sont des teintes
   legeres sous lesquelles le texte garde sa couleur habituelle.

   Les couleurs sont des jetons : le theme sombre (celui des espaces et de la
   borne) et le theme clair (`data-theme="light"`) redefinissent les memes
   noms.
   ========================================================================= */

:root,
:root[data-theme="dark"] {
    --fp-vert-plein: #15803d;          /* pastille : blanc dessus, 5,0:1 */
    --fp-vert-fond: rgba(34, 197, 94, 0.16);
    --fp-vert-bord: #22c55e;
    --fp-vert-texte: #86efac;          /* sur fond sombre : 10:1 */
    --fp-rouge-plein: #b91c1c;         /* pastille : blanc dessus, 6,5:1 */
    --fp-rouge-fond: rgba(239, 68, 68, 0.15);
    --fp-rouge-bord: #f87171;
    --fp-rouge-texte: #fca5a5;         /* sur fond sombre : 8:1 */
    --fp-neutre-texte: #a1a1aa;
}

:root[data-theme="light"] {
    --fp-vert-plein: #15803d;
    --fp-vert-fond: #dcfce7;
    --fp-vert-bord: #15803d;
    --fp-vert-texte: #14532d;          /* sur #dcfce7 : 9:1 */
    --fp-rouge-plein: #b91c1c;
    --fp-rouge-fond: #fee2e2;
    --fp-rouge-bord: #b91c1c;
    --fp-rouge-texte: #7f1d1d;         /* sur #fee2e2 : 9:1 */
    --fp-neutre-texte: #52525b;
}

/* PAS DE BASCULE SUR LA SEULE PREFERENCE DU SYSTEME. Les ecrans du planning
   (espaces, borne) sont dessines sur fond sombre : un fond de case clair sous
   un texte clair, parce que le telephone est en mode jour, rendrait la case
   illisible. Le theme clair s'active par l'attribut `data-theme="light"` de la
   page, qui change aussi le texte autour. */

/* --- LA CASE D'UN JOUR -------------------------------------------------- */
/* Le fond et le liseré gauche portent le statut ; la bordure reste libre pour
   les autres reperes (aujourd'hui, journee modifiee, journee fautive). */
.fp-officiel {
    background: var(--fp-vert-fond) !important;
    box-shadow: inset 4px 0 0 var(--fp-vert-bord);
}
.fp-previsionnel {
    background: var(--fp-rouge-fond) !important;
    box-shadow: inset 4px 0 0 var(--fp-rouge-bord);
}

/* --- LA MENTION : un mot et une icone, jamais la couleur seule ---------- */
.fp-mention {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: #ffffff;
    white-space: nowrap;
}
.fp-mention .fas { font-size: 0.85em; }
.fp-mention.fp-officiel,
.fp-mention-officiel { background: var(--fp-vert-plein) !important; box-shadow: none; }
.fp-mention.fp-previsionnel,
.fp-mention-previsionnel { background: var(--fp-rouge-plein) !important; box-shadow: none; }

/* --- LA LEGENDE --------------------------------------------------------- */
.fp-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
.fp-legende li {
    flex: 1 1 280px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.78rem;
    line-height: 1.45;
}
.fp-legende li.fp-officiel { color: var(--fp-vert-texte); }
.fp-legende li.fp-previsionnel { color: var(--fp-rouge-texte); }
.fp-legende strong { display: block; font-size: 0.82rem; }

/* --- LE BANDEAU DES TRENTE-DEUX JOURS ----------------------------------- */
.fp-bandeau {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 6px;
}
.fp-case {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: 10px;
    padding: 6px 7px;
    min-height: 66px;
    border: 1px solid transparent;
    color: inherit;
    text-decoration: none;
    font-size: 0.7rem;
}
.fp-case:hover, .fp-case:focus-visible { border-color: currentColor; }
.fp-case.fp-officiel { color: var(--fp-vert-texte); }
.fp-case.fp-previsionnel { color: var(--fp-rouge-texte); }
.fp-case b { font-size: 0.95rem; line-height: 1; }
.fp-case .fp-statut { font-weight: 700; font-size: 0.6rem; text-transform: uppercase;
                      letter-spacing: 0.04em; }
.fp-case.aujourdhui { border-color: currentColor; }

/* --- LE BANDEAU DE STATUT D'UNE JOURNEE --------------------------------- */
.fp-statut-jour {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 0.82rem;
}
.fp-statut-jour.fp-officiel { color: var(--fp-vert-texte); }
.fp-statut-jour.fp-previsionnel { color: var(--fp-rouge-texte); }

/* --- LA DECLARATION DE FORCE MAJEURE ------------------------------------ */
.fp-dialogue {
    max-width: 560px;
    width: calc(100% - 32px);
    border: 1px solid var(--fp-vert-bord);
    border-radius: 16px;
    padding: 20px;
    background: #0b1220;
    color: #f8fafc;
}
:root[data-theme="light"] .fp-dialogue { background: #ffffff; color: #18181b; }
.fp-dialogue::backdrop { background: rgba(0, 0, 0, 0.6); }
.fp-dialogue h5 { font-size: 1rem; font-weight: 800; margin: 0 0 8px; }
.fp-dialogue p, .fp-dialogue li { font-size: 0.8rem; line-height: 1.5; }
.fp-dialogue label { display: block; font-size: 0.78rem; font-weight: 700; margin: 10px 0 4px; }
.fp-dialogue select, .fp-dialogue textarea {
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: rgba(2, 6, 23, 0.6);
    color: inherit;
    padding: 6px 8px;
    font-size: 0.85rem;
}
:root[data-theme="light"] .fp-dialogue select,
:root[data-theme="light"] .fp-dialogue textarea { background: #ffffff; }
.fp-dialogue .fp-accord { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.fp-dialogue .fp-erreur { color: var(--fp-rouge-texte); font-weight: 700; min-height: 1.2em; }
.fp-dialogue .fp-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
                           margin-top: 14px; }