/* netfilia theme.css — dark/light theme variables and overrides.
 * Plan: docs/plans/feat-dashboard-theme-refonte.md (issue #58).
 *
 * Dark is the default (no data-theme attribute or data-theme="dark").
 * Light is opt-in via :root[data-theme="light"].
 *
 * Pages currently have dark colors hardcoded inline. Rather than refactoring
 * every declaration to use var(), this file ships a set of high-specificity
 * light-mode overrides that target the common selectors used across
 * dashboard, index, login, forgot-password and reset-password. A follow-up
 * PR can gradually migrate the inline styles to use var(--bg) etc.
 */

:root {
  --bg: #0a0a0f;
  --bg-panel: #12121a;
  --bg-hover: #1a1a2a;
  --bg-elev: #1a1a24;
  --border: #2a2a3a;
  --border-soft: rgba(255, 255, 255, 0.06);
  --text: #e4e4ea;
  --text-dim: #8a8a9a;
  --brand-from: #4a9eff;
  --brand-to: #a86eff;
  --brand-gradient: linear-gradient(135deg, #4a9eff, #a86eff);
  --danger: rgba(255, 80, 80, 0.15);
  --danger-fg: #ff5050;
  --success-fg: #4ade80;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #fafafa;
  --bg-panel: #ffffff;
  --bg-hover: #f0f0f5;
  --bg-elev: #ffffff;
  --border: #dcdce5;
  --border-soft: rgba(0, 0, 0, 0.08);
  --text: #1a1a1f;
  --text-dim: #6a6a78;
  --brand-from: #2672d6;
  --brand-to: #7a3fd6;
  --brand-gradient: linear-gradient(135deg, #2672d6, #7a3fd6);
  --danger: rgba(220, 40, 40, 0.10);
  --danger-fg: #c92a2a;
  --success-fg: #15803d;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  color-scheme: light;
}

/* Theme toggle button — shared across pages. */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover { background: var(--bg-hover); }
.theme-toggle .theme-icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-moon { display: inline; }

/* ─────────────────────────────────────────────────────────────────────────
 * Light-mode overrides for existing inline dark styles.
 * Use !important only where the inline <style> block sets the same property
 * at the same specificity — this is the MVP to avoid a full CSS refactor.
 * ───────────────────────────────────────────────────────────────────────── */

:root[data-theme="light"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

:root[data-theme="light"] header {
  background: var(--bg-panel) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text) !important;
}

:root[data-theme="light"] .container,
:root[data-theme="light"] main,
:root[data-theme="light"] section {
  background: transparent !important;
  color: var(--text) !important;
}

:root[data-theme="light"] .panel,
:root[data-theme="light"] .card,
:root[data-theme="light"] .box,
:root[data-theme="light"] .schema-card,
:root[data-theme="light"] .modal,
:root[data-theme="light"] .auth-box,
:root[data-theme="light"] .auth-card {
  background: var(--bg-panel) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
}

:root[data-theme="light"] input[type="text"],
:root[data-theme="light"] input[type="email"],
:root[data-theme="light"] input[type="password"],
:root[data-theme="light"] input[type="search"],
:root[data-theme="light"] textarea,
:root[data-theme="light"] select {
  background: var(--bg-elev) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {
  color: var(--text-dim) !important;
}

:root[data-theme="light"] .btn,
:root[data-theme="light"] button.btn,
:root[data-theme="light"] .btn-secondary {
  background: var(--bg-panel) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
:root[data-theme="light"] .btn-primary {
  background: var(--brand-gradient) !important;
  color: #ffffff !important;
  border: none !important;
}

/* Brand gradient text (.logo, .brand, h1.title) */
:root[data-theme="light"] .logo,
:root[data-theme="light"] .brand,
:root[data-theme="light"] .brand-title {
  background: var(--brand-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Dim text */
:root[data-theme="light"] .muted,
:root[data-theme="light"] .subtitle,
:root[data-theme="light"] .text-dim,
:root[data-theme="light"] small {
  color: var(--text-dim) !important;
}

/* Dashboard specific patterns */
:root[data-theme="light"] .user-info,
:root[data-theme="light"] .user-email {
  color: var(--text-dim) !important;
}

/* Links */
:root[data-theme="light"] a {
  color: var(--brand-from) !important;
}
:root[data-theme="light"] a:hover {
  color: var(--brand-to) !important;
}

/* Error / success messages */
:root[data-theme="light"] .error,
:root[data-theme="light"] .error-msg {
  background: var(--danger) !important;
  color: var(--danger-fg) !important;
}
:root[data-theme="light"] .success,
:root[data-theme="light"] .success-msg {
  color: var(--success-fg) !important;
}