/* Theme controls also work before login. Existing light surfaces stay intact. */
:root { color-scheme: light; }
:root[data-theme="light"] { color-scheme: light; }

.topbar {
  height: auto;
  min-height: 74px;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  padding-top: .8rem;
  padding-bottom: .8rem;
}
.topbar .breadcrumb { min-width: 0; }
.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .65rem;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
}
.topbar-actions .status-pill { max-width: 100%; overflow-wrap: anywhere; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: .5rem;
  min-width: 44px;
  min-height: 44px;
  padding: .6rem .8rem;
  border: 1px solid #cad1df;
  border-radius: 9px;
  background: #fff;
  color: #485570;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.theme-toggle:hover { background: #f0edfb; color: #563eb5; border-color: #b7a8eb; }
.theme-toggle:active { background: #e9e2fb; }
.theme-toggle:focus-visible { outline: 3px solid #8062df; outline-offset: 3px; }
.theme-icon { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; font-size: 1.1rem; line-height: 1; }
.theme-icon svg { display: block; width: 100%; height: 100%; }
.theme-label { line-height: 1.2; }
.login-form-wrap { position: relative; padding-top: 5rem; }
.login-theme-toggle { position: absolute; top: 1.5rem; right: 1.5rem; }

/* Purple remains the action color; a lighter tint is used for text on dark. */
:root[data-theme="dark"] {
  color-scheme: dark;
  color: #edf1f8;
  background: #111722;
  --accent: #c0aeff;
  --muted: #aab6cc;
  --border: #36425a;
  --dark: #151b29;
  --surface: #1a2232;
  --surface-raised: #242e41;
  --field: #111927;
  --control-border: #64718b;
  scrollbar-color: #606d86 #111722;
}
:root[data-theme="dark"] body,
:root[data-theme="dark"] .workspace { background: #111722; }
:root[data-theme="dark"] ::selection { background: #6651a4; color: #fff; }

:root[data-theme="dark"] .login-screen,
:root[data-theme="dark"] .login-form-wrap,
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .stat,
:root[data-theme="dark"] .source-panel,
:root[data-theme="dark"] .post-card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] dialog { background: var(--surface); color: #edf1f8; }
:root[data-theme="dark"] .topbar { border-bottom-color: var(--border); }
:root[data-theme="dark"] .login-story { background: #121925; }
:root[data-theme="dark"] .login-story small { color: #a5b1c7; }
:root[data-theme="dark"] .login-story p { color: #b4bfd3; }
:root[data-theme="dark"] .login-story .eyebrow { color: #c6b6ff; }
:root[data-theme="dark"] .flow { color: #d2daeb; }
:root[data-theme="dark"] .flow span { border-color: #52607a; }
:root[data-theme="dark"] .flow b { color: #c0aeff; }
:root[data-theme="dark"] .sidebar { border-right: 1px solid #2b3549; }
:root[data-theme="dark"] .brand strong { color: #d0d6e5; }
:root[data-theme="dark"] .nav-label,
:root[data-theme="dark"] .sidebar-bottom span { color: #a3b0c8; }
:root[data-theme="dark"] .nav-item { color: #bec9df; }
:root[data-theme="dark"] .nav-item:hover { background: #283248; }
:root[data-theme="dark"] .nav-item.active { background: #7250dc; color: #fff; }
:root[data-theme="dark"] .sidebar-bottom { border-top-color: #354157; }
:root[data-theme="dark"] .sidebar-bottom strong { color: #edf1f8; }
:root[data-theme="dark"] .account-avatar { color: #d1c3ff; border-color: #65718a; }
:root[data-theme="dark"] .logout { color: #b6c2d9; }
:root[data-theme="dark"] .logout:hover { color: #fff; }

:root[data-theme="dark"] .primary { background: #7250dc; color: #fff; box-shadow: 0 3px 10px #080b1533; }
:root[data-theme="dark"] .primary:hover { background: #7a59e6; }
:root[data-theme="dark"] .primary:active { background: #6342c8; }
:root[data-theme="dark"] .secondary,
:root[data-theme="dark"] .theme-toggle {
  background: #242e41;
  border-color: var(--control-border);
  color: #e1e8f5;
}
:root[data-theme="dark"] .secondary:hover,
:root[data-theme="dark"] .theme-toggle:hover { background: #323d54; border-color: #9a88d4; color: #fff; }
:root[data-theme="dark"] .theme-toggle:active { background: #3a3155; }
:root[data-theme="dark"] .theme-toggle[aria-pressed="true"] .theme-icon { color: #d1bdff; }
:root[data-theme="dark"] .text-button:hover { color: #ddd1ff; }
:root[data-theme="dark"] .danger,
:root[data-theme="dark"] .error,
:root[data-theme="dark"] .login-form .error { color: #ffb0bd; }
:root[data-theme="dark"] .text-button.danger:hover { color: #ffd2d9; }
:root[data-theme="dark"] .icon-button { background: #29344a; color: #d3dced; }
:root[data-theme="dark"] .icon-button:hover { background: #3c4760; color: #fff; }
:root[data-theme="dark"] :is(button, a, input, textarea, select):focus-visible {
  outline: 3px solid #baa6ff;
  outline-offset: 3px;
}
:root[data-theme="dark"] :is(input:not([type="checkbox"]), textarea, select) {
  background: var(--field);
  color: #edf1f8;
  border-color: var(--control-border);
  caret-color: #d1c0ff;
}
:root[data-theme="dark"] :is(input, textarea)::placeholder { color: #a3b0c7; opacity: 1; }
:root[data-theme="dark"] :is(input, textarea, select):focus {
  border-color: #b69fff;
  box-shadow: 0 0 0 3px #b69fff20;
}
:root[data-theme="dark"] input:-webkit-autofill {
  -webkit-text-fill-color: #edf1f8;
  -webkit-box-shadow: 0 0 0 1000px #111927 inset;
  caret-color: #d1c0ff;
}
:root[data-theme="dark"] option { background: #111927; color: #edf1f8; }
:root[data-theme="dark"] .switch-row input { accent-color: #bda6ff; }

:root[data-theme="dark"] .breadcrumb strong { color: #d4deef; }
:root[data-theme="dark"] .breadcrumb span { color: #8d9bb3; }
:root[data-theme="dark"] .stat > span { color: #c0cbe0; }
:root[data-theme="dark"] .stat small,
:root[data-theme="dark"] .empty-state p,
:root[data-theme="dark"] .source-panel p,
:root[data-theme="dark"] .source-panel small,
:root[data-theme="dark"] .post-body p,
:root[data-theme="dark"] .settings-title p,
:root[data-theme="dark"] .helper,
:root[data-theme="dark"] .info-box p,
:root[data-theme="dark"] .switch-row small,
:root[data-theme="dark"] .activity-row time,
:root[data-theme="dark"] .activity-empty,
:root[data-theme="dark"] .caption-counter { color: var(--muted); }
:root[data-theme="dark"] .count { background: #2c374d; color: #d0dbef; }
:root[data-theme="dark"] .tabs { border-bottom-color: var(--border); }
:root[data-theme="dark"] .tabs button { color: #b4bfd4; }
:root[data-theme="dark"] .tabs button:hover { color: #e6deff; }
:root[data-theme="dark"] .tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }

:root[data-theme="dark"] .setup-banner,
:root[data-theme="dark"] .schedule-panel { background: #27233e; border-color: #52466f; }
:root[data-theme="dark"] .setup-banner strong,
:root[data-theme="dark"] .schedule-panel h3 { color: #e0d6ff; }
:root[data-theme="dark"] .setup-banner p,
:root[data-theme="dark"] .schedule-panel p { color: #bfb3d8; }
:root[data-theme="dark"] .setup-mark,
:root[data-theme="dark"] .mini-icon,
:root[data-theme="dark"] .step { background: #3a2e59; color: #d3c0ff; }
:root[data-theme="dark"] .setup-banner .button { background: #362d4e; border-color: #7a6a99; color: #e1d4ff; }
:root[data-theme="dark"] .setup-banner .button:hover { background: #493b65; border-color: #b09bdb; }
:root[data-theme="dark"] .schedule-slot { background: #211e32; border-color: #6e5c91; color: #dccbff; }
:root[data-theme="dark"] .empty-state { background: #171f2d; border-color: #55627b; }
:root[data-theme="dark"] .empty-icon { background: #2c2441; border-color: #675681; color: #c4a9ef; }
:root[data-theme="dark"] .source-status { color: #edcc94; }
:root[data-theme="dark"] .source-status.connected { color: #97dfbb; }
:root[data-theme="dark"] .file-example,
:root[data-theme="dark"] .path { background: #111927; border-color: #3c485f; color: #d0dbed; }
:root[data-theme="dark"] .file-example span { color: #acb9ce; }
:root[data-theme="dark"] .post-image { background: #101722; color: #aab8d1; }
:root[data-theme="dark"] .post-meta { color: #c4b0fa; }
:root[data-theme="dark"] .badge { background: #31264a; color: #d5c4ff; }
:root[data-theme="dark"] .badge.scheduled { background: #1b3049; color: #accdff; }
:root[data-theme="dark"] .badge.published { background: #19362c; color: #97dfbb; }
:root[data-theme="dark"] .badge.processing { background: #352c1e; color: #edcc94; }
:root[data-theme="dark"] :is(.badge.failed, .badge.blocked, .badge.uncertain) { background: #3c2a23; color: #f4c19a; }
:root[data-theme="dark"] .badge.skipped { background: #2a3141; color: #c2cddd; }

:root[data-theme="dark"] .notice { background: #273246; color: #ccd7eb; }
:root[data-theme="dark"] :is(.notice.success, .status-pill.active) { background: #19362c; color: #97dfbb; }
:root[data-theme="dark"] .status-pill.active { border-color: #4e896a; }
:root[data-theme="dark"] :is(.notice.warning, .status-pill.paused, .alert) { background: #352c1e; color: #edcc94; }
:root[data-theme="dark"] .status-pill.paused,
:root[data-theme="dark"] .alert { border-color: #826b43; }
:root[data-theme="dark"] .info-box { border-left-color: #a58adc; }
:root[data-theme="dark"] .info-box strong { color: #e4dcf4; }
:root[data-theme="dark"] .info-box code { color: #d6c8f5; }
:root[data-theme="dark"] footer { color: #a6b3ca; }
:root[data-theme="dark"] .footer-sep { color: #92a1bb; }
:root[data-theme="dark"] dialog { box-shadow: 0 24px 90px #0008; }
:root[data-theme="dark"] dialog::backdrop { background: #050913bd; }
:root[data-theme="dark"] .dialog-content :is(img, video) { background: #101622; }
:root[data-theme="dark"] .toast { background: #29354c; border-color: #7586a7; color: #f1f5fd; box-shadow: 0 10px 32px #0006; }
:root[data-theme="dark"] .toast.bad { background: #552635; border-color: #b87588; color: #ffdde4; }

@media (max-width: 720px) {
  .topbar { min-height: 58px; padding-top: .65rem; padding-bottom: .65rem; }
  .login-form-wrap { padding-top: 5rem; }
  .login-theme-toggle { top: 1.1rem; right: 1.2rem; }
}
@media (max-width: 480px) {
  .sidebar nav { gap: .15rem; justify-content: space-between; }
  .sidebar .nav-item {
    min-width: 0;
    min-height: 44px;
    padding: .65rem .25rem;
    gap: .25rem;
    font-size: .75rem;
    line-height: 1.25;
    white-space: nowrap;
  }
  .sidebar .nav-icon { flex: 0 0 16px; width: 16px; font-size: 1rem; }
  .theme-toggle { padding: .6rem; }
  .theme-label { display: none; }
  .topbar { gap: .55rem; }
  .topbar .breadcrumb { flex: 1 0 100%; }
  .topbar-actions { width: 100%; justify-content: space-between; gap: .5rem; }
  .topbar-actions .status-pill { max-width: calc(100% - 52px); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .button { transition: none; }
  .button:active { transform: none; }
}