/**
 * HELIOS LAYOUT - Design System φ = 1.618
 *
 * Système de layout basé sur le Nombre d'Or.
 * Containers, Grid, Flexbox, et Spacing.
 *
 * ORDRE DE CHARGEMENT: 4/10 (après helios-core.css)
 * Dépend de: helios-golden-ratio.css (variables --space-*, --golden-major/minor)
 *
 * ARCHITECTURE:
 * 0. GLOBAL φ LAYOUT (TOUS LES MODULES)
 * 1. Containers (container-*)
 * 2. Grid System (grid-*, col-*)
 * 3. Flexbox (flex-*)
 * 4. Page Layouts (page-*, section-*)
 * 5. Header/Footer (header-*, footer-*)
 * 6. Sidebar (sidebar-*)
 * 7. Responsive Utilities
 *
 * @version 1.1.0
 * @date 2026-01-26
 */

/* ============================================================
   0. GLOBAL φ LAYOUT - Espacements automatiques TOUS MODULES
   ============================================================

   Ces règles s'appliquent AUTOMATIQUEMENT à tous les modules.
   Chaque vue aura un centrage et des espacements φ-based.

   Fibonacci: 0, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233
   ============================================================ */

/* === GLOBAL TEXT OVERFLOW PREVENTION === */
html, body {
    overflow-x: hidden;
}

/* Prevent text overflow in sidebar elements */
.sidebar-header,
.sidebar-header *,
.sidebar-brand,
.sidebar-brand *,
.nav-link,
.sidebar-link,
.sidebar-item,
.sidebar-section * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Allow wrapping in content areas */
.main-content *,
.content-area *,
.page-content *,
.module-content *,
main:not(.sidebar-main) *,
.modal-body *,
.card-body *,
.panel-body * {
    white-space: normal;
}

/* === SPECIFIC COMPONENT OVERFLOW FIXES === */
/* ALL components that need φ-compliant overflow handling.
   !important is required to override module-specific CSS. */
