/**
 * GRC FORGE — Système de Thèmes Premium
 * 4 palettes optimisées pour l'étude et l'immersion
 * Basé sur la psychologie des couleurs et l'ergonomie cognitive
 */

/* ═══════════════════════════════════════════════════════════
   🌙 THÈME NUIT (par défaut) — Réduction fatigue oculaire
   ═══════════════════════════════════════════════════════════ */
/* Default light-premium values are now in tokens.css (single source of truth).
   [data-theme] overrides below cascade correctly because they load after tokens.css. */
@import url('tokens.css');

[data-theme="night"] {
    --bg-primary: #0a0a0f;
    --bg-secondary: #0f0f1a;
    --bg-tertiary: #14141f;
    --bg-card: rgba(20, 20, 40, 0.85);
    --bg-hover: rgba(30, 30, 50, 0.9);
    
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-disabled: #64748b;
    
    --border-primary: rgba(255, 255, 255, 0.06);
    --border-secondary: rgba(255, 255, 255, 0.1);
    --border-accent: rgba(59, 130, 246, 0.3);
    
    --accent-blue: #3b82f6;
    --accent-blue-light: #60a5fa;
    --accent-orange: #f97316;
    --accent-green: #22c55e;
    --accent-purple: #a855f7;
    --accent-red: #ef4444;
    --accent-yellow: #f59e0b;
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    
    --gradient-primary: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(124, 58, 237, 0.05));
    --gradient-card: linear-gradient(160deg, rgba(20, 20, 40, 0.92), rgba(13, 13, 28, 0.96));
}

/* ═══════════════════════════════════════════════════════════
   ☀️ THÈME JOUR — Lumineux et énergisant
   Palette : Blanc crème + Bleu ciel + Gris chaud
   ═══════════════════════════════════════════════════════════ */
[data-theme="day"] {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --bg-card: rgba(255, 255, 255, 0.98);
    --bg-hover: rgba(241, 245, 249, 0.95);
    
    --text-primary: #0f172a;
    --text-secondary: #1e293b;
    --text-muted: #475569;
    --text-disabled: #64748b;
    
    --border-primary: rgba(15, 23, 42, 0.1);
    --border-secondary: rgba(15, 23, 42, 0.15);
    --border-accent: rgba(59, 130, 246, 0.4);
    
    --accent-blue: #2563eb;
    --accent-blue-light: #3b82f6;
    --accent-orange: #ea580c;
    --accent-green: #16a34a;
    --accent-purple: #9333ea;
    --accent-red: #dc2626;
    --accent-yellow: #d97706;
    
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.1);
    --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.12);
    
    --gradient-primary: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(124, 58, 237, 0.03));
    --gradient-card: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
}

/* Styles spécifiques premium pour le thème Jour */
[data-theme="day"] .card,
[data-theme="day"] .glass,
[data-theme="day"] .risk-card {
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
    background: rgba(255, 255, 255, 0.98) !important;
}

[data-theme="day"] .btn-primary,
[data-theme="day"] .ba-go {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="day"] .btn-primary:hover,
[data-theme="day"] .ba-go:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4) !important;
}

[data-theme="day"] .btn-secondary {
    background: rgba(15, 23, 42, 0.06) !important;
    border-color: rgba(15, 23, 42, 0.15) !important;
    color: #0f172a !important;
}

[data-theme="day"] .btn-secondary:hover {
    background: rgba(15, 23, 42, 0.1) !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
}

[data-theme="day"] .risk-level-pill.level-critique {
    background: rgba(220, 38, 38, 0.12) !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
    color: #991b1b !important;
}

[data-theme="day"] .risk-level-pill.level-eleve {
    background: rgba(234, 88, 12, 0.12) !important;
    border-color: rgba(234, 88, 12, 0.4) !important;
    color: #9a3412 !important;
}

[data-theme="day"] .risk-level-pill.level-modere {
    background: rgba(217, 119, 6, 0.12) !important;
    border-color: rgba(217, 119, 6, 0.4) !important;
    color: #92400e !important;
}

[data-theme="day"] .risk-level-pill.level-faible {
    background: rgba(22, 163, 74, 0.12) !important;
    border-color: rgba(22, 163, 74, 0.4) !important;
    color: #14532d !important;
}

[data-theme="day"] input,
[data-theme="day"] textarea,
[data-theme="day"] select {
    background-color: rgba(241, 245, 249, 0.8) !important;
    border-color: rgba(15, 23, 42, 0.15) !important;
    color: #0f172a !important;
}

[data-theme="day"] input::placeholder,
[data-theme="day"] textarea::placeholder {
    color: #475569 !important;
}

[data-theme="day"] .input-field {
    background: rgba(241, 245, 249, 0.8) !important;
    border-color: rgba(15, 23, 42, 0.15) !important;
    color: #0f172a !important;
}

