/* TOUR-OPS — Dark appearance surface coherence (2026-08-30)
   Scoped to html[data-appearance="dark"] (+ system via prefers-color-scheme).
   Does not alter Light appearance base rules.
*/

html[data-appearance="dark"] body {
  background: var(--page-bg);
  color: var(--text-primary);
}

/* ——— Shell ——— */
html[data-appearance="dark"] .topbar,
html[data-appearance="dark"] .context-bar {
  background: var(--header-bg);
  border-color: var(--border);
  color: var(--text-primary);
}

html[data-appearance="dark"] .workspace {
  background: var(--page-bg);
  color: var(--text-primary);
}

html[data-appearance="dark"] .app-sidebar {
  background: var(--sidebar-bg);
}

/* ——— Buttons / inputs ——— */
html[data-appearance="dark"] .btn {
  background: var(--surface-raised);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
html[data-appearance="dark"] .btn:hover {
  background: var(--surface-hover);
}
html[data-appearance="dark"] .btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
html[data-appearance="dark"] .btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
}
html[data-appearance="dark"] .btn-ghost:hover {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-appearance="dark"] .btn:disabled,
html[data-appearance="dark"] .btn[disabled],
html[data-appearance="dark"] .control:disabled,
html[data-appearance="dark"] select:disabled,
html[data-appearance="dark"] input:disabled,
html[data-appearance="dark"] textarea:disabled {
  color: var(--text-disabled);
  opacity: 0.72;
  background: var(--surface-sunken);
}

html[data-appearance="dark"] .control,
html[data-appearance="dark"] input.control,
html[data-appearance="dark"] select.control,
html[data-appearance="dark"] textarea.control,
html[data-appearance="dark"] .field input,
html[data-appearance="dark"] .field select,
html[data-appearance="dark"] .field textarea,
html[data-appearance="dark"] input[type="text"],
html[data-appearance="dark"] input[type="search"],
html[data-appearance="dark"] input[type="number"],
html[data-appearance="dark"] input[type="date"],
html[data-appearance="dark"] input[type="email"],
html[data-appearance="dark"] input[type="tel"],
html[data-appearance="dark"] select,
html[data-appearance="dark"] textarea {
  background: var(--surface-input);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
html[data-appearance="dark"] .control::placeholder,
html[data-appearance="dark"] input::placeholder,
html[data-appearance="dark"] textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
html[data-appearance="dark"] .control:focus,
html[data-appearance="dark"] input:focus,
html[data-appearance="dark"] select:focus,
html[data-appearance="dark"] textarea:focus {
  border-color: var(--focus-ring);
  outline-color: var(--focus-ring);
}
html[data-appearance="dark"] .control.is-invalid,
html[data-appearance="dark"] .field input.is-invalid {
  background: var(--danger-bg);
  border-color: var(--danger);
}

/* ——— Cards / panels ——— */
html[data-appearance="dark"] .card,
html[data-appearance="dark"] .panel,
html[data-appearance="dark"] .filter-panel,
html[data-appearance="dark"] .ops-panel,
html[data-appearance="dark"] .section-card,
html[data-appearance="dark"] .home-card,
html[data-appearance="dark"] .home-side,
html[data-appearance="dark"] .home-recent,
html[data-appearance="dark"] .msetup-card,
html[data-appearance="dark"] .md-card,
html[data-appearance="dark"] .split-pane,
html[data-appearance="dark"] .drawer,
html[data-appearance="dark"] .modal,
html[data-appearance="dark"] .confirm-dialog,
html[data-appearance="dark"] .combo-panel,
html[data-appearance="dark"] .pick-list,
html[data-appearance="dark"] .proto-sheet,
html[data-appearance="dark"] .topbar-popover,
html[data-appearance="dark"] .topbar-ops-ctx {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-primary);
}

html[data-appearance="dark"] .modal-hd,
html[data-appearance="dark"] .confirm-dialog .modal-hd,
html[data-appearance="dark"] .drawer-hd,
html[data-appearance="dark"] .proto-sheet-hd,
html[data-appearance="dark"] .combo-hd,
html[data-appearance="dark"] .modal-ft,
html[data-appearance="dark"] .drawer-ft,
html[data-appearance="dark"] .topbar-popover-hd {
  background: var(--surface-raised);
  border-color: var(--border);
  color: var(--text-primary);
}

