/**
 * Theme System - Light and Dark Modes
 * Codex redesign: tokens for the "slate + teal" data-forward direction.
 * See design_handoff_codex_redesign/README.md for the full token spec.
 */

:root {
  /* ============================================================
     CODEX TOKENS — canonical names from the redesign spec.
     Codex is a dark direction by design; values below are the
     intended dark palette. The light :root keeps the existing
     light tokens for the legacy light theme.
     ============================================================ */

  /* Background layers */
  --bg: #0c0f15;
  --surface: #13171f;
  --surface2: #1a1f29;
  --surface3: #222836;

  /* Borders */
  --border: rgba(255, 255, 255, 0.06);
  --border-hi: rgba(255, 255, 255, 0.12);

  /* Text */
  --text: #e7eaef;
  --text-dim: #8a929e;
  --text-mute: #555b66;

  /* Brand accent — soft lavender (distinct from --cool blue, --upcoming
     deeper purple, and all status colors). */
  --accent: #bdb2ff;
  --accent-dim: #2a2540;

  /* Status / signal */
  --pos: #5fd784;
  --warm: #fbb454;
  --cool: #7aa8ff;
  --neg: #ff7676;
  --upcoming: #b061d6;

  /* Status soft backgrounds (chips, pills, active rows) */
  --pos-dim: rgba(95, 215, 132, 0.16);
  --warm-dim: rgba(251, 180, 84, 0.16);
  --cool-dim: rgba(122, 168, 255, 0.16);
  --neg-dim: rgba(255, 118, 118, 0.16);

  /* Per-type accents (uppercase keys match TYPE_LABELS in src/utils/labels.js
     and TYPE_TOKENS in the prototype's shared-data.jsx). */
  --type-FIR: #e7613b;
  --type-FIR-dim: #3a1a14;
  --type-WAT: #3d8bf0;
  --type-WAT-dim: #0e2240;
  --type-GRA: #4ab57a;
  --type-GRA-dim: #0f2c1d;
  --type-LIG: #e7c93b;
  --type-LIG-dim: #3a2f0d;
  --type-PSY: #b061d6;
  --type-PSY-dim: #2a1438;
  --type-FIG: #b4663f;
  --type-FIG-dim: #2d1a10;
  --type-DRA: #7a6cc9;
  --type-DRA-dim: #1d1934;
  --type-DAR: #5b5f6e;
  --type-DAR-dim: #15171d;
  --type-MET: #9aa6b1;
  --type-MET-dim: #1e2329;
  --type-FAI: #e08fc1;
  --type-FAI-dim: #3a1a2c;
  --type-COL: #c5b69b;
  --type-COL-dim: #2a251e;
  --type-MUL: #c7a87f;
  --type-MUL-dim: #2a2418;
  --type-TRA: #8b6a4f;
  --type-TRA-dim: #241a12;
  --type-ENE: #8aa4be;
  --type-ENE-dim: #161e26;

  /* Typography */
  --font-sans:
    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, system-ui, sans-serif;
  --font-mono:
    'Geist Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* Codex shadow + scrim tokens */
  --shadow-tile: 0 2px 6px -2px rgba(0, 0, 0, 0.4), 0 6px 18px -10px rgba(0, 0, 0, 0.55);
  --shadow-hover: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  --shadow-tile-hover: var(--shadow-hover); /* legacy alias */
  --shadow-modal-panel: var(--shadow-modal); /* legacy alias */
  --backdrop: rgba(6, 8, 12, 0.7);
  --backdrop-strong: rgba(6, 8, 12, 0.82);
  --modal-backdrop: var(--backdrop); /* legacy alias */

  /* Chart palette — read by src/utils/charts.js */
  --chart-grid: rgba(255, 255, 255, 0.05);
  --chart-grid-strong: rgba(255, 255, 255, 0.1);
  --chart-tick-label: #8a929e;
  --chart-tooltip-bg: #1a1f29;
  --chart-tooltip-fg: #e7eaef;

  /* Selection / focus */
  --selection-bg: rgba(189, 178, 255, 0.24);
  --focus-ring: 0 0 0 3px rgba(189, 178, 255, 0.32);

  /* ============================================================
     LEGACY LIGHT MODE TOKENS (unchanged) — Codex is dark-only,
     so the light theme keeps its existing look. Tokens below
     drive every component built before the Codex redesign.
     ============================================================ */

  /* Light Mode (Default) */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #f3f4f6;
  --bg-elevated: #ffffff;

  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --text-inverse: #ffffff;

  --border-color: #e5e7eb;
  --border-focus: #667eea;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Brand colors (same in both modes) */
  --color-primary: #667eea;
  --color-primary-dark: #5568d3;
  --color-secondary: #764ba2;

  /* Semantic colors */
  --color-success: #10b981;
  --color-error: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;

  /* Card states */
  --card-owned: #10b981;
  --card-wishlist: #f59e0b;
  --card-ordered: #3b82f6;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;

  /* Border radius scale. Prefer these tokens over raw px in new CSS.
     codex-*.css exact-value radii are migrated to these (no visual change).
     NOTE: 8px (the most common codex control radius) and 5px/3px have no token
     yet — folding them into the scale shifts pixels, so it's a deliberate
     design decision left for a future pass, not a mechanical migration. */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* Layout widths */
  --content-max-width: 1100px;
  --grid-max-width: 1400px;

  /* Font sizes */
  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;

  /* Z-index layering scale */
  --z-badge: 10; /* card badges, selection checkboxes */
  --z-dropdown: 100; /* search history dropdown */
  --z-modal: 1000; /* base modals, theme toggle */
  --z-modal-stacked: 1100; /* stacked modal (owned edit on card modal) */
  --z-confirm-dialog: 1200; /* inline confirm dialog */
  --z-pull-confirm: 1300; /* sync pull confirm modal */
  --z-pwa: 5000; /* PWA install prompt, offline indicator */
  --z-toast: 9000; /* toast notifications */
  --z-lightbox: 9500; /* image lightbox overlay */
  --z-lightbox-ui: 9501; /* lightbox close/nav controls */
  --z-notification: 9600; /* custom notification toast */
  --z-top-modal: 9700; /* ordered modal (above lightbox) */
  --z-top-confirm: 9800; /* topmost confirm modal */
}

