/* =========================================================
   Océane — Layout CSS
   Sidebar, header, grilles, structure des pages
   ========================================================= */

/* ===== App Container ===== */
.app {
    display: flex;
    min-height: 100vh;
}

/* ===== Sidebar ===== */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    max-height: 100vh;
    background: var(--gradient-sidebar);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-sticky);
    transition: width var(--transition-base);
}

.sidebar-header {
    padding: var(--space-5) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--header-height);
}
.sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
}
.sidebar-logo .logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    background: var(--gradient-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-bg-deep);
    flex-shrink: 0;
}
.sidebar-logo .logo-text {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.03em;
}

.sidebar-nav {
    flex: 1;
    padding: var(--space-4) var(--space-3);
    overflow-y: auto;
}
.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}
.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(0, 229, 255, 0.2);
    border-radius: var(--radius-full);
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 229, 255, 0.4);
}
.nav-section-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    padding: var(--space-4) var(--space-3) var(--space-2);
}
.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    margin-bottom: var(--space-1);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
    position: relative;
}
.nav-item:hover {
    color: var(--color-text-primary);
    background: rgba(0, 229, 255, 0.05);
}
.nav-item.active {
    color: var(--color-accent-cyan);
    background: rgba(0, 229, 255, 0.1);
}
.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--color-accent-cyan);
    border-radius: var(--radius-full);
}
.nav-item .nav-icon {
    font-size: var(--text-lg);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.nav-item .nav-badge {
    margin-left: auto;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: var(--weight-bold);
    background: var(--color-accent-red);
    color: white;
    border-radius: var(--radius-full);
}

.sidebar-footer {
    padding: var(--space-4) var(--space-3);
    border-top: 1px solid var(--color-border);
}
.sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}
.sidebar-user:hover {
    background: rgba(255, 255, 255, 0.03);
}
.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--color-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-accent-cyan);
    border: 2px solid var(--color-border);
    flex-shrink: 0;
}
.user-info {
    flex: 1;
    min-width: 0;
}
.user-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-role {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ===== Main Content ===== */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    position: relative;
}

/* ===== Page Header ===== */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6) var(--space-8);
    border-bottom: 1px solid var(--color-border);
    background: rgba(10, 17, 40, 0.5);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}
.page-title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
}
.page-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
}
.page-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* ===== Page Body ===== */
.page-body {
    padding: var(--space-8);
}

/* ===== Grid Layouts ===== */
.grid {
    display: grid;
    gap: var(--space-6);
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

/* Stats grid: responsive */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
}