html[data-appearance="dark"] .muted,
html[data-appearance="dark"] .hint,
html[data-appearance="dark"] .lbl {
  color: var(--text-secondary);
}

/* ——— Tables ——— */
html[data-appearance="dark"] .table-wrap,
html[data-appearance="dark"] table.data,
html[data-appearance="dark"] .ops-table-wrap,
html[data-appearance="dark"] .xfer-table,
html[data-appearance="dark"] .tour-table,
html[data-appearance="dark"] .jo-table,
html[data-appearance="dark"] .booking-table,
html[data-appearance="dark"] .data-table {
  background: var(--surface-table);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-appearance="dark"] table.data thead th,
html[data-appearance="dark"] table.data th,
html[data-appearance="dark"] .xfer-table th,
html[data-appearance="dark"] .tour-table th,
html[data-appearance="dark"] .jo-table th,
html[data-appearance="dark"] .booking-table th,
html[data-appearance="dark"] .data-table th {
  background: var(--surface-table-header);
  color: var(--text-secondary);
  border-color: var(--border);
}
html[data-appearance="dark"] table.data td {
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-appearance="dark"] table.data tbody tr:hover,
html[data-appearance="dark"] .list-item:hover,
html[data-appearance="dark"] .home-side-item:hover,
html[data-appearance="dark"] .home-recent-table tbody tr:hover,
html[data-appearance="dark"] .tab:hover,
html[data-appearance="dark"] .pick-item:hover,
html[data-appearance="dark"] .topbar-popover-item:hover,
html[data-appearance="dark"] .topbar-popover-item:focus-visible {
  background: var(--surface-hover);
}
html[data-appearance="dark"] .tab {
  color: var(--text-secondary);
}
html[data-appearance="dark"] .tab.active {
  color: var(--text-primary);
}
html[data-appearance="dark"] .topbar-popover-item.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}

/* ——— Ops bars / segments ——— */
html[data-appearance="dark"] .ops-bar,
html[data-appearance="dark"] .toolbar,
html[data-appearance="dark"] .actionbar,
html[data-appearance="dark"] .filter-bar {
  background: var(--surface-raised);
  border-color: var(--border);
}
html[data-appearance="dark"] .ops-bar .seg button,
html[data-appearance="dark"] .seg button {
  background: var(--surface);
  color: var(--text-secondary);
  border-color: var(--border);
}
html[data-appearance="dark"] .ops-bar .seg button.active,
html[data-appearance="dark"] .seg button.active {
  background: var(--primary);
  color: #fff;
}

/* ——— Combobox / pickers ——— */
html[data-appearance="dark"] .combo-dropdown,
html[data-appearance="dark"] .pick-item,
html[data-appearance="dark"] .ui-combo-list {
  background: var(--surface-popover);
  border-color: var(--border);
  color: var(--text-primary);
}

html[data-appearance="dark"] .chip-env {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: var(--legacy-utility-border);
}

html[data-appearance="dark"] .skeleton,
html[data-appearance="dark"] .proto-list-state,
html[data-appearance="dark"] .empty-state {
  background: var(--surface-sunken);
  border-color: var(--border);
  color: var(--text-muted);
}

html[data-appearance="dark"] .topbar-settings-group select,
html[data-appearance="dark"] .topbar-settings-group .viewport-switch {
  background: var(--surface-input);
  border-color: var(--border);
  color: var(--text-primary);
}

/* Teal ops headers stay recognizable */
html[data-appearance="dark"] .ops-hd,
html[data-appearance="dark"] .section-hd.ops-hd,
html[data-appearance="dark"] .tour-ops-hd,
html[data-appearance="dark"] .legacy-teal-hd {
  background: var(--ops-hd-bg);
  color: var(--ops-hd-fg);
}

