/**
 * NEXUS BACKOFFICE - DESIGN SYSTEM
 * Variables CSS pour mode clair et mode sombre
 * Version: 2.0.0
 * Date: 2025-10-02
 */

/* ========================================
   MODE CLAIR (Défaut)
   ======================================== */

:root {
    /* === COULEURS PRINCIPALES === */
    --bg-primary: #FFFFFF;              /* Fond blanc */
    --bg-secondary: #F8F9FA;            /* Fond gris très clair */
    --bg-tertiary: #E9ECEF;             /* Fond gris clair */

    /* === CONTOURS BLEU CIEL === */
    --border-primary: #87CEEB;          /* Bleu ciel principal */
    --border-secondary: #B0E0E6;        /* Bleu ciel clair */
    --border-hover: #5DADE2;            /* Bleu ciel hover */
    --border-focus: #3498DB;            /* Bleu ciel focus */

    /* === TEXTE NOIR SOBRE === */
    --text-primary: #212529;            /* Noir principal */
    --text-secondary: #495057;          /* Gris foncé */
    --text-tertiary: #6C757D;           /* Gris moyen */
    --text-muted: #ADB5BD;              /* Gris clair */
    --text-inverse: #FFFFFF;            /* Blanc (sur fonds sombres) */

    /* === COULEURS ACCENT === */
    --accent-primary: #87CEEB;          /* Bleu ciel (cohérent avec borders) */
    --accent-secondary: #3498DB;        /* Bleu vif */
    --accent-hover: #5DADE2;            /* Bleu hover */

    /* === COULEURS STATUT === */
    --success: #28A745;                 /* Vert succès */
    --success-light: #D4EDDA;           /* Vert clair */
    --warning: #FFC107;                 /* Orange warning */
    --warning-light: #FFF3CD;           /* Orange clair */
    --error: #DC3545;                   /* Rouge erreur */
    --error-light: #F8D7DA;             /* Rouge clair */
    --info: #87CEEB;                    /* Bleu ciel info */
    --info-light: #D1ECF1;              /* Bleu clair */

    /* === COULEURS ADDITIONNELLES (Compatibilité Bootstrap) === */
    --blue: #0D6EFD;                    /* Bleu primary */
    --blue-dark: #0A58CA;               /* Bleu foncé */
    --blue-light: #E7F1FF;              /* Bleu clair */

    --cyan: #0DCAF0;                    /* Cyan */
    --purple: #6F42C1;                  /* Purple (badges critical) */

    --gray-light: #DEE2E6;              /* Gris clair */
    --gray-medium: #CED4DA;             /* Gris moyen */

    /* === OMBRES === */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.18);

    /* === LAYOUT === */
    --header-height: 60px;
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 70px;
    --footer-height: 50px;

    /* === TRANSITIONS === */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

    /* === BORDER RADIUS === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* === SPACING === */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* === FONTS === */
    --font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
    --font-mono: 'Courier New', 'Consolas', 'Monaco', monospace;

    /* TAILLES (3 principales + headers) */
    --text-sm: 0.875rem;                /* 14px - Petits textes */
    --text-base: 1rem;                  /* 16px - Texte normal */
    --text-lg: 1.25rem;                 /* 20px - Texte grand */
    --text-xl: 1.5rem;                  /* 24px - Headers */
    --text-2xl: 2rem;                   /* 32px - Gros headers */

    /* POIDS */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* PRINT TYPOGRAPHY (Points - 1pt = 1/72 inch, standard PDF/print) */
    --print-text-sm: 12pt;              /* Corps de texte print */
    --print-text-base: 14pt;            /* Sous-titres print */
    --print-text-lg: 18pt;              /* Titres print */

    /* ============================================
       RESPONSIVE BREAKPOINTS - Bootstrap 5 Compatible
       ============================================

       Système standardisé pour media queries responsive
       Compatible avec Bootstrap 5 grid system

       Usage: @media (max-width: calc(var(--breakpoint-md) - 1px)) { }

       ============================================ */

    --breakpoint-xs: 480px;             /* Extra Small (mobile portrait) */
    --breakpoint-sm: 576px;             /* Small (mobile landscape) */
    --breakpoint-md: 768px;             /* Medium (tablette) */
    --breakpoint-lg: 992px;             /* Large (desktop) */
    --breakpoint-xl: 1200px;            /* Extra Large (grand écran) */
    --breakpoint-xxl: 1400px;           /* XXL (très grand écran) */

    /* ============================================
       Z-INDEX SCALE - Centralised System
       ============================================

       RÈGLE D'OR: Ne JAMAIS utiliser de valeurs hardcodées
       Toujours utiliser ces variables CSS

       Échelle de 0 à 9999:
       - 0-999: Layout normal (sidebar, content)
       - 1000-1999: Overlays (dropdowns, sticky)
       - 2000-8999: [Réservé pour extensions futures]
       - 9000-9999: Always on top (notifications, toasts, spinners)
       ============================================ */

    /* Base Layer (0-999) */
    --z-base: 1;                    /* Contenu principal */
    --z-sidebar: 10;                /* Sidebar navigation */
    --z-toolbar: 100;               /* Toolbar dans composants */

    /* Overlay Layer (1000-1999) */
    --z-dropdown: 1000;             /* Menus déroulants */
    --z-sticky: 1020;               /* Elements sticky (headers, etc.) */
    --z-fixed: 1030;                /* Header/navbar fixé */
    --z-modal-backdrop: 1050;       /* Backdrop modal (fond sombre) - Bootstrap 5 standard */
    --z-modal: 1055;                /* Modal principal - Bootstrap 5 standard */

    /* ============================================
       BOOTSTRAP 5 OVERRIDES - Centralised
       ============================================

       Variables Bootstrap à surcharger pour cohérence
       avec le design system NEXUS

       ============================================ */

    /* Modal z-index fix (backdrop sous modal) */
    --bs-modal-zindex: 1055;        /* Override Bootstrap modal z-index */
    --bs-backdrop-zindex: 1050;     /* Override Bootstrap backdrop z-index */

    /* Border radius standardisation */
    --bs-border-radius: 0.5rem;     /* 8px - cohérent avec --radius-md */
    --bs-border-radius-sm: 0.375rem; /* 6px - cohérent avec --radius-sm */
    --bs-border-radius-lg: 0.75rem;  /* 12px - cohérent avec --radius-lg */

    /* Transitions uniformes */
    --bs-transition-duration: 0.2s;  /* 200ms - cohérent avec --transition-fast */

    /* Focus ring */
    --bs-focus-ring-width: 0.25rem;
    --bs-focus-ring-color: rgba(13, 110, 253, 0.25);

    /* Modal Internal Layer (1056-1059) */
    --z-modal-dropdown: 1056;       /* Dropdowns dans modal (Select, etc.) */
    --z-modal-autocomplete: 1057;   /* Menus autocomplete dans modal */
    --z-modal-datepicker: 1058;     /* Datepickers dans modal */
    --z-modal-colorpicker: 1059;    /* Colorpickers dans modal */
    --z-modal-nested: 1060;         /* Modal imbriquée (confirmation, etc.) */

    /* Popover Layer (1065-1099) */
    --z-popover: 1065;              /* Popovers génériques */
    --z-tooltip: 1070;              /* Tooltips */
    --z-toast: 1080;                /* Toast notifications (temporaires) */

    /* Always On Top Layer (9000-9999) */
    --z-notification: 9000;         /* Notifications persistantes */
    --z-loading: 9500;              /* Loading spinners globaux */
    --z-max: 9999;                  /* Dernier recours (debugger, overlay d'urgence) */
}

