/*
 * Habillage CTC Artisan culinaire (D-082) — surcharge minimale du thème
 * Bootstrap 5.3 par défaut, basée sur les assets de marque réels fournis
 * (samples/design/Logo) : navy #132030 (échantillonné directement sur le
 * logo), blanc en contraste. Aucune police web importée, aucune animation —
 * personnalisation volontairement restreinte pour un outil de conformité
 * réglementaire utilisé quotidiennement, pas un site vitrine (voir avis UI/UX
 * dédié, decisions.md D-082).
 */

:root {
    --bs-primary: #132030;
    --bs-primary-rgb: 19, 32, 48;
}

/* D-097 (charte graphique CTC partagée, reprise du Portail-Intranet /
   Intra-gestion à la demande de Guillaume) : palette étendue + typographie.
   Périmètre volontairement limité aux couleurs de marque/neutres — les
   couleurs sémantiques C/NC/NA/NO (badges, tuiles CAPA) restent intactes,
   contrainte actée en D-082 et reconfirmée le 2026-07-21. Navigation
   horizontale conservée (pas de passage en sidebar comme Intra-gestion) —
   choix arbitré avec Guillaume pour ne pas risquer l'ergonomie mobile
   terrain déjà en place. */

@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/fonts/nunito-sans.woff2') format('woff2');
}

:root {
    --brand-secondary: #2F5496;
    --brand-accent: #4A90D9;
    --bs-body-font-family: 'Nunito Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-bg: #F5F6F8;
    --bs-body-color: #1A1A2E;
    --bs-link-color: var(--brand-accent);
    --bs-link-color-rgb: 74, 144, 217;
    --bs-link-hover-color: var(--brand-secondary);
    --bs-link-hover-color-rgb: 47, 84, 150;
    --bs-border-radius: 0.75rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 1rem;
}

body {
    font-family: var(--bs-body-font-family);
}

/* Cartes/tuiles : rayon plus généreux + ombre douce au lieu d'une bordure
   1px — reprend le traitement du Portail-Intranet, sans toucher aux
   couleurs bg-* (success/danger/warning/info/secondary) qui portent la
   sémantique C/NC/NA/NO et les statuts CAPA. */
.card {
    border: none;
    box-shadow: 0 2px 10px rgba(19, 32, 48, 0.08);
}

/* Navbar : logo au lieu du texte "MAISAN" */
.navbar-brand img {
    height: 32px;
}

/* Lisibilité du badge NO (Non Observé) — bg-light quasi invisible sur fond
   blanc, seul des 4 indicateurs C/NC/NA/NO à manquer de contraste. */
.badge.bg-light {
    border: 1px solid #ced4da;
}

/* Indication de la section active dans la navigation (ajoutée en JS, voir
   _nav.php — aucune variable serveur fiable disponible à cet endroit pour la
   déterminer côté PHP sans risquer une régression de portée de variable). */
.navbar-nav .nav-link.active {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* D-094 (passe de design, arbitrée avec Guillaume) : titres plus affirmés —
   police système inchangée (aucune police web importée), juste poids/
   espacement/accent pour sortir de l'aspect trop neutre signalé. */
h1 {
    font-weight: 700;
    letter-spacing: -0.01em;
    display: inline-block;
    padding-bottom: 0.35rem;
    border-bottom: 3px solid var(--bs-primary);
    margin-bottom: 1rem;
}

h2 {
    font-weight: 600;
    color: var(--brand-secondary);
}

/* Accent visuel réservé aux tuiles neutres du dashboard (Établissements,
   Évaluations, Taux de conformité). Les tuiles de suivi CAPA gardent leurs
   couleurs sémantiques (C/NC/à définir/en retard) intactes, jamais
   recolorées — l'agent UI/UX D-082 avait explicitement écarté de toucher à
   ces couleurs pour ne pas créer de confusion avec la sémantique C/NC/NA/NO. */
.dash-tile {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dash-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(19, 32, 48, 0.15);
}
.dash-tile .bi {
    font-size: 1.15rem;
    opacity: 0.85;
}

/* D-102 (harmonisation de la page de connexion avec Intra-gestion, demande
   Guillaume) : même gabarit que Login.tsx d'Intra-gestion — fond navy plein
   écran, logo + titre + sous-titre blancs centrés, carte blanche arrondie
   avec ombre. Réadapté en dimension (pas en style) : MAI-SAN n'a qu'une
   seule voie de connexion (SSO Zoho, pas de double population restaurant/
   siège comme Intra-gestion), donc pas de formulaire ni de séparateur "Accès
   siège" — la carte est plus compacte en conséquence. */
.login-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-primary);
    padding: 1.5rem;
}
.login-logo {
    height: 3.5rem;
}
.login-title {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}
.login-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    margin-bottom: 0;
}
.login-card {
    width: 100%;
    max-width: 26rem;
    border: none;
}