/* ===== Login Page Layout ===== */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.auth-page-content {
    position: relative;
    z-index: var(--z-base);
    width: 100%;
    display: flex;
    justify-content: center;
}
.auth-container {
    width: 100%;
    max-width: 440px;
    z-index: var(--z-base);
    margin: 0 auto;
    padding: var(--space-4);
}
.auth-card {
    background: var(--gradient-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-lg);
    animation: fadeInUp 0.6s ease-out;
}
.auth-logo {
    text-align: center;
    margin-bottom: var(--space-8);
}
.auth-logo h1 {
    font-size: var(--text-4xl);
    font-weight: var(--weight-extrabold);
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-2);
}
.auth-logo p {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}
.auth-footer {
    text-align: center;
    margin-top: var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.auth-footer a {
    color: var(--color-accent-cyan);
    font-weight: var(--weight-medium);
}

/* ===== Sidebar rétractable (mode icônes, desktop) =====
   Le repli redéfinit --sidebar-width sur .app : la sidebar et la marge du
   contenu principal suivent alors automatiquement, sans règle dédiée. */
.sidebar-collapse-toggle {
    margin-left: auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.sidebar-collapse-toggle:hover {
    color: var(--color-accent-cyan);
    border-color: var(--color-accent-cyan);
}

.app.sidebar-collapsed {
    --sidebar-width: 72px;
}
/* La redéfinition de la variable ci-dessus ne suffit pas partout : plusieurs
   moteurs (WebKit notamment) ne réévaluent pas `width: var(--x)` quand `--x`
   change sur un ancêtre alors qu'une transition porte sur cette même propriété.
   Le menu restait alors déplié selon le navigateur. Ces deux règles posent la
   largeur en dur et ne dépendent plus de la cascade des variables. */
.app.sidebar-collapsed > .sidebar {
    width: 72px;
}
.app.sidebar-collapsed > .main-content {
    margin-left: 72px;
}
.app.sidebar-collapsed .sidebar-header {
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-2);
}
.app.sidebar-collapsed .sidebar-logo {
    justify-content: center;
}
.app.sidebar-collapsed .sidebar-collapse-toggle {
    margin-left: 0;
}
.app.sidebar-collapsed .logo-text,
.app.sidebar-collapsed .nav-label,
.app.sidebar-collapsed .user-info {
    display: none;
}
.app.sidebar-collapsed .sidebar-nav {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}
.app.sidebar-collapsed .nav-item {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
}
/* Les intertitres n'ont plus de place : ils deviennent un simple séparateur,
   le chevron du bloc MJ (SVG) restant cliquable pour le déplier. */
.app.sidebar-collapsed .nav-section-title {
    font-size: 0;
    justify-content: center;
    padding: var(--space-3) 0 var(--space-2);
    margin-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}
.app.sidebar-collapsed .sidebar-footer {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}
.app.sidebar-collapsed .sidebar-user {
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}

/* ===== Bouton hamburger + voile (mobile) ===== */
.sidebar-toggle {
    display: none; /* visible uniquement sous 768px */
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: calc(var(--z-sticky) + 2);
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    background: rgba(10, 16, 30, 0.92);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    color: var(--color-accent-cyan, #00e5ff);
    cursor: pointer;
}
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-sticky);
    background: rgba(0, 0, 0, 0.55);
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-5, .grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    /* Sous 768px la sidebar est un tiroir : le mode icônes n'a pas de sens,
       le repli est donc neutralisé et son bouton masqué. */
    .app.sidebar-collapsed {
        --sidebar-width: 260px;
    }
    /* Neutralise les largeurs en dur du mode icônes : sous 768px la sidebar
       redevient un tiroir pleine largeur. */
    .app.sidebar-collapsed > .sidebar {
        width: 260px;
    }
    .app.sidebar-collapsed > .main-content {
        margin-left: 0;
    }
    .sidebar-collapse-toggle {
        display: none;
    }
    .app.sidebar-collapsed .sidebar-header {
        flex-direction: row;
        padding: var(--space-5) var(--space-5);
    }
    .app.sidebar-collapsed .logo-text,
    .app.sidebar-collapsed .nav-label,
    .app.sidebar-collapsed .user-info {
        display: revert;
    }
    .app.sidebar-collapsed .nav-item {
        justify-content: flex-start;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-3);
    }
    .app.sidebar-collapsed .nav-section-title {
        font-size: var(--text-xs);
        justify-content: flex-start;
        padding: var(--space-4) var(--space-3) var(--space-2);
        margin-top: 0;
        border-top: none;
    }
    .app.sidebar-collapsed .sidebar-user {
        flex-direction: row;
        padding: var(--space-3);
    }
    .sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        z-index: calc(var(--z-sticky) + 1); /* au-dessus du voile */
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .sidebar-toggle {
        display: flex;
    }
    .sidebar-backdrop {
        display: block;
    }
    .main-content {
        margin-left: 0;
    }
    .page-header {
        padding: var(--space-4) var(--space-5);
    }
    .page-body {
        padding: var(--space-4) var(--space-4);
        padding-top: calc(42px + 20px); /* laisser la place au bouton hamburger */
    }
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ===== Starfield & SF Animations from Handoff Mockup ===== */
@keyframes ocStar {
    from { background-position: 0 0, 0 0, 0 0; }
    to { background-position: 0 -680px, 0 -420px, 0 -900px; }
}
@keyframes ocUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ocPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.oc-row {
    animation: ocUp 0.5s ease-out both;
}
.oc-d1 { animation-delay: 0.05s; }
.oc-d2 { animation-delay: 0.1s; }
.oc-d3 { animation-delay: 0.16s; }
.oc-d4 { animation-delay: 0.22s; }
.oc-d5 { animation-delay: 0.28s; }