/* ================================================================
   asAi dark theme: logged-in customer pages

   Loaded only by dashboard, models, keys, logs, topup and login, after
   app.css and theme.css. Public marketing pages never load this file,
   so app.css stays byte-identical for them.

   Rules here are prefixed with html[data-theme="dark"] so they outrank
   the single-class rules in app.css without touching that file.
   ================================================================ */

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

  /* neutrals */
  --bg: #0d1014;               /* page background */
  --bg-deep: #12161b;          /* topnav / inputs / code surface */
  --surface: #151a20;          /* cards */
  --surface-hover: #1c2229;
  --surface-active: #252c35;
  --line: #262d36;
  --line-bright: #3a4350;
  --text: #e9eef6;
  --text-secondary: #b6c0cc;
  --text-muted: #8b96a4;
  --placeholder: #6d7784;
  --inverse: #0d1014;

  /* accent: #818cf8 for text and links, #6366f1 stays for fills */
  --accent: #818cf8;
  --accent-strong: #6366f1;
  --accent-deep: #a5b4fc;
  --accent-soft: #3d4270;
  --accent-tint: rgba(129, 140, 248, 0.14);
  --accent-tint-strong: rgba(129, 140, 248, 0.22);
  --orange: #fb923c;
  --orange-text: #fdba74;

  /* semantic */
  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.13);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.13);
  --danger-bright: #fca5a5;
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.15);
}

/* ---------- shell ---------- */

html[data-theme="dark"] ::selection {
  background: var(--accent-strong);
  color: #ffffff;
}

html[data-theme="dark"] .topnav {
  background: rgba(13, 16, 20, 0.85);
}

html[data-theme="dark"] .nav-tab:hover,
html[data-theme="dark"] .nav-tab.active {
  background: var(--surface);
}

html[data-theme="dark"] .nav-tab.active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .lang-btn[aria-current="true"],
html[data-theme="dark"] .filter-chip.active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] input:focus {
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.22);
}

/* --line-bright stays decorative; form controls get a 3:1 boundary and a fill
   a step darker than the card so the field reads as a field. */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #0a0e13;
  border-color: #5d6a80;
}

html[data-theme="dark"] .theme-toggle {
  border-color: #5d6a80;
  color: var(--text);
}

/* ---------- buttons ---------- */

html[data-theme="dark"] .button.secondary:hover {
  color: var(--accent);
}

/* --danger is a light red in dark mode, so a filled danger button needs a
   darker fill to keep white label text legible. */
html[data-theme="dark"] .button.danger {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #ffffff;
}

html[data-theme="dark"] .button.danger:hover {
  background: #991b1b;
  border-color: #991b1b;
}

/* ---------- badges ---------- */

html[data-theme="dark"] .verification-badge.verified {
  color: #6ee7b7;
  background: rgba(52, 211, 153, 0.14);
  border-color: rgba(52, 211, 153, 0.4);
}

html[data-theme="dark"] .verification-badge.unverified {
  color: #fdba74;
  background: rgba(251, 146, 60, 0.14);
  border-color: rgba(251, 146, 60, 0.42);
}

html[data-theme="dark"] .status-chip.status-fast {
  color: #6ee7b7;
  background: rgba(52, 211, 153, 0.15);
}

html[data-theme="dark"] .status-chip.status-running {
  color: #a5b4fc;
  background: rgba(129, 140, 248, 0.16);
}

html[data-theme="dark"] .status-chip.status-unstable {
  color: #fcd34d;
  background: rgba(251, 191, 36, 0.16);
}

html[data-theme="dark"] .status-chip.status-stale {
  color: #b6c0cc;
  background: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .status-chip.status-unavailable {
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.16);
}

html[data-theme="dark"] .status-latency {
  color: var(--text-muted);
}

html[data-theme="dark"] .free-model-badge {
  color: #6ee7b7;
  background: rgba(52, 211, 153, 0.14);
  border-color: rgba(52, 211, 153, 0.38);
}

html[data-theme="dark"] .modality-badge.video {
  border-color: rgba(251, 146, 60, 0.4);
  background: rgba(251, 146, 60, 0.13);
  color: #fdba74;
}

