/*
 * Coque de l'application — structure de la console Sentinel, couleurs SRONOU.
 *
 *   ┌──────────────────────── barre du haut (56 px, pleine largeur, collante) ───────────────────────┐
 *   │ ☰  Logo │ Organisation ▾ / Page                           Langue · Thème │ Profil ▾          │
 *   ├────────────┬───────────────────────────────────────────────────────────────────────────────────┤
 *   │ Trouver…   │ ┌ en-tête de page collant : titre · description ……………… actions (principale) ┐ │
 *   │ Groupe ▾   │ └───────────────────────────────────────────────────────────────────────────────┘ │
 *   │  · entrée  │   contenu                                                                         │
 *   │ « replier  │                                                                                   │
 *   └────────────┴───────────────────────────────────────────────────────────────────────────────────┘
 *
 * La barre latérale suit le réglage Apparence : data-sidebar="tinted" (défaut, dégradé de la couleur de
 * l'organisation, tokens de surface sombre — voir sronou-tokens.css) ou "uniform" (fond de panneau).
 * Repliée en rail (64 px) par l'utilisateur : data-sidebar-collapsed sur <html>, mémorisé localement.
 * Tout passe par les tokens : aucun hexadécimal ici. Mise en miroir RTL par propriétés logiques.
 */

/* Barre du haut
   ------------------------------------------------------------------ */

.sr-skip {
    position: absolute;
    inset-inline-start: var(--sr-space-3);
    top: -3rem;
    z-index: 1100;
    padding: var(--sr-space-2) var(--sr-space-3);
    color: var(--sr-on-accent);
    background: var(--sr-accent);
    border-radius: var(--sr-radius-md);
    transition: top var(--sr-duration-quick) var(--sr-ease-out);
}

.sr-skip:focus { top: var(--sr-space-2); color: var(--sr-on-accent); }

.sr-topbar {
    position: sticky;
    top: 0;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: var(--sr-space-2);
    height: var(--sr-topbar-h);
    padding: 0 var(--sr-space-3);
    background: var(--sr-panel);
    border-bottom: 1px solid var(--sr-line);
}

@media (min-width: 768px) {
    .sr-topbar { padding: 0 var(--sr-space-4); }
}

.sr-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sr-space-2);
    padding: 0 var(--sr-space-1);
    color: var(--sr-fg);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-radius: var(--sr-radius-md);
}

.sr-brand:hover { color: var(--sr-fg); }
.sr-brand img { height: 28px; width: auto; }
.sr-brand img.sr-brand-org { max-width: 140px; object-fit: contain; }

.sr-topbar-sep {
    width: 1px;
    height: 1.25rem;
    margin: 0 var(--sr-space-1);
    background: var(--sr-line-strong);
    flex: 0 0 auto;
}

/* Fil d'Ariane : organisation ▾ / page */
.sr-crumbs {
    display: flex;
    align-items: center;
    gap: var(--sr-space-1);
    min-width: 0;
    font-size: var(--sr-text-sm);
}

.sr-crumb-sep { color: var(--sr-fg-inactive); }

.sr-crumb-page {
    padding: 0 var(--sr-space-1);
    font-weight: 500;
    color: var(--sr-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-workspace-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--sr-space-2);
    height: 2rem;
    max-width: 16rem;
    padding: 0 var(--sr-space-2);
    color: var(--sr-fg);
    font-size: var(--sr-text-sm);
    font-weight: 500;
    background: none;
    border: 0;
    border-radius: var(--sr-radius-md);
    transition: background-color var(--sr-duration-micro) var(--sr-ease);
}

.sr-workspace-trigger:hover,
.sr-workspace-trigger[aria-expanded="true"] { background: var(--sr-hover); }
.sr-workspace-trigger .sr-ws-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-workspace-trigger .fa-chevron-down { font-size: 0.7rem; color: var(--sr-fg-secondary); }

.sr-ws-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--sr-on-accent);
    background: var(--sr-accent);
    border-radius: var(--sr-radius-sm);
}