/* D-103 (demande Guillaume) : tuiles dashboard trop vives — adoucies en
   pastel tout en gardant la même teinte/signification (aucune couleur
   déplacée d'une tuile à une autre). Fond clair + texte de la même famille
   de teinte mais plus soutenu, pour rester lisible. Portée volontairement
   limitée aux 6 tuiles marquées `.tile-soft` (2 tuiles "Vue d'ensemble" +
   4 tuiles "Suivi des CAPA") — les badges/boutons ailleurs dans l'app
   (ex. "Refus CDS", alertes) gardent leurs couleurs Bootstrap standard,
   où rester voyant reste utile. */
.tile-soft.text-bg-primary {
    background-color: #E4E8ED !important;
    color: var(--bs-primary) !important;
}
.tile-soft.text-bg-info {
    background-color: #DCEEFA !important;
    color: #0B5F82 !important;
}
.tile-soft.text-bg-warning {
    background-color: #FCEFDC !important;
    color: #8A5A00 !important;
}
.tile-soft.text-bg-danger {
    background-color: #FBE1E1 !important;
    color: #9B2226 !important;
}

/* D-104 (statut CAPA "À définir", avis Hermes UI/UX) : badge du délai de
   saisie du plan d'action (J+10). Orange dédié — aucune couleur de la
   palette sémantique existante (C/NC/NA/NO, gravité, statuts CAPA) n'est
   orange, donc pas de collision. Le rouge brique de l'échéance dépassée est
   volontairement distinct du bg-danger "RETARD" habituel : ce n'est pas un
   retard de réalisation de l'action, mais un retard de simple saisie. */
.badge.bg-capa-urgence {
    /* Contraste WCAG AA : blanc sur #E68A2E ne fait que ~2.6:1 (besoin de
       4.5:1) — texte foncé (couleur de corps déjà utilisée partout ailleurs
       dans l'app) plutôt que de changer la teinte orange voulue du fond. */
    background-color: #E68A2E !important;
    color: var(--bs-body-color) !important;
}
.badge.bg-capa-echu {
    background-color: #C0392B !important;
    color: #fff !important;
}

/* D-124 (revu 2026-07-28, retour Guillaume) : panneau de filtre secteur/
   restaurant en bandeau latéral escamotable, plutôt qu'un bloc inline —
   même recette que le hamburger mobile d'Intra-gestion (transform +
   transition, overlay semi-transparent), adaptée en CSS pur (pas de Tailwind
   dans ce projet). */
.filtre-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1040;
    display: none;
}
.filtre-panel-overlay.show { display: block; }

/* Revu une 2e fois (2026-07-28) : le mécanisme d'ouverture/fermeture repose
   maintenant uniquement sur `display` — la propriété la plus simple et la
   moins ambiguë qui soit (pas de transition, pas de propriété géométrique à
   recalculer). Un test en conditions réelles a montré qu'un changement de
   `right` sur cet élément ne se répercutait pas de façon fiable même via une
   règle CSS fraîchement injectée avec le même sélecteur — signe que la bascule
   ne doit pas dépendre d'une propriété qui nécessite un recalcul de layout.
   `display` est fondamental : un élément en `display: none` est retiré du
   rendu sans ambiguïté possible. */
.filtre-panel {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 320px;
    max-width: 85vw;
    background: #fff;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    overflow-y: auto;
    padding: 1rem;
}
.filtre-panel.show { display: block; }

