/* Theme controls are shared by the console and sign-in page. */
.theme-control { display: inline-flex; align-items: center; gap: 7px; margin-left: 12px; color: #52657d; flex-shrink: 0; }
.theme-control svg { flex-shrink: 0; }
.theme-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.theme-control select { width: auto; min-width: 88px; margin: 0; padding: 7px 25px 7px 9px; font-size: 12px; color: #334962; background-color: #fff; border-color: #dfe5ed; cursor: pointer; }
.login-panel { position: relative; min-width: 0; }
.login-card { width: 100%; max-width: 360px; min-width: 0; }
.login-theme { position: absolute; top: 24px; right: 28px; }
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #101722;
  --ink: #e1e8f2;
  --muted: #a1afc2;
  --line: #2c3a4e;
  --white: #182231;
  --sidebar: #0d1420;
  --green: #80aaff;
  --accent: #253e63;
  --surface: #182231;
  --surface-raised: #202e41;
  --surface-subtle: #141e2c;
  --success: #83d6b0;
  --warning: #e9c079;
  --danger: #ffa79b;
}
html[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] :is(.panel, .metric, .monitor-totals, .connection-section, .connection-save, .connection-delete) { background: var(--surface); border-color: var(--line); box-shadow: none; }
html[data-theme="dark"] :is(.topbar, .login-page) { background: var(--paper); color: var(--muted); }
html[data-theme="dark"] .sidebar { background: var(--sidebar); }
html[data-theme="dark"] .sidebar nav > a { color: #b5c4d8; }
html[data-theme="dark"] .sidebar nav > a:hover { background: var(--surface-raised); }
html[data-theme="dark"] .sidebar nav > a.selected { background: #233d61; color: #eef4ff; }
html[data-theme="dark"] .brand-mark { background: #28456f; color: #dce9ff; }
html[data-theme="dark"] :is(.brand-sub, .profile small, .nav-label, .version, .signout) { color: #a1b2ca; }
html[data-theme="dark"] .avatar { background: #314058; color: #e1e8f2; }
html[data-theme="dark"] .version { border-color: var(--line); }
html[data-theme="dark"] :is(.workspace, .workspace-icon, .version > span) { background: #20334a; border-color: var(--line); color: #c2d3eb; }
/* Dividers and text throughout the data tables, settings and record details. */
html[data-theme="dark"] .shell :is(section, article, nav, table, th, td, details, summary, header, footer, dl, dt, dd, li, form, div) { border-color: var(--line); }
html[data-theme="dark"] :is(main, .login-panel) :is(h1, h2, h3, strong, dd, td, address) { color: var(--ink); }
html[data-theme="dark"] :is(main, .login-panel) :is(p, small, label, dt, th, summary) { color: var(--muted); }
html[data-theme="dark"] :is(.eyebrow, .fine, .muted, .table-empty, .heading-count, .empty, .history-empty, .history-note, .history-meta, .history-references, .history-coverage, .history-reason, .snapshot-note, .sync-evidence, .order-reference, .order-amount-note, .direction-arrow, .catalog-progress [data-count], .catalog-progress [data-progress-detail], .product-record-id code, .product-pending-fields dt, .product-secondary > summary span, .product-back span) { color: var(--muted); }
html[data-theme="dark"] :is(.metric > div, .metric > div > span, .store-route, .store-bottom, .operations-table .operation-code, .flow-number span, .flow-heading small, .monitor-store-grid > a > div:first-child span) { color: var(--muted); }
html[data-theme="dark"] :is(.text-link, .flow-open, .product-back, .delete-back, .history-links a, .history-latest, .operation-detail-link, .pagination a, .orders-list-table .item-title, .monitor-store-footer, .store-navigation a.selected) { color: #9cbfff; }
html[data-theme="dark"] :is(.store-navigation a, .connection-nav a, .operation-tabs a) { color: var(--muted); }
html[data-theme="dark"] :is(.store-navigation a.selected, .operation-tabs a.selected) { color: #9cbfff; border-bottom-color: #80aaff; }
html[data-theme="dark"] :is(.connection-nav a:hover, .connection-nav a:focus-visible, .connection-nav a[aria-current], .operation-tabs a:hover, .monitor-store-grid > a:hover, .operations-table tbody tr:hover, .customer-records tbody tr:hover, [data-merge-row]:hover, [data-merge-row]:focus-within, [data-merge-group]:hover) { background: var(--surface-raised); color: var(--ink); }
html[data-theme="dark"] :is(th, .panel-bottom, .monitor-store-footer, .operation-toolbar, .customer-direction, .customer-bulk-ignore form, .exclusion-reasons, .history-changes summary, .record-history .pagination, .catalog-progress) { background: var(--surface-subtle); }
html[data-theme="dark"] :is(.merge-sections th, .customer-records .sync-record-table th) { background: var(--surface-subtle); color: var(--muted); }
html[data-theme="dark"] :is(pre, .raw-details pre) { background: #0e1724; color: #c2d3eb; }
html[data-theme="dark"] .record-history pre { background: transparent; color: var(--ink); }
html[data-theme="dark"] :is(.count, .store-icon, .empty-art > span, .feature-list > div > span, .operation-tabs span, .direction-status, .sync-badge, .badge, .state-pending) { background: #263447; color: #bdcadb; border-color: var(--line); }
/* Inputs keep native dark menus, visible focus rings and readable disabled text. */
html[data-theme="dark"] :is(input:not([type="checkbox"]), select, textarea),
html[data-theme="dark"] .connection-field :is(input:not([type="checkbox"]), select, textarea) { background-color: #101b2a; color: #e1e8f2; border-color: #40516a; }
html[data-theme="dark"] :is(input, textarea)::placeholder { color: #8799b0; opacity: 1; }
html[data-theme="dark"] :is(input, select, textarea):focus { border-color: #80aaff; outline: 2px solid #35537c; outline-offset: 2px; }
html[data-theme="dark"] input[type="checkbox"] { accent-color: #80aaff; }
html[data-theme="dark"] .connection-field > label.connection-toggle { background: var(--surface-subtle); border-color: var(--line); }
html[data-theme="dark"] .connection-toggle:has(input:checked) { background: #203450; border-color: #4d6b96; }
html[data-theme="dark"] :is(.connection-toggle strong, .connection-section-head strong, .connection-save strong) { color: var(--ink); }
html[data-theme="dark"] :is(.connection-toggle small, .connection-section-head small, .connection-field > small, .connection-save small, .connection-expand) { color: var(--muted); }
html[data-theme="dark"] .button.primary { background: #386bd9; color: #fff; }
html[data-theme="dark"] .button.outline { background: var(--surface); color: #d5e2f5; border-color: #40516a; }
html[data-theme="dark"] .button.pale { background: #263e5e; color: #c4d8ff; }
html[data-theme="dark"] .button:hover { filter: brightness(1.15); }
html[data-theme="dark"] .button:focus-visible { outline: 2px solid #9cbfff; }
/* Status colors retain their meaning on dark surfaces. */
html[data-theme="dark"] :is(.badge.green, .state-confirmed, .state-delivered, .sync-badge.sync-synced, .direction-status.enabled) { background: #193d34; color: var(--success); }
html[data-theme="dark"] :is(.state-blocked, .state-attention, .state-uncertain, .state-warning, .state-retry_wait, .operation-tabs .has-attention span) { background: #443522; color: var(--warning); }
html[data-theme="dark"] :is(.state-leased, .sync-badge.sync-running) { background: #223e66; color: #a9c9ff; }
html[data-theme="dark"] .sync-badge.sync-attention { background: #452c30; color: var(--danger); }
html[data-theme="dark"] :is(.sync-synced, .history-published h3, .history-restored h3) { color: var(--success); }
html[data-theme="dark"] :is(.sync-pending, .sync-running) { color: #a9c9ff; }
html[data-theme="dark"] :is(.sync-unverified, .sync-withdrawn) { color: var(--muted); }
html[data-theme="dark"] :is(.sync-attention, .operation-error, .customer-progress-error, .errorlist, .history-deleted h3, .history-withdrawal h3) { color: var(--danger); }
html[data-theme="dark"] .history-ignored h3 { color: var(--warning); }
html[data-theme="dark"] :is(.local-notice, .message) { background: #1b3530; border-color: #35564c; color: #a9d9c1; }
html[data-theme="dark"] .message :is(p, strong) { color: inherit; }
html[data-theme="dark"] :is(.message.error, .delete-warning) { background: #3b252b; border-color: #684047; color: var(--danger); }
html[data-theme="dark"] .shell .connection-delete { border-color: #684047; }
html[data-theme="dark"] .connection-delete h2 { color: var(--danger); }
html[data-theme="dark"] .delete-icon { background: #3b252b; border-color: #684047; color: var(--danger); }
html[data-theme="dark"] .button.delete-outline { background: #33252c; border-color: #885058; color: #ffc1b8; }
html[data-theme="dark"] .button.delete-solid { background: #b3352c; border-color: #c34a40; color: #fff; }
html[data-theme="dark"] .delete-confirmation input[aria-invalid="true"],
html[data-theme="dark"] .connection-field.has-error :is(input, select) { border-color: #f19689; }
html[data-theme="dark"] .safety-card { background: #20342e; border-color: #3b5449; }
html[data-theme="dark"] .safety-card :is(h2, b) { color: #bce1cd; }
html[data-theme="dark"] .safety-card :is(p, .eyebrow, .safety-line, .shield) { color: #9dbead; }
html[data-theme="dark"] progress, html[data-theme="dark"] progress::-webkit-progress-bar { background: #2c3a4e; }
html[data-theme="dark"] .history-event::before { border-color: var(--surface); box-shadow: 0 0 0 1px var(--line); }
html[data-theme="dark"] .history-event:last-child, html[data-theme="dark"] .delivery-steps li:last-child { border-left-color: transparent; }
html[data-theme="dark"] .theme-control { color: var(--muted); }
html[data-theme="dark"] .login-story { background: #111f30; }
html[data-theme="dark"] .login-story p, html[data-theme="dark"] .login-story > small { color: #a9bed6; }
@media (max-width: 760px) {
  .topbar > div { gap: 6px; }
  .topbar .theme-control { margin-left: 4px; }
  .theme-control select { min-width: 76px; padding: 6px; }
}
@media (max-width: 560px) {
  .topbar { height: auto; min-height: 58px; flex-wrap: wrap; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .topbar > span { min-width: 0; overflow-wrap: anywhere; }
  .topbar > div { flex-wrap: wrap; }
  .login-theme { top: 18px; right: 20px; }
  .login-panel { padding-top: 80px; }
}