.sr-ws-menu { min-width: 16rem; max-height: 22rem; overflow-y: auto; }
.sr-ws-menu .dropdown-item { display: flex; align-items: center; gap: var(--sr-space-2); }
.sr-ws-menu .dropdown-item .fa-check { margin-inline-start: auto; color: var(--sr-accent-fg); }
.sr-ws-menu form { margin: 0; }
.sr-ws-menu button.dropdown-item { width: 100%; text-align: start; }

.sr-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--sr-space-1);
    margin-inline-start: auto;
    flex: 0 0 auto;
}

/* Bouton icône carré de la barre (thème, langue, menu) */
.sr-icon-btn {
    display: inline-grid;
    place-items: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 var(--sr-space-2);
    gap: var(--sr-space-1);
    color: var(--sr-fg-secondary);
    font-size: var(--sr-text-sm);
    font-weight: 500;
    background: none;
    border: 0;
    border-radius: var(--sr-radius-md);
    transition: background-color var(--sr-duration-micro) var(--sr-ease), color var(--sr-duration-micro) var(--sr-ease), transform var(--sr-duration-micro) var(--sr-ease);
}

.sr-icon-btn:hover,
.sr-icon-btn[aria-expanded="true"] { color: var(--sr-fg); background: var(--sr-hover); }
.sr-icon-btn:active { transform: scale(var(--sr-scale-press)); }
.sr-icon-btn.sr-lang { grid-auto-flow: column; }

/* Icône du bouton de thème : soleil en clair, lune en sombre */
.sr-theme-toggle .fa-moon { display: none; }
:root[data-theme="dark"] .sr-theme-toggle .fa-moon { display: inline-block; }
:root[data-theme="dark"] .sr-theme-toggle .fa-sun { display: none; }

/* Profil : avatar rond, menu à droite */
.sr-avatar {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    font-size: var(--sr-text-xs);
    font-weight: 700;
    color: var(--sr-accent-fg);
    background: var(--sr-accent-wash);
    border-radius: 50%;
}

.sr-profile-trigger { padding: 0; border-radius: 50%; min-width: 0; }
.sr-profile-menu { min-width: 17rem; padding: var(--sr-space-2); }
.sr-profile-head { display: flex; align-items: center; gap: var(--sr-space-3); padding: var(--sr-space-2); }
.sr-profile-head strong { display: block; font-size: var(--sr-text-sm); }
.sr-profile-head small { display: block; color: var(--sr-fg-muted); font-size: var(--sr-text-xs); overflow-wrap: anywhere; }
.sr-profile-menu .dropdown-item { display: flex; align-items: center; gap: var(--sr-space-2); border-radius: var(--sr-radius-sm); }
.sr-profile-menu .dropdown-item i { width: 1rem; text-align: center; color: var(--sr-fg-secondary); }
.sr-profile-menu form { margin: 0; }
.sr-profile-menu button.dropdown-item { width: 100%; text-align: start; }

.sr-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sr-space-3);
    padding: var(--sr-space-1) var(--sr-space-2);
    font-size: var(--sr-text-sm);
}

/* Contrôle segmenté (thème dans le menu profil, page Apparence) */
.sr-segmented {
    display: inline-flex;
    padding: 2px;
    background: var(--sr-sunken);
    border: 1px solid var(--sr-line);
    border-radius: var(--sr-radius-md);
}

.sr-segmented button {
    padding: 0.2rem 0.55rem;
    font-size: var(--sr-text-xs);
    font-weight: 500;
    color: var(--sr-fg-secondary);
    background: none;
    border: 0;
    border-radius: calc(var(--sr-radius-md) - 2px);
    transition: background-color var(--sr-duration-quick) var(--sr-ease), color var(--sr-duration-quick) var(--sr-ease);
}

.sr-segmented button[aria-pressed="true"] { color: var(--sr-fg); background: var(--sr-panel); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }

