/* ============================================================================
   LogiFlotte — sidebar verticale foncée (nav principale).
   HTML généré par app/Views/partials/sidebar.php.
   ============================================================================ */

.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 200;
    overflow-y: auto;
    transition: transform var(--transition);
    scrollbar-width: thin;
    scrollbar-color: #3a3170 transparent;
}

/* -- Marque en haut de la sidebar --
   Le logo complet en mode large, le seul pictogramme en mode reduit : le
   logotype tronque a 64 px serait illisible. Les deux sont dans le DOM,
   le CSS choisit. */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-brand__lien {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.sidebar-brand__lien:hover { text-decoration: none; opacity: .85; }
.sidebar-brand__reduit { display: none; }

/* -- Nav principale -- */
.sidebar-nav {
    flex: 1;
    padding: var(--space-2) 0;
    display: flex;
    flex-direction: column;
}

/* ========== Sections collapsibles (refonte) ========== */
.nav-section {
    margin: var(--space-2) 0 0;
}
.nav-section__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-5);
    background: transparent;
    border: 0;
    color: var(--sidebar-text-faible);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    text-align: left;
}
.nav-section__header:hover {
    color: var(--sidebar-text);
}
.nav-section__label {
    flex: 1;
}
.nav-section__chevron {
    font-size: 0.7rem;
    transition: transform 0.15s ease;
    opacity: 0.6;
}
.nav-section.is-collapsed .nav-section__chevron {
    transform: rotate(-90deg);
}
.nav-section__items {
    display: flex;
    flex-direction: column;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    color: var(--sidebar-text);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background var(--transition), color var(--transition);
    border-left: 3px solid transparent;
}

.nav-item:hover {
    background: var(--sidebar-bg-hover);
    color: var(--sidebar-text-active);
    text-decoration: none;
}

.nav-item.is-active {
    background: rgba(26, 86, 219, 0.18);
    color: var(--sidebar-text-active);
    border-left-color: var(--color-primary);
}

.nav-item--logout {
    margin-top: auto;
    color: #f87171;
}
.nav-item--logout:hover { color: #fca5a5; }

/* -- Variante d'avertissement (ex : "Quitter l'impersonation") -- */
.nav-item--warning {
    color: #fbbf24;
    background: rgba(217, 119, 6, 0.08);
    border-left-color: var(--color-warning);
}
.nav-item--warning:hover {
    color: #fde68a;
    background: rgba(217, 119, 6, 0.18);
}

/* -- Icônes de navigation : tailles contrôlées, jamais étirées -- */
.nav-icon,
.nav-item svg {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    flex-shrink: 0;
    opacity: 0.85;
    stroke-width: 2;
}

.nav-item.is-active .nav-icon,
.nav-item.is-active svg { opacity: 1; }

.nav-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- Pied de sidebar (version build, etc.) -- */
.sidebar-foot {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--sidebar-border);
    font-size: 0.72rem;
    color: var(--sidebar-text-faible);
    text-align: center;
}

/* -- Signature de l'éditeur --
   Discrète par construction : elle doit se lire une fois, le jour où l'on se
   demande qui édite le logiciel, et disparaître le reste du temps. Une
   mention plus voyante entrerait en concurrence avec le logo du produit,
   deux mètres au-dessus dans la même colonne. */
.sidebar-editeur {
    margin: var(--space-3) 0 0;
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--sidebar-text-faible);
}

.sidebar-editeur span { opacity: .75; }

.sidebar-editeur a {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
}

.sidebar-editeur a:hover {
    color: var(--sidebar-text, #fff);
    border-bottom-color: currentColor;
}

/* -- Backdrop (fond sombre) pour fermer la sidebar en cliquant à l'extérieur -- */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 150;
    opacity: 0;
    transition: opacity var(--transition);
}
.sidebar-backdrop.is-open {
    display: block;
    opacity: 1;
}

/* -- Responsive : sidebar slide sur mobile -- */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
        width: min(82vw, 300px);
    }
    .sidebar.is-open { transform: translateX(0); }
}

/* Sur desktop, le backdrop ne doit jamais apparaître */
@media (min-width: 769px) {
    .sidebar-backdrop { display: none !important; }
}