/* ========================================
   RESPONSIVE BREAKPOINTS - Media Queries
   ======================================== */

/* Mobile-first approach (min-width) - Bootstrap 5 compatible */

/* Extra Small devices (portrait phones, <576px) */
/* No media query since this is the default */

/* Small devices (landscape phones, ≥576px) */
@media (min-width: 576px) {
    /* sm breakpoint styles */
}

/* Medium devices (tablets, ≥768px) */
@media (min-width: 768px) {
    /* md breakpoint styles */
}

/* Large devices (desktops, ≥992px) */
@media (min-width: 992px) {
    /* lg breakpoint styles */
}

/* Extra large devices (large desktops, ≥1200px) */
@media (min-width: 1200px) {
    /* xl breakpoint styles */
}

/* Extra extra large devices (larger desktops, ≥1400px) */
@media (min-width: 1400px) {
    /* xxl breakpoint styles */
}

/* ========================================
   COMPONENTS - DROPZONE
   ======================================== */

.dropzone-area {
    border: 2px dashed var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--space-2xl);
    text-align: center;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.dropzone-area:hover {
    border-color: var(--border-hover);
    background: rgba(13, 110, 253, 0.05);
}

.dropzone-area.dragover {
    border-color: var(--border-focus);
    background: rgba(13, 110, 253, 0.15);
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
}