/* ---------- surfaces ---------- */

html[data-theme="dark"] .stat-card:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .stat-card.hero-stat {
  background-image: linear-gradient(135deg, rgba(129, 140, 248, 0.16), rgba(129, 140, 248, 0.03));
}

html[data-theme="dark"] .topup-bonus-announcement {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .compact-model-row:hover {
  background: rgba(129, 140, 248, 0.07);
}

html[data-theme="dark"] #key-revoke-dialog {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] #key-revoke-dialog::backdrop {
  background: rgba(0, 0, 0, 0.62);
}

/* ---------- feedback ---------- */

html[data-theme="dark"] .message {
  border-color: rgba(248, 113, 113, 0.4);
}

html[data-theme="dark"] .message.success {
  border-color: rgba(52, 211, 153, 0.4);
}

html[data-theme="dark"] .secret-result.error {
  border-color: rgba(248, 113, 113, 0.4);
}

/* ---------- charts ---------- */

/* Tooltip is an inverted chip: light surface, dark label. */
html[data-theme="dark"] .chart-tooltip {
  background: #e9eef6;
  color: #10141a;
}

html[data-theme="dark"] .chart-tooltip span {
  color: #4b5563;
}

/* Donut slices need lighter hues to read against the dark card. */
html[data-theme="dark"] .model-choice-slice-0,
html[data-theme="dark"] .model-choice-swatch-0 { color: #818cf8; }

html[data-theme="dark"] .model-choice-slice-1,
html[data-theme="dark"] .model-choice-swatch-1 { color: #2dd4bf; }

html[data-theme="dark"] .model-choice-slice-2,
html[data-theme="dark"] .model-choice-swatch-2 { color: #fb923c; }

html[data-theme="dark"] .model-choice-slice-3,
html[data-theme="dark"] .model-choice-swatch-3 { color: #f472b6; }

html[data-theme="dark"] .model-choice-slice-4,
html[data-theme="dark"] .model-choice-swatch-4 { color: #60a5fa; }

html[data-theme="dark"] .model-choice-slice-5,
html[data-theme="dark"] .model-choice-swatch-5 { color: #a78bfa; }

html[data-theme="dark"] .model-choice-slice-6,
html[data-theme="dark"] .model-choice-swatch-6 { color: #facc15; }

html[data-theme="dark"] .model-choice-slice-7,
html[data-theme="dark"] .model-choice-swatch-7 { color: #94a3b8; }

html[data-theme="dark"] .model-choice-slice-8,
html[data-theme="dark"] .model-choice-swatch-8 { color: #a3e635; }

html[data-theme="dark"] .model-choice-slice-9,
html[data-theme="dark"] .model-choice-swatch-9 { color: #fbbf24; }

html[data-theme="dark"] .model-choice-slice-10,
html[data-theme="dark"] .model-choice-swatch-10 { color: #38bdf8; }

html[data-theme="dark"] .model-choice-slice-11,
html[data-theme="dark"] .model-choice-swatch-11 { color: #f9a8d4; }

/* ---------- login ---------- */

/* Google's own dark treatment: dark surface, light label, brand mark kept.
   The surface sits one step above the card so it still reads as a button. */
html[data-theme="dark"] .google-button {
  background: #252c35;
  color: #e9eef6;
  border-color: #5d6a80;
}

html[data-theme="dark"] .google-button:hover {
  background: #2f3742;
  border-color: #6d7a90;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .verify-nudge {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(129, 140, 248, 0.35);
}

html[data-theme="dark"] .verify-nudge p {
  color: var(--accent-deep);
}

/* ---------- top up ---------- */

/* DuitNow/FPX marks are full-colour on white; keep them on a white chip. */
html[data-theme="dark"] .payment-method-icon {
  background: #ffffff;
  border-radius: 8px;
  padding: 4px;
  box-sizing: content-box;
}

/* The payment QR is white-module on transparent, so the box stays white. */
html[data-theme="dark"] .qr-box {
  background: #ffffff;
  border-color: #3a4350;
}

/* ---------- footer ---------- */

html[data-theme="dark"] .site-foot {
  color: var(--text-muted);
}