/**
 * BOCID Variables CSS - Design System 2025.12.01
 * SYSTÈME UNIQUE : Variables CSS avec switch dark-mode
 *
 * PRINCIPE : Toutes les valeurs visuelles sont des variables.
 * Le dark mode change les variables, pas les règles CSS.
 *
 * @author BOCID Team
 * @version 2025.12.01
 */

/* ========================================
   LIGHT MODE (défaut)
   ======================================== */

:root {
    /* Couleurs primaires */
    --color-primary: #007bff;
    --color-primary-dark: #0056b3;
    --color-primary-light: #66b3ff;
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-info: #17a2b8;

    /* === BACKGROUNDS === */
    --bg-body: #e8ecf5;
    --bg-card: rgba(255, 255, 255, 0.65);
    --bg-card-hover: rgba(255, 255, 255, 0.75);
    --bg-card-header: rgba(240, 245, 255, 0.5);
    --bg-dropdown: rgba(255, 255, 255, 0.9);
    --bg-modal: rgba(255, 255, 255, 0.95);
    --bg-navbar: rgba(255, 255, 255, 0.5);
    --bg-footer: rgba(255, 255, 255, 0.65); /* Même transparence que cards */
    --bg-input: rgba(255, 255, 255, 0.9);
    --bg-rdv: rgba(108, 117, 125, 0.1);
    --bg-rdv-hover: rgba(108, 117, 125, 0.2);

    /* === CONTEXT MENU / INTERACTIVE STATES === */
    --bg-hover: rgba(0, 0, 0, 0.04);
    --bg-active: rgba(0, 0, 0, 0.08);
    --bg-subtle: rgba(0, 0, 0, 0.02);

    /* === BORDURES === */
    --border-card: rgba(255, 255, 255, 0.3);
    --border-card-hover: rgba(255, 255, 255, 0.4);
    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-input: rgba(0, 0, 0, 0.15);
    --border-dropdown: rgba(0, 0, 0, 0.1);

    /* === TEXTES === */
    --text-primary: #212529;
    --text-secondary: #495057;
    --text-muted: #6c757d;
    --text-inverse: #ffffff;

    /* === OMBRES === */
    --shadow-card: 0 8px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 12px 35px rgba(0, 0, 0, 0.12), 0 6px 15px rgba(0, 0, 0, 0.06);
    --shadow-dropdown: 0 10px 30px rgba(0, 0, 0, 0.15);
    --shadow-navbar: 0 4px 25px rgba(0, 0, 0, 0.15);
    --shadow-rdv-hover: 0 2px 8px rgba(0, 0, 0, 0.1);

    /* === RAYONS === */
    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 15px;
    --radius-xl: 20px;

    /* === TRANSITIONS === */
    --transition-fast: all 0.15s ease;
    --transition-normal: all 0.3s ease;
    --transition-bounce: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    /* === BLUR EFFECTS === */
    --blur-light: blur(8px);
    --blur-medium: blur(15px);
    --blur-heavy: blur(20px);
    --blur-extreme: blur(30px);

    /* === Z-INDEX === */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* === SHADOWS EXTENDED === */
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.15);
    --shadow-modal: 0 15px 50px rgba(0, 0, 0, 0.2);
    --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.18);

    /* === BORDERS EXTENDED === */
    --border-glass: rgba(255, 255, 255, 0.2);
    --border-glass-hover: rgba(255, 255, 255, 0.35);

    /* === DROPDOWN ITEM BACKGROUNDS === */
    --bg-item-hover: rgba(108, 117, 125, 0.15);
    --bg-item-active: rgba(13, 110, 253, 0.15);

    /* === FOCUS RING === */
    --focus-ring: rgba(13, 110, 253, 0.5);
    --focus-ring-offset: 2px;

    /* === PRESENCE BADGES === */
    --presence-go-bg: rgba(25, 135, 84, 0.15);
    --presence-go-color: #198754;
    --presence-go-border: rgba(25, 135, 84, 0.3);
    --presence-no-bg: rgba(220, 53, 69, 0.15);
    --presence-no-color: #dc3545;
    --presence-no-border: rgba(220, 53, 69, 0.3);
    --presence-pending-bg: rgba(108, 117, 125, 0.15);
    --presence-pending-color: #6c757d;
    --presence-pending-border: rgba(108, 117, 125, 0.3);

    /* === NOTIFICATIONS === */
    --bg-notification: rgba(255, 255, 255, 0.98);
    --bg-notification-item: rgba(0, 123, 255, 0.08);
    --bg-notification-hover: rgba(0, 123, 255, 0.12);
    --shadow-notification: 0 15px 35px rgba(0, 0, 0, 0.15);
    --notification-border-color: #007bff;

    /* === TABLES === */
    --bg-table: rgba(255, 255, 255, 0.65);
    --bg-table-header: rgba(240, 245, 255, 0.8);
    --bg-table-row-hover: rgba(0, 123, 255, 0.08);
    --bg-table-row-striped: rgba(0, 0, 0, 0.02);
    --border-table: rgba(0, 0, 0, 0.1);

    /* === BUTTONS === */
    --btn-glass-bg: rgba(255, 255, 255, 0.2);
    --btn-glass-border: rgba(255, 255, 255, 0.3);
    --btn-glass-hover-bg: rgba(255, 255, 255, 0.3);

    /* === AGENDA === */
    --rdv-titre-color: #555;
    --day-name-color: #555;
    --day-name-border: rgba(0, 0, 0, 0.15);

    /* === MESH GRADIENT (light) === */
    --gradient-mesh:
        radial-gradient(at 40% 20%, rgba(59, 130, 246, 0.4) 0px, transparent 50%),
        radial-gradient(at 80% 0%, rgba(56, 189, 248, 0.35) 0px, transparent 50%),
        radial-gradient(at 0% 50%, rgba(6, 182, 212, 0.3) 0px, transparent 50%),
        radial-gradient(at 80% 50%, rgba(37, 99, 235, 0.3) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(59, 130, 246, 0.35) 0px, transparent 50%),
        radial-gradient(at 50% 80%, rgba(14, 165, 233, 0.25) 0px, transparent 50%);
}