/* Coque : barre latérale + contenu
   ------------------------------------------------------------------ */

.sr-shell {
    display: flex;
    min-height: calc(100dvh - var(--sr-topbar-h));
}

.sidebar {
    position: sticky;
    top: var(--sr-topbar-h);
    flex: 0 0 var(--sr-sidebar-w);
    width: var(--sr-sidebar-w);
    height: calc(100dvh - var(--sr-topbar-h));
    display: flex;
    flex-direction: column;
    color: var(--sr-fg);
    background: var(--sr-panel);
    border-inline-end: 1px solid var(--sr-line);
    z-index: 1030;
    transition: width var(--sr-duration-fast) var(--sr-ease-out), flex-basis var(--sr-duration-fast) var(--sr-ease-out), transform var(--sr-duration-fast) var(--sr-ease-out);
}

/* Différenciée (défaut) : dégradé de la couleur de l'organisation */
:root:not([data-sidebar="uniform"]) .sidebar {
    background: linear-gradient(180deg, var(--sr-sidebar-from) 0%, var(--sr-sidebar-to) 100%);
    border-inline-end-color: transparent;
}

.sidebar-search { padding: var(--sr-space-3) var(--sr-space-3) var(--sr-space-2); }

.sr-search {
    position: relative;
    display: flex;
    align-items: center;
}

.sr-search > i {
    position: absolute;
    inset-inline-start: 0.7rem;
    font-size: 0.8rem;
    color: var(--sr-fg-muted);
    pointer-events: none;
}

.sr-search input {
    width: 100%;
    height: 2.25rem;
    padding: 0 2.6rem 0 2rem;
    padding-inline: 2rem 2.9rem;
    font-size: var(--sr-text-sm);
    color: var(--sr-fg);
    background: var(--sr-field);
    border: 1px solid var(--sr-line-strong);
    border-radius: var(--sr-radius-md);
    transition: border-color var(--sr-duration-quick) var(--sr-ease), box-shadow var(--sr-duration-quick) var(--sr-ease);
}

.sr-search input::placeholder { color: var(--sr-fg-muted); }
.sr-search input:focus { outline: none; border-color: var(--sr-accent); box-shadow: var(--sr-shadow-focus); }
.sr-search input::-webkit-search-cancel-button { display: none; }

.sr-kbd {
    position: absolute;
    inset-inline-end: 0.45rem;
    padding: 0 0.35rem;
    font-family: var(--sr-font-sans);
    font-size: 0.6875rem;
    line-height: 1.25rem;
    color: var(--sr-fg-muted);
    background: var(--sr-hover);
    border: 1px solid var(--sr-line);
    border-radius: 4px;
    pointer-events: none;
}

.sidebar-scroll {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 var(--sr-space-3) var(--sr-space-3);
    scrollbar-width: thin;
    scrollbar-color: var(--sr-line-strong) transparent;
}

.sidebar .nav { gap: 2px; }

.nav-group { margin-top: var(--sr-space-3); }

.nav-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 1.75rem;
    padding: 0 0.625rem;
    font-size: var(--sr-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sr-fg-muted);
    background: none;
    border: 0;
    border-radius: var(--sr-radius-sm);
}

.nav-group-toggle:hover { color: var(--sr-fg); }
.nav-group-toggle i { font-size: 0.65rem; transition: transform var(--sr-duration-quick) var(--sr-ease); }
.nav-group-toggle[aria-expanded="false"] i { transform: rotate(-90deg); }
[dir="rtl"] .nav-group-toggle[aria-expanded="false"] i { transform: rotate(90deg); }

/* Repli animé (grid 1fr → 0fr) */
.nav-group-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--sr-duration-fast) var(--sr-ease-out);
}