.dropzone-icon {
    font-size: 3rem;
    color: var(--accent-primary);
    opacity: 0.6;
    transition: opacity var(--transition-fast);
    display: block;
    margin-bottom: var(--space-md);
}

.dropzone-area:hover .dropzone-icon {
    opacity: 1;
}

.dropzone-text {
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.dropzone-text strong {
    color: var(--accent-primary);
}

.dropzone-hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin: 0;
}

/* ========================================
   COMPONENTS - PREVIEW
   ======================================== */

.preview-container {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    background: var(--bg-secondary);
    transition: border-color var(--transition-fast);
}

.preview-container:has(img.visible),
.preview-container:has(img:not([style*="display: none"])) {
    border-color: var(--accent-primary);
    background: rgba(13, 110, 253, 0.05);
}

.preview-img {
    max-height: 80px;
    max-width: 150px;
    display: none;
    object-fit: contain;
}

.preview-img.visible {
    display: block;
}

.preview-placeholder {
    color: var(--text-muted);
    text-align: center;
}

.preview-placeholder i {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--space-sm);
}

/* ========================================
   Z-INDEX UTILITY CLASSES
   ======================================== */

/* Base Layer */
.z-base { z-index: var(--z-base) !important; }
.z-sidebar { z-index: var(--z-sidebar) !important; }
.z-toolbar { z-index: var(--z-toolbar) !important; }

/* Overlay Layer */
.z-dropdown { z-index: var(--z-dropdown) !important; }
.z-sticky { z-index: var(--z-sticky) !important; }
.z-fixed { z-index: var(--z-fixed) !important; }
.z-modal-backdrop { z-index: var(--z-modal-backdrop) !important; }
.z-modal { z-index: var(--z-modal) !important; }

/* Modal Internal */
.z-modal-dropdown { z-index: var(--z-modal-dropdown) !important; }
.z-modal-autocomplete { z-index: var(--z-modal-autocomplete) !important; }
.z-modal-datepicker { z-index: var(--z-modal-datepicker) !important; }
.z-modal-colorpicker { z-index: var(--z-modal-colorpicker) !important; }
.z-modal-nested { z-index: var(--z-modal-nested) !important; }

/* Popover Layer */
.z-popover { z-index: var(--z-popover) !important; }
.z-tooltip { z-index: var(--z-tooltip) !important; }
.z-toast { z-index: var(--z-toast) !important; }

/* Always On Top */
.z-notification { z-index: var(--z-notification) !important; }
.z-loading { z-index: var(--z-loading) !important; }
.z-max { z-index: var(--z-max) !important; }

/* ========================================
   MODE SOMBRE
   ======================================== */