.kpi-card,
.kpi-label,
.kpi-value,
.ai-stats-widget,
.profile-header,
.profile-completion-fill,
.hero-benefice-card,
.hero-marge-card,
.mc-title-wrapper,
.mc-title,
.toggle-switch-unified,
.toggle-slider-unified,
.bonus-actions,
.payslip-title,
.tooltip-trigger,
.loading-animation,
.tab-content,
.product-admin-card {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Scrollable containers get auto overflow */
.table-responsive,
.bonus-table-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Bootstrap text-truncate should always truncate */
.text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Main content container - Applied to ALL modules */
.main-content,
.content-area,
.page-content,
.module-content,
main:not(.sidebar-main):not(.login-container) {
    padding: var(--space-6, 34px) var(--space-7, 55px); /* Fibonacci 34, 55 */
    margin: 0 auto;
    max-width: 1600px;
}

/* Container wrapper for centered content */
.container,
.container-fluid,
.page-wrapper {
    padding-left: var(--space-6, 34px);  /* Fibonacci 34 */
    padding-right: var(--space-6, 34px); /* Fibonacci 34 */
}

/* Page header hero - consistent spacing */
.page-header-hero {
    margin: var(--space-5, 21px) 0 var(--space-6, 34px) 0; /* Fibonacci 21, 34 */
    padding: var(--space-5, 21px) var(--space-6, 34px);     /* Fibonacci 21, 34 */
}

/* Cards and panels - φ spacing */
.card,
.glass-card,
.panel,
.box {
    padding: var(--space-5, 21px);       /* Fibonacci 21 */
    margin-bottom: var(--space-5, 21px); /* Fibonacci 21 */
}

/* Form groups spacing */
.form-group,
.mb-3,
.mb-4 {
    margin-bottom: var(--space-4, 13px); /* Fibonacci 13 */
}

/* Table cells padding */
.table th,
.table td {
    padding: var(--space-3, 8px) var(--space-4, 13px); /* Fibonacci 8, 13 */
}

/* Button groups spacing */
.btn-group,
.action-buttons,
.header-actions {
    gap: var(--space-3, 8px); /* Fibonacci 8 */
}

/* ============================================================
   0a. GLOBAL TEXT READABILITY - NO DARK TEXT ON DARK BG
   ============================================================
   RULE: ALL text on dark theme MUST be readable.
   KPI values, labels, card text = BRIGHT on DARK.
   ============================================================ */

/* KPI Cards: ensure bright text in dark theme */
.kpi-card,
.kpi-card * {
    color: rgba(255, 255, 255, 0.90); /* φ-gray-800 baseline */
}

.kpi-value,
.kpi-card .kpi-value,
.stat-value,
.stats-value,
.metric-value {
    color: rgba(255, 255, 255, 0.95) !important; /* φ-gray-900 */
    font-weight: 700;
}

.kpi-label,
.kpi-card .kpi-label,
.stat-label,
.stats-label,
.metric-label {
    color: rgba(255, 255, 255, 0.69) !important; /* φ-gray-600 */
}

/* Hero cards text readability */
.hero-benefice-card,
.hero-marge-card,
.hero-card {
    color: rgba(255, 255, 255, 0.90);
}

.hero-benefice-card .hero-value,
.hero-marge-card .hero-value,
.hero-card .hero-value {
    color: rgba(255, 255, 255, 0.95) !important;
}

.hero-benefice-card .hero-label,
.hero-marge-card .hero-label,
.hero-card .hero-label {
    color: rgba(255, 255, 255, 0.69) !important;
}

/* Generic card text */
.glass-card,
.card {
    color: rgba(255, 255, 255, 0.90);
}

.card-title,
.card-header {
    color: rgba(255, 255, 255, 0.95);
}

.card-text,
.card-body p {
    color: rgba(255, 255, 255, 0.81); /* φ-gray-700 */
}

/* Form labels in dark theme must be bright */
.form-label,
label {
    color: rgba(255, 255, 255, 0.81); /* φ-gray-700 - readable */
}

/* Stats widgets */
.ai-stats-widget,
.ai-stats-widget * {
    color: rgba(255, 255, 255, 0.90);
}

/* Light theme overrides */
body.light-theme .kpi-card,
body.light-theme .kpi-card *,
body.light-theme .hero-benefice-card,
body.light-theme .hero-marge-card,
body.light-theme .hero-card,
body.light-theme .glass-card,
body.light-theme .card {
    color: rgba(0, 0, 0, 0.87);
}

body.light-theme .kpi-value,
body.light-theme .stat-value,
body.light-theme .hero-benefice-card .hero-value,
body.light-theme .hero-marge-card .hero-value {
    color: rgba(0, 0, 0, 0.95) !important;
}

body.light-theme .kpi-label,
body.light-theme .stat-label,
body.light-theme .hero-benefice-card .hero-label,
body.light-theme .hero-marge-card .hero-label {
    color: rgba(0, 0, 0, 0.618) !important;
}

body.light-theme .form-label,
body.light-theme label {
    color: rgba(0, 0, 0, 0.69);
}

/* ============================================================
   0b. MODULE-SPECIFIC φ COMPONENT OVERRIDES
   ============================================================
   Forces φ-compliant spacing/sizing on specific module
   components that had overflow or non-Fibonacci values.

   Modules covered:
   1. Dashboard (ai-stats-widget, table-responsive)
   2. Profile (profile-header)
   3. CRA Admin (tab-content, hero-benefice-card)
   4. ATS Mission Center (mc-title-wrapper, mc-title)
   5. ATS Matching Wizard (loading-animation)
   6. Bonuses Admin (bonus-table-container, bonus-actions)
   7. Salary Evolution (payslip-title)
   8. CRM Revenue (margin fixes)
   9. Administration (toggle-switch-unified)
   10. Support (kpi-label, kpi-card)
   11. Calculator (hero-marge-card)
   ============================================================ */

/* --- 1. Dashboard: AI Stats Widget --- */
.ai-stats-widget {
    padding: var(--space-5, 21px);
    border-radius: var(--radius-lg, 13px);
    gap: var(--space-4, 13px);
    max-width: 100%;
    box-sizing: border-box;
}

.ai-stats-widget .stat-item,
.ai-stats-widget .stat-value {
    padding: var(--space-3, 8px) var(--space-4, 13px);
    font-size: var(--font-size-lg, 1.309rem);
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-responsive {
    border-radius: var(--radius-lg, 13px);
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
}

/* --- 2. Profile: Profile Header --- */
.profile-header {
    padding: var(--space-6, 34px) var(--space-7, 55px);
    gap: var(--space-5, 21px);
    border-radius: var(--radius-xl, 21px);
    max-width: 100%;
    box-sizing: border-box;
}

.profile-header .avatar,
.profile-header .profile-avatar {
    width: var(--size-89, 89px);
    height: var(--size-89, 89px);
    border-radius: 50%;
    flex-shrink: 0;
}

.profile-header .profile-name {
    font-size: var(--font-size-2xl, 2.118rem);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 3. CRA Admin: Tabs & Hero Cards --- */
.tab-content {
    padding: var(--space-5, 21px);
    border-radius: var(--radius-lg, 13px);
    overflow-x: hidden;
    max-width: 100%;
}

.hero-benefice-card,
.hero-marge-card {
    padding: var(--space-5, 21px) var(--space-6, 34px);
    border-radius: var(--radius-xl, 21px);
    gap: var(--space-4, 13px);
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.hero-benefice-card .hero-value,
.hero-marge-card .hero-value {
    font-size: var(--font-size-3xl, 3.427rem);
    line-height: var(--line-height-tight, 1.236);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-benefice-card .hero-label,
.hero-marge-card .hero-label {
    font-size: var(--font-size-sm, 0.809rem);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 4. ATS Mission Center: Title Wrapper --- */
.mc-title-wrapper {
    padding: var(--space-4, 13px) var(--space-5, 21px);
    gap: var(--space-3, 8px);
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.mc-title {
    font-size: var(--font-size-xl, 1.618rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* --- 5. ATS Matching Wizard: Loading Animation --- */
.loading-animation {
    padding: var(--space-7, 55px) var(--space-5, 21px);
    gap: var(--space-5, 21px);
    overflow: hidden;
    max-width: 100%;
    text-align: center;
}

.loading-animation .spinner,
.loading-animation .loading-spinner {
    width: var(--size-55, 55px);
    height: var(--size-55, 55px);
    margin: 0 auto;
}

/* --- 6. Bonuses Admin: Table & Actions --- */
.bonus-table-container {
    border-radius: var(--radius-lg, 13px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--space-4, 13px);
    max-width: 100%;
}

.bonus-actions {
    gap: var(--space-3, 8px);
    padding: var(--space-3, 8px) 0;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

.bonus-actions .btn {
    flex-shrink: 0;
}

/* --- 7. Salary Evolution: Payslip Title --- */
.payslip-title {
    font-size: var(--font-size-lg, 1.309rem);
    padding: var(--space-4, 13px) var(--space-5, 21px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* --- 8. CRM Revenue: Fix non-Fibonacci margins --- */
.crm-revenue-card,
.revenue-card,
.margin-card {
    margin: var(--space-3, 8px);
    padding: var(--space-5, 21px);
    border-radius: var(--radius-lg, 13px);
}

.crm-revenue-card span,
.revenue-card span,
.margin-card span {
    margin: var(--space-2, 5px) 0;
}

/* --- 9. Administration: Toggle Switch --- */
.toggle-switch-unified {
    width: var(--size-55, 55px);
    height: var(--size-34, 34px);
    border-radius: var(--size-34, 34px);
    padding: var(--space-1, 3px);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.toggle-slider-unified {
    width: var(--size-21, 21px);
    height: var(--size-21, 21px);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all var(--duration-medium, 0.34s) ease;
}

.toggle-switch-unified.active .toggle-slider-unified {
    left: calc(100% - var(--size-21, 21px) - var(--space-1, 3px));
}

/* --- 10. Support: KPI Cards & Labels --- */
.kpi-card {
    padding: var(--space-5, 21px);
    border-radius: var(--radius-xl, 21px);
    gap: var(--space-3, 8px);
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.kpi-label {
    font-size: var(--font-size-sm, 0.809rem);
    line-height: var(--line-height-relaxed, 1.618);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.kpi-value {
    font-size: var(--font-size-2xl, 2.118rem);
    font-weight: 700;
    line-height: var(--line-height-tight, 1.236);
}

/* --- 11. Calculator: Hero Marge Card --- */
/* Already covered in section 3 (hero-marge-card) */

/* ============================================================
   0c. GLOBAL φ-BASED GAP/SPACING NORMALIZATION
   ============================================================ */

/* Normalize all flex containers to use Fibonacci gaps */
.d-flex,
.flex,
[class*="flex-row"],
[class*="flex-col"] {
    gap: var(--space-3, 8px);
}

/* Cards grid layout */
.cards-grid,
.kpi-grid,
.stats-grid,
.dashboard-grid {
    gap: var(--space-5, 21px);
}

/* Responsive φ adjustments */
@media (max-width: 768px) {
    .main-content,
    .content-area,
    .page-content,
    .module-content,
    main:not(.sidebar-main):not(.login-container) {
        padding: var(--space-4, 13px) var(--space-5, 21px); /* Fibonacci 13, 21 */
    }

    .container,
    .container-fluid,
    .page-wrapper {
        padding-left: var(--space-4, 13px);  /* Fibonacci 13 */
        padding-right: var(--space-4, 13px); /* Fibonacci 13 */
    }

    .page-header-hero {
        margin: var(--space-4, 13px) 0 var(--space-5, 21px) 0;
        padding: var(--space-4, 13px) var(--space-5, 21px);
    }
}

@media (max-width: var(--size-610, 610px)) {
    .main-content,
    .content-area,
    .page-content,
    .module-content,
    main:not(.sidebar-main):not(.login-container) {
        padding: var(--space-3, 8px) var(--space-4, 13px); /* Fibonacci 8, 13 */
    }

    .container,
    .container-fluid,
    .page-wrapper {
        padding-left: var(--space-3, 8px);  /* Fibonacci 8 */
        padding-right: var(--space-3, 8px); /* Fibonacci 8 */
    }
}

/* ============================================================
   1. CONTAINERS - Containers φ-based
   ============================================================ */

.container-phi {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.container-sm-phi {
    max-width: var(--size-610, 610px);
}

.container-md-phi {
    max-width: 768px;
}

.container-lg-phi {
    max-width: 1024px;
}

.container-xl-phi {
    max-width: 1280px;
}

.container-2xl-phi {
    max-width: 1536px;
}

.container-fluid-phi {
    max-width: 100%;
}

/* Container with glass background */
.container-glass-phi {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    backdrop-filter: blur(var(--blur-md, 10px));
}

/* ============================================================
   2. GRID SYSTEM - Grid φ-based (12 colonnes)
   ============================================================ */

.grid-phi {
    display: grid;
    gap: var(--space-4);
}

/* Grid avec nombre de colonnes fixe */
.grid-cols-1-phi { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2-phi { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3-phi { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4-phi { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5-phi { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6-phi { grid-template-columns: repeat(6, 1fr); }
.grid-cols-12-phi { grid-template-columns: repeat(12, 1fr); }

/* Grid auto-fill responsive */
.grid-auto-phi {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.grid-auto-sm-phi {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.grid-auto-lg-phi {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

/* Column spans (12-column grid) */
.col-span-1-phi { grid-column: span 1; }
.col-span-2-phi { grid-column: span 2; }
.col-span-3-phi { grid-column: span 3; }
.col-span-4-phi { grid-column: span 4; }
.col-span-5-phi { grid-column: span 5; }
.col-span-6-phi { grid-column: span 6; }
.col-span-7-phi { grid-column: span 7; }
.col-span-8-phi { grid-column: span 8; }
.col-span-9-phi { grid-column: span 9; }
.col-span-10-phi { grid-column: span 10; }
.col-span-11-phi { grid-column: span 11; }
.col-span-12-phi { grid-column: span 12; }
.col-span-full-phi { grid-column: 1 / -1; }

/* Row spans */
.row-span-1-phi { grid-row: span 1; }
.row-span-2-phi { grid-row: span 2; }
.row-span-3-phi { grid-row: span 3; }
.row-span-4-phi { grid-row: span 4; }
.row-span-full-phi { grid-row: 1 / -1; }

/* Grid gaps φ-based */
.gap-0-phi { gap: 0; }
.gap-1-phi { gap: var(--space-1); }
.gap-2-phi { gap: var(--space-2); }
.gap-3-phi { gap: var(--space-3); }
.gap-4-phi { gap: var(--space-4); }
.gap-5-phi { gap: var(--space-5); }
.gap-6-phi { gap: var(--space-6); }
.gap-8-phi { gap: var(--space-8); }
.gap-10-phi { gap: var(--space-10); }

.gap-x-4-phi { column-gap: var(--space-4); }
.gap-y-4-phi { row-gap: var(--space-4); }

/* ============================================================
   3. FLEXBOX - Flexbox φ-based
   ============================================================ */

.flex-phi {
    display: flex;
}

.inline-flex-phi {
    display: inline-flex;
}

/* Direction */
.flex-row-phi { flex-direction: row; }
.flex-col-phi { flex-direction: column; }
.flex-row-reverse-phi { flex-direction: row-reverse; }
.flex-col-reverse-phi { flex-direction: column-reverse; }

/* Wrap */
.flex-wrap-phi { flex-wrap: wrap; }
.flex-nowrap-phi { flex-wrap: nowrap; }

/* Justify content */
.justify-start-phi { justify-content: flex-start; }
.justify-end-phi { justify-content: flex-end; }
.justify-center-phi { justify-content: center; }
.justify-between-phi { justify-content: space-between; }
.justify-around-phi { justify-content: space-around; }
.justify-evenly-phi { justify-content: space-evenly; }

/* Align items */
.items-start-phi { align-items: flex-start; }
.items-end-phi { align-items: flex-end; }
.items-center-phi { align-items: center; }
.items-baseline-phi { align-items: baseline; }
.items-stretch-phi { align-items: stretch; }

/* Align content */
.content-start-phi { align-content: flex-start; }
.content-end-phi { align-content: flex-end; }
.content-center-phi { align-content: center; }
.content-between-phi { align-content: space-between; }

/* Align self */
.self-start-phi { align-self: flex-start; }
.self-end-phi { align-self: flex-end; }
.self-center-phi { align-self: center; }
.self-stretch-phi { align-self: stretch; }

/* Flex grow/shrink */
.flex-1-phi { flex: 1 1 0%; }
.flex-auto-phi { flex: 1 1 auto; }
.flex-initial-phi { flex: 0 1 auto; }
.flex-none-phi { flex: none; }

.grow-phi { flex-grow: 1; }
.grow-0-phi { flex-grow: 0; }
.shrink-phi { flex-shrink: 1; }
.shrink-0-phi { flex-shrink: 0; }

/* Common flex patterns */
.flex-center-phi {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between-phi {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-start-phi {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.flex-end-phi {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.flex-col-center-phi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Stack (vertical flex with gap) */
.stack-phi {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.stack-sm-phi {
    gap: var(--space-2);
}

.stack-lg-phi {
    gap: var(--space-6);
}

/* Cluster (horizontal flex with wrap and gap) */
.cluster-phi {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

/* ============================================================
   4. PAGE LAYOUTS - Structures de page φ-based
   ============================================================ */

/* Main page wrapper */
.page-phi {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Page with sidebar */
.page-with-sidebar-phi {
    display: flex;
    min-height: 100vh;
}

.page-content-phi {
    flex: 1;
    padding: var(--space-5);
    overflow-y: auto;
}

/* Section */
.section-phi {
    padding: var(--space-8) 0;
}

.section-sm-phi {
    padding: var(--space-5) 0;
}

.section-lg-phi {
    padding: var(--space-10) 0;
}

/* Hero section */
.hero-phi {
    padding: var(--space-10) 0;
    text-align: center;
}

.hero-title-phi {
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.hero-subtitle-phi {
    font-size: var(--text-xl);
    color: var(--text-secondary);
    max-width: var(--size-610, 610px);
    margin: 0 auto var(--space-6);
}

/* Page header compact */
.page-header-phi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-glass);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(var(--blur-md, 10px));
}

.page-header-compact-phi {
    padding: var(--space-3) var(--space-4);
}

.page-title-phi {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.page-title-phi h1,
.page-title-phi h2 {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.page-title-icon-phi {
    width: var(--space-8);
    height: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(137.5deg, var(--accent-primary), var(--accent-secondary, var(--accent-tertiary, #764ba2)));
    border-radius: var(--radius-lg);
    color: white;
    font-size: var(--text-lg);
}

.page-actions-phi {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* ============================================================
   5. HEADER/FOOTER - Header et Footer φ-based
   ============================================================ */

/* Main header/navbar */
.header-phi {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-5);
    background: var(--bg-glass);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(var(--blur-lg, 20px));
    -webkit-backdrop-filter: blur(var(--blur-lg, 20px));
}

.header-logo-phi {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
}

.header-logo-phi img {
    height: var(--space-8);
    width: auto;
}

.header-nav-phi {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.header-nav-link-phi {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) ease;
}

.header-nav-link-phi:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.header-nav-link-phi.active {
    color: var(--accent-primary);
    background: var(--accent-secondary-10, rgba(102, 126, 234, 0.1));
}

.header-actions-phi {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Footer */
.footer-phi {
    padding: var(--space-5);
    background: var(--bg-glass);
    border-top: 1px solid var(--border-color);
}

.footer-content-phi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.footer-links-phi {
    display: flex;
    gap: var(--space-4);
}

.footer-link-phi {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--duration-fast) ease;
}

.footer-link-phi:hover {
    color: var(--text-primary);
}

.footer-copyright-phi {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* ============================================================
   6. SIDEBAR - Sidebar φ-based
   ============================================================ */

.sidebar-phi {
    width: var(--size-233, 233px);
    min-height: 100vh;
    background: var(--bg-glass);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.sidebar-collapsed-phi {
    width: var(--space-10);
}

.sidebar-header-phi {
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.sidebar-content-phi {
    flex: 1;
    padding: var(--space-3);
    overflow-y: auto;
}

.sidebar-footer-phi {
    padding: var(--space-4);
    border-top: 1px solid var(--border-color);
}

/* Sidebar navigation */
.sidebar-nav-phi {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.sidebar-nav-group-phi {
    margin-bottom: var(--space-4);
}

.sidebar-nav-title-phi {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sidebar-nav-link-phi {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) ease;
}

.sidebar-nav-link-phi i {
    width: var(--space-5);
    text-align: center;
    font-size: var(--text-base);
}

.sidebar-nav-link-phi:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.sidebar-nav-link-phi.active {
    color: var(--accent-primary);
    background: var(--accent-secondary-10, rgba(102, 126, 234, 0.1));
}

.sidebar-nav-link-phi .badge {
    margin-left: auto;
}

/* ============================================================
   7. RESPONSIVE UTILITIES
   ============================================================ */

/* Hide/show based on breakpoint */
.hide-sm-phi { display: none; }
.hide-md-phi { display: none; }
.hide-lg-phi { display: none; }

@media (min-width: var(--size-610, 610px)) {
    .hide-sm-phi { display: initial; }
    .show-sm-phi { display: none; }

    .grid-cols-sm-2-phi { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-sm-3-phi { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
    .hide-md-phi { display: initial; }
    .show-md-phi { display: none; }

    .grid-cols-md-2-phi { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-md-3-phi { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-md-4-phi { grid-template-columns: repeat(4, 1fr); }

    .flex-md-row-phi { flex-direction: row; }
    .flex-md-col-phi { flex-direction: column; }
}

@media (min-width: 1024px) {
    .hide-lg-phi { display: initial; }
    .show-lg-phi { display: none; }

    .grid-cols-lg-3-phi { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-lg-4-phi { grid-template-columns: repeat(4, 1fr); }
    .grid-cols-lg-5-phi { grid-template-columns: repeat(5, 1fr); }
    .grid-cols-lg-6-phi { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 1280px) {
    .grid-cols-xl-4-phi { grid-template-columns: repeat(4, 1fr); }
    .grid-cols-xl-5-phi { grid-template-columns: repeat(5, 1fr); }
    .grid-cols-xl-6-phi { grid-template-columns: repeat(6, 1fr); }
}

/* Responsive padding */
@media (max-width: 639px) {
    .container-phi {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    .page-header-phi {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .page-actions-phi {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ============================================================
   8. ASPECT RATIOS - Ratios φ-based
   ============================================================ */

.aspect-square-phi {
    aspect-ratio: 1 / 1;
}

.aspect-video-phi {
    aspect-ratio: 16 / 9;
}

.aspect-golden-phi {
    aspect-ratio: 1.618 / 1; /* Golden Ratio! */
}

.aspect-golden-v-phi {
    aspect-ratio: 1 / 1.618; /* Golden Ratio vertical */
}

/* ============================================================
   9. SCROLL AREAS - Zones scrollables φ-based
   ============================================================ */

.scroll-area-phi {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.scroll-area-phi::-webkit-scrollbar {
    width: var(--space-2);
}

.scroll-area-phi::-webkit-scrollbar-track {
    background: transparent;
}

.scroll-area-phi::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-full);
}

.scroll-area-phi::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.scroll-x-phi {
    overflow-x: auto;
    overflow-y: hidden;
}

/* ============================================================
   10. POSITION UTILITIES
   ============================================================ */

.relative-phi { position: relative; }
.absolute-phi { position: absolute; }
.fixed-phi { position: fixed; }
.sticky-phi { position: sticky; }

.inset-0-phi {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.top-0-phi { top: 0; }
.right-0-phi { right: 0; }
.bottom-0-phi { bottom: 0; }
.left-0-phi { left: 0; }

.top-4-phi { top: var(--space-4); }
.right-4-phi { right: var(--space-4); }
.bottom-4-phi { bottom: var(--space-4); }
.left-4-phi { left: var(--space-4); }

/* Z-index */
.z-0-phi { z-index: 0; }
.z-10-phi { z-index: 10; }
.z-20-phi { z-index: 20; }
.z-30-phi { z-index: 30; }
.z-40-phi { z-index: 40; }
.z-50-phi { z-index: 50; }
.z-100-phi { z-index: 100; }
.z-max-phi { z-index: 9999; }

/* ============================================================
   11. SIZING UTILITIES - Tailles φ-based
   ============================================================ */

/* Width */
.w-full-phi { width: 100%; }
.w-screen-phi { width: 100vw; }
.w-auto-phi { width: auto; }
.w-fit-phi { width: fit-content; }

/* Height */
.h-full-phi { height: 100%; }
.h-screen-phi { height: 100vh; }
.h-auto-phi { height: auto; }
.h-fit-phi { height: fit-content; }

/* Min/Max */
.min-w-0-phi { min-width: 0; }
.min-h-0-phi { min-height: 0; }
.min-h-screen-phi { min-height: 100vh; }

.max-w-full-phi { max-width: 100%; }
.max-h-full-phi { max-height: 100%; }

/* ============================================================
   12. OVERFLOW UTILITIES
   ============================================================ */

.overflow-auto-phi { overflow: auto; }
.overflow-hidden-phi { overflow: hidden; }
.overflow-visible-phi { overflow: visible; }
.overflow-scroll-phi { overflow: scroll; }

.overflow-x-auto-phi { overflow-x: auto; }
.overflow-y-auto-phi { overflow-y: auto; }
.overflow-x-hidden-phi { overflow-x: hidden; }
.overflow-y-hidden-phi { overflow-y: hidden; }

/* ============================================================
   13. TWO-COLUMN LAYOUTS - Golden Ratio split
   ============================================================ */

/* Golden ratio split (38.2% / 61.8%) */
.split-golden-phi {
    display: grid;
    grid-template-columns: 38.2fr 61.8fr;
    gap: var(--space-5);
}

.split-golden-reverse-phi {
    display: grid;
    grid-template-columns: 61.8fr 38.2fr;
    gap: var(--space-5);
}

/* Equal split */
.split-half-phi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

/* Third split */
.split-third-phi {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-5);
}

.split-two-third-phi {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-5);
}

@media (max-width: 768px) {
    .split-golden-phi,
    .split-golden-reverse-phi,
    .split-half-phi,
    .split-third-phi,
    .split-two-third-phi {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   14. SIDEBAR COLLAPSED - Full Width φ-Centered Layout
   ============================================================

   Ces règles s'appliquent AUTOMATIQUEMENT à tous les modules
   (sauf dashboard) quand la sidebar est en mode collapsed.

   Comportement:
   - Container principal prend 100% de la largeur disponible
   - Contenu centré avec max-width φ-based
   - Espacement golden ratio (φ = 1.618)

   Le dashboard garde le comportement par défaut (sidebar ouverte).
   ============================================================ */

/* === FULL WIDTH CONTAINER WHEN SIDEBAR COLLAPSED === */
body.sidebar-collapsed .main-wrapper,
body.sidebar-collapsed .content-wrapper,
body.sidebar-collapsed .main-content,
body.sidebar-collapsed .content-area,
body.sidebar-collapsed .page-content,
body.sidebar-collapsed .module-content,
body.sidebar-collapsed main:not(.sidebar-main):not(.login-container) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--space-6, 34px) !important;  /* Fibonacci 34 */
    padding-right: var(--space-6, 34px) !important; /* Fibonacci 34 */
}

/* === CENTERED CONTENT WITH GOLDEN RATIO MAX-WIDTH === */
body.sidebar-collapsed .module-container,
body.sidebar-collapsed .page-container,
body.sidebar-collapsed .content-inner,
body.sidebar-collapsed .wizard-v2,
body.sidebar-collapsed .helios-module {
    margin: 0 auto;
    max-width: 1600px; /* φ-based optimal reading width */
    width: 100%;
}

/* === UNIFIED HEADER FULL WIDTH === */
body.sidebar-collapsed .helios-header {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
}

/* === CARDS GRID OPTIMIZED FOR FULL WIDTH === */
body.sidebar-collapsed .cards-grid,
body.sidebar-collapsed .kpi-grid,
body.sidebar-collapsed .stats-grid,
body.sidebar-collapsed .dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5, 21px); /* Fibonacci 21 */
    max-width: 100%;
}

/* 3-column layout for KPIs on larger screens when collapsed */
@media (min-width: 1024px) {
    body.sidebar-collapsed .kpi-grid,
    body.sidebar-collapsed .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1400px) {
    body.sidebar-collapsed .kpi-grid,
    body.sidebar-collapsed .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* === TABLES FULL WIDTH === */
body.sidebar-collapsed .table-responsive,
body.sidebar-collapsed .data-table-wrapper,
body.sidebar-collapsed .bonus-table-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
}

/* === WIZARD COMPONENTS FULL WIDTH === */
body.sidebar-collapsed .wizard-v2.compact,
body.sidebar-collapsed .wizard-container-v2,
body.sidebar-collapsed .wizard-content-v2 {
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--space-5, 21px);
}

/* === SPLIT EDITOR LAYOUT (CV-REFORMATER STYLE) === */
body.sidebar-collapsed .split-editor {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: var(--space-4, 13px);
}

body.sidebar-collapsed .split-editor .editor-panel {
    flex: 1 1 38.2%; /* Golden minor ratio */
    min-width: 320px;
    max-width: 550px;
    order: 1;
}

body.sidebar-collapsed .split-editor .preview-panel {
    flex: 1.618 1 61.8%; /* Golden major ratio φ */
    min-width: 450px;
    order: 2;
}

/* === MODAL AND FORMS CENTERED === */
body.sidebar-collapsed .modal-dialog,
body.sidebar-collapsed .form-container,
body.sidebar-collapsed .card-form {
    margin: 0 auto;
    max-width: min(800px, calc(100% - var(--space-6, 34px) * 2));
}

/* === GOLDEN RATIO CENTERED CONTENT BLOCK === */
body.sidebar-collapsed .phi-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: calc(100vw - var(--space-8, 55px) * 2);
    margin: 0 auto;
    padding: var(--space-5, 21px) var(--space-6, 34px);
}

/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 838px) {
    body.sidebar-collapsed .main-wrapper,
    body.sidebar-collapsed .content-wrapper,
    body.sidebar-collapsed .main-content,
    body.sidebar-collapsed .content-area {
        padding-left: var(--space-4, 13px) !important;
        padding-right: var(--space-4, 13px) !important;
    }

    body.sidebar-collapsed .split-editor {
        flex-direction: column !important;
    }

    body.sidebar-collapsed .split-editor .editor-panel,
    body.sidebar-collapsed .split-editor .preview-panel {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 100%;
    }
}

@media (max-width: 518px) {
    body.sidebar-collapsed .main-wrapper,
    body.sidebar-collapsed .content-wrapper,
    body.sidebar-collapsed .main-content,
    body.sidebar-collapsed .content-area {
        padding-left: var(--space-3, 8px) !important;
        padding-right: var(--space-3, 8px) !important;
    }

    body.sidebar-collapsed .wizard-v2.compact,
    body.sidebar-collapsed .wizard-container-v2 {
        padding: var(--space-3, 8px);
    }
}

/* === EXCLUDE DASHBOARD FROM AUTO-COLLAPSE BEHAVIOR === */
/* Dashboard keeps sidebar open - content adjusts normally */
body[data-page="dashboard"] .main-content,
body[data-page="dashboard"] .content-area {
    /* Standard layout - no forced full-width */
}

/* === TRANSITION SMOOTH FOR LAYOUT CHANGES === */
body .main-wrapper,
body .content-wrapper,
body .main-content,
body .content-area,
body .module-content {
    transition: all var(--duration-medium, 0.34s) var(--ease-golden, cubic-bezier(0.618, 0, 0.382, 1));
}