.nav-group-body > ul { min-height: 0; overflow: hidden; margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.nav-group.is-closed .nav-group-body { grid-template-rows: 0fr; }

/* Entrée de menu : 36 px, arrondie, active = lavis + texte d'accent ; en rail, barre d'accent au bord */
.sidebar .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 2.25rem;
    padding: 0 0.625rem;
    color: var(--sr-fg);
    font-size: var(--sr-text-sm);
    border-radius: var(--sr-radius-md);
    white-space: nowrap;
    transition: background-color var(--sr-duration-micro) var(--sr-ease), color var(--sr-duration-micro) var(--sr-ease);
}

.sidebar .nav-link i { flex: 0 0 auto; width: 1.1rem; text-align: center; font-size: 0.95rem; color: var(--sr-fg-secondary); }
.sidebar .nav-link .nav-label { overflow: hidden; text-overflow: ellipsis; }
.sidebar .nav-link:hover { color: var(--sr-fg); background-color: var(--sr-hover); }
.sidebar .nav-link:hover i { color: var(--sr-fg); }

.sidebar .nav-link.active {
    color: var(--sr-accent-fg);
    font-weight: 600;
    background-color: var(--sr-selected);
}

.sidebar .nav-link.active i { color: var(--sr-accent-fg); }

/* Sur la barre différenciée (surface sombre), l'actif reste blanc sur lavis, barre soleil au bord */
:root:not([data-sidebar="uniform"]) .sidebar .nav-link.active { color: var(--sr-fg); }
:root:not([data-sidebar="uniform"]) .sidebar .nav-link.active i { color: var(--sr-accent); }

.sidebar .nav-link.active::before {
    content: "";
    position: absolute;
    inset-block: 0.45rem;
    inset-inline-start: -0.75rem;
    width: 3px;
    background: var(--sr-accent);
    border-start-end-radius: 3px;
    border-end-end-radius: 3px;
}

.sidebar-empty { padding: var(--sr-space-2) 0.625rem; font-size: var(--sr-text-sm); color: var(--sr-fg-muted); }
.sidebar-search-hit-hidden { display: none !important; }

.sidebar-footer {
    display: flex;
    justify-content: flex-end;
    padding: var(--sr-space-2);
    border-top: 1px solid var(--sr-line);
}

.sidebar-footer .sr-icon-btn { color: var(--sr-fg-secondary); }
.sidebar-footer .sr-icon-btn:hover { color: var(--sr-fg); }
[dir="rtl"] .sidebar-collapse-btn i { transform: scaleX(-1); }

/* Rail replié (≥ 768 px) : icônes seules, libellé en infobulle */
@media (min-width: 768px) {
    :root[data-sidebar-collapsed] .sidebar { flex-basis: var(--sr-rail-w); width: var(--sr-rail-w); }
    :root[data-sidebar-collapsed] .sidebar-search,
    :root[data-sidebar-collapsed] .nav-group-toggle,
    :root[data-sidebar-collapsed] .nav-label { display: none; }
    :root[data-sidebar-collapsed] .sidebar-scroll { padding-inline: var(--sr-space-2); overflow: visible; }
    :root[data-sidebar-collapsed] .nav-group { margin-top: var(--sr-space-2); padding-top: var(--sr-space-2); border-top: 1px solid var(--sr-line); }
    :root[data-sidebar-collapsed] .nav-group.is-closed .nav-group-body { grid-template-rows: 1fr; }
    :root[data-sidebar-collapsed] .sidebar .nav-link { justify-content: center; padding: 0; }
    :root[data-sidebar-collapsed] .sidebar .nav-link.active::before { inset-inline-start: -0.5rem; }
    :root[data-sidebar-collapsed] .sidebar-footer { justify-content: center; }
    :root[data-sidebar-collapsed] .sidebar-collapse-btn i { transform: scaleX(-1); }
    [dir="rtl"]:root[data-sidebar-collapsed] .sidebar-collapse-btn i { transform: none; }

    :root[data-sidebar-collapsed] .sidebar .nav-link[data-label]:hover::after,
    :root[data-sidebar-collapsed] .sidebar .nav-link[data-label]:focus-visible::after {
        content: attr(data-label);
        position: absolute;
        inset-inline-start: calc(100% + 0.75rem);
        z-index: 1060;
        padding: 0.25rem 0.5rem;
        font-size: var(--sr-text-xs);
        font-weight: 500;
        white-space: nowrap;
        color: var(--sr-ink-900);
        background: #fff;
        border-radius: var(--sr-radius-sm);
        box-shadow: var(--sr-shadow-raised);
        animation: sr-fade-in var(--sr-duration-quick) var(--sr-ease-out);
    }
}