/* ========================================
   DARK MODE - Switch des variables
   ======================================== */

html.dark-mode,
body.dark-mode {
    /* === BACKGROUNDS === */
    --bg-body: #0a0a12;
    --bg-card: rgba(10, 10, 18, 0.7);
    --bg-card-hover: rgba(15, 15, 25, 0.75);
    --bg-card-header: rgba(10, 10, 18, 0.7); /* Même teinte et opacité que body card */
    --bg-dropdown: rgba(10, 10, 18, 0.95);
    --bg-modal: rgba(10, 10, 18, 0.7);
    --bg-navbar: rgba(10, 10, 18, 0.5);
    --bg-footer: rgba(10, 10, 18, 0.7); /* Même transparence que cards */
    --bg-input: rgba(10, 10, 18, 0.9);
    --bg-rdv: rgba(255, 255, 255, 0.05);
    --bg-rdv-hover: rgba(255, 255, 255, 0.12);

    /* === CONTEXT MENU / INTERACTIVE STATES (dark) === */
    --bg-hover: rgba(255, 255, 255, 0.08);
    --bg-active: rgba(255, 255, 255, 0.12);
    --bg-subtle: rgba(255, 255, 255, 0.04);

    /* === BORDURES === */
    --border-card: rgba(255, 255, 255, 0.08);
    --border-card-hover: rgba(255, 255, 255, 0.15);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-input: #555555;
    --border-dropdown: rgba(255, 255, 255, 0.15);

    /* === TEXTES === */
    --text-primary: #ffffff;
    --text-secondary: #f8f9fa;
    --text-muted: #adb5bd;
    --text-inverse: #212529;

    /* === OMBRES === */
    --shadow-card: 0 8px 25px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.25);
    --shadow-card-hover: 0 12px 35px rgba(0, 0, 0, 0.5), 0 6px 15px rgba(0, 0, 0, 0.3);
    --shadow-dropdown: 0 10px 30px rgba(0, 0, 0, 0.6);
    --shadow-navbar: 0 4px 25px rgba(0, 0, 0, 0.4);
    --shadow-rdv-hover: 0 2px 8px rgba(0, 0, 0, 0.3);

    /* === SHADOWS EXTENDED (dark) === */
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.4);
    --shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-modal: 0 15px 50px rgba(0, 0, 0, 0.6);
    --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.5);

    /* === BORDERS EXTENDED (dark) === */
    --border-glass: rgba(255, 255, 255, 0.1);
    --border-glass-hover: rgba(255, 255, 255, 0.2);

    /* === DROPDOWN ITEM BACKGROUNDS (dark) === */
    --bg-item-hover: rgba(255, 255, 255, 0.12);
    --bg-item-active: rgba(13, 110, 253, 0.2);

    /* === PRESENCE BADGES (dark) === */
    --presence-go-bg: rgba(25, 135, 84, 0.25);
    --presence-go-color: #20c997;
    --presence-no-bg: rgba(220, 53, 69, 0.25);
    --presence-no-color: #ff6b7a;
    --presence-pending-bg: rgba(108, 117, 125, 0.25);
    --presence-pending-color: #adb5bd;

    /* === NOTIFICATIONS (dark) === */
    --bg-notification: rgba(10, 10, 18, 0.95);
    --bg-notification-item: rgba(255, 255, 255, 0.12);
    --bg-notification-hover: rgba(255, 255, 255, 0.15);
    --shadow-notification: 0 15px 35px rgba(0, 0, 0, 0.6);
    --notification-border-color: #6c757d;

    /* === TABLES (dark) === */
    --bg-table: rgba(10, 10, 18, 0.7);
    --bg-table-header: rgba(10, 10, 18, 0.8); /* Même teinte noire */
    --bg-table-row-hover: rgba(255, 255, 255, 0.08);
    --bg-table-row-striped: rgba(255, 255, 255, 0.02);
    --border-table: rgba(255, 255, 255, 0.1);

    /* === BUTTONS (dark) === */
    --btn-glass-bg: rgba(255, 255, 255, 0.1);
    --btn-glass-border: rgba(255, 255, 255, 0.2);
    --btn-glass-hover-bg: rgba(255, 255, 255, 0.2);

    /* === AGENDA (dark) === */
    --rdv-titre-color: #adb5bd;
    --day-name-color: #e0e0e0;
    --day-name-border: rgba(255, 255, 255, 0.15);

    /* === MESH GRADIENT (dark) === */
    --gradient-mesh:
        radial-gradient(at 40% 20%, rgba(59, 130, 246, 0.25) 0px, transparent 50%),
        radial-gradient(at 80% 0%, rgba(56, 189, 248, 0.2) 0px, transparent 50%),
        radial-gradient(at 0% 50%, rgba(6, 182, 212, 0.15) 0px, transparent 50%),
        radial-gradient(at 80% 50%, rgba(37, 99, 235, 0.15) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(59, 130, 246, 0.2) 0px, transparent 50%),
        radial-gradient(at 50% 80%, rgba(14, 165, 233, 0.12) 0px, transparent 50%);
}