/* ==========================================================================
   KIDSSI — THÈMES ALTERNATIFS
   ========================================================================== */

/* ==========================================================================
   0. PALETTES
   ========================================================================== */

html[data-theme] {
  --bg: #e0e5ec;
  --shadow-d: #cbd5e1;
  --shadow-l: #f8fafc;
  --ink: #334155;
  --ink-2: #64748b;
  --ink-3: #475569;
  --ink-4: #94a3b8;
  --ink-locked: #a3b1c6;
  --accent: #6366f1;
  --bar-line: rgba(163, 177, 198, 0.4);
  --bar-glow: rgba(163, 177, 198, 0.25);

  --kidio-card-bg: #eef1f6;
  --kidio-surface: var(--bg);
  --kidio-track: var(--shadow-d);
  --kidio-border: var(--shadow-d);
  --kidio-border-soft: var(--shadow-d);
  --kidio-ink-strong: var(--ink);
  --kidio-ink: var(--ink);
  --kidio-ink-2: var(--ink-2);
  --kidio-ink-soft: var(--ink-4);
  --kidio-accent: var(--accent);
  --kidio-accent-strong: var(--accent);
}

html[data-theme="sharp"] {
  --kidio-card-bg: #f4f6f9;
  --bg: #e8ebef; --shadow-d: #bcc2cc; --shadow-l: #ffffff;
  --ink: #1a2030; --ink-2: #47516a; --ink-3: #333c52; --ink-4: #7a8496; --ink-locked: #9aa3b2;
  --accent: #334155;
  --bar-line: rgba(150, 160, 180, 0.5); --bar-glow: rgba(150, 160, 180, 0.3);
}

html[data-theme="dark"] {
  --kidio-card-bg: #353a4b;
  --bg: #2a2d3a; --shadow-d: #1f2129; --shadow-l: #353948;
  --ink: #c7cbe0; --ink-2: #8b90ad; --ink-3: #a5abcc; --ink-4: #6b7096; --ink-locked: #545a78;
  --accent: #818cf8;
  --bar-line: rgba(20, 21, 27, 0.6); --bar-glow: rgba(0, 0, 0, 0.35);
}

/* Logo du header (assets/core.css) : remplace le bleu/orange d'origine
   par une seule teinte sur chaque thème alternatif. Sur le thème sombre,
   du blanc — l'indigo de --kidio-accent restait trop peu lisible sur fond
   sombre. Sur les autres, --kidio-accent du thème actif. Le thème "base"
   (sans attribut data-theme, non ciblé par ces règles) garde les couleurs
   vraies d'origine posées dans index.html/core.css — jamais touché ici. */
html[data-theme="dark"] .kidio-logo-role-blue,
html[data-theme="dark"] .kidio-logo-role-orange {
  fill: #ffffff;
}

html[data-theme]:not([data-theme="dark"]) .kidio-logo-role-blue,
html[data-theme]:not([data-theme="dark"]) .kidio-logo-role-orange {
  fill: var(--kidio-accent, #6366f1);
}

html[data-theme="mint"] {
  --kidio-card-bg: #f9fefb;
  --bg: #eefaf3; --shadow-d: #c9e6d5; --shadow-l: #ffffff;
  --ink: #065f46; --ink-2: #059669; --ink-3: #047857; --ink-4: #6ee7b7; --ink-locked: #a7f3d0;
  --accent: #059669;
  --bar-line: rgba(110, 180, 150, 0.4); --bar-glow: rgba(110, 180, 150, 0.25);
}

html[data-theme="ice"] {
  --kidio-card-bg: #f3f9fe;
  --bg: #e3edf7; --shadow-d: #c5d3e0; --shadow-l: #ffffff;
  --ink: #163f5e; --ink-2: #2b7bb9; --ink-3: #3572a0; --ink-4: #7fa8c9; --ink-locked: #a9c6de;
  --accent: #2b7bb9;
  --bar-line: rgba(150, 180, 210, 0.4); --bar-glow: rgba(150, 180, 210, 0.25);
}

html[data-theme="white"] {
  --kidio-card-bg: #ffffff;
  --bg: #ffffff; --shadow-d: #d6dbe3; --shadow-l: #ffffff;
  --ink: #334155; --ink-2: #64748b; --ink-3: #475569; --ink-4: #94a3b8; --ink-locked: #a3b1c6;
  --accent: #6366f1;
  --bar-line: rgba(203, 213, 225, 0.6); --bar-glow: rgba(203, 213, 225, 0.35);
}

html[data-theme="peach"] {
  --kidio-card-bg: #fffaf5;
  --bg: #fff3ea; --shadow-d: #f0c9ab; --shadow-l: #ffffff;
  --ink: #9a3412; --ink-2: #ea580c; --ink-3: #c2410c; --ink-4: #fb923c; --ink-locked: #fed7aa;
  --accent: #ea580c;
  --bar-line: rgba(240, 170, 120, 0.4); --bar-glow: rgba(240, 170, 120, 0.25);
}

/* ==========================================================================
   1. CHÂSSIS
   ========================================================================== */

html[data-theme],
html[data-theme] body {
  background-color: var(--bg);
  color: var(--ink);
  transition: background-color 0.3s ease, color 0.3s ease;
}

html[data-theme] .top-inset-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--bar-line);
  box-shadow: 0 2px 8px var(--bar-glow);
}