/* Dark Mode — Codex palette (slate background, cool teal accent).
   Existing token names below are *remapped* onto Codex values so that
   every component built against --bg-primary / --color-primary / etc.
   inherits the new look without any per-component edits. */
body.dark-mode {
  --bg-primary: var(--bg); /* #0c0f15 */
  --bg-secondary: var(--surface); /* #13171f */
  --bg-tertiary: var(--surface2); /* #1a1f29 */
  --bg-elevated: var(--surface); /* panels, cards */

  --text-primary: var(--text); /* #e7eaef */
  --text-secondary: var(--text-dim); /* #8a929e */
  --text-tertiary: var(--text-mute); /* #555b66 */
  --text-inverse: #0c0f15;

  --border-color: var(--border-hi); /* rgba(255,255,255,.12) for visible edges */
  --border-focus: var(--accent); /* teal focus ring */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

  /* Brand: teal accent replaces the indigo */
  --color-primary: var(--accent);
  --color-primary-dark: #5fbfb6;

  /* Semantic colors mapped to Codex status palette */
  --color-success: var(--pos);
  --color-error: var(--neg);
  --color-warning: var(--warm);
  --color-info: var(--cool);

  /* Card states */
  --card-owned: var(--pos);
  --card-wishlist: var(--warm);
  --card-ordered: var(--cool);
}

/* Light Mode — remap the legacy --color-primary / --bg-* / --text-*
   tokens onto the Codex light palette so every component built against
   the legacy names auto-inherits the Codex look without per-component
   light-mode overrides. Codex light palette comes from codex-light-theme.css
   (--accent, --surface, --text, etc.); we just bridge the two naming
   conventions here. Mirrors the dark-mode block above. */
