/* ═══════════════════════════════════════════════════════════════
   [Responsive] VARIABLES CSS - Navigation
   NautiSphere - Responsive Sidebar Navigation
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Dimensions */
    --sidebar-width: 280px;
    /* --sidebar-collapsed-width retirée : elle ne servait qu'au rail 72px
       de la plage 768-1023, supprimée au profit du drawer. */
    --mobile-header-height: 64px;

    /* Transitions */
    --nav-transition-speed: 300ms;
    --nav-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* Couleurs (cohérentes avec le thème gradient existant) */
    --nav-bg: #001e57;
    --nav-bg-gradient: linear-gradient(135deg, #001e57 0%, #00b9d1 100%);
    --nav-border: rgba(255, 255, 255, 0.1);
    --nav-item-hover: rgba(0, 185, 209, 0.1);
    --nav-item-active-bg: rgba(0, 185, 209, 0.15);
    --nav-text: rgba(255, 255, 255, 0.85);
    --nav-text-hover: #ffffff;
    --nav-text-active: #ffffff;
    --nav-icon: rgba(255, 255, 255, 0.7);
    --nav-icon-active: #00b9d1;
    --nav-overlay: rgba(0, 0, 0, 0.6);
    --nav-accent: #00b9d1;
}

/* ═══════════════════════════════════════════════════════════════
   [Responsive] HEADER MOBILE
   ═══════════════════════════════════════════════════════════════ */

.mobile-header {
    display: none; /* Caché par défaut (desktop) */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mobile-header-height);
    background: var(--nav-bg-gradient);
    border-bottom: 1px solid var(--nav-border);
    z-index: 40;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
}

/* Bouton Hamburger */
.hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--nav-transition-speed);
}

.hamburger-btn:hover {
    background: var(--nav-item-hover);
}

.hamburger-line {
    display: block;
    width: 20px;
    height: 2px;
    background: white;
    border-radius: 1px;
    transition: transform var(--nav-transition-speed) var(--nav-transition-easing),
                opacity var(--nav-transition-speed);
    transform-origin: center;
}

/* Animation hamburger → X */
.hamburger-btn.is-active .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger-btn.is-active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger-btn.is-active .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Logo mobile */
.mobile-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-logo-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.mobile-logo-text {
    font-size: 14px;
    font-weight: 600;
    color: white;
}

/* Actions mobile */
.mobile-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mobile-action-btn {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: background var(--nav-transition-speed), color var(--nav-transition-speed);
}

.mobile-action-btn:hover {
    background: var(--nav-item-hover);
}

.notification-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
}

/* ═══════════════════════════════════════════════════════════════
   [Responsive] OVERLAY
   ═══════════════════════════════════════════════════════════════ */

.sidebar-overlay {
    display: none; /* Caché par défaut */
    position: fixed;
    inset: 0;
    background: var(--nav-overlay);
    backdrop-filter: blur(2px);
    z-index: 45;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--nav-transition-speed),
                visibility var(--nav-transition-speed);
}

.sidebar-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* ═══════════════════════════════════════════════════════════════
   [Responsive] SIDEBAR
   ═══════════════════════════════════════════════════════════════ */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh; /* Pour mobile avec barre d'adresse dynamique */
    width: var(--sidebar-width);
    background: var(--nav-bg-gradient);
    border-right: 1px solid var(--nav-border);
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform var(--nav-transition-speed) var(--nav-transition-easing),
                width var(--nav-transition-speed) var(--nav-transition-easing);
}

/* Scrollbar custom */
.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   [Responsive] SIDEBAR HEADER (Logo)
   ═══════════════════════════════════════════════════════════════ */

