/**
 * WEVAL Skin Override pour CRT Lab v14
 * Date: 9mai2026 14:35
 * Doctrine: WTP - same UX all-in
 * Override les vars dark Kimi K2 -> palette WEVAL light cream + violet
 * 
 * Cascade order: <style> :root Kimi v14 (line 19) -> wv-palette.css (line 1966) -> THIS (line 2074, post-head)
 */

:root {
  /* === BACKGROUNDS - swap dark to cream === */
  --bg-primary: #FAF8F5 !important;
  --bg-card: #ffffff !important;
  --bg-hover: #f3f4f6 !important;
  --bg-elevated: #f9fafb !important;
  --bg-glass: rgba(255,255,255,0.7) !important;
  --bg-secondary: #ffffff !important;
  --bg-tertiary: #f9fafb !important;
  --bg-input: #ffffff !important;
  --bg-card-hover: #f3f4f6 !important;
  
  /* === TEXT === */
  --text-primary: #1f2937 !important;
  --text-secondary: #4b5563 !important;
  --text-muted: #6b7280 !important;
  
  /* === ACCENT - WEVAL VIOLET === */
  --accent: #6366f1 !important;
  --accent-light: #a5b4fc !important;
  --color-primary: #6366f1 !important;
  --color-primary-light: #a5b4fc !important;
  --color-primary-dark: #4f46e5 !important;
  --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  --accent-gradient-2: linear-gradient(135deg, #a5b4fc 0%, #6366f1 100%) !important;
  
  /* === STATUS === */
  --success: #16a34a !important;
  --warning: #d97706 !important;
  --danger: #dc2626 !important;
  --info: #2563eb !important;
  --color-cyan: #2563eb !important;
  --color-orange: #d97706 !important;
  --color-purple: #8b5cf6 !important;
  --color-pink: #ec4899 !important;
  --color-danger: #dc2626 !important;
  
  /* === BORDERS === */
  --border: #e5e7eb !important;
  --border-subtle: #f3f4f6 !important;
  --border-primary: #e5e7eb !important;
  --border-focus: #6366f1 !important;
  
  /* === SHADOWS === */
  --shadow: 0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px 0 rgba(0,0,0,0.04) !important;
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04) !important;
  --shadow-lg: 0 10px 15px -3px rgba(99,102,241,0.10) !important;
  --glow-blue: 0 0 20px rgba(99,102,241,0.20) !important;
  --glow-purple: 0 0 20px rgba(139,92,246,0.20) !important;
}

body {
  background: 
    radial-gradient(circle at 0% 0%, rgba(99,102,241,0.05) 0%, transparent 30%),
    radial-gradient(circle at 100% 0%, rgba(139,92,246,0.04) 0%, transparent 30%),
    var(--bg-primary) !important;
  color: var(--text-primary) !important;
  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.header h1, header h1, h1, .title {
  font-family: 'Instrument Serif', 'Outfit', Georgia, serif !important;
  font-weight: 400 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.02em !important;
}

.kpi-value, .stat-value, .number, [class*="kpi"] [class*="value"] {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
}

.card, [class*="card"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text-primary) !important;
}

.card:hover, [class*="card"]:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--accent-light) !important;
}

.tab-btn, [role="tab"], button[class*="tab"] {
  color: var(--text-secondary) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
}

.tab-btn:hover, [role="tab"]:hover {
  color: var(--accent) !important;
  background: rgba(99,102,241,0.05) !important;
  border-color: rgba(99,102,241,0.15) !important;
}

.tab-btn.active, [role="tab"].active, [role="tab"][aria-selected="true"] {
  color: var(--accent) !important;
  background: rgba(99,102,241,0.10) !important;
  border-color: var(--accent) !important;
  font-weight: 600 !important;
}

button, .btn { border-radius: 8px !important; }

.btn-primary, button[class*="primary"], .primary {
  background: var(--accent-gradient) !important;
  color: #ffffff !important;
  border: none !important;
}

.btn-primary:hover {
  filter: brightness(1.05) !important;
  box-shadow: var(--glow-purple) !important;
}

input, textarea, select {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.10) !important;
  outline: none !important;
}

table, .table {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-collapse: collapse !important;
}

th {
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid var(--border) !important;
}

td {
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}

tr:hover td { background: rgba(99,102,241,0.03) !important; }

.badge, [class*="badge"], .pill {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.plotly, .plot-container, .js-plotly-plot {
  background: var(--bg-card) !important;
}

.plotly .bg, .plotly .modebar { background: transparent !important; }

header, .header, .top-header, .crt-header,
[class*="header"]:not([class*="card"]):not([class*="cell"]) {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border) !important;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-elevated); }
::-webkit-scrollbar-thumb {
  background: rgba(99,102,241,0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.5); }

footer, .footer {
  background: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  border-top: 1px solid var(--border) !important;
}


/* ============================================================
 * ROOT CAUSE FIX text clair sur clair (Doctrine 6)
 * Date: 9mai2026 14:58
 * Probleme: text-gradient + hero-title rendent texte blanc/clair sur cream
 *           (CRT La tronque + Logout invisible + OPEN illisible)
 * Fix: Force gradients VIOLET WEVAL solid + fallback color + overflow visible
 * ============================================================ */

.text-gradient {
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 50%, #8b5cf6 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: #6d28d9 !important;
}

.text-gradient-2 {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: #4f46e5 !important;
}

.hero-title,
.hero-title.text-gradient {
  color: #6d28d9 !important;
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 50%, #8b5cf6 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

.app-header,
.app-header .brand,
.app-header h1,
.app-header [class*="brand"]:not([class*="brand-icon"]) {
  color: #1e293b !important;
  overflow: visible !important;
  white-space: nowrap !important;
  font-weight: 700 !important;
}

.app-header .brand-icon, [class*="brand-icon"] {
  background: rgba(124, 58, 237, 0.10) !important;
  color: #7c3aed !important;
  border-radius: 8px !important;
}

button[onclick*="logout"], a[href*="logout"], .logout, [class*="logout"] {
  color: #475569 !important;
  background: transparent !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
}

button[onclick*="logout"]:hover, a[href*="logout"]:hover {
  color: #7c3aed !important;
  border-color: #7c3aed !important;
  background: rgba(124,58,237,0.05) !important;
}

body h1:not([style*="color"]):not([class*="text-"]),
body h2:not([style*="color"]):not([class*="text-"]),
body h3:not([style*="color"]):not([class*="text-"]) {
  color: #1e293b !important;
}

@supports not (-webkit-background-clip: text) {
  .text-gradient,
  .text-gradient-2,
  .hero-title.text-gradient,
  .hero-title {
    color: #6d28d9 !important;
    background: none !important;
    -webkit-text-fill-color: #6d28d9 !important;
  }
}

header, .app-header, .header, .top-header, [class*="navbar"] {
  overflow: visible !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

header > *, .app-header > *, .header > * { flex-shrink: 0 !important; }

.app-header [class*="positive"] { color: #16a34a !important; }
.app-header [class*="negative"] { color: #dc2626 !important; }

[class*="kpi"]:not([style*="color"]),
[class*="pill"]:not([style*="color"]),
[class*="stat-pill"] {
  color: #1e293b !important;
}

[class*="kpi-green"], [class*="status-ok"] { color: #166534 !important; }
[class*="kpi-amber"], [class*="status-warn"] { color: #92400e !important; }
[class*="kpi-red"], [class*="status-error"] { color: #991b1b !important; }
[class*="kpi-violet"], [class*="status-live"] { color: #6d28d9 !important; }