:root[data-theme="light"],
.theme-light {
  --bg-primary: var(--bg);
  --bg-secondary: var(--surface);
  --bg-tertiary: var(--surface2);
  --bg-elevated: var(--surface);

  --text-primary: var(--text);
  --text-secondary: var(--text-dim);
  --text-tertiary: var(--text-mute);
  --text-inverse: #ffffff;

  --border-color: var(--border);
  --border-focus: var(--accent);

  --color-primary: var(--accent);
  --color-primary-dark: #156960;
  --color-secondary: var(--accent);

  --color-success: var(--pos);
  --color-error: var(--neg);
  --color-warning: var(--warm);
  --color-info: var(--cool);

  --card-owned: var(--pos);
  --card-wishlist: var(--warm);
  --card-ordered: var(--cool);
}

/* Apply theme colors to existing elements */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.container {
  background-color: var(--bg-primary);
}

/* Headers */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-primary);
}

/* Cards */
.card {
  background-color: var(--bg-elevated);
  border-color: var(--border-color);
  box-shadow: var(--shadow-md);
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

.card-name {
  color: var(--text-primary);
}

.card-number,
.card-set,
.card-meta {
  color: var(--text-secondary);
}

/* Inputs and selects */
input,
select,
textarea {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-color);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--border-focus);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary);
}