.sidebar-header {
    padding: 24px;
    border-bottom: 1px solid var(--nav-border);
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-logo-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sidebar-logo-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.sidebar-logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════
   [Brand-Mark] CARRÉ DE MARQUE — identité visuelle commune aux portails

   Reprend le carré dégradé de nexus-sphere.html (`.logo-icon`, défini dans
   css/marketplace-responsive.css). N'écrase QUE le fond, le rayon et la
   typographie de la lettre : la géométrie 48px, le centrage flex et
   l'overflow viennent de `.sidebar-logo-icon` ci-dessus, qui les déclare
   déjà. Aucune taille n'est réécrite ici.

   ── VALEURS FIGÉES, ET C'EST ASSUMÉ ─────────────────────────────
   Sur sphere, ces valeurs viennent de --navbar-logo-gradient-from/-to et
   --navbar-logo-radius, posées par js/navbar-config.js depuis
   nexus_design_config. Ce fichier N'EST PAS chargé par nexus-pro.html ni
   nexus-business.html, et ne doit pas l'être : leur #sidebar-logo-container
   est déjà écrit par leur propre writer, et un second writer produirait une
   désynchronisation dépendant de l'ordre des chargements asynchrones — le
   motif corrigé en 13d642d.

   Les valeurs ci-dessous sont donc les défauts résolus de sphere, écrits en
   dur. Changer le dégradé dans le panneau sphere ne propagera pas ici. Choix
   assumé, consigné dans NOTES.md.

   ── PORTÉE ──────────────────────────────────────────────────────
   Classe nouvelle, portée uniquement par le markup de nexus-pro.html et
   nexus-business.html. Cette feuille est aussi chargée par
   nexus-network.html, qui ne porte ni .sidebar-logo-icon ni .sidebar-logo
   (vérifié — zéro occurrence) : la règle y est structurellement inerte.
   ═══════════════════════════════════════════════════════════════ */

.nexus-brand-square {
    background: linear-gradient(135deg, #06b6d4, #2563eb);
    border-radius: 8px;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
                0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Logo image configuré : le writer pose .has-logo-image, et css/logo-fix.css
   neutralise alors le fond. Mais rien n'y masque la LETTRE, qui se
   superposerait au PNG. On la retire ici plutôt que par un style inline dans
   le writer : l'état est décrit par la classe, il ne peut pas se
   désynchroniser — et il n'y a pas de display à penser à remettre le jour où
   le logo est retiré. Un geste du writer, deux effets déclaratifs. */
.nexus-brand-square.has-logo-image > span {
    display: none;
}

/* Et le conteneur n'impose plus sa forme. C'est la philosophie déclarée en
   tête de css/logo-fix.css — « le conteneur est transparent et n'impose AUCUNE
   forme, c'est le fichier PNG qui détermine si le logo est rond ou carré » —
   mais cette feuille ne remet le rayon à zéro que sur l'<img>, pas sur le
   conteneur. Combiné à l'`overflow: hidden` de .sidebar-logo-icon, le rayon de
   8px rognait les coins d'un logo remplissant la boîte. */
.nexus-brand-square.has-logo-image {
    border-radius: 0;
}

.sidebar-logo-text {
    flex: 1;
    min-width: 0;
    transition: opacity var(--nav-transition-speed);
}

.sidebar-title {
    font-size: 20px;
    font-weight: 700;
    color: white;
    margin: 0;
    white-space: nowrap;
}

.sidebar-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   [Responsive] MENU NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

.sidebar-nav {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════
   [Responsive] MENU ITEMS
   ═══════════════════════════════════════════════════════════════ */

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 4px;
    color: var(--nav-text);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    min-height: 44px;
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
}

.menu-item:hover {
    background: var(--nav-item-hover);
    color: var(--nav-text-hover);
    transform: translateX(5px);
}

.menu-item:hover .menu-icon {
    color: var(--nav-text-hover);
}

.menu-item.is-active,
.menu-item.active,
.menu-item.sidebar-link.active {
    background: var(--nav-item-active-bg);
    color: var(--nav-text-active);
    border-left-color: var(--nav-accent);
}

.menu-item.is-active .menu-icon,
.menu-item.active .menu-icon,
.menu-item.sidebar-link.active .menu-icon {
    color: var(--nav-icon-active);
}

.menu-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--nav-icon);
    transition: color 150ms ease;
}

.menu-label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--nav-transition-speed);
}

/* Section divider */
.menu-divider {
    height: 1px;
    background: var(--nav-border);
    margin: 16px 0;
    transition: opacity var(--nav-transition-speed);
}

/* Section title */
.menu-section-title {
    padding: 20px 16px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    transition: opacity var(--nav-transition-speed);
}

/* Badges */
.menu-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    padding: 2px 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: opacity var(--nav-transition-speed);
    margin-left: auto;
}

