/* OG Accounts — light theme (white background, blue accent, black text). The server renders
   <html data-theme> from the visitor's choice, so there is no flash; dark stays the default.
   Every rule is scoped to [data-theme="light"], which outranks the base files whatever their load order. */
:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-2: #f5f7fb;
  --panel: #ffffff;
  --panel-2: #f7f9fc;
  --panel-3: #eef2f8;
  --line: #e4e9f1;
  --line-2: #d6deea;
  --text: #0a0a0a;
  --text-2: #1f2937;
  --muted: #5b6474;
  --accent: #1d4ed8;
  --accent-ink: #ffffff;
  --accent-soft: rgb(29 78 216 / .08);
  --danger: #dc2626;
  --danger-soft: rgb(220 38 38 / .08);
  --warn: #b45309;
  --warn-soft: rgb(217 119 6 / .1);
  --ok: #15803d;
  --ok-soft: rgb(22 163 74 / .1);
  --info: #475569;
  --shadow: 0 1px 2px rgb(15 23 42 / .05), 0 18px 40px -26px rgb(15 23 42 / .28);
  --accent-rgb: 29 78 216;
  --ink-rgb: 15 23 42;
  --shade-rgb: 100 116 139;
  --bg-rgb: 255 255 255;
  --panel-rgb: 255 255 255;
  /* auth pages */
  --auth-bg: #ffffff;
  --auth-field: #f7f9fc;
  --auth-border: rgb(15 23 42 / .14);
  --auth-border-strong: rgb(15 23 42 / .28);
  --auth-text: #0a0a0a;
  --auth-muted: #5b6474;
  --auth-soft: #1f2937;
  --auth-danger: #e11d48;
  --auth-ok: #15803d;
  --auth-accent: #1d4ed8;
  --auth-submit-bg: #1d4ed8;
  --auth-submit-ink: #ffffff;
  --auth-submit-hover: #1e40af;
  color-scheme: light;
}

/* Surfaces and borders that were hard-coded for the dark theme */
[data-theme="light"] .btn-ghost:hover, [data-theme="light"] .svc-card:hover { border-color: #c3cbd9; }
[data-theme="light"] .avatar { background: linear-gradient(145deg, #eef2f8, #e2e8f0); }
[data-theme="light"] .cat-logo { background: var(--tint-bg, #eef2f8); }
[data-theme="light"] .brand-mono { filter: none; opacity: .88; } /* simple-icons ship black; dark mode inverts them */
[data-theme="light"] .secret-box { background: var(--bg-2); }
[data-theme="light"] .badge-processing, [data-theme="light"] .badge-review { color: #0369a1; background: rgb(3 105 161 / .08); border-color: rgb(3 105 161 / .22); }
[data-theme="light"] .chip-danger { background: rgb(225 29 72 / .08); color: #e11d48; border-color: rgb(225 29 72 / .25); }
[data-theme="light"] .chat-receipt.is-seen { color: var(--accent); }
[data-theme="light"] .tint-slate { --tint-bg: #eef0f4; --tint-fg: #3f3f46; }
[data-theme="light"] .tint-lime { --tint-bg: #f1f9d2; --tint-fg: #4d6b00; }
[data-theme="light"] .tint-emerald { --tint-bg: #e3f7ec; --tint-fg: #047857; }
[data-theme="light"] .tint-sky { --tint-bg: #e0f2fe; --tint-fg: #0369a1; }
[data-theme="light"] .tint-violet { --tint-bg: #ede9fe; --tint-fg: #6d28d9; }
[data-theme="light"] .tint-rose { --tint-bg: #ffe4e8; --tint-fg: #be123c; }
[data-theme="light"] .tint-orange { --tint-bg: #ffedd5; --tint-fg: #c2410c; }
[data-theme="light"] .tint-amber { --tint-bg: #fef3c7; --tint-fg: #b45309; }
[data-theme="light"] .tint-teal { --tint-bg: #ccfbf1; --tint-fg: #0f766e; }
[data-theme="light"] .tint-fuchsia { --tint-bg: #fae8ff; --tint-fg: #a21caf; }
[data-theme="light"] .pm-vodafone { background: #fee2e2; color: #b91c1c; }
[data-theme="light"] .pm-instapay { background: #ede9fe; color: #6d28d9; }
[data-theme="light"] .pm-etisalat, [data-theme="light"] .pm-we { background: #dcfce7; color: #15803d; }
[data-theme="light"] .pm-orange { background: #ffedd5; color: #c2410c; }
[data-theme="light"] .pm-usdt, [data-theme="light"] .pm-crypto { background: #ccfbf1; color: #0f766e; }

/* App sidebar (sidebar.css) */
[data-theme="light"] .app-shell { --sb-bg: #f7f9fc; --sb-line: #e4e9f1; --sb-hover: #eef2f8; --sb-active: #e7edf8; --sb-soft: #4b5563; --sb-faint: #8a93a3; }
[data-theme="light"] .app-shell .sb { scrollbar-color: #cfd6e2 transparent; }
[data-theme="light"] .sb-link.is-active { border-color: #d6deea; }

/* Admin (admin.css) */
[data-theme="light"] .adm-side { background: #f7f9fc; }
[data-theme="light"] .adm-group-label { color: #8a93a3; }
[data-theme="light"] .adm-side a.is-active { background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / .08), 0 6px 16px -10px rgb(15 23 42 / .25); }
[data-theme="light"] .chart .bar { fill: #c7d2e3; }
[data-theme="light"] .bars meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, #93c5fd, var(--accent)); }
[data-theme="light"] .bars meter::-moz-meter-bar { background: linear-gradient(90deg, #93c5fd, var(--accent)); }

/* Auth pages (auth.css): soft brand stage, blue submit and checkbox, readable flashes */
[data-theme="light"] .auth-stage { background: linear-gradient(160deg, #f5f8ff, #eaf0fb); }
[data-theme="light"] .auth-stage-copy { color: #5b6474; }
[data-theme="light"] .auth-submit { border-color: transparent; box-shadow: 0 10px 24px -12px rgb(29 78 216 / .6); }
[data-theme="light"] .auth-submit:hover { box-shadow: 0 14px 30px -12px rgb(29 78 216 / .65); }
[data-theme="light"] .auth-submit::after { background: linear-gradient(120deg, transparent 20%, rgb(255 255 255 / .35) 45%, transparent 70%); }
[data-theme="light"] .auth-check input[type="checkbox"]:checked { background: var(--auth-accent); border-color: var(--auth-accent); box-shadow: 0 0 12px rgb(29 78 216 / .3); }
[data-theme="light"] .auth-check input[type="checkbox"]::before { box-shadow: inset 1em 1em #fff; }
[data-theme="light"] .auth-shell .flash { background: #fff; }
[data-theme="light"] .auth-shell .flash-error { color: #be123c; }
[data-theme="light"] .auth-shell .flash-success { color: #15803d; }
[data-theme="light"] .auth-shell .flash-warning { color: #92400e; }
[data-theme="light"] .auth-shell .flash-info { color: #1f2937; }

/* Theme switch button (sun in dark mode, moon in light mode) */
.theme-toggle .ic-moon, [data-theme="light"] .theme-toggle .ic-sun { display: none; }
[data-theme="light"] .theme-toggle .ic-moon { display: block; }
.theme-toggle .ic { transition: transform .35s var(--ease); }
.theme-toggle:hover .ic { transform: rotate(-20deg); }
/* Colors glide for a moment while the theme switches (class set by shell.js) */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, fill .3s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }
}