html[data-theme] .neu-logo-box {
  background: var(--bg);
  border: 1px solid var(--shadow-d);
  box-shadow: 3px 3px 6px var(--shadow-d), -3px -3px 6px var(--shadow-l);
  color: var(--accent);
}

/* Sidebar : ombre ajustée pour supprimer le chevauchement */
html[data-theme] .left-detached-sidebar {
  background: var(--bg);
  background-image: none;
  border: 1px solid var(--shadow-d);
  border-radius: 1.25rem;
  box-shadow: 6px 6px 14px var(--shadow-d), -6px -6px 14px var(--shadow-l);
}

/* Workspace : cadrage neumorphique identique à la maquette */
html[data-theme] .workspace {
  background: var(--bg);
  background-image: none;
  border: 1px solid var(--shadow-d);
  border-radius: 1.25rem;
  box-shadow: 8px 8px 18px var(--shadow-d), -8px -8px 18px var(--shadow-l);
}

/* Alignements exacts du châssis */
html[data-theme] .left-sidebar-container,
html[data-theme] .workspace { 
  top: 58px; 
}

html[data-theme] .left-sidebar-container { 
  left: 0.75rem;
  gap: 0.75rem; 
}

@media (min-width: 1024px) {
  html[data-theme] .workspace { 
    left: calc(0.75rem + 265px + 0.75rem); 
  }
  html[data-theme] body.sidebar-closed .workspace { 
    left: 0.75rem; 
  }
}

html[data-theme] .unified-3d-box {
  background: var(--bg);
  border: 1px solid var(--shadow-d);
  border-radius: 1.25rem;
  box-shadow: 8px 8px 16px var(--shadow-d), -8px -8px 16px var(--shadow-l);
}

html[data-theme] .leader-row {
  background: var(--bg);
  border: 1px solid var(--shadow-d);
  box-shadow: 2px 2px 5px var(--shadow-d), -2px -2px 5px var(--shadow-l);
}
html[data-theme] .rank-other { background: var(--bg); color: var(--ink-4); }

html[data-theme] .stats-section-v2 {
  background: var(--bg);
  border: 1px solid var(--shadow-d);
  border-radius: 0.75rem;
  box-shadow: inset 3px 3px 6px var(--shadow-d), inset -3px -3px 6px var(--shadow-l);
}

html[data-theme] .neu-white-btn {
  background: var(--bg);
  border: 1px solid var(--shadow-d);
  border-radius: 0.75rem;
  box-shadow: 3px 3px 6px var(--shadow-d), -3px -3px 6px var(--shadow-l);
  color: var(--ink);
}
html[data-theme] .neu-white-btn:active {
  box-shadow: inset 2px 2px 5px var(--shadow-d), inset -2px -2px 5px var(--shadow-l);
}
html[data-theme] .neu-white-pressed {
  background: var(--bg);
  box-shadow: inset 2px 2px 4px var(--shadow-d), inset -2px -2px 4px var(--shadow-l);
}