[data-theme="dark"] {
    /* === COULEURS PRINCIPALES === */
    --bg-primary: #1A1A1A;              /* Gris très foncé */
    --bg-secondary: #242424;            /* Gris foncé */
    --bg-tertiary: #2E2E2E;             /* Gris moyen foncé */

    /* === CONTOURS VIOLET FONCÉ === */
    --border-primary: #6A0DAD;          /* Violet foncé principal */
    --border-secondary: #8B31C7;        /* Violet moyen */
    --border-hover: #9D4EDD;            /* Violet hover */
    --border-focus: #B565E8;            /* Violet focus */

    /* === TEXTE BLANC === */
    --text-primary: #FFFFFF;            /* Blanc principal */
    --text-secondary: #E0E0E0;          /* Gris très clair */
    --text-tertiary: #B0B0B0;           /* Gris clair */
    --text-muted: #808080;              /* Gris moyen */
    --text-inverse: #212529;            /* Noir (sur fonds clairs) */

    /* === COULEURS ACCENT === */
    --accent-primary: #9D4EDD;          /* Violet (cohérent avec borders) */
    --accent-secondary: #B565E8;        /* Violet clair */
    --accent-hover: #C084FC;            /* Violet hover */

    /* === COULEURS STATUT (ajustées pour dark mode) === */
    --success: #34D058;                 /* Vert succès plus lumineux */
    --success-light: #1B5E20;           /* Vert foncé */
    --warning: #FFD60A;                 /* Orange warning plus lumineux */
    --warning-light: #644A00;           /* Orange foncé */
    --error: #F85149;                   /* Rouge erreur plus lumineux */
    --error-light: #5D1F1F;             /* Rouge foncé */
    --info: #9D4EDD;                    /* Violet info */
    --info-light: #3D1F5D;              /* Violet foncé */

    /* === OMBRES (plus prononcées en dark mode) === */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.7);
}

/* ========================================
   UTILITAIRES DESIGN SYSTEM
   ======================================== */

/* Reset et base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Smooth transitions pour changement de thème */
body,
body * {
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: var(--transition-normal);
    transition-timing-function: ease;
}

/* Désactiver transitions sur éléments interactifs pour meilleure UX */
button,
a,
input,
select,
textarea {
    transition-property: background-color, color, border-color, box-shadow, transform;
    transition-duration: var(--transition-fast);
}

/* === CLASSES UTILITAIRES === */

/* Backgrounds */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }

/* Borders */
.border-primary { border-color: var(--border-primary); }
.border-secondary { border-color: var(--border-secondary); }

/* Text colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Radius */
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-xl { border-radius: var(--radius-xl); }
.radius-full { border-radius: var(--radius-full); }

/* === ANIMATIONS === */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.fade-in {
    animation: fadeIn var(--transition-normal);
}

.slide-down {
    animation: slideDown var(--transition-normal);
}

.slide-up {
    animation: slideUp var(--transition-normal);
}

/* ========================================
   MODAL ANIMATIONS - Performance Optimization
   ======================================== */

/* Bootstrap modal - Optimize animations avec will-change */
.modal {
    will-change: opacity, transform;
    transition: opacity var(--transition-normal) ease-in-out,
                transform var(--transition-normal) ease-in-out;
}

.modal.show {
    will-change: auto; /* Reset après animation complète */
}

/* Modal backdrop - GPU acceleration */
.modal-backdrop {
    will-change: opacity;
    transition: opacity var(--transition-normal) ease-in-out;
    transform: translateZ(0); /* Force GPU rendering */
}

.modal-backdrop.show {
    will-change: auto; /* Reset après animation */
}

/* Modal dialog - Smooth scale effect */
.modal.fade .modal-dialog {
    will-change: transform;
    transition: transform var(--transition-normal) ease-out;
    transform: translateY(-50px) scale(0.95);
}

.modal.show .modal-dialog {
    will-change: auto;
    transform: translateY(0) scale(1);
}

/* === PRINT STYLES === */

@media print {
    :root {
        /* Force mode clair pour impression */
        --bg-primary: #FFFFFF;
        --text-primary: #000000;
    }

    .no-print {
        display: none !important;
    }
}