/* Theme owner sets an effective light/dark value before styles are loaded. */
html[data-theme="dark"] {
  --bg: #0b111a;
  --card: #111a27;
  --ink: #eef3fb;
  --muted: #a6b4c8;
  --line: #344258;
  --ok: #86efac;
  --bad: #fca5a5;
  --ui-bg: #0b111a;
  --ui-card: #111a27;
  --ui-card-soft: #182435;
  --ui-border: #344258;
  --ui-border-strong: #53647d;
  --ui-text: #eef3fb;
  --ui-muted: #a6b4c8;
  --ui-muted-2: #c2cddd;
  --ui-primary: #334b70;
  --ui-primary-hover: #405c86;
  --ui-danger: #fca5a5;
  --ui-success: #86efac;
}
html[data-theme="dark"] :is(.modal-card, .modal-body, .modal-header, .modal-footer) {
  background: var(--ui-card);
  color: var(--ui-text);
  border-color: var(--ui-border);
}
html[data-theme="dark"] .modal :is(input, select, textarea) {
  background: var(--ui-card-soft);
  color: var(--ui-text);
  border-color: var(--ui-border-strong);
}
html[data-theme="dark"] .content :is(th, td) { border-color: var(--ui-border); }
html[data-theme="dark"] .content th { background: var(--ui-card-soft); color: var(--ui-muted-2); }
html[data-theme="dark"] .order-labels-selection-bar { color: #aacbff; }
html[data-theme="dark"] .content .btn-danger { background: #402026; color: #fca5a5; border-color: #8f454c; }
html[data-theme="dark"] .order-labels-printer-readiness [data-state="ready"] { color: #86efac; }
html[data-theme="dark"] .order-labels-printer-readiness [data-state="unavailable"] { color: #fca5a5; }
html[data-theme="dark"] .content a:not(.action) { color: #a8caff; }
.theme-preference-control { max-width: 280px; margin-bottom: 16px; }
.theme-preference-control label { display: grid; gap: 6px; }
.theme-preference-control select { width: 100%; }