/* =============================================================
   AM-LOGS — BARRE LATÉRALE
   Copie fidèle du rail d'AMcharge (premium-layout.css) : même
   largeur, mêmes couleurs, même dépliage au survol, mêmes
   flyouts. Seule l'APPARENCE est commune — le menu, lui, est
   celui d'AM-LOGS, et AMcharge garde le sien.

   VOLONTAIREMENT AUTONOME : aucune variable d'AMcharge n'est
   supposée présente, tout est redéfini ici. Si le rail d'AMcharge
   évolue, reporter le changement ici — les deux fichiers doivent
   rester jumeaux.
   ============================================================= */

:root {
    --sidebar-w-collapsed: 68px;
    --sidebar-w-expanded: 240px;
    --sidebar-bg: linear-gradient(180deg, #0f1226 0%, #141838 55%, #181c3f 100%);
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --sidebar-item-color: rgba(255, 255, 255, 0.66);
    --sidebar-item-hover: rgba(255, 255, 255, 0.10);
    --sidebar-item-active: rgba(255, 255, 255, 0.14);

    /* Repris d'AMcharge (premium.css) pour que les flyouts soient identiques. */
    --suite-t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --suite-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
    --suite-brand-50: #eef0ff;
    --suite-brand-400: #828cf5;
    --suite-brand-500: #667eea;
    --suite-brand-700: #4f5fc7;
    --suite-accent-500: #8b5cf6;
    --suite-surface-card: #ffffff;
    --suite-text-base: #1e293b;
    --suite-border-base: #e5e7eb;
    --suite-border-soft: #eef0f4;
    --suite-shadow-xl: 0 20px 35px -12px rgba(15, 23, 42, 0.18), 0 8px 16px -8px rgba(15, 23, 42, 0.08);
}

/* L'ancienne barre du haut disparaît au profit du rail. */
.top-nav { display: none !important; }

/* Le contenu se décale de la largeur du rail — seulement quand il y a un rail : l'écran de
   connexion n'en a pas, il ne doit pas être décalé de 68 px pour rien. */
body.has-sidebar { padding-left: var(--sidebar-w-collapsed); transition: padding-left 240ms var(--suite-easing-out); }
html.sidebar-pinned body.has-sidebar { padding-left: var(--sidebar-w-expanded); }

.app-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w-collapsed);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow: visible;
    transition: width 240ms var(--suite-easing-out);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 8px 0 28px -18px rgba(15, 23, 42, 0.55);
}
.app-sidebar:hover,
html.sidebar-pinned .app-sidebar { width: var(--sidebar-w-expanded); }

/* ---- En-tête : logo + épingle ---- */
.app-sidebar .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 14px 14px;
    min-height: 62px;
    border-bottom: 1px solid var(--sidebar-border);
    gap: 10px;
}
.app-sidebar .sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
}
.app-sidebar .sidebar-logo:hover { opacity: 0.85; }
.app-sidebar .sidebar-logo .sidebar-logo-img {
    width: 32px;
    height: 32px;
    min-width: 32px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(165, 180, 252, 0.35));
}
/* Le label du logo reste blanc, sans animation d'opacité (sinon clignotement
   à la fermeture du rail) : il est simplement masqué par overflow:hidden. */
.app-sidebar .sidebar-logo .sidebar-label {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    color: #fff;
}

.app-sidebar .sidebar-label {
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 180ms var(--suite-easing-out) 60ms, transform 180ms var(--suite-easing-out) 60ms;
}
.app-sidebar:hover .sidebar-label,
html.sidebar-pinned .sidebar-label { opacity: 1; transform: translateX(0); }