[data-theme="day"] .input-field:focus {
    background: rgba(241, 245, 249, 0.95) !important;
    border-color: rgba(37, 99, 235, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

/* ═══════════════════════════════════════════════════════════
   🌅 THÈME CRÉPUSCULE — Apaisant et chaleureux
   Palette : Beige chaud + Orange doux + Terre cuite
   ═══════════════════════════════════════════════════════════ */
[data-theme="twilight"] {
    --bg-primary: #2d2520;
    --bg-secondary: #3a302a;
    --bg-tertiary: #443a34;
    --bg-card: rgba(58, 48, 42, 0.92);
    --bg-hover: rgba(68, 58, 52, 0.95);
    
    --text-primary: #fef3e2;
    --text-secondary: #f5e6d3;
    --text-muted: #d4c4b0;
    --text-disabled: #a89985;
    
    --border-primary: rgba(245, 230, 211, 0.08);
    --border-secondary: rgba(245, 230, 211, 0.12);
    --border-accent: rgba(251, 146, 60, 0.35);
    
    --accent-blue: #60a5fa;
    --accent-blue-light: #93c5fd;
    --accent-orange: #fb923c;
    --accent-green: #4ade80;
    --accent-purple: #c084fc;
    --accent-red: #f87171;
    --accent-yellow: #fbbf24;
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45);
    
    --gradient-primary: linear-gradient(135deg, rgba(251, 146, 60, 0.12), rgba(234, 88, 12, 0.06));
    --gradient-card: linear-gradient(160deg, rgba(58, 48, 42, 0.92), rgba(45, 37, 32, 0.96));
}

/* ═══════════════════════════════════════════════════════════
   🌊 THÈME OCÉAN — Calme et concentration
   Palette : Bleu marine + Turquoise + Gris bleuté
   ═══════════════════════════════════════════════════════════ */
[data-theme="ocean"] {
    --bg-primary: #0c1e2e;
    --bg-secondary: #132a3f;
    --bg-tertiary: #1a3547;
    --bg-card: rgba(19, 42, 63, 0.92);
    --bg-hover: rgba(26, 53, 71, 0.95);
    
    --text-primary: #e0f2fe;
    --text-secondary: #bae6fd;
    --text-muted: #7dd3fc;
    --text-disabled: #38bdf8;
    
    --border-primary: rgba(186, 230, 253, 0.08);
    --border-secondary: rgba(186, 230, 253, 0.12);
    --border-accent: rgba(14, 165, 233, 0.35);
    
    --accent-blue: #0ea5e9;
    --accent-blue-light: #38bdf8;
    --accent-orange: #fb923c;
    --accent-green: #34d399;
    --accent-purple: #a78bfa;
    --accent-red: #f87171;
    --accent-yellow: #fbbf24;
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    
    --gradient-primary: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(6, 182, 212, 0.06));
    --gradient-card: linear-gradient(160deg, rgba(19, 42, 63, 0.92), rgba(12, 30, 46, 0.96));
}

/* ═══════════════════════════════════════════════════════════
   ☁️ THÈME BLEU CIEL — Premium professionnel
   Palette : Bleu ciel lumineux + Blanc pur + Touches rouge vif
   Design : Corporate moderne, élégant et énergisant
   ═══════════════════════════════════════════════════════════ */
[data-theme="sky"] {
    --bg-primary: #f0f7ff;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e0f2fe;
    --bg-card: rgba(255, 255, 255, 0.98);
    --bg-hover: rgba(224, 242, 254, 0.95);
    
    --text-primary: #0c4a6e;
    --text-secondary: #0e7490;
    --text-muted: #0891b2;
    --text-disabled: #67e8f9;
    
    --border-primary: rgba(12, 74, 110, 0.15);
    --border-secondary: rgba(12, 74, 110, 0.2);
    --border-accent: rgba(239, 68, 68, 0.4);
    
    --accent-blue: #0284c7;
    --accent-blue-light: #0ea5e9;
    --accent-orange: #f97316;
    --accent-green: #10b981;
    --accent-purple: #8b5cf6;
    --accent-red: #dc2626;
    --accent-yellow: #f59e0b;
    
    --shadow-sm: 0 2px 8px rgba(12, 74, 110, 0.1);
    --shadow-md: 0 4px 16px rgba(12, 74, 110, 0.12);
    --shadow-lg: 0 8px 32px rgba(12, 74, 110, 0.15);
    
    --gradient-primary: linear-gradient(135deg, rgba(2, 132, 199, 0.08), rgba(239, 68, 68, 0.04));
    --gradient-card: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(240, 247, 255, 0.92));
}

