/* ===================================================================
   Receipt Coding dark mode
   JavaScript sets html[data-theme]. Without JavaScript, users who prefer a
   dark color scheme get the same tokens via prefers-color-scheme.
   =================================================================== */

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --paper:        #101512;
    --surface:      #17211c;
    --surface-sunk: #0d1713;
    --ink:          #eef5ef;
    --ink-soft:     #b7c4bb;
    --line:         #2f4037;
    --line-strong:  #52645a;

    --accent:        #62c89f;
    --accent-strong: #0f241d;
    --accent-ink:    #07110d;
    --accent-haze:   #1f382e;

    --danger:       #ff9a92;
    --focus:        #f0c76a;
    --shadow:       0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 32px -18px rgba(0, 0, 0, 0.85);

    --primary-color: var(--accent);
    --primary-hover: #8eddbd;
    --border-color: var(--line-strong);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-soft);

    color-scheme: dark;
  }
}

html[data-theme="dark"] {
  --paper:        #101512;
  --surface:      #17211c;
  --surface-sunk: #0d1713;
  --ink:          #eef5ef;
  --ink-soft:     #b7c4bb;
  --line:         #2f4037;
  --line-strong:  #52645a;

  --accent:        #62c89f;
  --accent-strong: #0f241d;
  --accent-ink:    #07110d;
  --accent-haze:   #1f382e;

  --danger:       #ff9a92;
  --focus:        #f0c76a;
  --shadow:       0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 32px -18px rgba(0, 0, 0, 0.85);

  --primary-color: var(--accent);
  --primary-hover: #8eddbd;
  --border-color: var(--line-strong);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-soft);

  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

/* Navigation needs light text even though --accent-ink is dark for buttons. */
html[data-theme="dark"] nav[role="navigation"],
html[data-theme="dark"] .brand,
html[data-theme="dark"] .nav-links a,
html[data-theme="dark"] .nav-links form button,
html[data-theme="dark"] .theme-toggle {
  color: #f4fff9;
}

html[data-theme="dark"] .nav-links form button,
html[data-theme="dark"] .theme-toggle {
  border-color: rgba(244, 255, 249, 0.35);
}

html[data-theme="dark"] .nav-toggle span {
  background: #f4fff9;
}

