/* Load after styles.css. Screen-only overrides leave proofs and print output light. */
@media screen {
  :root[data-hub-theme] {
    color-scheme: light;
    --theme-selected: #e9f2f0;
    --theme-hover: #eef0eb;
  }

  .app-header.has-hub-theme {
    grid-template-columns: minmax(0, 1fr) auto 40px;
    grid-template-areas: "brand session theme" "nav nav nav";
  }

  .has-hub-theme .session-badge { overflow-wrap: anywhere; min-width: 0; }
  .hub-theme-control { grid-area: theme; position: relative; justify-self: end; z-index: 40; }
  .hub-theme-control [hidden] { display: none !important; }
  .hub-theme-button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 4px;
  }
  .hub-theme-icon {
    display: block;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("assets/sun.svg") center / contain no-repeat;
    mask: url("assets/sun.svg") center / contain no-repeat;
  }
  .hub-theme-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 192px;
    max-width: calc(100vw - 28px);
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  .hub-theme-panel fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
  .hub-theme-panel legend { padding: 0 0 8px; font-size: 12px; font-weight: 700; }
  .hub-theme-panel label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 7px 8px;
    border-radius: 3px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
  }
  .hub-theme-panel label:hover { background: var(--theme-hover); }
  .hub-theme-panel label:has(input:checked) { background: var(--theme-selected); }
  .hub-theme-panel input {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--green);
  }
  .hub-theme-button:focus-visible, .hub-theme-panel input:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
  }
  .hub-theme-note { margin: 10px 0 0; color: var(--red); font-size: 12px; overflow-wrap: anywhere; }

  :root[data-hub-theme="dark"] {
    color-scheme: dark;
    --paper: #151817;
    --surface: #202422;
    --surface-muted: #292f2b;
    --ink: #edf2ee;
    --muted: #b2bdb6;
    --line: #414c44;
    --gold: #e6bf72;
    --green: #87cdb1;
    --green-dark: #87cdb1;
    --red: #f0a49a;
    --blue: #a4c5ee;
    --focus: #9ad8f3;
    --text: var(--ink);
    --shadow: 0 12px 32px rgb(0 0 0 / 35%);
    --theme-hover: #2d3630;
    --theme-selected: #233d33;
    --theme-input: #1b201d;
    --theme-control-border: #637368;
    --theme-success: #20392e;
    --theme-warning: #3b3221;
    --theme-danger: #402a28;
    --theme-info: #253442;
    --theme-violet: #352b3e;
    --theme-violet-ink: #d8b9e8;
    --theme-on-accent: #14231b;
    background: var(--paper);
  }

  :root[data-hub-theme="dark"] :is(body, .order-workspace-bar) { background: var(--paper); }
  :root[data-hub-theme="dark"] .hub-theme-icon {
    -webkit-mask-image: url("assets/moon.svg");
    mask-image: url("assets/moon.svg");
  }
  /* Only monochrome UI artwork is inverted; customer artwork and product photos stay untouched. */
  :root[data-hub-theme="dark"] .app-header .brand-logo,
  :root[data-hub-theme="dark"] .icon-button img[src^="assets/refresh-cw.svg"],
  :root[data-hub-theme="dark"] .production-page .production-icon img[src^="assets/refresh-cw.svg"] { filter: brightness(0) invert(1); }
  :root[data-hub-theme="dark"] .header-meta { border-top-color: var(--line); }

  :root[data-hub-theme="dark"] :is(
    .today-metrics, .dashboard-table, .order-workspace-page .workspace,
    .nav-pill, .nav-more summary, .nav-more-list, .nav-more-list .nav-pill, .header-meta > span,
    .order-focus-nav, .order-action-menu, .workspace-dialog, .account-confirm-dialog,
    .line-card, .line-select, .hub-card, .square-invoice-panel, .quote-audit-card,
    .saved-order-row, .queue-metric, .queue-row, .permission-toggle, .access-preview-card,
    .notification-card, .work-order-summary-card, .production-check, .supplier-shipment-row,
    .attached-file-row, .profile-discount-panel, .customer-snapshot-card, .customer-open-order,
    .metric-card, .apparel-pricing-breakdown > div, .pricing-line-row, .pricing-tier-editor,
    .admin-subpage-card, .qa-metric-card, .qa-roadmap-grid article, .system-health-card,
    .qa-phase-card, .qa-check-row, .safety-export-grid article, .report-attention-card,
    .qa-audit-result, .switch-line, .sanmar-lookup-panel
  ) { background: var(--surface); }

  :root[data-hub-theme="dark"] :is(
    .hub-metric-grid article, .queue-badge, .queue-meta-grid > label, .queue-meta-grid > div,
    .access-preview-list li, .matrix-access.is-denied, .work-order-output, .staff-proof-summary,
    .customer-request-preview article, .supplier-tracking-summary article, .customer-overview-panel,
    .editor-panel, .decoration-site-card, .report-attention-meta span, .qa-audit-panel,
    .qa-phase-heading, .empty-state.compact
  ) { background: var(--surface-muted); }

  :root[data-hub-theme="dark"] :is(label, .control-group legend, .work-order-bullet, .account-confirm-dialog) { color: var(--ink); }
  :root[data-hub-theme="dark"] :is(.workspace-dialog, .account-confirm-dialog) { border-color: var(--line); }
  :root[data-hub-theme="dark"] :is(.workspace-dialog, .account-confirm-dialog)::backdrop { background: rgb(0 0 0 / 65%); }
  :root[data-hub-theme="dark"] .work-order-key-value { border-bottom-color: var(--line); }
  :root[data-hub-theme="dark"] :is(input, select, textarea) {
    color: var(--ink);
    background-color: var(--theme-input);
    border-color: var(--theme-control-border);
    accent-color: var(--green);
    caret-color: var(--ink);
  }
  :root[data-hub-theme="dark"] :is(option, optgroup) { color: var(--ink); background-color: var(--theme-input); }
  :root[data-hub-theme="dark"] :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
  :root[data-hub-theme="dark"] :is(input, textarea)[readonly] { background-color: var(--surface-muted); }
  :root[data-hub-theme="dark"] input:-webkit-autofill {
    -webkit-text-fill-color: var(--ink);
    box-shadow: 0 0 0 1000px var(--theme-input) inset;
  }
  :root[data-hub-theme="dark"] :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
  }
  :root[data-hub-theme="dark"] :is(button, input, select, textarea):disabled {
    color: var(--muted);
    background-color: var(--surface-muted);
    border-color: var(--line);
    cursor: not-allowed;
    opacity: 0.72;
  }
  :root[data-hub-theme="dark"] :is(button, .button-link, .nav-pill):not(:disabled):hover,
  :root[data-hub-theme="dark"] .nav-more[open] summary,
  :root[data-hub-theme="dark"] .today-metrics button:focus-visible,
  :root[data-hub-theme="dark"] .dashboard-table tr:hover td { background: var(--theme-hover); border-color: var(--theme-control-border); }
  :root[data-hub-theme="dark"] :is(.primary-button, .button-link.primary-button, .queue-lane-tabs button.is-active, .notification-actions .is-sent) {
    color: var(--theme-on-accent);
    background: var(--green);
    border-color: var(--green);
  }
  :root[data-hub-theme="dark"] :is(.primary-button, .button-link.primary-button, .queue-lane-tabs button.is-active, .notification-actions .is-sent):not(:disabled):hover {
    color: var(--theme-on-accent);
    background: #a0dfc5;
    border-color: #a0dfc5;
  }
  :root[data-hub-theme="dark"] :is(.primary-button, .notification-actions .is-sent, .queue-lane-tabs button.is-active):disabled {
    background: var(--surface-muted);
    color: var(--muted);
    border-color: var(--line);
  }
  :root[data-hub-theme="dark"] .danger-button { color: var(--red); background: var(--theme-danger); border-color: var(--red); }
  :root[data-hub-theme="dark"] .danger-button:not(:disabled):hover { color: var(--theme-on-accent); background: var(--red); border-color: var(--red); }
  :root[data-hub-theme="dark"] :is(.step-badge, .line-number, .logistics-tabs button[aria-selected="true"]) { color: var(--paper); background: var(--ink); }
  :root[data-hub-theme="dark"] .logistics-tabs button[aria-selected="true"]:hover { color: var(--paper); background: #d3e0d7; }
  :root[data-hub-theme="dark"] .status-pill { color: var(--theme-on-accent); }

  :root[data-hub-theme="dark"] :is(.nav-pill.is-current, .nav-more.has-current summary, .order-focus-nav button.is-active, .hub-card.is-primary, .logistics-order.is-selected) {
    color: var(--green);
    background: var(--theme-selected);
    border-color: var(--green);
  }
  :root[data-hub-theme="dark"] .order-workspace-page .order-focus-nav { background: transparent; }
  :root[data-hub-theme="dark"] .dashboard-table th { color: var(--muted); background: var(--surface-muted); border-color: var(--line); }
  :root[data-hub-theme="dark"] :is(.dashboard-orders, .dashboard-table tr, .daily-reason + .daily-reason) { border-color: var(--line); }
  :root[data-hub-theme="dark"] .today-metrics button:first-child strong { color: var(--red); }
  :root[data-hub-theme="dark"] .today-metrics button:nth-child(4) strong { color: var(--gold); }
  :root[data-hub-theme="dark"] .today-toolbar p.is-stale,
  :root[data-hub-theme="dark"] #workspaceSaveState[data-state="dirty"] { color: var(--gold); }
  :root[data-hub-theme="dark"] :is(.tone-danger, .tone-red, .packing-progress.is-error, .box-item-choice.is-error .packing-availability) { color: var(--red); }
  :root[data-hub-theme="dark"] :is(.tone-warning, .tone-amber) { color: var(--gold); }
  :root[data-hub-theme="dark"] :is(.tone-success, .tone-green) { color: var(--green); }
  :root[data-hub-theme="dark"] :is(.tone-info, .tone-blue) { color: var(--blue); }
  :root[data-hub-theme="dark"] .tone-muted { color: var(--muted); }

  /* Status backgrounds remain distinct from both the page and editable fields. */
  :root[data-hub-theme="dark"] .fulfillment-badge { color: var(--muted); background: var(--surface-muted); }
  :root[data-hub-theme="dark"] :is(
    .api-status, .notification-send-status.is-info, .profile-action-prompt,
    .fulfillment-badge.method-local-delivery, .queue-badge.due-today
  ) { color: var(--blue); background: var(--theme-info); border-color: var(--blue); }
  :root[data-hub-theme="dark"] :is(
    .api-status.is-ok, .session-badge, .notification-send-status.is-ok,
    .fulfillment-badge.method-pickup, .queue-badge.supplier-received, .queue-badge.payment-paid,
    .matrix-access.is-allowed, .qa-phase-heading > span
  ) { color: var(--green); background: var(--theme-success); border-color: var(--green); }
  :root[data-hub-theme="dark"] :is(
    .dashboard-status.is-error, .api-status.is-error, .session-badge.is-error,
    .notification-send-status.is-error, .supplier-shipment-alert.is-error,
    .queue-badge.priority-critical, .queue-badge.due-overdue, .queue-badge.supplier-delayed,
    .queue-badge.supplier-risk
  ) { color: var(--red); background: var(--theme-danger); border-color: var(--red); }
  :root[data-hub-theme="dark"] :is(
    .fulfillment-badge.method-unconfirmed, .queue-badge.priority-rush, .queue-badge.due-soon,
    .queue-badge.supplier-today, .queue-badge.supplier-inbound, .queue-badge.payment-unpaid
  ) { color: var(--gold); background: var(--theme-warning); border-color: var(--gold); }
  :root[data-hub-theme="dark"] :is(.queue-badge.is-muted, .queue-badge.due-muted, .queue-badge.payment-po) {
    color: var(--muted); background: var(--surface-muted); border-color: var(--line);
  }
  :root[data-hub-theme="dark"] .fulfillment-badge.method-shipping { color: var(--theme-violet-ink); background: var(--theme-violet); }

  :root[data-hub-theme="dark"] :is(
    .access-preview-list li.is-allowed, .access-matrix-table tr.is-selected td,
    .production-check.is-checked, .staff-proof-summary.is-ok, .supplier-shipment-row.is-received,
    .attached-file-row.is-proof, .profile-action-prompt.is-ok, .quote-recommendation,
    .system-health-card.is-pass, .qa-check-row.is-pass, .check-list li
  ) { color: var(--ink); background: var(--theme-success); }
  :root[data-hub-theme="dark"] :is(
    .house-charge-banner, .work-order-output h3, .staff-proof-summary.is-warning,
    .supplier-shipment-alert, .profile-action-prompt.is-warning, .insight-panel p,
    .system-health-card.is-warning, .qa-check-row.is-needs-work, .check-list li.warning
  ) { color: var(--ink); background: var(--theme-warning); }
  :root[data-hub-theme="dark"] :is(
    .permission-toggle.is-blocked, .profile-action-prompt.is-urgent, .system-health-card.is-fail,
    .qa-check-row.is-blocked, .check-list li.error
  ) { color: var(--ink); background: var(--theme-danger); }
  :root[data-hub-theme="dark"] .supplier-shipment-alert.is-error { color: var(--red); background: var(--theme-danger); }
  :root[data-hub-theme="dark"] .permission-toggle.is-blocked { border-color: var(--red); }
  :root[data-hub-theme="dark"] .access-preview-list li.is-denied { border-left-color: var(--muted); }
  :root[data-hub-theme="dark"] .swatch-dot { border-color: var(--theme-control-border); }

  /* Labels are physical output previews, not themed application surfaces. */
  :root[data-hub-theme="dark"] .thermal-label-sheet { color-scheme: light; }
}

@media screen and (max-width: 1180px) {
  .app-header.has-hub-theme {
    grid-template-columns: minmax(0, 1fr) 40px;
    grid-template-areas: "brand theme" "session session" "nav nav";
  }
}

@media (forced-colors: active) {
  .hub-theme-icon { forced-color-adjust: none; background: ButtonText; }
}

@media print {
  .hub-theme-control { display: none !important; }
}