/* Styles spécifiques premium pour le thème Bleu Ciel */
[data-theme="sky"] .card,
[data-theme="sky"] .glass,
[data-theme="sky"] .risk-card {
    box-shadow: 0 4px 20px rgba(12, 74, 110, 0.1), 0 0 0 1px rgba(12, 74, 110, 0.08) !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="sky"] .btn-primary,
[data-theme="sky"] .ba-go {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="sky"] .btn-primary:hover,
[data-theme="sky"] .ba-go:hover {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.4) !important;
}

[data-theme="sky"] .btn-secondary {
    background: rgba(12, 74, 110, 0.08) !important;
    border-color: rgba(12, 74, 110, 0.2) !important;
    color: #0c4a6e !important;
}

[data-theme="sky"] .btn-secondary:hover {
    background: rgba(12, 74, 110, 0.12) !important;
    border-color: rgba(12, 74, 110, 0.3) !important;
}

[data-theme="sky"] .risk-level-pill.level-critique,
[data-theme="sky"] .badge.badge-danger {
    background: rgba(220, 38, 38, 0.12) !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
    color: #991b1b !important;
}

[data-theme="sky"] .risk-level-pill.level-eleve {
    background: rgba(234, 88, 12, 0.12) !important;
    border-color: rgba(234, 88, 12, 0.4) !important;
    color: #9a3412 !important;
}

[data-theme="sky"] .risk-level-pill.level-modere {
    background: rgba(217, 119, 6, 0.12) !important;
    border-color: rgba(217, 119, 6, 0.4) !important;
    color: #92400e !important;
}

[data-theme="sky"] .risk-level-pill.level-faible {
    background: rgba(22, 163, 74, 0.12) !important;
    border-color: rgba(22, 163, 74, 0.4) !important;
    color: #14532d !important;
}

[data-theme="sky"] .risk-hero,
[data-theme="sky"] .hero-section {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.08) 0%, rgba(239, 68, 68, 0.04) 100%) !important;
    border-color: rgba(2, 132, 199, 0.25) !important;
}

[data-theme="sky"] .risk-hero-title {
    background: linear-gradient(135deg, #0284c7 0%, #dc2626 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

[data-theme="sky"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #0284c7, #0369a1);
}

[data-theme="sky"] ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #0369a1, #075985);
}

[data-theme="sky"] input,
[data-theme="sky"] textarea,
[data-theme="sky"] select {
    background-color: rgba(224, 242, 254, 0.5) !important;
    border-color: rgba(12, 74, 110, 0.2) !important;
    color: #0c4a6e !important;
}

[data-theme="sky"] input::placeholder,
[data-theme="sky"] textarea::placeholder {
    color: #0891b2 !important;
}

[data-theme="sky"] .input-field {
    background: rgba(224, 242, 254, 0.5) !important;
    border-color: rgba(12, 74, 110, 0.2) !important;
    color: #0c4a6e !important;
}

[data-theme="sky"] .input-field:focus {
    background: rgba(224, 242, 254, 0.7) !important;
    border-color: rgba(2, 132, 199, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1) !important;
}

/* ═══════════════════════════════════════════════════════════
   APPLICATION DES THÈMES — Ciblée (ne casse pas .grc-app)
   ═══════════════════════════════════════════════════════════ */

/* Scrollbars personnalisées */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Legacy module containers that rely on theme variables
   (only applied when [data-theme] is set) */
[data-theme] .card, [data-theme] .content-card,
[data-theme] .tip-card, [data-theme] .phase-card,
[data-theme] .scenario-card, [data-theme] .ar-main,
[data-theme] .ar-side, [data-theme] .briefing-panel,
[data-theme] .guide-hero, [data-theme] .dashboard-card,
[data-theme] .stat-card, [data-theme] .module-card {
    background: var(--bg-card);
    border-color: var(--border-primary);
}

[data-theme] .panel, [data-theme] .modal-content {
    background: var(--bg-card);
    border-color: var(--border-secondary);
}

/* Dropdown menus */
.dropdown-menu, .theme-menu, .grc-notif-panel {
    background: var(--bg-card);
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-lg);
}

.dropdown-item, .theme-option {
    color: var(--text-secondary);
}

.dropdown-item:hover, .theme-option:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dropdown-divider {
    border-color: var(--border-primary);
}

.theme-option.active {
    background: rgba(245, 164, 37, 0.10);
    border-color: rgba(245, 164, 37, 0.3);
}

/* Notification panel */
.grc-notif-head-title { color: var(--text-primary); }
.grc-notif-item { border-color: var(--border-primary); }
.grc-notif-item-title { color: var(--text-primary); }
.grc-notif-item-msg { color: var(--text-secondary); }
.grc-notif-item-time { color: var(--text-muted); }

.badge-plan {
    background: var(--accent-blue) !important;
    color: #ffffff !important;
}