.filtre-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E4E8ED;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}
.filtre-panel-header .btn-close {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-size: 0.85em;
    transition: background-color 0.15s ease;
}
.filtre-panel-header .btn-close:hover { background-color: #EEF0F2; }

.filtre-toggle-btn {
    background: #E9EDF3;
    color: var(--bs-primary);
    border: none;
    border-radius: 50rem; /* pilule, plus doux qu'un rectangle à coins droits */
    padding: 0.5rem 1.1rem;
    font-weight: 600;
    transition: background-color 0.15s ease;
}
.filtre-toggle-btn:hover { background: #D8E1ED; color: var(--bs-primary); }

.filtre-arbre-scroll {
    max-height: none !important; /* le panneau lui-même scrolle désormais */
}

/* Matrice des permissions (/admin/permissions, revu 2026-07-28, affiné une 2e
   fois) — reprend fidèlement le rendu de la matrice Intra-gestion
   (PermissionsMatrix.tsx) : cases carrées à coins doux (pas rondes — Intra-
   gestion utilise `rounded-lg` sur un carré, pas un cercle), un tiret "−"
   simple pour l'état inactif (texte, pas une icône), 1ʳᵉ colonne collante au
   défilement horizontal (utile avec 5 colonnes), survol de ligne discret. */
.perm-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8A8F98;
    margin: 1.5rem 0 0.5rem 0.1rem;
}
.perm-table {
    background: #fff;
    border: 1px solid #E4E8ED;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}
.perm-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #8A8F98;
    background: #F5F6F8;
    font-weight: 600;
    white-space: nowrap;
}
.perm-table td, .perm-table th {
    vertical-align: middle;
    padding: 0.65rem 0.9rem;
}
.perm-table tbody tr {
    border-bottom: 1px solid #F0F1F3;
    transition: background-color 0.1s ease;
}
.perm-table tbody tr:last-child { border-bottom: none; }
.perm-table tbody tr:hover { background: #FAFBFC; }
.perm-table td:first-child, .perm-table th:first-child {
    position: sticky;
    left: 0;
    background: inherit;
    min-width: 220px;
}
.perm-table thead th:first-child { background: #F5F6F8; }
.perm-table tbody tr:hover td:first-child { background: #FAFBFC; }

.perm-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem; /* carré à coins doux, aligné sur Intra-gestion (rounded-lg) */
    border: none;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.perm-toggle.on {
    background: #DCF3E4;
    color: #1E8E4E;
}
.perm-toggle.on:hover { background: #C4EBD1; box-shadow: 0 2px 6px rgba(30, 142, 78, 0.25); }
.perm-toggle.off {
    background: #F0F1F3;
    color: #B5BAC3;
}
.perm-toggle.off::after {
    content: '−'; /* tiret simple, comme Intra-gestion — pas une icône */
    font-size: 1.1rem;
    line-height: 1;
}
.perm-toggle.off:hover { background: #E4E8ED; color: #8A8F98; }
.perm-toggle:active { transform: scale(0.9); }
.perm-toggle:disabled { opacity: 0.5; cursor: wait; }

/* D-136 : textarea auto-extensible (plan d'action, commentaires CAPA) —
   pas de poignée de redimensionnement manuelle ni de scrollbar interne,
   la hauteur suit le contenu via autogrowResize() (_draft.php). */
textarea.autogrow {
    resize: none;
    overflow: hidden;
    min-height: calc(1.5em + 0.5rem + 2px);
}

/* Retour de Guillaume (2026-07-29) : la matrice n'était pas responsive — en
   dessous de 768px (breakpoint Bootstrap md, cohérent avec les classes
   px-md-4 déjà utilisées sur cette page), chaque table de catégorie ne
   montrait qu'un défilement horizontal étroit et peu lisible (5 colonnes de
   110px + 1ʳᵉ colonne collante de 220px, largeur totale ~740px contre
   ~340px de zone visible sur mobile). Transformée en cartes empilées :
   chaque ligne devient une carte (permission en en-tête), chaque colonne de
   profil devient une ligne interne "libellé : bouton" via data-label. Le
   défilement horizontal n'a plus lieu d'être à cette largeur — aucune
   perte d'information, juste une disposition différente. */
@media (max-width: 767.98px) {
    .perm-table thead { display: none; }
    .perm-table, .perm-table tbody, .perm-table tr, .perm-table td {
        display: block;
        width: 100% !important;
    }
    .perm-table {
        border: none;
        background: transparent;
    }
    .perm-table tbody tr {
        background: #fff;
        border: 1px solid #E4E8ED;
        border-radius: var(--bs-border-radius);
        margin-bottom: 0.6rem;
        padding: 0.5rem 0.75rem 0.25rem;
    }
    .perm-table tbody tr:last-child { margin-bottom: 0; }
    .perm-table tbody tr:hover { background: #fff; }
    .perm-table td:first-child {
        position: static;
        min-width: 0;
        font-weight: 600;
        font-size: 0.9rem;
        padding: 0 0 0.5rem 0;
        margin-bottom: 0.35rem;
        border-bottom: 1px solid #F0F1F3;
    }
    .perm-table tbody tr:hover td:first-child { background: transparent; }
    .perm-table td:not(:first-child) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        padding: 0.4rem 0;
    }
    .perm-table td:not(:first-child)::before {
        content: attr(data-label);
        font-size: 0.75rem;
        font-weight: 500;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }
}