/* Staff and dealer preferences are independent. Components should use these
   role-based colors, never infer a second palette from a page background. */
:root {
  color-scheme: light;
  --staff-canvas: #f4f6f9;
  --staff-surface: #fff;
  --staff-subtle: #f1f4f8;
  --staff-hover: #eaf0f6;
  --staff-line: #d9e2eb;
  --staff-control-line: #98a8bb;
  --staff-text: #182b40;
  --staff-muted: #506278;
  --staff-placeholder: #607185;
  --staff-accent: #244fae;
  --staff-tint: #ebf1ff;
  --staff-primary: #2954b8;
  --staff-primary-hover: #1e4497;
  --staff-on-primary: #fff;
  --staff-focus: #2663c2;
  --staff-success: #21604d;
  --staff-success-bg: #e6f3ed;
  --staff-warning: #914d14;
  --staff-danger: #a2322d;
  --staff-danger-bg: #fbecea;
  --staff-nav: #14293f;
  --muted: var(--staff-muted);
  --line: var(--staff-line);
  --border: var(--staff-line);
  --bg: var(--staff-canvas);
  --panel: var(--staff-surface);
  --white: var(--staff-surface);
  --text: var(--staff-text);
  --ink: var(--staff-text);
  --blue: var(--staff-accent);
  --accent: var(--staff-accent);
  --accent-soft: var(--staff-tint);
  --primary: var(--staff-primary);
  --danger: var(--staff-danger);
  --nav: var(--staff-nav);
  color: var(--staff-text);
  background: var(--staff-canvas);
}
:root[data-staff-theme="dark"] {
  color-scheme: dark;
  --staff-canvas: #101923;
  --staff-surface: #192531;
  --staff-subtle: #202e3d;
  --staff-hover: #29394c;
  --staff-line: #354556;
  --staff-control-line: #62768b;
  --staff-text: #e9eff6;
  --staff-muted: #b2c1d1;
  --staff-placeholder: #9daec0;
  --staff-accent: #9bbdff;
  --staff-tint: #233957;
  --staff-primary: #a4c4ff;
  --staff-primary-hover: #bbd3ff;
  --staff-on-primary: #10233e;
  --staff-focus: #a3c8ff;
  --staff-success: #95dec3;
  --staff-success-bg: #1a3d35;
  --staff-warning: #f0bc7f;
  --staff-danger: #ffb7b1;
  --staff-danger-bg: #452b32;
  --staff-nav: #101e2c;
}
.staff-toolbar, .login-tools {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.staff-toolbar { margin-inline-start: auto; flex: 0 0 auto; }
.login-tools { justify-content: space-between; }
.staff-toolbar .staff-account { margin: 0; }
.staff-appearance {
  display: inline-grid; place-items: center; position: relative; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--staff-muted); background: transparent;
}
.staff-appearance select {
  position: absolute; inset: 0; width: 100%; min-width: 0; height: 100%;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
  font: inherit;
}
.staff-appearance:hover, .staff-appearance:focus-within {
  color: var(--staff-text); background: var(--staff-subtle);
}
.staff-appearance:has(select:focus-visible) { outline: 2px solid var(--staff-focus); outline-offset: 2px; }
.staff-appearance-glyph { display: none; width: 21px; height: 21px; pointer-events: none; }
[data-staff-theme="light"] .staff-appearance-glyph[data-mode="light"],
[data-staff-theme="dark"] .staff-appearance-glyph[data-mode="dark"] { display: block; }
.staff-appearance option { color: var(--staff-text); background: var(--staff-surface); }
html :is(a, button, input, select, textarea, summary, [tabindex="0"]):focus-visible {
  outline: 2px solid var(--staff-focus); outline-offset: 2px;
}
.sidebar :is(button, a):focus-visible { outline-color: #afcfff; }
.btn.primary { color: var(--staff-on-primary); background: var(--staff-primary); border-color: var(--staff-primary); }
.btn.primary:hover:not(:disabled) { background: var(--staff-primary-hover); border-color: var(--staff-primary-hover); }
@media (max-width: 580px) {
  .staff-toolbar { gap: 4px; }
  .staff-toolbar .staff-name { max-width: 8ch; }
  .topbar { gap: 6px; }
}
@media (max-width: 420px) {
  .staff-toolbar .staff-name { display: none; }
  .staff-toolbar .staff-account-toggle { gap: 4px; padding-inline: 4px; }
}
@media (forced-colors: active) {
  .staff-appearance { border: 1px solid ButtonText; color: ButtonText; }
  .staff-appearance:focus-within { outline: 2px solid Highlight; }
}

/* Theme the original administrative components without affecting the public site. */
[data-staff-theme="dark"] :is(.login-wrap, .login-card, .topbar, .panel, .stats, .search-zone, .staff-inbox,
  .dossier-card, .dossier .tabs, .task-pick-result, .staff-account-menu, .skip:focus) {
  background-color: var(--staff-surface);
}
[data-staff-theme="dark"] .sidebar { border-inline-end: 1px solid var(--staff-line); }
[data-staff-theme="dark"] ::selection { background: #335682; color: #f3f7ff; }
[data-staff-theme="dark"] .staff-account-menu { border-color: var(--staff-line); box-shadow: 0 12px 28px #0005; }
[data-staff-theme="dark"] .staff-account-toggle:is(:hover,[aria-expanded="true"]),
[data-staff-theme="dark"] .staff-account-menu button:is(:hover,:focus-visible) { background: var(--staff-hover); }
[data-staff-theme="dark"] :is(.crumb span, .search-field .icon, .supply-filters label,
  .supply-result-line strong span, .staff-self .panel-head > .icon) { color: var(--staff-muted); }
[data-staff-theme="dark"] :is(.name,.empty strong,.data-list dd,.summary b,.supply-result-line strong,
  .supply-categories a,.dossier-entry p,.staff-inbox a) { color: var(--staff-text); }
[data-staff-theme="dark"] :is(.name:hover,.invite-options summary) { color: var(--staff-accent); }
[data-staff-theme="dark"] :is(.avatar,.plan-icon,.staff-self-initial,.audience-chips button,.staff-inbox .has-work) {
  color: var(--staff-accent); background-color: var(--staff-tint); border-color: var(--staff-line);
}
[data-staff-theme="dark"] input:not([type=range]), [data-staff-theme="dark"] select,
[data-staff-theme="dark"] textarea {
  background-color: var(--staff-surface); color: var(--staff-text); border-color: var(--staff-control-line);
  accent-color: var(--staff-accent);
}
[data-staff-theme="dark"] :is(input,textarea)::placeholder { color: var(--staff-placeholder); opacity: 1; }
[data-staff-theme="dark"] .btn:not(.primary,.quiet) { background: var(--staff-surface); color: var(--staff-text); border-color: var(--staff-control-line); }
[data-staff-theme="dark"] .btn:not(.primary):hover:not(:disabled) { background: var(--staff-hover); }
[data-staff-theme="dark"] .provision-switch .btn { color: var(--staff-muted); background: transparent; border-color: transparent; }
[data-staff-theme="dark"] .provision-switch .btn[aria-pressed="true"] { background: var(--staff-surface); color: var(--staff-accent); border-color: var(--staff-control-line); }
[data-staff-theme="dark"] td, [data-staff-theme="dark"] th { border-color: var(--staff-line); }
[data-staff-theme="dark"] th { color: var(--staff-muted); background: var(--staff-subtle); }
[data-staff-theme="dark"] .tag { color: var(--staff-accent); background: var(--staff-tint); }
[data-staff-theme="dark"] .tag.good { color: var(--staff-success); background: var(--staff-success-bg); }
[data-staff-theme="dark"] .tag.dim { color: var(--staff-muted); background: var(--staff-subtle); }
[data-staff-theme="dark"] .attention { color: var(--staff-warning); }
[data-staff-theme="dark"] .event::before { background: var(--staff-line); }
[data-staff-theme="dark"] .event-dot { background: var(--staff-accent); border-color: var(--staff-line); }
[data-staff-theme="dark"] .invite-created, [data-staff-theme="dark"] .notice {
  background: var(--staff-success-bg); color: var(--staff-success); border-color: #3e6c5d;
}
[data-staff-theme="dark"] .notice[role="alert"], [data-staff-theme="dark"] .error {
  background: var(--staff-danger-bg); color: var(--staff-danger); border-color: #815453;
}
[data-staff-theme="dark"] #account-feedback:not(:empty),
[data-staff-theme="dark"] button[data-access-action=archived] { color: var(--staff-danger); }
[data-staff-theme="dark"] #account-access-dialog[data-intent=archived] .btn.primary { color: #fff; }
[data-staff-theme="dark"] dialog { background: var(--staff-surface); color: var(--staff-text); border-color: var(--staff-control-line); box-shadow: 0 18px 65px #050a1280; }
[data-staff-theme="dark"] dialog::backdrop { background: #020710b5; }
[data-staff-theme="dark"] :is(.summary,.task-assignment .task-recipient,.task-assignment .task-recipient-picker) {
  color: var(--staff-text); border-color: var(--staff-line); background: var(--staff-subtle);
}
[data-staff-theme="dark"] :is(.supply-categories a:hover, .dossier-metrics a:hover, .dossier-metrics a:focus-visible,
  .staff-inbox a:hover, .task-pick-result:hover) { background: var(--staff-hover); border-color: var(--staff-control-line); }
[data-staff-theme="dark"] :is(.supply-categories [aria-current="page"], .dossier .tabs a[aria-current="page"],
  .dossier-ledger-filter a[aria-current="page"], .audience-option:has(:checked)) {
  background: var(--staff-tint); color: var(--staff-accent); border-color: var(--staff-control-line);
}
[data-staff-theme="dark"] .dossier-identity { background: linear-gradient(110deg,var(--staff-subtle),var(--staff-surface) 66%); }
[data-staff-theme="dark"] .dossier .tabs span { background: var(--staff-subtle); color: var(--staff-muted); }
[data-staff-theme="dark"] .dossier-timeline li + li, [data-staff-theme="dark"] .dossier-entry { border-color: var(--staff-line); }
[data-staff-theme="dark"] .dossier-timeline li:first-child .dossier-entry { border-color: var(--staff-accent); }
[data-staff-theme="dark"] .support-desk-split .support-note:not(.is-system) { background: var(--staff-surface); }
[data-staff-theme="dark"] .support-desk-split .support-note.is-staff { background: var(--staff-tint); }