html[data-theme] .game-head-icon {
  background: var(--bg);
  border: 1px solid var(--shadow-d);
  box-shadow: 3px 3px 6px var(--shadow-d), -3px -3px 6px var(--shadow-l);
  color: var(--accent);
}
html[data-theme] .game-head h2 { color: var(--ink); }
html[data-theme] .game-head h2 span { color: var(--accent); }
html[data-theme] .game-head p { color: var(--ink-2); }

html[data-theme] .game-loading-overlay,
html[data-theme] .kidio-splash {
  background: var(--bg);
  opacity: 0.94;
}
html[data-theme] .kidio-splash.is-gone { opacity: 0; }
html[data-theme] .kidio-splash-status { color: var(--ink-2); }
html[data-theme] .kidio-splash-bar { background: var(--shadow-d); }
html[data-theme] .kidio-splash-fill,
html[data-theme] .game-loader-spinner { border-top-color: var(--accent); }
html[data-theme] .kidio-splash-fill { background: var(--accent); }
html[data-theme] .game-loader { color: var(--ink-2); }

/* ==========================================================================
   2. CARTE DES NIVEAUX
   ========================================================================== */

html[data-theme] .level-tile {
  background-color: var(--bg);
  background-image: none;
  color: var(--ink-3);
  border: 1px solid var(--shadow-d);
  border-radius: 22%;
  box-shadow: 3px 3px 6px var(--shadow-d), -3px -3px 6px var(--shadow-l);
}

html[data-theme] .level-tile.is-playable {
  box-shadow: 3px 3px 6px var(--shadow-d), -3px -3px 6px var(--shadow-l);
  animation: none;
}
html[data-theme] .level-tile.is-done {
  box-shadow: 4px 4px 8px var(--shadow-d), -4px -4px 8px var(--shadow-l);
}
html[data-theme] .level-tile.is-soon,
html[data-theme] .level-tile.is-locked {
  color: var(--ink-locked);
  box-shadow: inset 2px 2px 4px var(--shadow-d), inset -2px -2px 4px var(--shadow-l);
}

html[data-theme] .level-flag {
  background: var(--bg);
  border: 0;
  color: var(--ink-2);
  box-shadow: 2px 2px 4px var(--shadow-d);
}

html[data-theme] .level-cell::after {
  background-color: var(--kidio-border);
  box-shadow:
    inset 1px 1px 2px var(--shadow-d),
    inset -1px -1px 1px var(--shadow-l);
}

/* ==========================================================================
   2bis. DASHBOARD PARENT
   ========================================================================== */

html[data-theme] .pstats-frame,
html[data-theme] .pstats-panel {
  background: var(--bg);
  border-color: var(--shadow-d);
}
html[data-theme] .pstats-child-item,
html[data-theme] .pstats-text-input,
html[data-theme] .pstats-bracket-btn {
  background: var(--bg);
  border-color: var(--shadow-d);
  color: var(--ink);
}
html[data-theme] .pstats-child-item.is-selected,
html[data-theme] .pstats-bracket-btn.is-selected {
  border-color: var(--accent);
}
html[data-theme] .pstats-child-name,
html[data-theme] .pstats-popup-title,
html[data-theme] .pstats-section-title,
html[data-theme] .pstats-hero h1 { color: var(--ink); }
html[data-theme] .pstats-child-age,
html[data-theme] .pstats-hero p { color: var(--ink-4); }
html[data-theme] .pstats-section-title i { color: var(--accent); }

/* ==========================================================================
   3. LISIBILITÉ
   ========================================================================== */

html[data-theme] .text-slate-800,
html[data-theme] .text-slate-700,
html[data-theme] .text-slate-600,
html[data-theme] .text-slate-500 { color: var(--ink); }

html[data-theme] .text-slate-400,
html[data-theme] .text-slate-300 { color: var(--ink-4); }

html[data-theme] .text-indigo-600,
html[data-theme] .text-indigo-500 { color: var(--accent); }

html[data-theme] .border-slate-100,
html[data-theme] .border-slate-200 { border-color: var(--shadow-d); }

html[data-theme] .bg-slate-50,
html[data-theme] .bg-indigo-50 { background-color: var(--bg); }

html[data-theme] .hover\:bg-slate-50:hover,
html[data-theme] .hover\:bg-rose-50:hover { background-color: var(--shadow-d); }