/* ==========================================================================
   AstraDax - light / dark theme
   Dark is the default (tokens in base.css). Light overrides tokens here.
   Loaded LAST on every page. Toggle is injected by /js/theme.js.
   ========================================================================== */

/* ---- Toggle button ---- */
.theme-toggle {
  background: var(--ax-surface); border: 1px solid var(--ax-line); color: var(--ax-text-2);
  cursor: pointer; width: 36px; height: 36px; border-radius: var(--ax-r-md);
  display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.theme-toggle:hover { color: var(--ax-text); border-color: var(--ax-line-strong); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .ic-moon { display: none; }
html[data-theme="light"] .theme-toggle .ic-sun { display: none; }
html[data-theme="light"] .theme-toggle .ic-moon { display: block; }
.theme-toggle.floating { position: fixed; top: 16px; right: 16px; z-index: 60; }

/* ---- Light tokens ---- */
html[data-theme="light"] {
  color-scheme: light;
  --ax-bg: #f1f5f9;
  --ax-surface: #ffffff;
  --ax-surface-2: #f8fafc;
  --ax-surface-3: #eef2f7;
  --ax-line: rgba(15, 23, 42, 0.1);
  --ax-line-strong: rgba(15, 23, 42, 0.18);
  --ax-text: #0f172a;
  --ax-text-2: #334155;
  --ax-text-3: #64748b;
  --ax-accent-hover: #0284c7;
  --ax-accent-soft: rgba(14, 165, 233, 0.12);
  --ax-ok: #059669;
  --ax-warn: #b45309;
  --ax-bad: #dc2626;
  --ax-card-sheen: none;
}

/* ---- Hardcoded white/dark values from the dark design ---- */
html[data-theme="light"] * { scrollbar-color: rgba(15, 23, 42, 0.25) transparent; }
html[data-theme="light"] *::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.2); }
html[data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.35); }
html[data-theme="light"] body::before { opacity: 0.35; animation: none; }
html[data-theme="light"] body.auth { background-image: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(14, 165, 233, 0.12), transparent 70%); }
html[data-theme="light"] .topbar { background: rgba(255, 255, 255, 0.8); }
html[data-theme="light"] .sidebar { background-image: linear-gradient(180deg, rgba(14, 165, 233, 0.07), rgba(255, 255, 255, 0) 32%); }
html[data-theme="light"] .menu-item:hover { background: rgba(15, 23, 42, 0.05); }
html[data-theme="light"] .btn-outline:hover { background: rgba(15, 23, 42, 0.05); }
html[data-theme="light"] tr:hover td { background: rgba(14, 165, 233, 0.06); }
html[data-theme="light"] .progress-bar,
html[data-theme="light"] .strength-seg { background: rgba(15, 23, 42, 0.1); }
html[data-theme="light"] .card:hover { border-color: rgba(15, 23, 42, 0.2); }
html[data-theme="light"] .stat-card:hover .stat-icon { box-shadow: 0 0 0 6px rgba(15, 23, 42, 0.04); }
html[data-theme="light"] .form-control:hover,
html[data-theme="light"] .field-input:hover,
html[data-theme="light"] .modal-input:hover,
html[data-theme="light"] .sub-plan-card:hover { border-color: rgba(15, 23, 42, 0.32); }
html[data-theme="light"] .form-control:focus { background: #ffffff; }
html[data-theme="light"] .welcome-banner h1 { background-image: linear-gradient(100deg, #0f172a 10%, #0284c7 60%, #4f46e5 100%); }
html[data-theme="light"] .modal-overlay,
html[data-theme="light"] .qris-overlay { background: rgba(15, 23, 42, 0.45); }
html[data-theme="light"] .sidebar-overlay { background: rgba(15, 23, 42, 0.4); }
html[data-theme="light"] .modal-card,
html[data-theme="light"] .swal2-popup { box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.35) !important; }
html[data-theme="light"] .sidebar { box-shadow: none; }
html[data-theme="light"] .modal-close:hover { color: var(--ax-bad); }
html[data-theme="light"] .log-process { color: #4f46e5; }

/* ---- Terminal stays dark in both themes ---- */
html[data-theme="light"] .terminal-box { background: #0f172a; color: #e2e8f0; }
html[data-theme="light"] .terminal-box .log-time { color: #94a3b8; }
html[data-theme="light"] .terminal-box .log-process { color: #a5b4fc; }
html[data-theme="light"] .terminal-box .log-info { color: #38bdf8; }
html[data-theme="light"] .terminal-box .log-success { color: #34d399; }
html[data-theme="light"] .terminal-box .log-warn { color: #fbbf24; }
html[data-theme="light"] .terminal-box .log-error { color: #f87171; }

/* ---- Inline dark styles in customer / admin pages ---- */
html[data-theme="light"] #popup-ann-header { background: var(--ax-surface-2) !important; }
html[data-theme="light"] #modal-announcement-popup .modal-footer { background: var(--ax-surface-2) !important; }
html[data-theme="light"] #pairing-code-display { background: var(--ax-surface-2) !important; }
html[data-theme="light"] #thumb-placeholder { color: var(--ax-text-3) !important; }
html[data-theme="light"] .search-bar[style] { background: var(--ax-surface) !important; }