/* Module panels often hardcode #fff — remap common surfaces */
html[data-appearance="dark"] .workspace .card,
html[data-appearance="dark"] .workspace .panel,
html[data-appearance="dark"] .workspace .table-wrap,
html[data-appearance="dark"] .workspace .home-card,
html[data-appearance="dark"] .workspace .home-side-item,
html[data-appearance="dark"] .workspace .list-item,
html[data-appearance="dark"] .workspace .booking-card,
html[data-appearance="dark"] .workspace .jo-card,
html[data-appearance="dark"] .workspace .md-panel,
html[data-appearance="dark"] .workspace .msetup-panel,
html[data-appearance="dark"] .workspace .filter-card,
html[data-appearance="dark"] .workspace .depfax-panel,
html[data-appearance="dark"] .workspace .xfer-panel,
html[data-appearance="dark"] .workspace .context-pill {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text-primary);
}

/* Force remaps for module CSS that hardcodes #fff (Light unchanged via --surface) */
html[data-appearance="dark"] .legacy-scroll,
html[data-appearance="dark"] .legacy-sel-val,
html[data-appearance="dark"] .md-toolbar,
html[data-appearance="dark"] .md-table-wrap,
html[data-appearance="dark"] .md-form-card,
html[data-appearance="dark"] .md-landing-card,
html[data-appearance="dark"] .md-activity-item,
html[data-appearance="dark"] .md-split-list,
html[data-appearance="dark"] .md-split-detail,
html[data-appearance="dark"] .xfer-filter-card,
html[data-appearance="dark"] .xfer-list-panel,
html[data-appearance="dark"] .hotel-stay-table,
html[data-appearance="dark"] .booking-workspace,
html[data-appearance="dark"] .tb-filter,
html[data-appearance="dark"] .tb-panel,
html[data-appearance="dark"] .tjo-card,
html[data-appearance="dark"] .jo-block,
html[data-appearance="dark"] .modal-hd,
html[data-appearance="dark"] .modal-bd,
html[data-appearance="dark"] .confirm-dialog,
html[data-appearance="dark"] .proto-sheet,
html[data-appearance="dark"] .bottom-nav {
  background-color: var(--surface) !important;
  color: var(--text-primary);
  border-color: var(--border);
}

html[data-appearance="dark"] .md-table tbody tr:hover,
html[data-appearance="dark"] .hotel-stay-table tbody tr:hover,
html[data-appearance="dark"] .legacy-scroll table tbody tr:hover {
  background: var(--surface-hover) !important;
}

html[data-appearance="dark"] .modal-ft,
html[data-appearance="dark"] .legacy-footer {
  background: var(--surface-table-header) !important;
  border-color: var(--border);
  color: var(--text-secondary);
}

html[data-appearance="dark"] .home-summary-card,
html[data-appearance="dark"] .home-qa-tile,
html[data-appearance="dark"] .home-dash-chip,
html[data-appearance="dark"] .home-recent,
html[data-appearance="dark"] .home-side {
  background: var(--surface) !important;
  border-color: var(--border);
  color: var(--text-primary);
}

/* Soften near-white filter / utility strips */
html[data-appearance="dark"] .workspace [class*="filter"],
html[data-appearance="dark"] .workspace [class*="toolbar"],
html[data-appearance="dark"] .workspace [class*="panel"] {
  border-color: var(--border);
}

/* System preference parity */
@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] body {
    background: var(--page-bg);
    color: var(--text-primary);
  }
  html[data-appearance="system"] .topbar,
  html[data-appearance="system"] .context-bar {
    background: var(--header-bg);
    border-color: var(--border);
    color: var(--text-primary);
  }
  html[data-appearance="system"] .workspace {
    background: var(--page-bg);
    color: var(--text-primary);
  }
  html[data-appearance="system"] .btn {
    background: var(--surface-raised);
    border-color: var(--border-strong);
    color: var(--text-primary);
  }
  html[data-appearance="system"] .control,
  html[data-appearance="system"] select,
  html[data-appearance="system"] input[type="text"],
  html[data-appearance="system"] textarea {
    background: var(--surface-input);
    border-color: var(--border-strong);
    color: var(--text-primary);
  }
  html[data-appearance="system"] .table-wrap,
  html[data-appearance="system"] .card,
  html[data-appearance="system"] .panel,
  html[data-appearance="system"] .modal,
  html[data-appearance="system"] .proto-sheet {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-primary);
  }
  html[data-appearance="system"] table.data thead th {
    background: var(--surface-table-header);
  }
  html[data-appearance="system"] table.data tbody tr:hover {
    background: var(--surface-hover);
  }
}