.app-sidebar .sidebar-pin {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.70);
    width: 30px; height: 30px;
    border-radius: 8px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all var(--suite-t-fast);
    font-size: 0.8em;
}
.app-sidebar:hover .sidebar-pin,
html.sidebar-pinned .sidebar-pin { display: inline-flex; }
.app-sidebar .sidebar-pin:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
html.sidebar-pinned .sidebar-pin { color: #a5b4fc; border-color: rgba(165, 180, 252, 0.4); background: rgba(165, 180, 252, 0.12); }

/* ---- Navigation ---- */
.sidebar-nav {
    flex: 1;
    overflow: visible;   /* CRUCIAL : laisse les flyouts sortir du rail */
    padding: 8px 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    color: var(--sidebar-item-color);
    border-radius: 10px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.88em;
    font-family: inherit;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background var(--suite-t-fast), color var(--suite-t-fast);
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    width: 100%;
    /* Les entrées à sous-menu sont des <button> : sans cela le navigateur centre leur libellé. */
    text-align: left;
}
.sidebar-item .sidebar-chevron {
    margin-left: auto;
    font-size: 0.75em;
    opacity: 0;
    transition: opacity 180ms var(--suite-easing-out) 60ms, transform var(--suite-t-fast);
    color: rgba(255, 255, 255, 0.40);
}
.app-sidebar:hover .sidebar-chevron,
html.sidebar-pinned .sidebar-chevron { opacity: 1; }
.sidebar-item > i:first-child {
    min-width: 22px;
    text-align: center;
    font-size: 1em;
    color: rgba(255, 255, 255, 0.80);
}
.sidebar-item .sidebar-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-item:hover { background: var(--sidebar-item-hover); color: #fff; }
.sidebar-item.active,
.nav-dropdown.active .sidebar-item {
    background: var(--sidebar-item-active);
    color: #fff;
}
.sidebar-item.active::before,
.nav-dropdown.active > .sidebar-item::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    background: linear-gradient(180deg, var(--suite-brand-400), var(--suite-accent-500));
    border-radius: 0 3px 3px 0;
}

/* ---- Flyouts (menus déroulants du rail) ---- */
.app-sidebar .nav-dropdown { position: relative; display: block; }
.app-sidebar .nav-dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
    right: auto;
    margin-left: 6px;
    min-width: 240px;
    background: var(--suite-surface-card);
    color: var(--suite-text-base);
    border: 1px solid var(--suite-border-base);
    border-radius: 12px;
    box-shadow: var(--suite-shadow-xl), 0 0 0 1px rgba(15, 23, 42, 0.04);
    padding: 6px;
    display: none;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 160ms var(--suite-easing-out), transform 160ms var(--suite-easing-out);
    z-index: 1100;
    /* ⚠️ site.css (styles de l'ANCIENNE barre du haut) pose « animation: dropdownFadeIn » sur
       TOUS les .nav-dropdown-menu. Une animation l'emporte sur les déclarations normales tant
       qu'elle tourne : le flyout du rail repartait donc de opacity:0 à chaque réaffichage —
       et il en survient un à chaque mesure de largeur du rail. D'où le clignotement des
       sous-menus. Ici, le rail n'anime que par ses transitions. */
    animation: none;
}
/* Pont invisible : traverse l'espace entre le rail et le menu sans perdre le survol. */
.app-sidebar .nav-dropdown-menu::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 0;
    width: 10px;
    height: 100%;
}
.app-sidebar .nav-dropdown:hover > .nav-dropdown-menu,
.app-sidebar .nav-dropdown:focus-within > .nav-dropdown-menu,
.app-sidebar .nav-dropdown.open > .nav-dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateX(0);
}
.app-sidebar .nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    color: var(--suite-text-base);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.88em;
    font-weight: 500;
    transition: background var(--suite-t-fast), color var(--suite-t-fast), transform var(--suite-t-fast);
}
.app-sidebar .nav-dropdown-item:hover {
    background: var(--suite-brand-50);
    color: var(--suite-brand-700);
    transform: translateX(2px);
}
.app-sidebar .nav-dropdown-item i {
    color: var(--suite-brand-500);
    min-width: 18px;
    text-align: center;
}
.app-sidebar .nav-dropdown-separator { background: var(--suite-border-soft); margin: 4px 8px; height: 1px; }

/* ============ MESURE DE LA LARGEUR DÉPLIÉE ============
   Jumeau de la mesure d'AMcharge (premium-layout.css + premium.js) : la barre est dépliée à la
   largeur exacte de son contenu le temps d'une lecture synchrone, hors écran, puis repliée —
   aucun libellé tronqué, aucun clignotement. */
