/*
 * SAABISTES — Design v2 : menu latéral, clair et accessible — ordinateur uniquement (≥ 992 px).
 *
 * Design par défaut sur ordinateur : app/pages/ground/head.php pose la classe
 * theme-v2 sur <html> avant le premier affichage, sauf si le visiteur a choisi
 * l'ancien design (localStorage « theme » = « 1 »). Toutes les règles ci-dessous sont
 * préfixées par html.theme-v2, sauf celles qui masquent les éléments v2 dans l'ancien
 * design : sans la classe, rien ne change.
 *
 * Les couleurs viennent des variables du thème (clair / sombre) : la v2 suit les deux.
 */

/* ── Design actuel : éléments v2 invisibles ─────────────────────────────── */
html:not(.theme-v2) .v2-sidebar,
html:not(.theme-v2) .v2-skip {
    display: none !important;
}

/* ── Mobile et tablette : menu d'origine, la v2 ne s'applique qu'à partir de 992 px ── */
@media (max-width: 991.98px) {
    .v2-sidebar,
    .v2-skip {
        display: none !important;
    }
}

/* ── Ordinateur : menu latéral ─────────────────────────────────────────── */
@media (min-width: 992px) {
    /* ── Variables v2 ───────────────────────────────────────────────────────── */
    html.theme-v2 {
        --v2-sidebar-w: 272px;
        --v2-topbar-h: 60px;
        --v2-radius: 10px;
        --v2-border: rgba(var(--text-primary), 0.1);
        --v2-hover: rgba(var(--text-primary), 0.05);
        --v2-active-bg: rgba(var(--blue-primary), 0.1);
        --v2-focus: 0 0 0 3px rgba(var(--blue-primary), 0.45);
    }

    /* Focus clavier toujours visible, partout */
    html.theme-v2 :focus-visible {
        outline: 3px solid rgba(var(--blue-primary), 0.6);
        outline-offset: 2px;
    }

    /* ── Lien d'évitement ───────────────────────────────────────────────────── */
    html.theme-v2 .v2-skip {
        position: fixed;
        top: 8px;
        left: 8px;
        z-index: 2000;
        padding: 0.6rem 1rem;
        border-radius: var(--v2-radius);
        background: rgb(var(--blue-primary));
        color: #fff;
        font-weight: 600;
        transform: translateY(-150%);
        transition: transform 0.15s;
    }
    html.theme-v2 .v2-skip:focus {
        transform: translateY(0);
    }

    /* ── Menu latéral ───────────────────────────────────────────────────────── */
    html.theme-v2 .v2-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 30;
        width: var(--v2-sidebar-w);
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem 0.75rem;
        background: rgb(var(--background-primary));
        border-right: 1px solid var(--v2-border);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    html.theme-v2 .v2-sidebar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0 0.25rem 0.25rem;
    }
    html.theme-v2 .v2-brand {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        color: rgb(var(--text-primary));
        font-weight: 700;
        font-size: 1.15rem;
        text-decoration: none;
    }
    html.theme-v2 .v2-brand img {
        width: 36px;
        height: 36px;
        object-fit: contain;
    }

    /* Recherche */
    html.theme-v2 .v2-search {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        width: 100%;
        min-height: 44px;
        padding: 0.5rem 0.85rem;
        border: 1px solid var(--v2-border);
        border-radius: var(--v2-radius);
        background: rgba(var(--background-secondary), 1);
        color: rgb(var(--text-secondary));
        font-size: 0.95rem;
        text-align: left;
    }
    html.theme-v2 .v2-search:hover {
        border-color: rgb(var(--blue-primary));
        color: rgb(var(--text-primary));
    }

    /* Navigation */
    html.theme-v2 .v2-nav {
        flex: 1;
    }
    html.theme-v2 .v2-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    html.theme-v2 .v2-nav-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    html.theme-v2 .v2-nav-group {
        margin-top: 0.85rem;
    }
    html.theme-v2 .v2-nav-heading {
        margin: 0 0 0.25rem;
        padding: 0 0.85rem;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: rgb(var(--text-secondary));
    }
    html.theme-v2 .v2-nav-group ul {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    html.theme-v2 .v2-nav-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-height: 44px;
        padding: 0.5rem 0.85rem;
        border-radius: var(--v2-radius);
        color: rgb(var(--text-primary));
        font-size: 0.975rem;
        font-weight: 500;
        text-decoration: none;
        transition: background 0.12s, color 0.12s;
    }
    html.theme-v2 .v2-nav-link:hover {
        background: var(--v2-hover);
    }
    html.theme-v2 .v2-nav-link.is-active {
        background: var(--v2-active-bg);
        color: rgb(var(--blue-primary));
        font-weight: 700;
    }
    html.theme-v2 .v2-nav-link.is-active::before {
        content: "";
        position: absolute;
        left: -0.75rem;
        top: 8px;
        bottom: 8px;
        width: 4px;
        border-radius: 0 4px 4px 0;
        background: rgb(var(--blue-primary));
    }
    html.theme-v2 .v2-nav-icon {
        display: inline-flex;
        width: 20px;
        justify-content: center;
        color: rgb(var(--text-secondary));
    }
    html.theme-v2 .v2-nav-link.is-active .v2-nav-icon {
        color: rgb(var(--blue-primary));
    }

    /* Pied du menu */
    html.theme-v2 .v2-sidebar-foot {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--v2-border);
    }
    html.theme-v2 .v2-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        border-radius: var(--v2-radius);
        border: 1px solid var(--v2-border);
        color: rgb(var(--text-primary));
        font-weight: 600;
        text-decoration: none;
    }
    html.theme-v2 .v2-btn:hover {
        background: var(--v2-hover);
    }
    html.theme-v2 .v2-btn-primary {
        background: rgb(var(--blue-primary));
        border-color: rgb(var(--blue-primary));
        color: #fff;
    }
    html.theme-v2 .v2-btn-primary:hover {
        background: rgb(var(--blue-dark, var(--blue-primary)));
        color: #fff;
    }
    /* Compte (menu vers le haut) et notifications, en bas du menu latéral */
    html.theme-v2 .v2-user-row {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    html.theme-v2 .v2-account {
        flex: 1;
        min-width: 0;
    }
    html.theme-v2 .v2-account-btn {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        width: 100%;
        min-height: 52px;
        padding: 0.4rem 0.6rem;
        border: 0;
        border-radius: var(--v2-radius);
        background: transparent;
        color: rgb(var(--text-primary));
        text-align: left;
    }
    html.theme-v2 .v2-account-btn:hover,
    html.theme-v2 .v2-account-btn[aria-expanded="true"] {
        background: var(--v2-hover);
    }
    html.theme-v2 .v2-account-avatar {
        display: inline-flex;
        flex: 0 0 auto;
    }
    html.theme-v2 .v2-account-avatar img,
    html.theme-v2 .v2-account-avatar svg {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
    }
    html.theme-v2 .v2-account-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.25;
    }
    html.theme-v2 .v2-account-name {
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    html.theme-v2 .v2-account-sub {
        font-size: 0.8rem;
        color: rgb(var(--text-secondary));
    }
    html.theme-v2 .v2-account-menu {
        min-width: 248px;
        padding: 0.4rem;
        border: 1px solid var(--v2-border);
        border-radius: var(--v2-radius);
        background: rgb(var(--background-primary));
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
    }
    html.theme-v2 .v2-account-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        min-height: 40px;
        border-radius: 8px;
        color: rgb(var(--text-primary));
    }
    html.theme-v2 .v2-account-menu .dropdown-item:hover,
    html.theme-v2 .v2-account-menu .dropdown-item:focus-visible {
        background: var(--v2-hover);
    }
    html.theme-v2 .v2-account-menu .dropdown-header {
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: rgb(var(--text-secondary));
        padding: 0.35rem 0.6rem;
        margin: 0;
    }
    html.theme-v2 .v2-theme-choices {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
        gap: 0.35rem;
        padding: 0 0.35rem 0.35rem;
    }
    html.theme-v2 .v2-theme-choice {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 40px;
        padding: 0.35rem 0.6rem;
        border: 1px solid var(--v2-border);
        border-radius: 8px;
        background: transparent;
        color: rgb(var(--text-primary));
        font-size: 0.9rem;
    }
    html.theme-v2 .v2-theme-choice[aria-checked="true"] {
        border-color: rgb(var(--blue-primary));
        background: var(--v2-active-bg);
        color: rgb(var(--blue-primary));
        font-weight: 700;
    }
    html.theme-v2 .v2-theme-swatch {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 1px solid rgba(0, 0, 0, 0.25);
        background: #fff;
    }
    html.theme-v2 .v2-theme-swatch-sombre {
        background: #1d2430;
    }
    html.theme-v2 .v2-classic-item {
        font-size: 0.9rem;
        color: rgb(var(--text-secondary)) !important;
    }
    html.theme-v2 .v2-notif-slot {
        display: flex;
        flex: 0 0 auto;
    }
    html.theme-v2 .v2-notif-slot .iconNotif {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: var(--v2-radius);
        color: rgb(var(--text-primary));
    }
    html.theme-v2 .v2-notif-slot .iconNotif:hover {
        background: var(--v2-hover);
    }

    /* ── Barre du haut : supprimée, tout est dans le menu latéral ─────────── */
    html.theme-v2 .navbar-container,
    html.theme-v2 .sub-menu {
        display: none !important;
    }

    /* ── Contenu décalé du menu ─────────────────────────────────────────────── */
    /* Seulement si la page affiche le menu latéral : les pages sans en-tête ni pied
       de page (inscription, connexion, bienvenue…) gardent leur contenu centré.
       La classe v2-with-sidebar est posée par sidebar_v2.php. */
    html.theme-v2.v2-with-sidebar body {
        padding-left: var(--v2-sidebar-w);
    }
}

@media (prefers-reduced-motion: reduce) {
    html.theme-v2 .v2-sidebar,
    html.theme-v2 .v2-nav-link,
    html.theme-v2 .v2-skip {
        transition: none;
    }
}

/* Cloche dans le menu latéral : pas de flèche de menu déroulant à côté de l'icône */
html.theme-v2 .v2-notif-slot .dropdown-toggle::after {
    display: none;
}