/* SpectralAnalyzer Web — thème sombre moderne, commun aux deux apps */
:root {
  --bg: #0e1016;
  --bg-panel: #151823;
  --bg-elev: #1c2030;
  --bg-elev2: #232839;
  --fg: #e7eaf3;
  --fg-dim: #8b93a7;
  --accent: #5b8def;
  --accent-2: #2dd4bf;
  --accent-grad: linear-gradient(135deg, #5b8def 0%, #7b6cf6 100%);
  --warn: #f5a623;
  --err: #ff5c7a;
  --ok: #2dd4bf;
  --comp1: #5b8def;
  --comp2: #2dd4bf;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  --font: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Cascadia Code', 'JetBrains Mono', 'Consolas', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: radial-gradient(1200px 600px at 80% -10%, #1a1f30 0%, var(--bg) 55%) fixed;
  color: var(--fg); font-family: var(--font); font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
body { display: flex; flex-direction: column; }

.icon { vertical-align: -2px; flex: 0 0 auto; }

/* ---- En-tête ---- */
.app-header {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px;
  background: rgba(21, 24, 35, 0.7);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.app-header h1 {
  font-size: 17px; margin: 0; font-weight: 700; letter-spacing: 0.2px;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.app-header .subtitle { color: var(--fg-dim); font-size: 13px; }
.app-header .spacer { flex: 1; }

.lang-switch { display: flex; align-items: center; gap: 7px; color: var(--fg-dim); font-size: 13px; }

/* ---- Onglets ---- */
.tabs { display: flex; gap: 4px; padding: 6px 14px 0; background: transparent; border-bottom: 1px solid var(--border); }
.tab {
  background: transparent; color: var(--fg-dim);
  border: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 9px 16px; cursor: pointer; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: color .15s, background .15s;
}
.tab:hover { color: var(--fg); background: rgba(255,255,255,0.03); }
.tab.active { color: var(--fg); background: var(--bg-panel); box-shadow: inset 0 -2px 0 var(--accent); }

#app { flex: 1; overflow: auto; position: relative; }
.panel { display: none; padding: 18px; height: 100%; }
.panel.active { display: block; }
.placeholder { color: var(--fg-dim); font-style: italic; }

/* ---- Pied ---- */
.app-footer {
  padding: 5px 18px; background: rgba(21,24,35,0.7); border-top: 1px solid var(--border);
  color: var(--fg-dim); font-family: var(--mono); font-size: 12px; min-height: 24px;
}

/* ---- Champs ---- */
input[type=text], input[type=number], select {
  background: var(--bg-elev); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 13px; font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,141,239,0.18); }
input[type=file] { color: var(--fg-dim); font-size: 12px; }
input[type=file]::file-selector-button {
  background: var(--bg-elev2); color: var(--fg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 12px; margin-right: 10px; cursor: pointer;
}
input[type=file]::file-selector-button:hover { border-color: var(--accent); }

/* ---- Boutons ---- */
button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: inherit; }
button.primary {
  background: var(--accent-grad); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 9px 16px; font-weight: 600; font-size: 13.5px;
  cursor: pointer; box-shadow: 0 4px 14px rgba(91,141,239,0.3); transition: transform .1s, box-shadow .15s, filter .15s;
}
button.primary:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(91,141,239,0.42); }
button.primary:active { transform: translateY(1px); }
button.ghost {
  background: var(--bg-elev); color: var(--fg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 13px; cursor: pointer; font-size: 13px; transition: border-color .15s, background .15s;
}
button.ghost:hover { border-color: var(--accent); background: var(--bg-elev2); }
button.ghost.danger { color: #f87171; border-color: #7f1d1d55; }
button.ghost.danger:hover { border-color: #ef4444; background: rgba(239,68,68,.12); color: #fca5a5; }
button:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; filter: none; }

progress { width: 100%; height: 8px; border: none; border-radius: 6px; overflow: hidden; background: var(--bg-elev); }
progress::-webkit-progress-bar { background: var(--bg-elev); }
progress::-webkit-progress-value { background: var(--accent-grad); }

.row { display: flex; gap: 8px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 14px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2a3043; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #353c52; }
::-webkit-scrollbar-track { background: transparent; }

/* ===== Thème CLAIR (basculé via le bouton d'en-tête, mémorisé) ===========
   On surcharge les variables → tout ce qui utilise var() suit automatiquement.
   Les zones de tracé (#0b0d14, dessinées en JS) restent volontairement sombres
   (panneaux sombres sur page claire) ; on garde donc leur texte clair. */
body.theme-light {
  --bg: #f3f5fa;
  --bg-panel: #ffffff;
  --bg-elev: #eef1f7;
  --bg-elev2: #e2e7f1;
  --fg: #1b1f2a;
  --fg-dim: #5b6479;
  --border: rgba(20, 30, 60, 0.12);
  --border-strong: rgba(20, 30, 60, 0.22);
  --shadow: 0 10px 30px rgba(20, 30, 60, 0.12);
  background: radial-gradient(1200px 600px at 80% -10%, #e9eef9 0%, var(--bg) 55%) fixed;
  color: var(--fg);
}
body.theme-light .app-header,
body.theme-light .app-footer { background: rgba(255, 255, 255, 0.75); }
body.theme-light .tab:hover { background: rgba(20, 30, 60, 0.05); }
body.theme-light ::-webkit-scrollbar-thumb { background: #c2cadb; }
body.theme-light ::-webkit-scrollbar-thumb:hover { background: #aab4cb; }
/* graphes restent sombres → forcer un texte clair lisible dessus */
body.theme-light .dygraph-axis-label { color: #aab2c6 !important; }
body.theme-light .dygraph-legend { color: #e7eaf3 !important; }
/* panneaux de contrôle posés sur la vue 3D sombre → fond clair pour rester lisibles */
body.theme-light .o3d-sidebar { background: rgba(255, 255, 255, 0.72); }