/* ========== Badges dynamiques sur les items de nav ========== */
.nav-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}
.nav-badge--danger  { background: var(--color-danger);  color: #fff; }
.nav-badge--warning { background: var(--color-warning); color: #fff; }
.nav-badge--success { background: var(--color-success); color: #fff; }
.nav-badge--info    { background: var(--color-info, var(--color-primary)); color: #fff; }

/* ========== Bouton recherche rapide (en haut de la nav) ========== */
.sidebar-search-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: calc(100% - var(--space-4) * 2);
    margin: var(--space-3) var(--space-4) var(--space-2);
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
    color: var(--sidebar-text);
    font-size: 0.82rem;
    cursor: pointer;
    text-align: left;
}
.sidebar-search-trigger:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--sidebar-text-fort);
}
.sidebar-search-trigger__label { flex: 1; }
.sidebar-search-trigger__kbd,
.sidebar-palette__kbd,
.sidebar-palette__footer kbd {
    background: rgba(255, 255, 255, 0.08);
    color: var(--sidebar-text);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-family: var(--font-mono, monospace);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ========== Bouton compact (réduire menu) ========== */
.sidebar-compact-toggle {
    margin-left: auto;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--sidebar-text-faible);
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidebar-compact-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--sidebar-text-fort);
}
.sidebar-compact-toggle__icon {
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.15s ease;
}
.sidebar.is-compact .sidebar-compact-toggle__icon {
    transform: rotate(180deg);
}

/* ========== Mode compact : icônes seules + tooltip natif ========== */
.sidebar.is-compact {
    width: 64px;
}
.sidebar.is-compact .sidebar-brand__large,
.sidebar.is-compact .nav-label,
.sidebar.is-compact .nav-section__header,
.sidebar.is-compact .sidebar-search-trigger__label,
.sidebar.is-compact .sidebar-search-trigger__kbd,
.sidebar.is-compact .nav-badge,
.sidebar.is-compact .sidebar-foot {
    display: none;
}
.sidebar.is-compact .sidebar-search-trigger {
    margin: var(--space-3) auto;
    padding: 8px;
    width: 40px;
    justify-content: center;
}
.sidebar.is-compact .nav-item {
    justify-content: center;
    padding: var(--space-3) 0;
}
.sidebar.is-compact .sidebar-brand {
    justify-content: center;
    padding: var(--space-4) 0;
}
.sidebar.is-compact .sidebar-compact-toggle {
    margin: 0;
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
}
/* Compense la largeur réduite côté contenu via class globale sur body */
body.has-sidebar-compact .app-shell__main,
body.has-sidebar-compact .main-content {
    margin-left: 64px !important;
}

/* ========== Palette de recherche rapide (modale ⌘K) ========== */
.sidebar-palette {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}
.sidebar-palette[hidden] { display: none; }
.sidebar-palette__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}
.sidebar-palette__panel {
    position: relative;
    width: min(560px, 92vw);
    background: var(--sidebar-bg);
    color: #e5e7eb;
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar-palette__input-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-palette__icon { color: var(--sidebar-text); }
.sidebar-palette__input {
    flex: 1;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 1rem;
    outline: none;
    padding: 4px 0;
}
.sidebar-palette__input::placeholder { color: var(--sidebar-text-faible); }
.sidebar-palette__list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 360px;
    overflow-y: auto;
}
.sidebar-palette__item {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: 10px 14px;
    cursor: pointer;
    border-left: 3px solid transparent;
}
.sidebar-palette__item:hover,
.sidebar-palette__item.is-active {
    background: rgba(255, 255, 255, 0.06);
    border-left-color: var(--color-primary);
}
.sidebar-palette__item strong {
    flex: 1;
    color: #f3f4f6;
    font-weight: 500;
    font-size: 0.92rem;
}
.sidebar-palette__item small {
    color: var(--sidebar-text);
    font-size: 0.75rem;
}
.sidebar-palette__none {
    padding: 24px;
    text-align: center;
    color: var(--sidebar-text);
    font-style: italic;
}
.sidebar-palette__footer {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    padding: 8px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--sidebar-text-faible);
    font-size: 0.7rem;
}
.sidebar-palette__footer kbd { font-size: 0.65rem; }

/* En mode reduit, le pictogramme remplace le logo complet. */
.sidebar.is-compact .sidebar-brand__reduit { display: block; }
.sidebar.is-compact .sidebar-brand__lien { justify-content: center; }