html[data-theme="dark"] .brand-mark {
  background: linear-gradient(150deg, #f0c76a, #62c89f 65%);
  border-color: rgba(255, 255, 255, 0.25);
}

html[data-theme="dark"] tr.uncategorized {
  background: #3a3518;
}

html[data-theme="dark"] tr.low-confidence {
  background: #3b2d1f;
}

html[data-theme="dark"] tr.uncategorized:hover,
html[data-theme="dark"] tr.low-confidence:hover {
  background: #463f22;
}

html[data-theme="dark"] .flash-error {
  background: #3b1716;
  border-color: #ff9a92;
  color: #ffd9d5;
}

html[data-theme="dark"] .flash-success {
  background: #123224;
  border-color: #62c89f;
  color: #d4f7e8;
}

html[data-theme="dark"] .flash-info {
  background: var(--accent-haze);
  border-color: var(--accent);
  color: #ddf9ee;
}

html[data-theme="dark"] .flash-warning,
html[data-theme="dark"] .alert-warning {
  background: #3b2d1f;
  border-color: #f0c76a;
  color: #ffe7af;
}

html[data-theme="dark"] .badge-low-confidence {
  color: #ffe7af;
  background: #3b2d1f;
}

html[data-theme="dark"] .badge-duplicate {
  color: #ffd9d5;
  background: #3b1716;
}

html[data-theme="dark"] .badge-uncategorized {
  color: #fff0a8;
  background: #373313;
}

html[data-theme="dark"] .badge-approved {
  color: #d1fae5;
  background: #065f46;
}

html[data-theme="dark"] .badge-rejected {
  color: #fee2e2;
  background: #7f1d1d;
}

html[data-theme="dark"] .badge-pending {
  color: #fef3c7;
  background: #783f04;
}

html[data-theme="dark"] .stat-card.warning .value {
  color: var(--focus, #f0c76a);
}

html[data-theme="dark"] .stat-card.danger .value {
  color: var(--danger, #ff9a92);
}

html[data-theme="dark"] .bar-label,
html[data-theme="dark"] .bar-value,
html[data-theme="dark"] .daily-label {
  color: var(--ink-soft, #b7c4bb);
}

html[data-theme="dark"] .dropzone.dragover {
  color: var(--ink);
}

html[data-theme="dark"] .pwa-install-banner {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

html[data-theme="dark"] .pwa-install-banner__install {
  background: var(--accent);
  color: var(--accent-ink);
}

html[data-theme="dark"] .pwa-install-banner__install:hover {
  background: #8eddbd;
}

html[data-theme="dark"] .pwa-install-banner__dismiss {
  color: var(--ink);
  border-color: var(--line-strong);
}

html[data-theme="dark"] .camera-btn {
  color: var(--accent-ink);
}

html[data-theme="dark"] .camera-btn:hover {
  background: var(--primary-hover);
  color: var(--accent-ink);
}

html[data-theme="dark"] .camera-controls .btn-primary {
  color: var(--accent-ink);
}

html[data-theme="dark"] .camera-preview {
  box-shadow: var(--shadow);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) nav[role="navigation"],
  html:not([data-theme]) .brand,
  html:not([data-theme]) .nav-links a,
  html:not([data-theme]) .nav-links form button,
  html:not([data-theme]) .theme-toggle {
    color: #f4fff9;
  }

  html:not([data-theme]) .nav-links form button,
  html:not([data-theme]) .theme-toggle {
    border-color: rgba(244, 255, 249, 0.35);
  }

  html:not([data-theme]) .nav-toggle span {
    background: #f4fff9;
  }

  html:not([data-theme]) .brand-mark {
    background: linear-gradient(150deg, #f0c76a, #62c89f 65%);
    border-color: rgba(255, 255, 255, 0.25);
  }

  html:not([data-theme]) tr.uncategorized {
    background: #3a3518;
  }

  html:not([data-theme]) tr.low-confidence {
    background: #3b2d1f;
  }

  html:not([data-theme]) tr.uncategorized:hover,
  html:not([data-theme]) tr.low-confidence:hover {
    background: #463f22;
  }

  html:not([data-theme]) .flash-error {
    background: #3b1716;
    border-color: #ff9a92;
    color: #ffd9d5;
  }

  html:not([data-theme]) .flash-success {
    background: #123224;
    border-color: #62c89f;
    color: #d4f7e8;
  }

  html:not([data-theme]) .flash-info {
    background: var(--accent-haze);
    border-color: var(--accent);
    color: #ddf9ee;
  }

  html:not([data-theme]) .flash-warning,
  html:not([data-theme]) .alert-warning {
    background: #3b2d1f;
    border-color: #f0c76a;
    color: #ffe7af;
  }

  html:not([data-theme]) .badge-low-confidence {
    color: #ffe7af;
    background: #3b2d1f;
  }

  html:not([data-theme]) .badge-duplicate {
    color: #ffd9d5;
    background: #3b1716;
  }

  html:not([data-theme]) .badge-uncategorized {
    color: #fff0a8;
    background: #373313;
  }

  html:not([data-theme]) .dropzone.dragover {
    color: var(--ink);
  }

  html:not([data-theme]) .pwa-install-banner {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line-strong);
  }

  html:not([data-theme]) .pwa-install-banner__install {
    background: var(--accent);
    color: var(--accent-ink);
  }

  html:not([data-theme]) .pwa-install-banner__install:hover {
    background: #8eddbd;
  }

  html:not([data-theme]) .pwa-install-banner__dismiss {
    color: var(--ink);
    border-color: var(--line-strong);
  }

  html:not([data-theme]) .camera-btn {
    color: var(--accent-ink);
  }

  html:not([data-theme]) .camera-btn:hover {
    background: var(--primary-hover);
    color: var(--accent-ink);
  }

  html:not([data-theme]) .camera-controls .btn-primary {
    color: var(--accent-ink);
  }

  html:not([data-theme]) .camera-preview {
    box-shadow: var(--shadow);
  }
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: auto;
  color: var(--accent-ink);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.9rem;
  line-height: 1.2;
  padding: 0.35rem 0.75rem;
  opacity: 0.95;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.42);
  transform: none;
}

.theme-toggle[hidden] {
  display: none;
}

@media (max-width: 768px) {
  .theme-toggle {
    width: 100%;
    min-height: 44px;
  }
}