/* Buttons */
.btn {
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.btn-secondary {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.btn-secondary:hover {
  background-color: var(--bg-secondary);
}

/* Modals */
.modal-overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

body.dark-mode .modal-overlay {
  background-color: rgba(0, 0, 0, 0.85);
}

.modal-content {
  background-color: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
}

.modal-header {
  border-bottom-color: var(--border-color);
}

/* Filter panel */
.filter-panel {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

/* Stats panel */
.stats-panel {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

.stat-box {
  background-color: var(--bg-elevated);
  border-color: var(--border-color);
}

/* Progress bars */
.progress-bar {
  background-color: var(--color-primary);
}

/* No results message */
.no-results {
  color: var(--text-tertiary);
}

/* Binder elements */
.binder-card {
  background-color: var(--bg-elevated);
  border-color: var(--border-color);
}

.page-grid {
  background-color: var(--bg-elevated);
}

.pocket {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

/* Keyboard shortcuts */
.keyboard-helper kbd {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* Toast notifications - slight adjustment for dark mode */
body.dark-mode .toast {
  background-color: var(--bg-elevated);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

body.dark-mode .toast-message {
  color: var(--text-primary);
}

/* Image placeholders */
body.dark-mode .card-image.loading {
  background-color: var(--bg-tertiary);
}

/* Theme switching is instant — no transitions on color properties */

/* Dev mode switch — binary on/off, same style as theme switch */
.dev-switch {
  display: none;
  position: relative;
  align-items: center;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 3px;
  gap: 0;
  margin-right: 8px;
  flex-shrink: 0;
}
.dev-switch-option {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.2s ease;
  padding: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.dev-switch-option:hover {
  color: rgba(255, 255, 255, 0.9);
}
.dev-switch-option.active {
  color: #e67e22;
}
.dev-switch-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 32px;
  height: 28px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
@media (max-width: 768px) {
  .dev-switch { margin-right: 4px; }
  .dev-switch-option { width: 28px; height: 24px; font-size: 8px; }
  .dev-switch-slider { width: 28px; height: 24px; }
}

/* Tri-state theme switch (Auto / Light / Dark) in compact-header */
.theme-switch {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 3px;
  gap: 0;
  margin-left: 10px;
  flex-shrink: 0;
}

.theme-switch-option {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.2s ease;
  padding: 0;
}

.theme-switch-option:hover {
  color: rgba(255, 255, 255, 0.9);
}

.theme-switch-option.active {
  color: var(--color-primary, #667eea);
}

.theme-switch-option svg {
  display: block;
  pointer-events: none;
}

/* Sliding background indicator */
.theme-switch-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 32px;
  height: 28px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

@media (max-width: 768px) {
  .theme-switch {
    margin-left: 6px;
  }

  .theme-switch-option {
    width: 28px;
    height: 24px;
  }

  .theme-switch-option svg {
    width: 14px;
    height: 14px;
  }

  .theme-switch-slider {
    width: 28px;
    height: 24px;
  }
}

/* Language pill switch — same visual pattern as theme switch */
.lang-switch {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 2px;
  gap: 0;
  flex-shrink: 0;
}

.lang-switch-option {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  transition: opacity 0.2s ease;
  padding: 0;
  opacity: 0.5;
}

.lang-switch-option:hover {
  opacity: 0.85;
}

.lang-switch-option.active {
  opacity: 1;
}

.lang-switch-option .flag-icon {
  width: 20px;
  height: 14px;
  display: block;
  pointer-events: none;
  border-radius: 2px;
}

/* Sliding background indicator */
.lang-switch-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 32px;
  height: 28px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

@media (max-width: 768px) {
  .lang-switch-option {
    width: 28px;
    height: 24px;
  }

  .lang-switch-option .flag-icon {
    width: 18px;
    height: 12px;
  }

  .lang-switch-slider {
    width: 28px;
    height: 24px;
  }
}

/* Currency pill switch — visual twin of .lang-switch.
   Letterforms (€/$/£/¥) instead of flag icons; otherwise identical. */
.currency-switch {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 3px;
  gap: 0;
  flex-shrink: 0;
  margin-left: 6px;
}

.currency-switch-option {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  transition: opacity 0.2s ease, color 0.2s ease;
  padding: 0;
  opacity: 0.5;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.currency-switch-option:hover {
  opacity: 0.85;
}

/* Active glyph needs a dark fill so it stays legible against the white slider.
   Flags/icons in the sibling switches are colorful so they don't need this. */
.currency-switch-option.active {
  opacity: 1;
  color: #4338ca;
}

.currency-switch-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 32px;
  height: 28px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

@media (max-width: 768px) {
  .currency-switch-option,
  .currency-switch-slider {
    width: 28px;
    height: 24px;
    font-size: 12px;
  }
}

/* ==========================================================================
   Search History Dropdown (Phase 6: New Features)
   ========================================================================== */

.search-history-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: var(--shadow-lg);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease;
  z-index: var(--z-dropdown);
  margin-top: -4px;
}

.search-history-dropdown.show {
  max-height: 400px;
  opacity: 1;
  overflow-y: auto;
}

.history-item {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid var(--border-color);
}

.history-item:last-of-type {
  border-bottom: none;
}

.history-item:hover {
  background-color: var(--bg-secondary);
}

.history-icon {
  font-size: 16px;
  flex-shrink: 0;
  opacity: 0.6;
}

.history-text {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
}

.history-remove {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  flex-shrink: 0;
}

.history-remove:hover {
  background-color: var(--bg-tertiary);
  color: var(--color-error);
}

.history-clear {
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
}

.history-clear button {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.history-clear button:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   Card Modal Redesign - Dark Mode Support
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .card-modal-actions {
  background: var(--bg-secondary);
}

body.dark-mode .info-label {
  color: var(--text-tertiary);
}

body.dark-mode .info-value {
  color: var(--text-primary);
}

body.dark-mode .card-section {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

body.dark-mode .card-section-title {
  color: var(--color-primary);
}

body.dark-mode .combat-stat {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
}

body.dark-mode .combat-stat-label {
  color: var(--text-tertiary);
}

body.dark-mode .combat-stat-value {
  color: var(--text-primary);
}

body.dark-mode .ability-item {
  background: var(--bg-tertiary);
  border-left-color: #9b59b6;
}

body.dark-mode .ability-type {
  background: rgba(155, 89, 182, 0.2);
  color: #bb8fce;
}

body.dark-mode .ability-name {
  color: var(--text-primary);
}

body.dark-mode .ability-effect {
  color: var(--text-secondary);
}

body.dark-mode .attack-item {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
}

body.dark-mode .attack-name {
  color: var(--text-primary);
}

body.dark-mode .attack-effect {
  color: var(--text-secondary);
}

body.dark-mode .stage-badge {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

body.dark-mode .type-badge-compact {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

body.dark-mode .card-modal-prices {
  background: var(--bg-secondary);
}

body.dark-mode .modal-header-left h2 {
  color: var(--text-primary);
}

body.dark-mode .attack-item.attack-gx {
  border-left-color: #3b82f6;
}

body.dark-mode .attack-type-badge.gx {
  background: #1e40af;
  color: #93c5fd;
}

body.dark-mode #modalCombatStatsWrapper {
  border-top-color: var(--border-color);
}