/* ============================================================
   Top utility bar + dark theme overrides
   ============================================================ */

/* Light-mode defaults — dark theme overrides these below */
:root {
  --bg-app: #fff;
  --bg-elevated: #fff;
  --bg-elevated-2: #fafbfc;
  --bg-sidebar: #f7f8f9;
  --bg-hover: #eceef1;
  --bg-fill: #f0f2f5;
  --bg-fill-strong: #e6e9ed;
  --bg-border: #eceef1;
  --bg-border-strong: #d9dde2;
  --bg-topbar: #fff;
  --bg-toggle: #f4f6f8;
  --fg-app: #1a1d21;
  --fg-strong-app: #0c1116;
  --fg-muted-app: #6b7480;
  --fg-dim-app: #93a0aa;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 18px 0 24px;
  border-bottom: 1px solid var(--bg-border, #eceef1);
  background: var(--bg-topbar, #fff);
  flex-shrink: 0;
}
.topbar__panel-toggle {
  margin-right: 4px;
  flex-shrink: 0;
}
.topbar__crumbs {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--fg-muted-app, #6b7480);
  min-width: 0;
}
.topbar__crumbs strong {
  font-weight: 600;
  color: var(--fg-app, #1a1d21);
}
.topbar__crumbs .sep { color: #c5cbd2; }

.topbar__right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.topbar__icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--fg-muted-app, #6b7480);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.topbar__icon-btn:hover {
  background: var(--bg-hover, #eceef1);
  color: var(--fg-app, #1a1d21);
}

.theme-toggle {
  position: relative;
  width: 56px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--bg-border, #eceef1);
  background: var(--bg-toggle, #f4f6f8);
  display: flex;
  align-items: center;
  padding: 0 4px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.theme-toggle:hover { border-color: var(--bg-border-strong, #d9dde2); }
.theme-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--assh-ui-yellow-dark);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: transform var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std), background var(--dur-base) var(--ease-std);
}
.theme-toggle__icon-bg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 0 7px;
  color: var(--fg-muted-app, #93a0aa);
  pointer-events: none;
}
[data-theme="dark"] .theme-toggle__knob {
  transform: translateX(28px);
  background: #1f242b;
  color: #ffc107;
}

/* ============================================================
   Dark theme — overrides the neutral chrome variables
   ============================================================ */

[data-theme="dark"] {
  color-scheme: dark;
  --bg-app: #0f1216;
  --bg-elevated: #161a1f;
  --bg-elevated-2: #1a1f25;
  --bg-sidebar: #13171c;
  --bg-hover: #232a31;
  --bg-fill: #1c2228;
  --bg-fill-strong: #232a31;
  --bg-border: #232a31;
  --bg-border-strong: #2f3741;
  --bg-topbar: #13171c;
  --bg-toggle: #1c2228;
  --fg-app: #e6e9ed;
  --fg-strong-app: #f7f9fb;
  --fg-muted-app: #8b939d;
  --fg-dim-app: #5f6873;

  /* Re-skin chip colors to be subtle on dark */
  --chip-bg: #232a31;
  --chip-fg: #b6bdc6;
}

[data-theme="dark"] body { background: var(--bg-app); color: var(--fg-app); }

/* Headings — tokens.css hardcodes color: var(--fg-strong) which is literal #000.
   Override every heading element in dark mode so card titles, h3s in Home cards,
   and anywhere else they appear inherit the right dark-mode foreground. */
[data-theme="dark"] h1, [data-theme="dark"] .h1,
[data-theme="dark"] h2, [data-theme="dark"] .h2,
[data-theme="dark"] h3, [data-theme="dark"] .h3,
[data-theme="dark"] h4, [data-theme="dark"] .h4,
[data-theme="dark"] .pretitle, [data-theme="dark"] .eyebrow, [data-theme="dark"] .subtitle {
  color: var(--fg-strong-app);
}

/* App shell */
[data-theme="dark"] .app__main { background: var(--bg-app); }
[data-theme="dark"] .app__scroll::-webkit-scrollbar-thumb { background: #2f3741; border-color: var(--bg-app); }

/* Topbar */
[data-theme="dark"] .topbar { background: var(--bg-topbar); border-color: var(--bg-border); }
[data-theme="dark"] .topbar__crumbs { color: var(--fg-muted-app); }
[data-theme="dark"] .topbar__crumbs strong { color: var(--fg-app); }
[data-theme="dark"] .topbar__crumbs .sep { color: #3a414c; }

/* Sidebar */
[data-theme="dark"] .sidebar { background: var(--bg-sidebar); border-color: var(--bg-border); }
[data-theme="dark"] .sidebar__brand { border-color: var(--bg-border); }
[data-theme="dark"] .sidebar__brand-name { color: var(--fg-strong-app); }
[data-theme="dark"] .sidebar__brand-name small { color: var(--fg-muted-app); }
[data-theme="dark"] .nav-item { color: #b6bdc6; }
[data-theme="dark"] .nav-item__icon { color: var(--fg-muted-app); }
[data-theme="dark"] .nav-item:hover { background: var(--bg-hover); color: var(--fg-strong-app); }
[data-theme="dark"] .nav-item--active {
  background: var(--bg-elevated);
  color: var(--fg-strong-app);
  box-shadow: 0 0 0 1px var(--bg-border-strong), 0 1px 2px rgba(0,0,0,.3);
}
[data-theme="dark"] .nav-item--active .nav-item__count {
  background: color-mix(in oklab, var(--accent-color) 18%, transparent);
  color: var(--accent-color);
}
[data-theme="dark"] .sidebar__section-label { color: var(--fg-dim-app); }
[data-theme="dark"] .sidebar__subnav::before { background: var(--bg-border); }
[data-theme="dark"] .subnav-item { color: var(--fg-muted-app); }
[data-theme="dark"] .subnav-item:hover { background: var(--bg-hover); color: var(--fg-strong-app); }
[data-theme="dark"] .sidebar__collapse-btn { color: var(--fg-muted-app); }
[data-theme="dark"] .sidebar__collapse-btn:hover { background: var(--bg-hover); color: var(--fg-strong-app); }
[data-theme="dark"] .sidebar__user { border-color: var(--bg-border); }
[data-theme="dark"] .sidebar__user:hover { background: var(--bg-hover); }
[data-theme="dark"] .sidebar__user-name { color: var(--fg-strong-app); }
[data-theme="dark"] .sidebar__user-email { color: var(--fg-muted-app); }

/* Page header */
[data-theme="dark"] .page-header { border-color: var(--bg-border); }
[data-theme="dark"] .page-header__title { color: var(--fg-strong-app); }
[data-theme="dark"] .page-header__sub { color: var(--fg-muted-app); }
[data-theme="dark"] .tabs { border-color: var(--bg-border); }
[data-theme="dark"] .tabs__tab { color: var(--fg-muted-app); }
[data-theme="dark"] .tabs__tab:hover { color: var(--fg-strong-app); }

/* Cards */
[data-theme="dark"] .card { background: var(--bg-elevated); border-color: var(--bg-border); }
[data-theme="dark"] .card__header,
[data-theme="dark"] .card__footer { border-color: var(--bg-border); }
[data-theme="dark"] .card__footer { background: var(--bg-elevated-2); }
[data-theme="dark"] .card__header h3 { color: var(--fg-strong-app); }

/* Stat tile */
[data-theme="dark"] .stat { background: var(--bg-elevated); border-color: var(--bg-border); }
[data-theme="dark"] .stat__value { color: var(--fg-strong-app); }
[data-theme="dark"] .stat__label,
[data-theme="dark"] .stat__sub { color: var(--fg-muted-app); }

/* Buttons */
[data-theme="dark"] .btn {
  background: var(--bg-elevated);
  border-color: var(--bg-border-strong);
  color: var(--fg-app);
}
[data-theme="dark"] .btn:hover { background: var(--bg-hover); border-color: #3f4854; }
[data-theme="dark"] .btn--ghost { background: transparent; color: var(--fg-muted-app); }
[data-theme="dark"] .btn--ghost:hover { background: var(--bg-hover); color: var(--fg-strong-app); }
[data-theme="dark"] .btn--primary { background: var(--accent-color); color: #fff; border-color: transparent; }
[data-theme="dark"] .btn--primary:hover { background: var(--accent-color-dark); }
[data-theme="dark"] .btn--danger {
  background: var(--bg-elevated);
  border-color: #5a2026;
  color: #ff8a93;
}
[data-theme="dark"] .btn--danger:hover { background: #2a1416; border-color: #8c2c33; color: #ffb4ba; }

/* Inputs */
[data-theme="dark"] .input,
[data-theme="dark"] .textarea,
[data-theme="dark"] .select,
[data-theme="dark"] .filter-select__select {
  background: var(--bg-elevated);
  border-color: var(--bg-border-strong);
  color: var(--fg-app);
}
[data-theme="dark"] .input::placeholder,
[data-theme="dark"] .textarea::placeholder { color: var(--fg-dim-app); }

/* Banners */
[data-theme="dark"] .banner { background: var(--bg-elevated); border-color: var(--bg-border); }
[data-theme="dark"] .banner__title { color: var(--fg-strong-app); }
[data-theme="dark"] .banner__sub { color: var(--fg-muted-app); }
[data-theme="dark"] .banner--active {
  background: linear-gradient(to right, color-mix(in oklab, var(--assh-ui-green) 14%, var(--bg-elevated)), var(--bg-elevated) 70%);
  border-color: color-mix(in oklab, var(--assh-ui-green) 30%, var(--bg-border));
}
[data-theme="dark"] .banner--active .banner__icon { background: color-mix(in oklab, var(--assh-ui-green) 22%, var(--bg-elevated)); color: #80d28e; }
[data-theme="dark"] .banner--paused {
  background: linear-gradient(to right, color-mix(in oklab, var(--assh-ui-yellow) 14%, var(--bg-elevated)), var(--bg-elevated) 70%);
  border-color: color-mix(in oklab, var(--assh-ui-yellow) 30%, var(--bg-border));
}
[data-theme="dark"] .banner--paused .banner__icon { background: color-mix(in oklab, var(--assh-ui-yellow) 22%, var(--bg-elevated)); color: #ffd95c; }
[data-theme="dark"] .banner--dry {
  background: linear-gradient(to right, color-mix(in oklab, var(--assh-blue) 22%, var(--bg-elevated)), var(--bg-elevated) 70%);
  border-color: color-mix(in oklab, var(--assh-blue) 30%, var(--bg-border));
}
[data-theme="dark"] .banner--dry .banner__icon { background: color-mix(in oklab, var(--assh-blue) 30%, var(--bg-elevated)); color: #a8c8e3; }

/* Chips — gentler on dark */
[data-theme="dark"] .chip { background: var(--bg-fill); color: var(--fg-muted-app); }
[data-theme="dark"] .chip--teal { background: color-mix(in oklab, var(--assh-teal) 22%, var(--bg-elevated)); color: #6ddbd2; }
[data-theme="dark"] .chip--blue { background: color-mix(in oklab, var(--assh-blue) 28%, var(--bg-elevated)); color: #a8c8e3; }
[data-theme="dark"] .chip--green { background: color-mix(in oklab, var(--assh-green) 22%, var(--bg-elevated)); color: #c4d68a; }
[data-theme="dark"] .chip--purple { background: color-mix(in oklab, var(--assh-ui-purple) 22%, var(--bg-elevated)); color: #c5a3ff; }
[data-theme="dark"] .chip--pink { background: color-mix(in oklab, var(--assh-ui-pink) 22%, var(--bg-elevated)); color: #ee9bc1; }
[data-theme="dark"] .chip--yellow { background: color-mix(in oklab, var(--assh-ui-yellow) 22%, var(--bg-elevated)); color: #ffd97a; }
[data-theme="dark"] .chip--red { background: color-mix(in oklab, var(--assh-ui-red) 22%, var(--bg-elevated)); color: #ff9aa3; }

/* Toggle, checkbox */
[data-theme="dark"] .toggle__track { background: #3a414c; }
[data-theme="dark"] .checkbox,
[data-theme="dark"] .radio { border-color: #3a414c; background: var(--bg-elevated); }

/* Activity table */
[data-theme="dark"] .activity-row { border-color: var(--bg-border); }
[data-theme="dark"] .activity-row:hover { background: var(--bg-elevated-2); }
[data-theme="dark"] .activity-row__subject-line { color: var(--fg-strong-app); }
[data-theme="dark"] .activity-row__subject-line span { color: var(--fg-strong-app); }
[data-theme="dark"] .activity-row__sender,
[data-theme="dark"] .activity-row__time { color: var(--fg-muted-app); }
[data-theme="dark"] .activity-table thead th { background: var(--bg-elevated-2); color: var(--fg-muted-app); border-color: var(--bg-border); }

/* Filters */
[data-theme="dark"] .activity-filters { background: var(--bg-elevated-2); border-color: var(--bg-border); }

/* Rule cards */
[data-theme="dark"] .rule-card { background: var(--bg-elevated); border-color: var(--bg-border); }
[data-theme="dark"] .rule-card:hover { border-color: var(--bg-border-strong); }
[data-theme="dark"] .rule-card__name { color: var(--fg-strong-app); }
[data-theme="dark"] .rule-card__desc { color: var(--fg-muted-app); }
[data-theme="dark"] .rule-card__grip { background: var(--bg-elevated-2); border-color: var(--bg-border); color: #4a5260; }
[data-theme="dark"] .rule-card__actions { background: var(--bg-elevated-2); border-color: var(--bg-border); }
[data-theme="dark"] .rule-card--disabled { background: var(--bg-elevated-2); }

/* Rule editor */
[data-theme="dark"] .action-check { background: var(--bg-elevated); border-color: var(--bg-border); }
[data-theme="dark"] .action-check:hover { border-color: var(--bg-border-strong); }
[data-theme="dark"] .action-check--on {
  border-color: var(--accent-color);
  background: color-mix(in oklab, var(--accent-color) 10%, var(--bg-elevated));
}
[data-theme="dark"] .action-check__icon { background: var(--bg-fill); color: var(--fg-muted-app); }
[data-theme="dark"] .action-check__label { color: var(--fg-strong-app); }
[data-theme="dark"] .action-check__hint { color: var(--fg-muted-app); }
[data-theme="dark"] .action-detail { background: var(--bg-elevated-2); border-color: var(--bg-border-strong); }
[data-theme="dark"] .action-detail__label { color: var(--fg-app); }
[data-theme="dark"] .tag-input__chips { background: var(--bg-elevated); border-color: var(--bg-border-strong); }
[data-theme="dark"] .tag-input__suggestions .chip { background: var(--bg-elevated); border-color: var(--bg-border-strong); color: var(--fg-muted-app); }
[data-theme="dark"] .model-option { background: var(--bg-elevated); border-color: var(--bg-border); }
[data-theme="dark"] .model-option:hover { border-color: var(--bg-border-strong); }
[data-theme="dark"] .model-option--active { border-color: var(--accent-color); background: color-mix(in oklab, var(--accent-color) 10%, var(--bg-elevated)); }
[data-theme="dark"] .model-option__label { color: var(--fg-strong-app); }
[data-theme="dark"] .model-option__hint { color: var(--fg-muted-app); }
[data-theme="dark"] .re-savebar { background: var(--bg-app); border-color: var(--bg-border); }

/* Settings */
[data-theme="dark"] .settings-section { background: var(--bg-elevated); border-color: var(--bg-border); }
[data-theme="dark"] .settings-section__head { border-color: var(--bg-border); }
[data-theme="dark"] .settings-section__head h2 { color: var(--fg-strong-app); }
[data-theme="dark"] .settings-section--safety {
  background: linear-gradient(to bottom, color-mix(in oklab, var(--assh-ui-yellow) 12%, var(--bg-elevated)), var(--bg-elevated) 80%);
  border-color: color-mix(in oklab, var(--assh-ui-yellow) 30%, var(--bg-border));
}
[data-theme="dark"] .settings-section--safety .settings-section__head { border-color: color-mix(in oklab, var(--assh-ui-yellow) 24%, var(--bg-border)); }
[data-theme="dark"] .sched-radio { background: var(--bg-elevated); border-color: var(--bg-border); }
[data-theme="dark"] .sched-radio:hover { border-color: var(--bg-border-strong); }
[data-theme="dark"] .sched-radio--active { border-color: var(--accent-color); background: color-mix(in oklab, var(--accent-color) 10%, var(--bg-elevated)); }
[data-theme="dark"] .sched-radio__label { color: var(--fg-strong-app); }
[data-theme="dark"] .sched-radio__hint { color: var(--fg-muted-app); }
[data-theme="dark"] .cron-panel { background: var(--bg-elevated-2); border-color: var(--bg-border); }
[data-theme="dark"] .cron-panel__preview { background: color-mix(in oklab, var(--assh-teal) 22%, var(--bg-elevated)); color: #6ddbd2; }
[data-theme="dark"] .cron-panel__upcoming { border-color: var(--bg-border-strong); }
[data-theme="dark"] .model-card { background: var(--bg-elevated); border-color: var(--bg-border); }
[data-theme="dark"] .model-card:hover { border-color: var(--bg-border-strong); }
[data-theme="dark"] .model-card--on { border-color: var(--accent-color); background: color-mix(in oklab, var(--accent-color) 10%, var(--bg-elevated)); }
[data-theme="dark"] .model-card__label { color: var(--fg-strong-app); }
[data-theme="dark"] .model-card__meta { color: var(--fg-muted-app); }
[data-theme="dark"] .safety-row__title { color: var(--fg-strong-app); }
[data-theme="dark"] .safety-row__hint { color: var(--fg-muted-app); }

/* Field labels */
[data-theme="dark"] .field__label { color: var(--fg-strong-app); }
[data-theme="dark"] .field__hint,
[data-theme="dark"] .muted { color: var(--fg-muted-app); }
[data-theme="dark"] .section-label { color: var(--fg-muted-app); }

/* Combo trigger / folder picker */
[data-theme="dark"] .combo-trigger { background: var(--bg-elevated); border-color: var(--bg-border-strong); color: var(--fg-app); }
[data-theme="dark"] .combo-trigger:hover { border-color: #3f4854; }
[data-theme="dark"] .combo-trigger__icon,
[data-theme="dark"] .combo-trigger__chev { color: var(--fg-muted-app); }
[data-theme="dark"] .combo-trigger__placeholder { color: var(--fg-dim-app); }
[data-theme="dark"] .folder-picker { background: var(--bg-elevated); border-color: var(--bg-border-strong); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
[data-theme="dark"] .folder-picker__header,
[data-theme="dark"] .folder-picker__footer { border-color: var(--bg-border); }
[data-theme="dark"] .folder-picker__footer { background: var(--bg-elevated-2); }
[data-theme="dark"] .folder-picker__hint { background: var(--bg-elevated-2); border-color: var(--bg-border); color: var(--fg-muted-app); }
[data-theme="dark"] .folder-picker__search { background: var(--bg-fill); }
[data-theme="dark"] .folder-picker__search input { color: var(--fg-app); }
[data-theme="dark"] .folder-picker__row { color: var(--fg-app); }
[data-theme="dark"] .folder-picker__row:hover { background: var(--bg-hover); }
[data-theme="dark"] .folder-picker__row--selected,
[data-theme="dark"] .folder-picker__row--selected:hover {
  background: color-mix(in oklab, var(--accent-color) 22%, var(--bg-elevated));
  color: var(--accent-color);
}

/* Connection cards */
[data-theme="dark"] .integration-card { background: var(--bg-elevated); border-color: var(--bg-border); }
[data-theme="dark"] .integration-card:hover { border-color: var(--bg-border-strong); }
[data-theme="dark"] .integration-card__name { color: var(--fg-strong-app); }
[data-theme="dark"] .integration-card__blurb { color: var(--fg-muted-app); }
[data-theme="dark"] .integration-card__meta { background: var(--bg-elevated-2); border-color: var(--bg-border); }
[data-theme="dark"] .integration-card__status--ok { background: color-mix(in oklab, var(--assh-ui-green) 22%, var(--bg-elevated)); color: #80d28e; }
[data-theme="dark"] .integration-card__status--err { background: color-mix(in oklab, var(--assh-ui-red) 22%, var(--bg-elevated)); color: #ff9aa3; }
[data-theme="dark"] .integration-card__status--off { background: var(--bg-fill); color: var(--fg-muted-app); }
[data-theme="dark"] .integration-card__error { background: color-mix(in oklab, var(--assh-ui-red) 18%, var(--bg-elevated)); color: #ff9aa3; }

/* Home feature cards */
[data-theme="dark"] .home-feature__head { border-color: var(--bg-border); }
[data-theme="dark"] .home-feature__metric-num { color: var(--fg-strong-app); }
[data-theme="dark"] .home-feature__metric-label { color: var(--fg-muted-app); }
[data-theme="dark"] .home-feature__footer { background: var(--bg-elevated-2); border-color: var(--bg-border); }

/* Modal */
[data-theme="dark"] .modal { background: var(--bg-elevated); box-shadow: 0 24px 56px rgba(0,0,0,.6); }
[data-theme="dark"] .modal__title { color: var(--fg-strong-app); }
[data-theme="dark"] .modal__body { color: var(--fg-muted-app); }
[data-theme="dark"] .modal__footer { background: var(--bg-elevated-2); border-color: var(--bg-border); }
[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, 0.6); }

/* Empty state */
[data-theme="dark"] .empty { background: var(--bg-elevated-2); border-color: var(--bg-border-strong); }

/* Run-now toast */
[data-theme="dark"] .run-now { background: var(--bg-elevated); border-color: var(--bg-border-strong); box-shadow: 0 16px 48px rgba(0,0,0,.6); }
[data-theme="dark"] .run-now__header { border-color: var(--bg-border); }
[data-theme="dark"] .run-now__title { color: var(--fg-strong-app); }
[data-theme="dark"] .run-now__title small { color: var(--fg-muted-app); }
[data-theme="dark"] .run-now__log { background: var(--bg-elevated-2); border-color: var(--bg-border); color: var(--fg-muted-app); }
[data-theme="dark"] .run-now__progress { background: var(--bg-fill); }
[data-theme="dark"] .run-now__icon { background: color-mix(in oklab, var(--accent-color) 22%, var(--bg-elevated)); color: var(--accent-color); }

/* Rule bars */
[data-theme="dark"] .rule-bar__name { color: var(--fg-app); }
[data-theme="dark"] .rule-bar__track { background: var(--bg-fill); }
[data-theme="dark"] .rule-bar__num { color: var(--fg-muted-app); }

/* Rule counts */
[data-theme="dark"] .rule-counts__num { color: var(--fg-strong-app); }
[data-theme="dark"] .rule-counts__label { color: var(--fg-muted-app); }
[data-theme="dark"] .rule-counts__divider { background: var(--bg-border); }

/* Divider */
[data-theme="dark"] .divider { background: var(--bg-border); }

/* Tooltip */
[data-theme="dark"] .tooltip__bubble { background: #2c333d; }

/* Kbd */
[data-theme="dark"] .kbd { background: var(--bg-fill); border-color: var(--bg-border-strong); color: var(--fg-muted-app); }