/* Mobile : barre latérale en tiroir sous la barre du haut, fond d'assombrissement */
.sidebar-backdrop {
    position: fixed;
    inset: var(--sr-topbar-h) 0 0 0;
    z-index: 1029;
    background: var(--sr-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sr-duration-fast) var(--sr-ease);
}

@media (max-width: 767.98px) {
    .sidebar {
        position: fixed;
        inset-block: var(--sr-topbar-h) 0;
        inset-inline-start: 0;
        height: auto;
        transform: translateX(-100%);
        box-shadow: var(--sr-shadow-raised);
    }

    [dir="rtl"] .sidebar { transform: translateX(100%); }
    .sidebar.show { transform: translateX(0) !important; }
    .sidebar.show ~ .sidebar-backdrop { opacity: 1; pointer-events: auto; }
}

@media (min-width: 768px) {
    .sidebar-toggle { display: none !important; }
}

/* Zone de contenu
   ------------------------------------------------------------------ */

.main-content {
    flex: 1 1 auto;
    min-width: 0;
    /* Pied de page toujours en bas : la page occupe la hauteur restante, même quand elle est courte. */
    display: flex;
    flex-direction: column;
    padding: var(--sr-space-5);
    padding-bottom: 0;
}

.sr-page { flex: 1 0 auto; animation: sr-page-in var(--sr-duration-slow) var(--sr-ease-out) both; }

/* En-tête de page collant (Quorly) : titre + description à gauche, actions à droite, l'action
   principale reste visible au défilement. Appliqué automatiquement au premier bloc de la page quand
   c'est un titre h1 ou une rangée .d-flex qui contient un h1 — les vues n'ont rien à changer. */
.sr-page > .sr-page-header,
.sr-page > h1:first-child,
.sr-page > .d-flex:first-child:has(> h1),
.sr-page > .d-flex:first-child:has(> div > h1) {
    position: sticky;
    top: var(--sr-topbar-h);
    z-index: 1020;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sr-space-3) var(--sr-space-5);
    margin: calc(-1 * var(--sr-space-5)) calc(-1 * var(--sr-space-5)) var(--sr-space-5) !important;
    padding: var(--sr-space-4) var(--sr-space-5);
    background: color-mix(in srgb, var(--sr-canvas) 82%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
    border-bottom: 1px solid var(--sr-line);
}

.sr-page > h1:first-child { display: block; }

.sr-page > .sr-page-header h1,
.sr-page > h1:first-child,
.sr-page > .d-flex:first-child h1 {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.sr-page > .sr-page-header p,
.sr-page > .d-flex:first-child:has(> div > h1) p { margin: 0.125rem 0 0; font-size: var(--sr-text-sm); color: var(--sr-fg-muted); }

.sr-page > .d-flex:first-child > :not(h1):not(div:has(> h1)),
.sr-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sr-space-2); margin-inline-start: auto; }

/* Ombre légère quand l'en-tête est collé (classe posée par site.js) */
.sr-page > .is-stuck { box-shadow: 0 6px 16px -12px rgba(0, 0, 0, 0.35); }

.main-content > .footer {
    position: static;
    margin-top: var(--sr-space-7) !important;
    padding: var(--sr-space-4) 0 var(--sr-space-5) !important;
    line-height: 1.5;
    font-size: var(--sr-text-xs);
    white-space: normal;
    color: var(--sr-fg-muted);
    border-color: var(--sr-line) !important;
}

/* Tableau de bord d'accueil */
.dashboard-container h2 { font-weight: 600; }