/* Appearance is device-local. Theme colours do not alter the type scale. */
.settings-appearance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 440px;
  min-height: 44px;
}
.settings-theme-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.settings-theme-track {
  display: block;
  width: 38px;
  height: 22px;
  padding: 3px;
  border-radius: 999px;
  background: #767e89;
}
.settings-theme-track > span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 120ms ease;
}
.settings-theme-switch[aria-checked="true"] .settings-theme-track { background: #3577d5; }
.settings-theme-switch[aria-checked="true"] .settings-theme-track > span { transform: translateX(16px); }
.settings-theme-switch:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .settings-theme-track > span { transition: none; }
}

@layer aphaw-theme {
  @media screen {
    :root[data-theme="dark"],
    :host([data-theme="dark"]) {
      color-scheme: dark !important;
      --theme-canvas: #131416 !important;
      --theme-surface: #1c1e21 !important;
      --theme-raised: #25282c !important;
      --theme-field: #17191c !important;
      --theme-field-border: #626a76 !important;
      --theme-header: #25282c !important;
      --theme-positive: #8cdbaf !important;
      --theme-positive-bg: #203b2e !important;
      --theme-warning: #efd18d !important;
      --theme-warning-bg: #3b311f !important;
      --theme-negative: #f3aaa4 !important;
      --theme-negative-bg: #402928 !important;
      --theme-accent: #a3c9ff !important;
      --theme-accent-bg: #27394f !important;
      --ink: #edf0f3 !important;
      --muted: #aeb5bf !important;
      --line: #3b3f46 !important;
      --page: var(--theme-canvas) !important;
      --panel: var(--theme-surface) !important;
      --grouped-surface: var(--theme-surface) !important;
      --primary: #3476d6 !important;
      --primary-strong: var(--theme-accent) !important;
      --action-primary: #2865c3 !important;
      --action-primary-hover: #306ece !important;
      --action-primary-active: #2459aa !important;
      --soft: var(--theme-accent-bg) !important;
      --warning: var(--theme-warning-bg) !important;
      --green: var(--theme-positive) !important;
      --red: var(--theme-negative) !important;
      --amber: var(--theme-warning) !important;
      --ui-ink: var(--ink) !important;
      --ui-muted: var(--muted) !important;
      --ui-line: var(--line) !important;
      --ui-line-strong: #626973 !important;
      --ui-surface: var(--theme-surface) !important;
      --ui-surface-subtle: var(--theme-surface) !important;
      --ui-header: var(--theme-header) !important;
      --ui-hover: #2b3036 !important;
      --ui-table-hover: #272c32 !important;
      --ui-selected: var(--theme-accent-bg) !important;
      --ui-selected-hover: #304660 !important;
      --ui-accent: var(--theme-accent) !important;
      --ui-accent-hover: #bdd9ff !important;
      --ui-danger: #713a38 !important;
      --ui-scrollbar-thumb: #60666f !important;
      --ui-scrollbar-thumb-hover: #858d98 !important;
      --shadow: 0 12px 32px #0006 !important;
      color: var(--ink) !important;
      background: var(--theme-canvas) !important;
    }

    :root[data-theme="dark"] :where(body, main, section, article, aside, header, footer, div,
      h1, h2, h3, h4, h5, p, label, legend, summary, span:not([aria-hidden="true"]),
      strong, b, em, small, a, button, input, select, textarea, th, td, dt, dd, li, output),
    :host([data-theme="dark"]) :where(main, section, article, aside, header, footer, div,
      h1, h2, h3, h4, h5, p, label, legend, summary, span:not([aria-hidden="true"]),
      strong, b, em, small, a, button, input, select, textarea, th, td, dt, dd, li, output) {
      color: inherit !important;
      border-color: var(--line) !important;
    }

    :root[data-theme="dark"] :is(body, .content-pane, .view, .app-utility-bar, .auth-gate),
    :host([data-theme="dark"]) :is(.app, .content, .view, .topbar, .purchase-shared-header, .book-spread) {
      background: var(--theme-canvas) !important;
      color: var(--ink) !important;
    }

    :root[data-theme="dark"] :is(.settings-sidebar, .sidebar-brand, .sidebar-footer) {
      background: #181a1d !important;
      color: var(--ink) !important;
    }
    :root[data-theme="dark"] .settings-sidebar::before { background: var(--line) !important; }
    :root[data-theme="dark"] #sidebarCompanyLogo { background: #fff; border-radius: 6px; }

    :root[data-theme="dark"] :is(.panel, .side-panel, .settings-section, .auth-login-card,
      .inventory-card, .finished-product-summary-card, .dashboard-metric, .report-metric,
      .finance-metric, .finance-position-total, .finance-breakdown-grid > section,
      .finance-report-metrics > section, .metrics > div, .book-page,
      .row-card, .detail-card, .detail-summary > div, .info-line, .summary-strip, .summary-strip > div,
      .receivable-total-box, .invoice-order-card, .receivable-invoice-card,
      .receivable-grand-total, .delivery-run-form, .delivery-run-stop,
      .team-member-list, .team-member-row, .settings-row, .po-detail-panel,
      .purchase-table-panel, .purchase-create-panel, .purchase-catalog-layout,
      .delivery-summary-item, .carry-banner, .closing-carry, .month-summary, .empty, .invoice-empty),
    :host([data-theme="dark"]) :is(.panel, .side-panel, .book-page, .row-card,
      .detail-card, .detail-summary > div, .info-line, .summary-strip, .summary-strip > div,
      .metrics > div, .inventory-card, .po-detail-panel, .purchase-table-panel,
      .purchase-create-panel, .delivery-summary-item, .carry-banner, .closing-carry,
      .receive-row, .po-item, .empty) {
      background: var(--theme-surface) !important;
      color: var(--ink) !important;
      border-color: var(--line) !important;
      box-shadow: none !important;
    }

    :root[data-theme="dark"] :is(input, select, textarea, .aphaw-number-stepper),
    :host([data-theme="dark"]) :is(input, select, textarea, .aphaw-number-stepper) {
      color-scheme: dark !important;
      color: var(--ink) !important;
      background-color: var(--theme-field) !important;
      border-color: var(--theme-field-border) !important;
      box-shadow: none !important;
      accent-color: var(--theme-accent);
    }
    :root[data-theme="dark"] :is(input, textarea)::placeholder,
    :host([data-theme="dark"]) :is(input, textarea)::placeholder { color: #969eaa !important; opacity: 1; }
    :root[data-theme="dark"] select:not([multiple]):not([size]),
    :host([data-theme="dark"]) select:not([multiple]):not([size]) {
      appearance: none !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23aeb5bf' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: right 10px center !important;
      background-size: 12px 12px !important;
      padding-inline-end: 30px !important;
    }
    :root[data-theme="dark"] :is(input, select, textarea, button):focus-visible,
    :host([data-theme="dark"]) :is(input, select, textarea, button):focus-visible {
      outline: 2px solid var(--theme-accent) !important;
      outline-offset: 2px;
    }

    :root[data-theme="dark"] :is(table, .table-wrap, .detail-table-row, .detail-table-head),
    :host([data-theme="dark"]) :is(table, .table-wrap, .detail-table-row, .detail-table-head) {
      background: var(--theme-surface) !important;
      border-color: var(--line) !important;
    }
    :root[data-theme="dark"] :is(thead th, thead td, .detail-table-head, .receivable-invoice-columns),
    :host([data-theme="dark"]) :is(thead th, thead td, .detail-table-head) {
      background: var(--theme-header) !important;
      color: var(--muted) !important;
    }
    :root[data-theme="dark"] :is(tbody td, tbody th, tfoot td, tfoot th),
    :host([data-theme="dark"]) :is(tbody td, tbody th, tfoot td, tfoot th) {
      background: var(--theme-surface) !important;
      color: var(--ink) !important;
    }
    :root[data-theme="dark"] tbody tr:hover > :is(td, th),
    :host([data-theme="dark"]) tbody tr:hover > :is(td, th) { background: var(--ui-table-hover) !important; }
    :root[data-theme="dark"] tbody :is(tr.selected-row, tr.active, tr.is-selected) > :is(td, th),
    :host([data-theme="dark"]) tbody :is(tr.selected-row, tr.active, tr.is-selected) > :is(td, th) { background: var(--ui-selected) !important; }

    :root[data-theme="dark"] :is(.secondary, .ghost, .subtab, .segmented-view-tab,
      .finished-product-tab, .finance-view-tab, .plastics-view-tab, .delivery-tabs button,
      .unified-period-summary, .module-period-summary, .header-period-summary,
      .purchase-period-display, .plastics-period-display, .header-user-profile,
      .layout-mode-switch, .invoice-pagination-size, .invoice-pagination-page,
      .unit-chip, .filter-drawer-toggle, .plastic-cancel-order),
    :host([data-theme="dark"]) :is(.secondary, .ghost, .subtab, .plastics-view-tab,
      .unified-period-summary, .purchase-period-display, .plastics-period-display,
      .invoice-pagination-size, .invoice-pagination-page, .unit-chip, .plastic-cancel-order) {
      background: var(--theme-surface) !important;
      color: var(--ink) !important;
      border-color: var(--line) !important;
      box-shadow: none !important;
    }
    :root[data-theme="dark"] :is(.tab.active, .subtab.active, .segmented-view-tab.active,
      .finished-product-tab.active, .finance-view-tab.active, .plastics-view-tab.active,
      .delivery-tabs button.active, .invoice-pagination-page.active),
    :host([data-theme="dark"]) :is(.subtab.active, .plastics-view-tab.active, .invoice-pagination-page.active) {
      background: var(--ui-selected) !important;
      color: var(--theme-accent) !important;
      box-shadow: inset 0 0 0 1px #55718f !important;
    }
    :root[data-theme="dark"] :is(.primary, .new-action):not(.utility-icon-button),
    :host([data-theme="dark"]) :is(.primary, .new-action):not(.utility-icon-button) {
      background: var(--action-primary) !important;
      color: #fff !important;
      border-color: var(--action-primary) !important;
    }
    :root[data-theme="dark"] :is(.primary, .new-action):not(.utility-icon-button):hover,
    :host([data-theme="dark"]) :is(.primary, .new-action):not(.utility-icon-button):hover { background: var(--action-primary-hover) !important; }

    :root[data-theme="dark"] :is(.secondary, .ghost, .tab, .subtab, .utility-icon-button):hover,
    :host([data-theme="dark"]) :is(.secondary, .ghost, .subtab, .tool-icon):hover { background: var(--ui-hover) !important; }

    :root[data-theme="dark"] :is(.utility-icon-button, .tool-icon, .filter-action-button,
      .icon-button, .header-mounted-control, .row-button, .tablet-panel-close,
      .tablet-panel-launcher, .aphaw-step-button),
    :host([data-theme="dark"]) :is(.utility-icon-button, .tool-icon, .icon-button,
      .row-button, .aphaw-step-button) { color: var(--ink) !important; background-color: transparent !important; }
    :root[data-theme="dark"] :is(.utility-icon-button, .filter-action-button, .header-mounted-control, .sidebar-toggle)::before,
    :host([data-theme="dark"]) :is(.utility-icon-button, .tool-icon)::before { background-color: currentColor !important; }

    :root[data-theme="dark"] :is(.unified-period-popover, .header-period-popover,
      .app-combobox-panel, .context-menu, .selected-order-actions-menu,
      .cloud-status-popover, .app-decision-dialog, .tablet-drawer-panel),
    :host([data-theme="dark"]) :is(.unified-period-popover, .app-combobox-panel,
      .context-menu, .selected-order-actions-menu) {
      color: var(--ink) !important;
      background: var(--theme-raised) !important;
      border-color: var(--ui-line-strong) !important;
      box-shadow: var(--shadow) !important;
    }
    :root[data-theme="dark"] :is(.unified-period-presets, .unified-period-main, .app-decision-dialog footer),
    :host([data-theme="dark"]) :is(.unified-period-presets, .unified-period-main) { background: var(--theme-raised) !important; }
    :root[data-theme="dark"] :is(.app-combobox-option, .calendar-day, .calendar-nav, .unified-period-presets button),
    :host([data-theme="dark"]) :is(.app-combobox-option, .calendar-day, .calendar-nav, .unified-period-presets button) {
      background: transparent !important;
      color: var(--ink) !important;
    }
    :root[data-theme="dark"] :is(.app-combobox-option:hover, .app-combobox-option.is-active,
      .calendar-day:hover, .calendar-nav:hover, .unified-period-presets button:hover),
    :host([data-theme="dark"]) :is(.app-combobox-option:hover, .app-combobox-option.is-active,
      .calendar-day:hover, .calendar-nav:hover, .unified-period-presets button:hover) { background: var(--ui-hover) !important; }
    :root[data-theme="dark"] :is(.calendar-day.in-range, .calendar-day.range-start,
      .calendar-day.range-end, .app-combobox-option[aria-selected="true"],
      .app-combobox-option.is-selected, .unified-period-presets button.active),
    :host([data-theme="dark"]) :is(.calendar-day.in-range, .calendar-day.range-start,
      .calendar-day.range-end, .app-combobox-option[aria-selected="true"], .app-combobox-option.is-selected, .unified-period-presets button.active) {
      background: var(--ui-selected) !important;
      color: var(--theme-accent) !important;
    }

    :root[data-theme="dark"] :is(small, label > span, .field-label, .sub, .hint, .form-hint, .field-help,
      .dashboard-period-label, .dashboard-period-change, .dashboard-trend-reference,
      .dashboard-trend-percent, .dashboard-currency-unit, .finished-product-summary-units em,
      .invoice-pack-quantity small, .settings-section-head p, .team-directory-head p,
      .ledger-secondary, .closing-note, .sidebar-copyright, .nav-group-title,
      .inventory-card-location, .raw-entry-reference, .delivery-run-toolbar > span),
    :host([data-theme="dark"]) :is(small, label > span, .field-label, .sub, .hint, .form-hint, .field-help,
      .ledger-secondary, .closing-note, .fact > span, .planned-total > span,
      .ledger-total > span, .delivery-summary-item > span) { color: var(--muted) !important; }
    :root[data-theme="dark"] :is(a, #addItemBtn, .delivery-invoice-link, .planned-total strong),
    :host([data-theme="dark"]) :is(a, .planned-total strong) { color: var(--theme-accent) !important; }

    :root[data-theme="dark"] :is(.status-good, .badge.complete, .finished-product-remaining:not(.negative)),
    :host([data-theme="dark"]) :is(.status-good, .badge.complete) { color: var(--theme-positive) !important; }
    :root[data-theme="dark"] :is(.status-good, .badge.complete),
    :host([data-theme="dark"]) :is(.status-good, .badge.complete) { background: var(--theme-positive-bg) !important; }
    :root[data-theme="dark"] :is(.negative, .status-bad, .danger, .delete-action-button, .plastic-cancel-order),
    :host([data-theme="dark"]) :is(.negative, .status-bad, .danger, .delete-action-button, .plastic-cancel-order) { color: var(--theme-negative) !important; }
    :root[data-theme="dark"] :is(.danger, .status-bad),
    :host([data-theme="dark"]) :is(.danger, .status-bad) { background: var(--theme-negative-bg) !important; }
    :root[data-theme="dark"] .status-warn,
    :host([data-theme="dark"]) .status-warn { color: var(--theme-warning) !important; background: var(--theme-warning-bg) !important; }

    :root[data-theme="dark"] :where(.dashboard-metric, .report-metric, .finance-metric,
      .finished-product-summary-card, .finance-position-total,
      .finance-breakdown-grid section, .finance-report-metrics section) > span:not(.dashboard-period-label),
    :host([data-theme="dark"]) .metrics > div > span {
      color: var(--muted) !important;
      background: var(--theme-raised) !important;
    }
    :root[data-theme="dark"] :is(.accent-blue, .qty, .produced) > span:not(.dashboard-period-label) { color: var(--theme-accent) !important; background: var(--theme-accent-bg) !important; }
    :root[data-theme="dark"] :is(.accent-green, .delivered, .collected, .paid) > span:not(.dashboard-period-label) { color: var(--theme-positive) !important; background: var(--theme-positive-bg) !important; }
    :root[data-theme="dark"] :is(.accent-amber, .accent-orange, .pending, .payable) > span:not(.dashboard-period-label) { color: var(--theme-warning) !important; background: var(--theme-warning-bg) !important; }

    :root[data-theme="dark"] .inventory-card.active,
    :host([data-theme="dark"]) .inventory-card.active { border-color: var(--theme-accent) !important; box-shadow: inset 0 0 0 1px var(--theme-accent) !important; }
    :root[data-theme="dark"] .inventory-card-location,
    :host([data-theme="dark"]) .inventory-card-location { background: var(--theme-raised) !important; color: var(--muted) !important; }
    :root[data-theme="dark"] .app-decision-overlay { background: #0009 !important; }
    :root[data-theme="dark"] .app-decision-symbol { background: var(--ui-hover) !important; color: var(--ink) !important; }
    :root[data-theme="dark"] .app-decision-dialog[data-tone="danger"] .app-decision-symbol {
      background: var(--theme-negative-bg) !important;
      color: var(--theme-negative) !important;
    }
    :root[data-theme="dark"] .app-decision-dialog p { color: var(--muted) !important; }
    :root[data-theme="dark"] :is(.primary.danger, .primary.danger:hover),
    :host([data-theme="dark"]) :is(.primary.danger, .primary.danger:hover) {
      background: var(--theme-negative-bg) !important;
      color: var(--theme-negative) !important;
      border-color: #95615d !important;
    }
    :root[data-theme="dark"] :is(.auth-gate-status, .team-directory-message, .secure-lock-status)[data-tone="error"] { color: var(--theme-negative) !important; }
    :root[data-theme="dark"] .toast {
      background: var(--theme-raised) !important;
      color: var(--ink) !important;
      border: 1px solid var(--ui-line-strong);
    }
    :root[data-theme="dark"] .trend-axis-label { fill: var(--muted) !important; }
    :root[data-theme="dark"] .trend-grid-line { stroke: var(--line) !important; }

    /* Paper is an intentionally light island, including screen-captured PDFs. */
    :root[data-theme="dark"] :is(.invoice-print-surface, .invoice-sheet, .invoice-pdf-document) {
      color-scheme: light !important;
      --ink: #1d1d1f !important;
      --muted: #62626b !important;
      --line: #d2d2d7 !important;
      --theme-surface: #fff !important;
      --theme-header: #f5f5f6 !important;
      --theme-field: #fff !important;
      --theme-field-border: #a1a1aa !important;
      --theme-accent: #005bb5 !important;
      --ui-table-hover: #f1f1f2 !important;
      color: var(--ink) !important;
      background: #fff !important;
    }
    :root[data-theme="dark"] .invoice-sheet :is(input, select, textarea) { color-scheme: light !important; }
  }
}

@media (forced-colors: active) {
  .settings-theme-track { border: 1px solid ButtonText; background: ButtonFace; }
  .settings-theme-track > span { background: ButtonText; }
  .settings-theme-switch[aria-checked="true"] .settings-theme-track { background: Highlight; }
}