/* Global, opt-in appearance. Screen only: documents/printouts retain original colors.
   Theme colors never alter images, charts, status legends, or checkbox structure. */
.nav-user-menu__panel .application-theme-toggle {
  display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 7px;
  background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer;
}
.nav-user-menu__panel .application-theme-toggle:hover { background: var(--bg); }
.application-theme-options { display: flex; gap: 4px; padding: 6px; }
.application-theme-choice { flex: 1; border: 1px solid var(--line); border-radius: 6px; padding: 7px; background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.application-theme-choice[aria-pressed="true"] { background: #2563a6; border-color: #2563a6; color: #fff; }
@media screen {
  html[data-xorbit-theme="light"] { color-scheme: light; }
  html[data-xorbit-theme="dark"] { color-scheme: dark; background: #0b1420; }
  html[data-xorbit-theme="dark"] body {
    /* The dark palette is owned here. Legacy page tokens bridge to these semantic
       values while templates are progressively migrated away from literal colors. */
    --theme-page: #0b1420; --theme-surface: #142232; --theme-text: #fff;
    --theme-soft-text: #e4edf6; --theme-muted: #a6b7c9; --theme-line: #33465c; --theme-sidebar: #0b192b;
    --theme-raised: #1b2d41; --theme-hover: #243c55; --theme-link: #8fc8ff;
    --theme-control-off: #52667e; --theme-control-border: #6d8299;
    --bg: var(--theme-page) !important; --panel: var(--theme-surface) !important; --ink: var(--theme-text) !important;
    --muted: var(--theme-text) !important; --secondary: var(--theme-text) !important;
    --header: var(--theme-text) !important; --line: var(--theme-line) !important;
    --sidebar: var(--theme-sidebar) !important;
    --cti-page: var(--theme-page); --cti-surface: var(--theme-surface); --cti-surface-soft: var(--theme-raised);
    --cti-text: var(--theme-soft-text); --cti-muted: var(--theme-muted); --cti-line: var(--theme-line);
    --cti-shadow: 0 12px 32px #0003;
    background: var(--bg) !important; color: var(--ink) !important;
  }
  html[data-xorbit-theme="dark"] body :is(.page, .app-content-main, .module-main, .hrm-page) {
    color: var(--ink) !important;
  }
  /* Existing modules use both shared classes and prefixed versions of these surfaces. */
  html[data-xorbit-theme="dark"] body :is(
    .card, .panel, .modal-content, .modal-dialog, .master-modal-card,
    .favorite-pane, .module-side-panel, .module-sidebar, .hrm-subnav, .hrm-context-nav,
    .nav-user-menu__panel, .nav-dropdown-menu, .support-chat-panel, .support-chat-messages,
    .freight-zone, .freight-kpi, .freight-list, .freight-card-head,
    [class$="-card"], [class$="-panel"], [class$="-surface"], [class$="-dialog"],
    .pl-summary, .pl-toolbar, .pl-grid-head, .pl-name-head, .pl-time-head, .pl-row-name,
    .pl-gantt, .pl-gantt-row, .pl-chart-tools, .pl-chart-shell, .pl-presentation,
    .pw-drawer, .pw-metrics > div, .pw-board, .pw-lane,
    .po-kpi, .po-section, .po-chart, .po-milestone, .po-timeline-item, .po-workspaces,
    .metric-strip, .people-spaces, .birthday-row
  ):not([data-theme-preserve], [data-theme-preserve] *) {
    background: var(--panel) !important; color: var(--ink) !important;
    border-color: var(--line) !important;
  }
  /* Global surface convention. Match complete class tokens by their semantic
     suffix so custom module cards do not remain white in night mode. */
  html[data-xorbit-theme="dark"] body .page > :not(.nav) :is(
    [class$="-hero"], [class*="-hero "],
    [class$="-panel"], [class*="-panel "],
    [class$="-card"], [class*="-card "],
    [class$="-kpi"], [class*="-kpi "],
    [class$="-tile"], [class*="-tile "],
    [class$="-widget"], [class*="-widget "],
    [class$="-zone"], [class*="-zone "],
    [class$="-column"], [class*="-column "],
    [class$="-register"], [class*="-register "],
    [class$="-box"], [class*="-box "],
    [class$="-item"], [class*="-item "],
    [class$="-row"], [class*="-row "],
    [class$="-empty"], [class*="-empty "], .empty-state,
    [class$="-summary"], [class*="-summary "],
    [class$="-details"], [class*="-details "],
    [class$="-content"], [class*="-content "],
    [class$="-toggle"], [class*="-toggle "],
    [class$="-stat"], [class*="-stat "],
    [class$="-picker"], [class*="-picker "],
    [class$="-options"], [class*="-options "],
    [class$="-body"], [class*="-body "],
    [class$="-node"], [class*="-node "],
    nav[class$="-nav"], nav[class*="-nav "],
    [class$="__hero"], [class*="__hero "],
    [class$="__panel"], [class*="__panel "],
    [class$="__card"], [class*="__card "],
    [class$="__kpi"], [class*="__kpi "],
    [class$="__metric"], [class*="__metric "],
    [class$="__tile"], [class*="__tile "],
    [class$="__widget"], [class*="__widget "],
    [class$="__zone"], [class*="__zone "],
    [class$="__column"], [class*="__column "],
    [class$="__inbox"], [class*="__inbox "],
    [class$="__empty"], [class*="__empty "],
    [class$="__summary"], [class*="__summary "],
    [class$="__details"], [class*="__details "],
    [class$="__content"], [class*="__content "],
    [style*="background: #fff"], [style*="background:#fff"],
    [style*="background-color: #fff"], [style*="background-color:#fff"],
    [style*="background: #f8fafc"], [style*="background:#f8fafc"],
    [style*="background-color: #f8fafc"], [style*="background-color:#f8fafc"],
    details
  ):not([data-theme-preserve], [data-theme-preserve] *) {
    background-color: var(--panel) !important;
    background-image: none !important;
    color: var(--theme-text) !important;
    border-color: var(--line) !important;
  }
  html[data-xorbit-theme="dark"] body .page > :not(.nav) :is(
    [class$="-head"], [class*="-head "],
    [class$="-header"], [class*="-header "],
    [class$="-toolbar"], [class*="-toolbar "],
    [class$="-filters"], [class*="-filters "],
    [class$="-tabs"], [class*="-tabs "],
    .kanban-cards
  ):not([data-theme-preserve], [data-theme-preserve] *) {
    background-color: var(--theme-raised) !important;
    background-image: none !important;
    color: var(--theme-text) !important;
    border-color: var(--line) !important;
  }
  html[data-xorbit-theme="dark"] body .page > :not(.nav) :where(
    h1, h2, h3, h4, h5, h6, p, label, legend, dt, dd, li, small, strong,
    a:not(.btn, [class*="button"]),
    span:not([class*="badge"]):not([class*="chip"]):not([class*="pill"]):not([class*="status"]):not([class*="tag"])
  ):not([data-theme-preserve], [data-theme-preserve] *) {
    color: var(--theme-text) !important;
  }
  /* Older pages use one-off names for plain text. Keep semantic labels intact. */
  html[data-xorbit-theme="dark"] body .page > :not(.nav) :where(*):not(
    [data-theme-preserve], [data-theme-preserve] *,
    [class*="badge"], [class*="badge"] *,
    [class*="chip"], [class*="chip"] *,
    [class*="pill"], [class*="pill"] *,
    [class*="status"], [class*="status"] *,
    [class*="tag"], [class*="tag"] *
  ) { color: var(--theme-text) !important; }
  /* Plain/secondary controls use raised night surfaces. Primary and semantic
     actions retain their module-specific colors. */
  html[data-xorbit-theme="dark"] body .page > :not(.nav) :is(
    button:not(.btn, .button, .primary, .danger, .warn, .warning, .success, [class*="primary"], [class*="save"], [class*="submit"], [class*="approve"], [class*="reject"]),
    .button-secondary, .button-link, .tab-link:not(.active),
    [class$="-secondary"], [class*="-secondary "],
    [class$="-ghost"], [class*="-ghost "],
    [class$="-reset"], [class*="-reset "],
    [class$="-filter"], [class*="-filter "],
    [class$="-tabs"] a:not(.active), [class*="-tabs "] a:not(.active),
    [class$="-nav"] a:not(.active), [class*="-nav "] a:not(.active),
    .pagination a, .pager a
  ):not([data-theme-preserve], [data-theme-preserve] *) {
    background: var(--theme-raised) !important;
    color: var(--theme-text) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
  }
  html[data-xorbit-theme="dark"] body .page > :not(.nav) :is(
    button, .button-secondary, .button-link, .tab-link,
    [class$="-secondary"], [class*="-secondary "],
    [class$="-ghost"], [class*="-ghost "],
    [class$="-reset"], [class*="-reset "],
    [class$="-filter"], [class*="-filter "],
    [class$="-tabs"] a, [class*="-tabs "] a,
    [class$="-nav"] a, [class*="-nav "] a,
    .pagination a, .pager a
  ):not([data-theme-preserve], [data-theme-preserve] *):hover:not(:disabled) {
    background-color: var(--theme-hover) !important;
  }
  html[data-xorbit-theme="dark"] body .page > :not(.nav) details > summary { color: var(--theme-text) !important; }
  html[data-xorbit-theme="dark"] body .nav-dropdown-menu a {
    background: var(--theme-raised) !important;
    color: var(--theme-text) !important;
    border-color: var(--line) !important;
  }
  html[data-xorbit-theme="dark"] body .nav-dropdown-menu a:hover { background: var(--theme-hover) !important; }
  html[data-xorbit-theme="dark"] body .nav-user-menu__panel > a {
    background: var(--theme-raised) !important;
    color: var(--theme-text) !important;
    border-color: var(--line) !important;
  }
  html[data-xorbit-theme="dark"] body .nav-user-menu__panel > a:hover { background: var(--theme-hover) !important; }

  /* Legacy Freight manager, Kanban and reporting pages use BEM containers and
     light chart gradients which are not expressible through the shared tokens. */
  html[data-xorbit-theme="dark"] body .page > :not(.nav) :is(
    .pm-compact__hero, .pm-compact__action, .pm-compact__inbox,
    .pm-summary__field, .pm-inbox__item
  ) {
    background: var(--panel) !important;
    color: var(--theme-text) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
  }
  html[data-xorbit-theme="dark"] body .page > :not(.nav) :is(
    .pm-compact__head, .kanban-column-head
  ) {
    background: var(--theme-raised) !important;
    color: var(--theme-text) !important;
    border-color: var(--line) !important;
  }
  html[data-xorbit-theme="dark"] body .page > :not(.nav) .pm-inbox__item:is(:hover, .is-active) {
    background: var(--theme-hover) !important;
  }
  html[data-xorbit-theme="dark"] body .page > :not(.nav) .tracker-chart {
    background:
      linear-gradient(to top, rgba(143, 200, 255, .12) 1px, transparent 1px) 0 0 / 100% 25%,
      var(--panel) !important;
    color: var(--theme-text) !important;
    border-color: var(--line) !important;
  }
  html[data-xorbit-theme="dark"] body .page > :not(.nav) :is(.area-summary-card, .area-chart-frame) {
    background: var(--panel) !important;
    color: var(--theme-text) !important;
    border-color: var(--line) !important;
  }

  /* HR dashboards contain compact metric/date surfaces and a striped chart
     background that otherwise remain light even when their parent panel is dark. */
  html[data-xorbit-theme="dark"] body .hr-dashboard :is(
    .hr-date-pill, .hr-metric, .hrm-avatar, .hr-hire-item em
  ) {
    background: var(--theme-raised) !important;
    color: var(--theme-text) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
  }
  html[data-xorbit-theme="dark"] body .hr-dashboard .hr-status-strip {
    background: repeating-linear-gradient(
      90deg,
      var(--panel) 0 4px,
      var(--theme-raised) 4px 10px
    ) !important;
  }
  html[data-xorbit-theme="dark"] body .page > :not(.nav) :is(
    .hr-assignment-search, .org-dept-employee
  ) {
    background: var(--theme-raised) !important;
    background-image: none !important;
    color: var(--theme-text) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
  }

  /* HR organization, employee-experience and recruitment pages use several
     diagram/toggle/status primitives without reusable surface class suffixes. */
  html[data-xorbit-theme="dark"] body .hrm-page .org-tree {
    background-color: var(--panel) !important;
    background-image: radial-gradient(var(--line) .7px, transparent .7px) !important;
    border-color: var(--line) !important;
  }
  html[data-xorbit-theme="dark"] body .hrm-page :is(
    .org-shell-kicker, .org-node-meta span, .org-department-count,
    .org-department-employees, .org-department-empty, .hrm-avatar
  ) {
    background-color: var(--theme-raised) !important;
    background-image: none !important;
    color: var(--theme-text) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
  }
  html[data-xorbit-theme="dark"] body .hrm-page :is(
    .experience-field.checkbox, .experience-panel-icon, .experience-mini-action
  ) {
    background: var(--theme-raised) !important;
    color: var(--theme-text) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
  }
  html[data-xorbit-theme="dark"] body .hrm-page .experience-field input[type="checkbox"] {
    background: var(--theme-control-off) !important;
    border-color: var(--theme-control-border) !important;
  }
  html[data-xorbit-theme="dark"] body .hrm-page .experience-field input[type="checkbox"]:checked {
    background: #f58220 !important;
    border-color: #f58220 !important;
  }
  html[data-xorbit-theme="dark"] body .hrm-page .course-toggle input[type="checkbox"] {
    background: var(--theme-control-off) !important;
    border-color: var(--theme-control-border) !important;
  }
  html[data-xorbit-theme="dark"] body .hrm-page .course-toggle input[type="checkbox"]:checked {
    background: #f58220 !important;
    border-color: #f58220 !important;
  }
  html[data-xorbit-theme="dark"] body .hrm-page :is(
    .hr-period-pill, .hr-report-list, .hr-stage-pill.is-empty, .hr-kpi-icon
  ) {
    background: var(--theme-raised) !important;
    color: var(--theme-text) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
  }
  html[data-xorbit-theme="dark"] body .hrm-page .hr-gauge > span:not(.is-active) {
    background: var(--theme-control-off) !important;
  }
  html[data-xorbit-theme="dark"] body :is(
    [class$="-panel-head"], [class$="-card-head"], .master-modal-head, .master-modal-foot,
    .filter-bar, .filters, .toolbar, .pw-toolbar, .pw-viewbar, .pw-pagination,
    .pl-gantt-row.node, .pl-segment, .pl-chart-tools, .pm-row, .po-tabbar, .metric--message
  ) { background: var(--theme-raised) !important; color: var(--ink) !important; border-color: var(--line) !important; }
  html[data-xorbit-theme="dark"] body :is(h1, h2, h3, h4, h5, h6) { color: var(--ink) !important; }
  html[data-xorbit-theme="dark"] body :is(
    .card, .panel, .freight-kpi, .pm-card, .pm-row, .po-kpi, .pw-card,
    .metric, .people-card, .spotlight-card
  ) :is(strong, label) { color: var(--ink) !important; }
  html[data-xorbit-theme="dark"] body :is(
    .text-muted, .muted, .helptext, .form-help, .hint, .po-subtitle, .pw-package,
    .pw-card-top, .pw-card-bottom, .pw-progress, .pw-empty, .pl-crumb, .pw-breadcrumb,
    .pl-row-percent, .pl-toolbar-end, .module-side-panel__hint, .module-side-panel__label,
    .module-side-panel__eyebrow
  ) { color: var(--muted) !important; }
  /* Keep button, range, color, checkbox and radio appearances/statuses intact. */
  html[data-xorbit-theme="dark"] body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
    select:not(.pw-status), textarea
  ) {
    background-color: var(--panel) !important; color: var(--ink) !important;
    border-color: var(--line) !important; color-scheme: dark;
  }
  html[data-xorbit-theme="dark"] body :is(input, textarea)::placeholder { color: #96aac0 !important; opacity: 1; }
  html[data-xorbit-theme="dark"] body :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--theme-link) !important; outline-offset: 2px;
  }
  html[data-xorbit-theme="dark"] body :is(input, select, textarea):disabled { opacity: .65; }
  html[data-xorbit-theme="dark"] body table { background: var(--panel) !important; color: var(--ink) !important; border-color: var(--line) !important; }
  html[data-xorbit-theme="dark"] body :is(th, td) { border-color: var(--line) !important; }
  html[data-xorbit-theme="dark"] body th { background: var(--theme-raised) !important; color: #cfdeed !important; }
  html[data-xorbit-theme="dark"] body tbody tr { background: var(--panel) !important; color: var(--ink) !important; }
  html[data-xorbit-theme="dark"] body tbody tr:nth-child(even) { background: #17283a !important; }
  html[data-xorbit-theme="dark"] body tbody tr:hover { background: var(--theme-hover) !important; }
  html[data-xorbit-theme="dark"] body td { background-color: inherit !important; color: inherit !important; }
  html[data-xorbit-theme="dark"] body :is(td a:not(.btn, [class*="badge"]), .pw-task-title, .pl-node-button, .pl-task-button) { color: var(--theme-link) !important; }
  html[data-xorbit-theme="dark"] body :is(
    .btn-secondary, .btn-ghost, .btn-light, .btn-ghost-hrm,
    .pm-btn:not(.primary, .warn, .danger), .pw-button:not(.primary),
    .pl-btn:not(.primary), .po-button:not(.primary, .hero-primary, .hero-secondary),
    .pl-segment button, .hrm-context-nav a:not(.active), .module-side-link:not(.is-active)
  ) { background: var(--theme-raised) !important; color: var(--ink) !important; border-color: var(--line) !important; }
  html[data-xorbit-theme="dark"] body :is(.pl-segment button[aria-pressed="true"], .pw-viewbar nav button[aria-pressed="true"]) {
    background: var(--theme-hover) !important; color: #a5f3e5 !important;
  }
  /* React project boards, overview and full-screen Gantt share these tokens too.
     Bar fills, critical-path colors, milestones and status badges stay untouched. */
  html[data-xorbit-theme="dark"] body :is(.pw-app, .pw-drawer, .pl-app, .pl-dialog, .po-app, .po-dialog) {
    --pw-ink: var(--theme-soft-text); --pw-muted: var(--theme-muted); --pw-line: var(--theme-line);
    --pl-ink: var(--theme-soft-text); --pl-muted: var(--theme-muted); --pl-line: var(--theme-line);
    --po-ink: var(--theme-soft-text); --po-muted: var(--theme-muted); --po-line: var(--theme-line);
    color: var(--ink) !important; color-scheme: dark;
  }
  html[data-xorbit-theme="dark"] body .pl-gantt-row:hover { background: var(--theme-hover) !important; }
  html[data-xorbit-theme="dark"] body :is(.pl-grid-head, .pl-name-head, .pl-time-head) { color: var(--muted) !important; }
  html[data-xorbit-theme="dark"] body :is(.pl-tick, .pl-time-cell) { border-color: var(--line) !important; }
  /* Ant Design is also switched through ConfigProvider, including portalled menus. */
  html[data-xorbit-theme="dark"] body :is(.ant-card, .ant-modal-content, .ant-drawer-content) {
    background: var(--panel) !important; border-color: var(--line) !important;
  }
  html[data-xorbit-theme="dark"] body .cti-hub {
    --hub-line: var(--theme-line); --hub-muted: var(--theme-muted); --hub-ink: var(--theme-soft-text); --hub-bg: var(--theme-page);
    background: var(--bg); color: var(--ink);
  }
  html[data-xorbit-theme="dark"] body .cti-hub :is(.metric strong, .area-card__content strong, .person-row strong) { color: var(--ink) !important; }
  html[data-xorbit-theme="dark"] body .cti-hub .spotlight-card .ant-card-body > p { color: var(--muted) !important; }
  html[data-xorbit-theme="dark"] body .pl-presentation::backdrop { background: var(--bg); }
  /* Vertical: Freight. Inquiry wizard surfaces are not shared .card/.panel elements.
     Scope these overrides to the form, including sections revealed later in the wizard. */
  html[data-xorbit-theme="dark"] body .freight-form-page {
    --ink: var(--theme-text); --muted: var(--theme-text); --secondary: var(--theme-text);
    color: var(--theme-text) !important;
  }
  html[data-xorbit-theme="dark"] body .freight-form-page :is(
    .form-section, .inquiry-form-tabs, .multi-select-dropdown > summary,
    .checklist-options, .boolean-switch, .field-add-link,
    .mode-picker label, .choice-switch label, .inquiry-form-tab
  ) {
    background: var(--panel) !important; color: var(--theme-text) !important;
    border-color: var(--line) !important; box-shadow: none !important;
  }
  html[data-xorbit-theme="dark"] body .freight-form-page :is(
    label, .form-label, .selection-summary, .form-errors, .inquiry-field-warning,
    .incoterm-warning, .hero p
  ) { color: var(--theme-text) !important; }
  html[data-xorbit-theme="dark"] body .freight-form-page :is(input, textarea)::placeholder {
    color: var(--theme-text) !important;
  }
  html[data-xorbit-theme="dark"] body .freight-form-page :is(
    .inquiry-form-tab.is-active, .mode-picker label:has(input:checked),
    .choice-switch label:has(input:checked)
  ) { background: #254d70 !important; border-color: var(--theme-link) !important; }
  html[data-xorbit-theme="dark"] body .freight-form-page .inquiry-form-tab.is-complete:not(.is-active) {
    background: #16463d !important; border-color: #58bfa8 !important;
  }
  html[data-xorbit-theme="dark"] body .freight-form-page :is(
    input:disabled, select:disabled, textarea:disabled, button:disabled,
    .mode-picker label:has(input:disabled), .boolean-switch:has(input:disabled)
  ) {
    background: var(--theme-raised) !important; color: var(--theme-text) !important;
    border-color: var(--line) !important; border-style: dashed;
    opacity: 1 !important; cursor: not-allowed; box-shadow: none !important;
  }
  html[data-xorbit-theme="dark"] body .freight-form-page .equipment-inline-field.is-disabled { opacity: 1; }
  html[data-xorbit-theme="dark"] body .freight-form-page .boolean-switch-track { background: var(--theme-control-off); }
  html[data-xorbit-theme="dark"] body .freight-form-page .boolean-switch input:checked + .boolean-switch-track { background: #287a68; }
  html[data-xorbit-theme="dark"] body .freight-form-page .form-group.is-missing {
    background: #44252e; border-color: #ff9aab;
  }
  html[data-xorbit-theme="dark"] body .freight-form-page .incoterm-warning {
    background: #44341d; border-color: #f5bf66;
  }
  html[data-xorbit-theme="dark"] body .freight-form-page :is(
    .inquiry-form-tab, .field-add-link, .multi-select-dropdown > summary
  ):focus-visible,
  html[data-xorbit-theme="dark"] body .freight-form-page :is(.mode-picker label, .choice-switch label, .boolean-switch):has(input:focus-visible) {
    outline: 2px solid var(--theme-link) !important; outline-offset: 2px;
  }
  /* Product images, logos, signature canvases and semantic chart SVGs are not filtered. */
}