.menu-badge-pro {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.menu-badge-notif {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   [Responsive] SIDEBAR FOOTER (User Profile)
   ═══════════════════════════════════════════════════════════════ */

.sidebar-footer {
    margin-top: auto;
    padding: 16px;
    border-top: 1px solid var(--nav-border);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 150ms ease;
}

.user-profile:hover {
    background: var(--nav-item-hover);
}

.user-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-info {
    flex: 1;
    min-width: 0;
    transition: opacity var(--nav-transition-speed);
}

.user-name {
    font-size: 14px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.user-email {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.user-chevron {
    color: rgba(255, 255, 255, 0.7);
    transition: opacity var(--nav-transition-speed);
}

.sidebar-version {
    padding: 8px 16px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-align: left;
    transition: opacity var(--nav-transition-speed);
}

/* ═══════════════════════════════════════════════════════════════
   [Responsive] MAIN CONTENT
   ═══════════════════════════════════════════════════════════════ */

.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    transition: margin-left var(--nav-transition-speed) var(--nav-transition-easing);
}

/* ═══════════════════════════════════════════════════════════════
   [Responsive] MEDIA QUERIES - SOUS LE SEUIL DESKTOP (< 1280px)

   DEUX RÉGIMES, ET DEUX SEULEMENT — seuil aligné sur nexus-sphere
   (css/nexus-responsive-nav.css:108) :
     >= 1280px   sidebar fixe de 280px
     <  1280px   drawer

   La plage 768-1023 avait auparavant un rail de 72px qui s'étendait au
   SURVOL. Retiré : le survol n'existe pas sur tablette tactile, ce qui
   rendait les libellés du menu inatteignables précisément là où ce rail
   était censé servir. Elle relève désormais du même régime que le mobile.

   Le seuil est déclaré en DEUX points qui doivent rester synchronisés :
   ce @media et `breakpoints.desktop` de js/reseller/navigation.js.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1279px) {
    /* Header visible */
    .mobile-header {
        display: flex;
    }

    /* Overlay disponible */
    .sidebar-overlay {
        display: block;
    }

    /* Sidebar cachée par défaut */
    .sidebar {
        transform: translateX(-100%);
        box-shadow: none;
        width: var(--sidebar-width);
    }

    /* Sidebar ouverte */
    .sidebar.is-open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
    }

    /* Main content sans margin, avec padding top pour le header */
    .main-content {
        margin-left: 0;
        padding-top: var(--mobile-header-height);
    }

    /* Override des styles Tailwind existants */
    .ml-64 {
        margin-left: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   [Responsive] MEDIA QUERIES - DESKTOP (>= 1280px)
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 1280px) {
    /* Header mobile caché */
    .mobile-header {
        display: none;
    }

    /* Sidebar toujours visible */
    .sidebar {
        transform: translateX(0);
        width: var(--sidebar-width);
    }

    /* Main content avec margin */
    .main-content {
        margin-left: var(--sidebar-width);
        padding-top: 0;
    }

    /* Override pour conserver le comportement desktop avec ml-64 Tailwind */
    .ml-64 {
        margin-left: var(--sidebar-width) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   [Responsive] USER DROPDOWN (adapté au responsive)
   ═══════════════════════════════════════════════════════════════ */

/* Note: Les styles de base de .user-dropdown sont définis dans le HTML inline.
   Ces styles améliorent uniquement les animations et la compatibilité responsive. */
.user-dropdown.show {
    display: block;
    animation: userDropdownSlideUp 0.2s ease-out;
}

@keyframes userDropdownSlideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s ease;
    min-height: 44px;
}

.user-dropdown-item:hover {
    background: #f3f4f6;
}

.user-dropdown-item.text-red-600 {
    color: #dc2626;
}

/* ═══════════════════════════════════════════════════════════════
   [Responsive] DYNAMIC MODULE LINKS CONTAINER
   ═══════════════════════════════════════════════════════════════ */

#dynamic-module-links .menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   [Responsive] ACCESSIBILITY - Focus States
   ═══════════════════════════════════════════════════════════════ */

.menu-item:focus-visible,
.hamburger-btn:focus-visible,
.mobile-action-btn:focus-visible,
.user-profile:focus-visible {
    outline: 2px solid var(--nav-accent);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   [Responsive] PRINT STYLES
   ═══════════════════════════════════════════════════════════════ */

@media print {
    .mobile-header,
    .sidebar,
    .sidebar-overlay {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding-top: 0 !important;
    }
}