/* Dark mode retains the original stylesheet values. */
:root { color-scheme: dark; }
:root[data-theme="light"] {
  color-scheme: light;
  --clr-bg-primary: #f5f5fb;
  --clr-bg-secondary: #ffffff;
  --clr-bg-card: rgba(255,255,255,.94);
  --clr-bg-glass: rgba(65,48,120,.04);
  --clr-bg-input: #f4f3fa;
  --clr-text-primary: #211d35;
  --clr-text-secondary: #555169;
  --clr-text-muted: #696479;
  --clr-border: rgba(47,35,82,.14);
  --clr-border-hover: rgba(47,35,82,.28);
  --clr-accent: #5c4bdc;
  --clr-accent-light: #5942c7;
  --clr-accent-dark: #4934bc;
  --clr-accent-glow: rgba(92,75,220,.13);
  --clr-safe: #16733c;
  --clr-warning: #916000;
  --clr-critical: #bd293a;
  --clr-pending: #946000;
  --clr-investigating: #2563bc;
  --clr-resolved: #13775a;
  --clr-dismissed: #625d72;
  --shadow-sm: 0 1px 2px rgba(37,26,69,.07);
  --shadow-md: 0 4px 12px rgba(37,26,69,.10);
  --shadow-lg: 0 8px 32px rgba(37,26,69,.13);
  --theme-panel: #ffffff;
  --theme-icon-surface: #eeebfc;
  --theme-ink: #514b65;
  --theme-accent: #5942c7;
  --theme-safe: #16733c;
  --theme-warning: #916000;
  --theme-danger: #bd293a;
  --theme-link: #086a82;
  --theme-wash-rgb: 47, 35, 82;
}

.theme-switch {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 6px 10px; flex-shrink: 0;
  border: 1px solid var(--clr-border); border-radius: 999px;
  background: var(--clr-bg-secondary); color: var(--clr-text-primary);
  font: 600 12px/1.4 var(--font-family); cursor: pointer;
}
.theme-switch__track { width: 28px; height: 16px; border-radius: 999px; background: #6c63ff; padding: 3px; }
.theme-switch__track::before { content: ''; display: block; width: 10px; height: 10px; border-radius: 50%; background: white; transform: translateX(12px); }
.theme-switch[aria-checked="false"] .theme-switch__track { background: #746d88; }
.theme-switch[aria-checked="false"] .theme-switch__track::before { transform: translateX(0); }
.theme-switch:focus-visible, #theme-toggle-wrapper:focus-within { outline: 3px solid var(--clr-accent-light); outline-offset: 3px; }
.theme-toolbar { display: flex; justify-content: flex-end; padding: 8px 16px; position: relative; z-index: 1; background: var(--clr-bg-primary); }
/* Remain in document flow: never cover mobile controls, dialogs, or toasts. */
.landing-page .lp-account-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
@media (max-width: 380px) {
  .landing-page .lp-nav { width: calc(100% - 24px); gap: 8px; }
  .landing-page .lp-nav .lp-brand { font-size: 16px; gap: 3px; }
  .landing-page .lp-nav .lp-brand img { width: 28px; height: 28px; }
  .landing-page .lp-account-actions { gap: 6px; }
  .landing-page .lp-account-actions .lp-button { padding: 8px 10px; }
  .landing-page .lp-account-actions .theme-switch { padding: 6px; }
}
label.toggle-switch { cursor: pointer; }
/* Keep the native checkbox focusable while the existing slider draws the control. */
#theme-toggle-wrapper input { display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; z-index: 1; cursor: pointer; }

html[data-theme="light"] .auth-story { background: radial-gradient(ellipse at top left, #e2dcff, transparent 70%), #eeedf8; }
html[data-theme="light"] .lp-preview { background: linear-gradient(135deg, #fff, #f1effc); box-shadow: var(--shadow-lg); border-color: var(--clr-border-hover); }
html[data-theme="light"] .lp-button-small { color: var(--clr-accent-dark); border-color: var(--clr-border-hover); }
html[data-theme="light"] .lp-links a:hover, html[data-theme="light"] .lp-footer a:hover { color: var(--clr-accent-dark); }
html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: var(--clr-text-muted); opacity: 1; }
html[data-theme="light"] select option { background: #fff; color: var(--clr-text-primary); }
html[data-theme="light"] .avatar-dropdown,
html[data-theme="light"] .notification-dropdown { box-shadow: var(--shadow-lg); }
@media (max-width: 600px) {
  .dashboard-header { flex-wrap: wrap; gap: 8px; }
  .header-user { min-width: 0; }
  .header-user__actions { flex-wrap: wrap; }
  .landing-page .lp-nav { gap: 12px; flex-wrap: wrap; padding-block: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton, .skeleton-cell, .stat-card__value.is-skeleton, .stat-card__label.is-skeleton { animation: none; }
}
@media print { .theme-toolbar, .theme-switch { display: none; } }
.suriin-brand-mark {display:inline-block;width:36px;height:36px;object-fit:contain;flex-shrink:0;vertical-align:middle;}
.header-brand__icon:has(.suriin-brand-mark),.login-brand__icon:has(.suriin-brand-mark),.privacy-brand-icon:has(.suriin-brand-mark) {background:none;box-shadow:none;}
.login-brand__icon .suriin-brand-mark {width:100%;height:100%;}
.auth-story__brand .suriin-brand-mark {width:32px;height:32px;}

#settings-gender, .expert-analytics select,
#settings-gender option, .expert-analytics select option {
  color-scheme: dark;
  background-color: var(--clr-bg-secondary);
  color: var(--clr-text-primary);
}
:root[data-theme="light"] #settings-gender, :root[data-theme="light"] .expert-analytics select,
:root[data-theme="light"] option { color-scheme: light; }
nav[aria-label="Report pages"] { display:flex; gap:16px; align-items:center; justify-content:center; padding:16px; }
#ea-reports td, #admin-report-rows td { padding:12px 16px; }
.chart-notes ul[id^="ea-counts"], .analytics-counts { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; }
.analytics-counts h3 { flex-basis:100%; }
.chart-notes ul[id^="ea-counts"] li, .analytics-counts p { margin:0; padding:5px 10px; border:1px solid var(--clr-border); border-radius:8px; color:var(--clr-text-primary); background:var(--clr-bg-secondary); font-variant-numeric:tabular-nums; }