/*
 * Les traits qui séparent les parties de l'application.
 *
 * ⚠️ Filament ne pose AUCUNE bordure par défaut : il compte sur des ombres si
 * légères qu'elles disparaissent selon l'écran et la luminosité ambiante.
 * Résultat, barre latérale, en-tête et contenu se fondent en une seule
 * surface, et l'utilisateur ne sait plus où il est. Retour du client, mot pour
 * mot : « on est perdu, on ne voit aucune bordure des parties ».
 *
 * ⚠️ Un seul trait, deux intensités, jamais plus : des bordures de valeurs
 * différentes partout produisent l'effet inverse de celui qu'on cherche, un
 * écran agité où plus rien ne hiérarchise. Le trait fort ne sert qu'aux
 * séparations de STRUCTURE (barre latérale, en-tête, pied), le trait normal
 * aux blocs de contenu.
 */
:root {
    /*
     * La couleur du client. Redéfinie par chaque projet ; ce gris neutre est
     * un repli, il ne teinte rien de visible.
     */
    --bos-marque: #71717a;
    --bos-accent: #71717a;

    --bos-trait: color-mix(in oklab, var(--bos-marque) 14%, rgba(9, 9, 11, .10));
    --bos-trait-fort: color-mix(in oklab, var(--bos-marque) 18%, rgba(9, 9, 11, .16));

    /*
     * Deux plans, pas davantage : le fond sur lequel tout repose, et les
     * surfaces posées dessus. C'est ce qui fait lire une barre latérale comme
     * un objet distinct plutôt que comme une portion de la page.
     *
     * ⚠️ Relevé avant d'y toucher : chez Filament, barre latérale, contenu et
     * cartes partagent EXACTEMENT le même fond. Seul l'en-tête diffère. Rien
     * ne séparait donc les zones, ni trait ni teinte.
     */
    /*
     * ⚠️ Teintés par la couleur du client, très peu : 3 % suffisent à donner
     * une ambiance, au-delà on repeint l'interface et on perd la neutralité
     * qu'un outil de travail doit garder. Le contraste du texte, lui, ne
     * bouge pas.
     */
    --bos-fond-page: color-mix(in oklab, var(--bos-marque) 3%, #f4f4f5);
    --bos-fond-surface: color-mix(in oklab, var(--bos-marque) 1.5%, #ffffff);
}

.dark {
    --bos-trait: color-mix(in oklab, var(--bos-marque) 20%, rgba(255, 255, 255, .10));
    --bos-trait-fort: color-mix(in oklab, var(--bos-marque) 24%, rgba(255, 255, 255, .16));

    /* ⚠️ L'ordre s'inverse en sombre : c'est la surface qui S'ÉCLAIRCIT, le
       fond restant le plus sombre. Garder le même sens qu'en clair
       (surface plus foncée) enfoncerait les cartes dans la page au lieu de
       les en détacher. */
    --bos-fond-page: color-mix(in oklab, var(--bos-marque) 5%, #09090b);
    --bos-fond-surface: color-mix(in oklab, var(--bos-marque) 7%, #18181b);
}

/* ── Les deux plans ──────────────────────────────────────────────────── */

.fi-body,
.fi-main-ctn {
    background-color: var(--bos-fond-page);
}

.fi-sidebar,
.fi-topbar,
.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-in-entry-wrp {
    background-color: var(--bos-fond-surface);
}

/* ── Structure : ce qui délimite les grandes zones ───────────────────── */

.fi-sidebar {
    border-right: 1px solid var(--bos-trait-fort);
}

.fi-topbar {
    border-bottom: 1px solid var(--bos-trait-fort);
}

/* ⚠️ La barre latérale ouverte en superposition (mobile) porte sa propre
   ombre : lui ajouter un trait à droite dessinerait une ligne dans le vide. */
.fi-sidebar.fi-sidebar-open ~ * .fi-topbar {
    border-bottom-color: var(--bos-trait-fort);
}

/* ── Titre de page : compact, pour qu'il ne mange plus une ligne entière ─
   Filament pose un très gros titre en haut de chaque écran. On le garde (il
   dit où l'on est) mais discret. L'assistant, lui, le masque entièrement. */
.fi-header-heading { font-size: 1.15rem !important; line-height: 1.35 !important; }
.fi-header-subheading { font-size: .8125rem !important; }
.fi-header { margin-bottom: .75rem; }

/* ── Blocs de contenu : cartes, tableaux, formulaires ────────────────── */

/*
 * ⚠️ « not-contained » est le mot de Filament pour une section qui ne doit
 * PAS avoir de cadre : elle ne fait que grouper des blocs qui, eux, portent
 * le leur. Lui donner un fond et une bordure dessine un grand rectangle
 * autour d'un groupe de cartes, prolongé dans le vide quand le groupe n'est
 * pas plein. Le nom de la classe l'annonce, encore faut-il le lire.
 */
.fi-ta-ctn,
.fi-section:not(.fi-section-not-contained),
.fi-wi-stats-overview-stat,
.fi-fo-component-ctn,
.fi-in-entry-wrp {
    border: 1px solid var(--bos-trait);
}

/* Un tableau reçoit son trait du conteneur : le doubler ferait une bordure
   grasse à l'endroit exact où les deux se superposent. */
.fi-ta-ctn .fi-ta {
    border: 0;
}

/* L'en-tête d'un tableau se détache de ses lignes, sinon la barre de
   recherche flotte au-dessus du contenu sans lui appartenir. */
.fi-ta-header-ctn {
    border-bottom: 1px solid var(--bos-trait);
}

/* ── Lisibilité du bouton principal en thème sombre ──────────────────── */

/*
 * ⚠️ Filament pose son bouton principal sur le pas 600 en thème sombre, avec
 * du texte blanc. Mesuré : 4,24 pour 1 — sous le seuil AA de 4,5 exigé pour
 * du texte courant. Et ce n'est pas une affaire de couleur choisie : le
 * défaut se vérifie sur TOUTES les teintes, du violet au doré au gris, parce
 * que Filament fixe lui-même la luminosité de chaque pas et ne retient que la
 * teinte de la couleur fournie.
 *
 * Le pas 700 passe partout (autour de 6 pour 1). Un seul cran plus sombre,
 * pour un texte réellement lisible.
 */
.dark .fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link) {
    background-color: var(--primary-700);
}

.dark .fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link):hover {
    background-color: var(--primary-600);
}

/* ── L'écran d'agenda ────────────────────────────────────────────────── */

.bos-agenda { display: grid; gap: 0.75rem; }

.bos-agenda-fenetres { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }

.bos-agenda-fenetre {
    border: 1px solid var(--bos-trait);
    border-radius: 0.5rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    cursor: pointer;
    background: transparent;
}

.bos-agenda-fenetre--actif {
    border-color: var(--bos-marque);
    color: var(--bos-marque);
    font-weight: 600;
}

.bos-agenda-liste { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }

.bos-agenda-ligne { display: flex; gap: 0.9rem; align-items: baseline; }

/* Largeur FIXE pour l'heure : sans elle les intitulés ne s'alignent pas d'une
   ligne à l'autre, et l'on ne lit plus la journée d'un coup d'œil. */
.bos-agenda-heure {
    flex: 0 0 6.5rem;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    opacity: 0.7;
}

.bos-agenda-titre { font-weight: 500; }

.bos-agenda-aujourdhui {
    margin-left: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bos-marque);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bos-agenda-erreur { font-weight: 600; }
.bos-agenda-detail { font-size: 0.82rem; opacity: 0.65; margin-top: 0.35rem; }

@media screen and (max-width: 640px) {
    .bos-agenda-ligne { flex-direction: column; gap: 0.1rem; }
    .bos-agenda-heure { flex: none; }
}

/* ── L'encart des sites du client ────────────────────────────────────── */

/*
 * ⚠️ Écrit ici et non en classes utilitaires : cette feuille est servie telle
 * quelle par le noyau, alors que Tailwind ne compile chez le client que les
 * classes qu'il a vues. Une vue du paquet n'est pas toujours dans son champ.
 */

.bos-sites {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.bos-site {
    border: 1px solid var(--bos-trait);
    border-radius: 0.75rem;
    padding: 0.9rem 1rem;
    background: var(--bos-fond-carte, transparent);
}

.bos-site-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.bos-site-nom { font-weight: 600; }

.bos-site-etat {
    font-size: 0.75rem;
    border-radius: 9999px;
    padding: 0.15rem 0.55rem;
    white-space: nowrap;
}

.bos-site-etat--ok { background: rgb(34 197 94 / 0.14); color: rgb(21 128 61); }
.bos-site-etat--bof { background: rgb(245 158 11 / 0.16); color: rgb(146 64 14); }
.bos-site-etat--ko { background: rgb(239 68 68 / 0.14); color: rgb(153 27 27); }

/* En thème sombre les mêmes teintes deviennent illisibles sur fond foncé.
   ⚠️ Filament pilote le sombre par la classe .dark sur <html>, PAS par un
   attribut data-theme (que rien ne pose). Ciblé en [data-theme], ces couleurs
   claires s'appliquaient EN PERMANENCE, thème clair compris : le badge « en
   ligne » ressortait en vert clair sur fond clair, illisible. */
.dark .bos-site-etat--ok { color: rgb(134 239 172); }
.dark .bos-site-etat--bof { color: rgb(253 211 141); }
.dark .bos-site-etat--ko { color: rgb(252 165 165); }

.bos-site-hote {
    font-size: 0.8rem;
    opacity: 0.65;
    margin-top: 0.1rem;
}

.bos-site-technique {
    font-size: 0.8rem;
    line-height: 1.45;
    margin: 0.6rem 0 0;
    opacity: 0.85;
}

/* Dite une fois au-dessus des sites, elle précède la grille au lieu de la
   répéter dans chaque encart. */
.bos-sites-technique-commune {
    margin: 0 0 0.9rem;
    max-width: 62ch;
}

.bos-site-cert {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 0.5rem;
}

.bos-site-cert--urgent {
    opacity: 1;
    font-weight: 600;
    color: rgb(180 83 9);
}

.dark .bos-site-cert--urgent { color: rgb(253 211 141); }

.bos-site-liens {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.bos-site-lien {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    border: 1px solid var(--bos-trait);
    border-radius: 0.5rem;
    padding: 0.35rem 0.7rem;
    transition: background 0.15s ease;
}

.bos-site-lien:hover { background: rgb(0 0 0 / 0.04); }

.dark .bos-site-lien:hover { background: rgb(255 255 255 / 0.06); }

/* ── Le raccourci vers l'assistant ───────────────────────────────────── */

/*
 * ⚠️ Écrit ICI et non en classes utilitaires : cette feuille est servie telle
 * quelle par le socle, tandis que Tailwind ne compile chez le client que les
 * classes qu'il a vues. Un bouton dont la moitié des règles manque se pose au
 * mauvais endroit sans que rien ne le signale — c'est exactement ce qui est
 * arrivé au bandeau d'erreur de la dictée.
 */

.bos-raccourci-flottant {
    position: fixed;
    right: 1rem;

    /* Base fixe PLUS l'encoche, jamais l'encoche seule : Safari renvoie zéro
       quand sa barre d'outils est masquée, et la mise en page de Filament ne
       demande pas « viewport-fit=cover ». Sans la base, le bouton finit sous
       la barre du navigateur. */
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));

    /* Sous les 100 de Filament : une fenêtre modale doit recouvrir le bouton,
       jamais l'inverse. */
    z-index: 40;

    display: flex;
    align-items: center;
    justify-content: center;

    /* 56 px : la taille de référence d'un bouton d'action flottant, et bien
       au-delà des 24 px exigés pour une cible tactile. */
    width: 3.5rem;
    height: 3.5rem;

    border-radius: 9999px;
    background: var(--bos-marque, #3b2a63);
    color: #fff;
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bos-raccourci-flottant:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgb(0 0 0 / 0.3);
}

.bos-raccourci-flottant:focus-visible {
    outline: 2px solid var(--bos-marque, #3b2a63);
    outline-offset: 3px;
}

/* Sur ORDINATEUR il n'a pas lieu d'être : la barre du haut porte l'entrée, et
   un bouton flottant y recouvre du contenu pour rien. */
@media screen and (min-width: 1024px) {
    .bos-raccourci-flottant {
        display: none;
    }
}

/* ⚠️ Sur un écran très étroit — ou à fort grossissement, où la largeur utile
   tombe à 320 px — un bouton de 56 px mange près d'un cinquième de la largeur.
   On le réduit plutôt que de laisser le contenu se faire manger. */
@media screen and (max-width: 380px) {
    .bos-raccourci-flottant {
        width: 3rem;
        height: 3rem;
        right: 0.75rem;
    }
}

/* ── L'avatar, qui sinon flotte sur la barre sans contour ────────────── */

.fi-avatar {
    box-shadow: 0 0 0 1px var(--bos-trait-fort);
}

/* ⚠️ Posé en ombre et non en bordure : une bordure sur un élément de 32 px
   rogne l'image à l'intérieur, alors que l'ombre se dessine au-dehors. */
.fi-user-menu .fi-avatar {
    box-shadow: 0 0 0 1px var(--bos-trait-fort);
}