.app-sidebar.am-mesure-largeur {
    width: max-content !important;
    max-width: none !important;
    transition: none !important;
    visibility: hidden;
    left: -9999px;
}
.app-sidebar.am-mesure-largeur .sidebar-item { width: max-content; overflow: visible; }
.app-sidebar.am-mesure-largeur .sidebar-label {
    opacity: 1 !important;
    transform: none !important;
    flex: 0 0 auto;
    overflow: visible;
    text-overflow: clip;
}
.app-sidebar.am-mesure-largeur .sidebar-chevron,
.app-sidebar.am-mesure-largeur .admin-badge { opacity: 1 !important; }
/* Les pastilles sont collées à droite par margin-left:auto : pendant la mesure elles suivent le
   texte, sinon elles ne compteraient pas dans la largeur réclamée. */
.app-sidebar.am-mesure-largeur .nav-badge-alerte { margin-left: 10px !important; }
.app-sidebar.am-mesure-largeur .nav-dropdown-menu { display: none !important; }

/* Sortie vers AMcharge : détachée du menu par un filet, elle ne mène pas à une page d'AM-LOGS. */
.app-sidebar .sidebar-retour { color: rgba(165, 180, 252, 0.95); }
.app-sidebar .sidebar-retour > i:first-child { color: #a5b4fc; }
.app-sidebar .sidebar-retour:hover { background: rgba(165, 180, 252, 0.14); color: #fff; }
.app-sidebar .sidebar-separator { height: 1px; background: var(--sidebar-border); margin: 8px 6px; }

/* Page en cours dans un flyout (Administration → Clients / Utilisateurs). */
.app-sidebar .nav-dropdown-item.is-current {
    background: var(--suite-brand-50);
    color: var(--suite-brand-700);
    font-weight: 700;
}

/* Pastilles rendues par le ViewComponent (classe Bootstrap .badge + .nav-badge-alerte). */
.app-sidebar .sidebar-item .nav-badge-alerte { margin-left: auto; font-size: 0.7em; }
.app-sidebar .nav-dropdown-item .nav-badge-alerte { margin-left: 8px; font-size: 0.65em; }

/* ---- Pied : utilisateur, mot de passe, déconnexion ---- */
.sidebar-footer {
    margin-top: auto;
    padding: 10px 10px 14px;
    border-top: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-footer .admin-badge {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    box-shadow: 0 2px 8px -2px rgba(245, 158, 11, 0.55);
    color: #fff;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 180ms;
}
.app-sidebar:hover .admin-badge,
html.sidebar-pinned .admin-badge { opacity: 1; }
.sidebar-footer form { width: 100%; margin: 0; }
.sidebar-footer form button { width: 100%; }
.sidebar-footer .logout-btn:hover { color: #e74c3c; }

/* ---- Pastilles (interfaces en alerte) ---- */
.app-sidebar .nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: auto;
    background: #dc3545;
    color: #fff;
    border-radius: 9px;
    font-size: 0.7em;
    font-weight: 700;
    line-height: 1;
}
.app-sidebar .nav-badge i { font-size: .85em; margin-right: 2px; }
.app-sidebar .nav-dropdown-item .nav-badge {
    margin-left: 8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.65em;
}

/* ---- Mobile : le rail se rétracte complètement ---- */
@media (max-width: 768px) {
    body.has-sidebar { padding-left: 0; }
    .app-sidebar {
        width: var(--sidebar-w-expanded);
        transform: translateX(-100%);
        transition: transform 240ms var(--suite-easing-out);
    }
    html.mobile-sidebar-open .app-sidebar { transform: translateX(0); }

    .sidebar-mobile-toggle {
        position: fixed;
        top: 12px; left: 12px;
        z-index: 1001;
        width: 40px; height: 40px;
        border-radius: 10px;
        border: none;
        background: #141838;
        color: #fff;
        cursor: pointer;
    }
}
.sidebar-mobile-toggle { display: none; }
@media (max-width: 768px) { .sidebar-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; } }