/* ============================================================================
   Compupod dark theme — business and administration workspaces
   ----------------------------------------------------------------------------
   This file deliberately contains no dark palette of its own. The app shell
   owns the dark semantic-token values; these rules only connect legacy and
   feature-specific components to those tokens.

   Dedicated Chat is intentionally excluded.
   ============================================================================ */

/* Shared page foundation --------------------------------------------------- */
body.dashboard-dark-active :is(
  #customers-page,
  #customer-profile-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page,
  #reports-page,
  #metrics-page,
  #team-page,
  #hr-page,
  #settings-page,
  #ebay-page,
  #camera-page,
  #post-sale-ticket-page
) {
  background: var(--surface-2);
  color: var(--content-1);
  color-scheme: dark;
}

body.dashboard-dark-active :is(
  #customers-page,
  #customer-profile-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page,
  #reports-page,
  #metrics-page,
  #team-page,
  #hr-page,
  #settings-page,
  #ebay-page,
  #camera-page,
  #post-sale-ticket-page
) :where(h1, h2, h3, h4, legend) {
  color: var(--content-1);
}

body.dashboard-dark-active :is(
  #customers-page,
  #customer-profile-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page,
  #reports-page,
  #metrics-page,
  #team-page,
  #hr-page,
  #settings-page,
  #ebay-page,
  #camera-page,
  #post-sale-ticket-page
) :where(p, label, small) {
  color: var(--content-2);
}

body.dashboard-dark-active :is(
  #customers-page,
  #customer-profile-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page,
  #reports-page,
  #metrics-page,
  #team-page,
  #hr-page,
  #settings-page,
  #ebay-page,
  #camera-page,
  #post-sale-ticket-page,
  #customer-form-modal,
  .customer-picker-modal,
  .camera-modal
) :where(input, select, textarea) {
  border-color: var(--border-2);
  background-color: var(--field-filled-surface);
  background-image: none;
  color: var(--content-1);
  caret-color: var(--content-1);
}

body.dashboard-dark-active :is(
  #customers-page,
  #customer-profile-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page,
  #reports-page,
  #metrics-page,
  #team-page,
  #hr-page,
  #settings-page,
  #ebay-page,
  #camera-page,
  #post-sale-ticket-page,
  #customer-form-modal,
  .customer-picker-modal,
  .camera-modal
) :where(input, textarea)::placeholder {
  color: var(--content-placeholder-inv);
  opacity: 1;
}

body.dashboard-dark-active :is(
  #customers-page,
  #customer-profile-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page,
  #reports-page,
  #metrics-page,
  #team-page,
  #hr-page,
  #settings-page,
  #ebay-page,
  #camera-page,
  #post-sale-ticket-page,
  #customer-form-modal,
  .customer-picker-modal,
  .camera-modal
) :where(input, select, textarea):focus-visible {
  border-color: var(--cp-accent);
  outline: none;
  box-shadow: var(--focus-ring);
}

body.dashboard-dark-active :is(
  #customers-page,
  #customer-profile-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page,
  #reports-page,
  #metrics-page,
  #team-page,
  #hr-page,
  #settings-page,
  #ebay-page,
  #camera-page,
  #post-sale-ticket-page,
  #customer-form-modal,
  .customer-picker-modal
) :where(.btn-secondary, .btn-outline) {
  border-color: var(--border-2);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active :is(
  #customers-page,
  #customer-profile-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page,
  #reports-page,
  #metrics-page,
  #team-page,
  #hr-page,
  #settings-page,
  #ebay-page,
  #camera-page,
  #post-sale-ticket-page,
  #customer-form-modal,
  .customer-picker-modal
) :where(.btn-secondary, .btn-outline):hover:not(:disabled) {
  border-color: var(--border-2);
  background: var(--surface-hover);
  color: var(--content-1);
}

body.dashboard-dark-active :is(
  #customers-page,
  #customer-profile-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page,
  #reports-page,
  #metrics-page,
  #team-page,
  #hr-page,
  #settings-page,
  #ebay-page,
  #camera-page,
  #post-sale-ticket-page
) :where(table) {
  color: var(--content-1);
}

body.dashboard-dark-active :is(
  #customers-page,
  #customer-profile-page,
  #opportunities-contacts-page,
  #reports-page,
  #metrics-page,
  #team-page,
  #hr-page,
  #settings-page
) :where(th) {
  border-color: var(--border-1);
  background: var(--surface-2);
  color: var(--content-3);
}

body.dashboard-dark-active :is(
  #customers-page,
  #customer-profile-page,
  #opportunities-contacts-page,
  #reports-page,
  #metrics-page,
  #team-page,
  #hr-page,
  #settings-page
) :where(td) {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
}

body.dashboard-dark-active :is(
  #customers-page,
  #customer-profile-page,
  #opportunities-contacts-page,
  #reports-page,
  #metrics-page,
  #team-page,
  #hr-page,
  #settings-page
) :where(tbody tr:hover td) {
  background: var(--surface-hover);
}

/* Customers, customer profile, and customer-owned dialogs ---------------- */
body.dashboard-dark-active #customers-page .customers-shell,
body.dashboard-dark-active #customers-page :where(.inventory-toolbar, .inventory-filters, .devices-toolbar),
body.dashboard-dark-active #customers-page .customers-summary-strip > div,
body.dashboard-dark-active #customers-page :where(.customers-table-wrap, .inventory-section),
body.dashboard-dark-active #customer-profile-page :where(.cprofile-layout, .cprofile-content, .cp-stat, .cp-section, .cp-credit-ledger),
body.dashboard-dark-active #customer-profile-page :where(.cp-note-card, .cp-note-selected-card, .cp-membership-card) {
  border-color: var(--border-1);
  background: var(--surface);
  background-image: none;
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #customers-page .inventory-title-bar,
body.dashboard-dark-active #customer-profile-page .cprofile-header {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #customers-page .devices-pagination-nav button,
body.dashboard-dark-active #customers-page .inventory-page-controls .inventory-page-btn,
body.dashboard-dark-active #opportunities-contacts-page .devices-pagination-nav button,
body.dashboard-dark-active #opportunities-contacts-page .inventory-page-controls .inventory-page-btn {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #customers-page .devices-pagination-nav button:hover:not(:disabled),
body.dashboard-dark-active #customers-page .inventory-page-controls .inventory-page-btn:hover:not(:disabled),
body.dashboard-dark-active #opportunities-contacts-page .devices-pagination-nav button:hover:not(:disabled),
body.dashboard-dark-active #opportunities-contacts-page .inventory-page-controls .inventory-page-btn:hover:not(:disabled) {
  border-color: var(--border-2);
  background: var(--surface-hover);
}

body.dashboard-dark-active #customers-page .devices-pagination-nav button:disabled,
body.dashboard-dark-active #customers-page .inventory-page-controls .inventory-page-btn:disabled,
body.dashboard-dark-active #opportunities-contacts-page .devices-pagination-nav button:disabled,
body.dashboard-dark-active #opportunities-contacts-page .inventory-page-controls .inventory-page-btn:disabled {
  color: var(--content-3);
  opacity: 1;
}

body.dashboard-dark-active #customers-page .inventory-title-bar :where(h2, span),
body.dashboard-dark-active #customer-profile-page :where(.cprofile-heading, .cp-row-value, .cp-table td, .cp-credit-table td) {
  color: var(--content-1);
}

/* The compact customer grids have legacy ID-scoped colors that outrank the
   shared table contract. Keep every data cell legible while preserving the
   blue customer/ticket links as interactive accents. */
body.dashboard-dark-active #customers-page #customers-list-section .customers-table,
body.dashboard-dark-active #customers-page #customer-devices-section .customer-devices-table {
  color: var(--content-1);
}

body.dashboard-dark-active #customers-page #customers-list-section .customers-table th,
body.dashboard-dark-active #customers-page #customer-devices-section .customer-devices-table th {
  border-color: var(--border-1);
  background: var(--surface-2);
  color: var(--content-2);
}

body.dashboard-dark-active #customers-page #customers-list-section .customers-table td,
body.dashboard-dark-active #customers-page #customer-devices-section .customer-devices-table td {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
}

body.dashboard-dark-active #customers-page #customers-list-section .customer-name-btn {
  color: var(--content-1);
}

body.dashboard-dark-active #customers-page #customers-list-section .customers-table tbody tr:hover td,
body.dashboard-dark-active #customers-page #customer-devices-section .customer-devices-table tbody tr:hover td {
  background: var(--surface-hover);
}

body.dashboard-dark-active #customer-profile-page :where(.cprofile-sub, .cprofile-phone, .cp-stat-label, .cp-row-label, .cp-empty, .cp-credit-loading) {
  color: var(--content-3);
}

body.dashboard-dark-active #customers-page .inventory-section-tabs,
body.dashboard-dark-active #customer-profile-page .cprofile-sidebar {
  border-color: var(--border-1);
  background: var(--surface-2);
}

body.dashboard-dark-active #customers-page .inventory-section-tabs :where(button, a),
body.dashboard-dark-active #customer-profile-page .cprofile-tab {
  border-color: transparent;
  background: transparent;
  color: var(--content-2);
  box-shadow: none;
}

body.dashboard-dark-active #customers-page .inventory-section-tabs :where(button, a):hover,
body.dashboard-dark-active #customer-profile-page .cprofile-tab:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

body.dashboard-dark-active #customers-page #customer-devices-section .devices-toolbar-row-filters {
  border-color: var(--border-1);
  background: var(--surface-2);
  color: var(--content-2);
}

body.dashboard-dark-active #customers-page .inventory-section-tabs :where(button, a).active,
body.dashboard-dark-active #customer-profile-page .cprofile-tab-active {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
  box-shadow: none;
}

body.dashboard-dark-active #customers-page :where(.inventory-filter-pill, .devices-date-chip, .devices-extra-chip),
body.dashboard-dark-active #customer-profile-page :where(.cp-credit-badge, .cp-membership-status) {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-2);
}

body.dashboard-dark-active #customers-page :where(
  .devices-add-filter-popover,
  .devices-date-popover,
  .inv-row-menu,
  .customer-menu
),
body.dashboard-dark-active #customer-profile-page .inv-row-menu,
body.dashboard-dark-active .customer-picker-panel,
body.dashboard-dark-active #customer-form-modal .inv-form-panel {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
}

body.dashboard-dark-active #customers-page :where(.devices-add-filter-list li, .devices-date-radio, .inv-row-menu-item),
body.dashboard-dark-active #customer-profile-page .inv-row-menu-item,
body.dashboard-dark-active .customer-picker-item {
  background: transparent;
  color: var(--content-1);
}

body.dashboard-dark-active #customers-page :where(.devices-add-filter-list li, .devices-date-radio, .inv-row-menu-item):hover,
body.dashboard-dark-active #customer-profile-page .inv-row-menu-item:hover,
body.dashboard-dark-active .customer-picker-item:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

body.dashboard-dark-active .customer-picker-header,
body.dashboard-dark-active #customer-form-modal .inv-form-header {
  border-color: var(--border-1);
  background: var(--surface-2);
  color: var(--content-1);
}

body.dashboard-dark-active .customer-picker-title,
body.dashboard-dark-active .customer-picker-item-name,
body.dashboard-dark-active #customer-form-modal .inv-form-title {
  color: var(--content-1);
}

body.dashboard-dark-active .customer-picker-item-sub,
body.dashboard-dark-active .customer-picker-status {
  color: var(--content-3);
}

body.dashboard-dark-active #customer-profile-page .cp-section-title {
  border-bottom-color: var(--border-1);
  color: var(--content-1);
}

body.dashboard-dark-active #customer-profile-page :where(.cp-table th, .cp-credit-table thead th) {
  border-color: var(--border-1);
  background: var(--surface-2);
  color: var(--content-3);
}

body.dashboard-dark-active #customer-profile-page :where(.cp-table td, .cp-credit-table tbody td) {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
}

body.dashboard-dark-active #customer-profile-page :where(.cp-table, .cp-credit-table) tbody tr:hover td {
  background: var(--surface-hover);
}

body.dashboard-dark-active #customer-profile-page .cp-credit-void-btn {
  border-color: var(--border-2);
  background: var(--surface);
  color: var(--content-2);
}

body.dashboard-dark-active #customer-profile-page .cp-credit-void-btn:hover {
  border-color: var(--cp-danger);
  background: color-mix(in srgb, var(--cp-danger) 10%, var(--surface));
  color: var(--cp-danger);
}

/* Opportunities: contacts, quotes, appointments, and call-derived reports */
body.dashboard-dark-active :is(#opportunities-contacts-page, #opportunities-quotes-page, #opportunities-appointments-page) {
  background: var(--surface-2);
}

body.dashboard-dark-active :is(#opportunities-contacts-page, #opportunities-quotes-page, #opportunities-appointments-page) :where(
  .opportunities-title-bar,
  .opportunities-toolbar,
  .opportunities-filters,
  .inventory-section,
  .customers-table-wrap
) {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active :is(#opportunities-contacts-page, #opportunities-quotes-page, #opportunities-appointments-page) .inventory-section-tabs {
  border-color: var(--border-1);
  background: var(--surface-2);
}

body.dashboard-dark-active :is(#opportunities-contacts-page, #opportunities-quotes-page, #opportunities-appointments-page) .inventory-section-tabs :where(a, button) {
  border-color: transparent;
  background: transparent;
  color: var(--content-2);
}

body.dashboard-dark-active :is(#opportunities-contacts-page, #opportunities-quotes-page, #opportunities-appointments-page) .inventory-section-tabs :where(a, button):hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

body.dashboard-dark-active :is(#opportunities-contacts-page, #opportunities-quotes-page, #opportunities-appointments-page) .inventory-section-tabs :where(a, button).active {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

body.dashboard-dark-active #opportunities-contacts-page :where(.inventory-filter-pill, .inventory-page-btn, .round-action.secondary, .row-menu-btn) {
  border-color: var(--border-2);
  background: var(--surface);
  color: var(--content-2);
}

body.dashboard-dark-active #opportunities-contacts-page :where(.inventory-page-btn, .round-action.secondary, .row-menu-btn):hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

/* Google Ads call leads use their own workspace and dialog vocabulary. Keep
   the same restrained surface hierarchy as the other Opportunities views. */
body.dashboard-dark-active #opportunities-google-ads-calls-page {
  background: var(--surface-2);
  color: var(--content-1);
  color-scheme: dark;
}

body.dashboard-dark-active #opportunities-google-ads-calls-page :where(
  .gacl-summary-grid article,
  .gacl-workspace,
  .gacl-detail-card,
  .gacl-conversation-card,
  .gacl-call-item,
  .gacl-candidate,
  .gacl-transcript-message
) {
  border-color: var(--border-1);
  background: var(--surface);
  background-image: none;
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #opportunities-google-ads-calls-page :where(
  .gacl-toolbar,
  .gacl-message-stream,
  .gacl-call-item,
  .gacl-transcript-message
) {
  background: var(--surface-2);
  background-image: none;
}

body.dashboard-dark-active #opportunities-google-ads-calls-page :where(
  .gacl-dialog,
  .gacl-dialog-header,
  .gacl-conversation-header,
  .gacl-message-composer,
  .gacl-conversation-overflow-menu
) {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #opportunities-google-ads-calls-page :where(
  input,
  select,
  textarea,
  .gacl-button-secondary,
  .gacl-icon-button,
  .gacl-conversation-overflow > summary
) {
  border-color: var(--border-2);
  background: var(--surface-3);
  color: var(--content-1);
}

/* Reports and metrics ------------------------------------------------------ */
body.dashboard-dark-active #reports-page :where(
  .reports-shell,
  .reports-content,
  .report-detail-section,
  .report-live-section,
  .report-group,
  .report-panel,
  .report-card,
  .report-detail-table-wrap,
  .reports-search-shell,
  .reports-search-results
),
body.dashboard-dark-active #metrics-page :where(
  .metrics-shell,
  .metric-card,
  .metric-op-tile,
  .metric-panel,
  .metric-time-card,
  .metric-time-table-wrap,
  .metric-cash-tile
) {
  border-color: var(--border-1);
  background: var(--surface);
  background-image: none;
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #reports-page .reports-menu {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #reports-page .reports-menu :where(strong, span, svg, .reports-menu-icon, .reports-menu-trigger, button) {
  color: var(--content-2);
}

body.dashboard-dark-active #reports-page .reports-menu :where(button, .reports-menu-trigger) {
  background: transparent;
  color: var(--content-2);
}

body.dashboard-dark-active #reports-page .reports-menu :where(button:hover, .reports-menu-trigger:hover),
body.dashboard-dark-active #reports-page .reports-menu-item.open .reports-menu-trigger {
  background: var(--surface-hover);
  color: var(--content-1);
}

body.dashboard-dark-active #reports-page .reports-menu :where(button.active, .reports-menu-trigger.active) {
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

body.dashboard-dark-active #reports-page .reports-menu .reports-menu-dropdown,
body.dashboard-dark-active #reports-page .reports-search-results {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
}

body.dashboard-dark-active #reports-page .reports-menu .reports-menu-dropdown .reports-menu-option,
body.dashboard-dark-active #reports-page .reports-search-result {
  background: transparent;
  color: var(--content-1);
}

body.dashboard-dark-active #reports-page .reports-menu .reports-menu-dropdown .reports-menu-option:hover,
body.dashboard-dark-active #reports-page .reports-search-result:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

body.dashboard-dark-active #reports-page :where(.report-detail-titlebar, .report-live-header, .report-subheader),
body.dashboard-dark-active #metrics-page :where(.metrics-title-bar, .metric-panel-head, .metric-time-table-title) {
  border-color: var(--border-1);
  background: var(--surface-2);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #reports-page :where(.report-detail-filters, .report-detail-extra-filters, .report-controls),
body.dashboard-dark-active #metrics-page .metrics-filter-row {
  border-color: var(--border-1);
  background: var(--surface-2);
}

/* Detail summaries use a more specific legacy selector than the generic
   report-card rule. Match it so accounting and cash reports never leak white
   tiles into the dark canvas. */
body.dashboard-dark-active #reports-page .report-detail-cards .report-card {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #reports-page .report-detail-cards .report-card span {
  color: var(--content-3);
}

body.dashboard-dark-active #reports-page .report-detail-cards .report-card strong {
  color: var(--content-1);
}

body.dashboard-dark-active #reports-page .report-card-grid:not(.report-detail-cards) .report-card,
body.dashboard-dark-active #reports-page .report-system-log {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #reports-page .report-card-grid:not(.report-detail-cards) .report-card span {
  color: var(--content-3);
}

body.dashboard-dark-active #reports-page .report-card-grid:not(.report-detail-cards) .report-card strong {
  color: var(--content-1);
}

body.dashboard-dark-active #metrics-page :where(.metric-sales-chart, .metric-time-card-grid, .metric-time-grid, .metric-list-panel, .metric-cash-grid) {
  border-color: var(--border-1);
  background: var(--surface);
  background-image: none;
}

body.dashboard-dark-active #metrics-page :where(.metric-list-row strong, .metric-list-row em, .metric-sales-day span, .metric-time-table td) {
  color: var(--content-1);
}

body.dashboard-dark-active #metrics-page :where(.metric-list-row span, .metric-sales-day, .metric-sales-day small, .metric-sales-legend, .metric-time-table-title) {
  color: var(--content-3);
}

body.dashboard-dark-active #metrics-page .metric-time-table tbody tr:nth-child(even) td {
  background: var(--surface-2);
}

body.dashboard-dark-active #metrics-page .metric-time-table tbody tr:hover td {
  background: var(--surface-hover);
}

body.dashboard-dark-active #metrics-page .metric-time-badge:not([class*="tone-"]):not([class*="type-"]):not([class*="department"]):not([class*="status"]) {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-2);
}

body.dashboard-dark-active #metrics-page :where(
  .metric-time-badge-status,
  .metric-time-badge-tone-blue,
  .metric-time-badge-tone-cyan,
  .metric-time-badge-tone-teal,
  .metric-time-badge-tone-indigo,
  .metric-time-badge-tone-purple,
  .metric-time-badge-tone-magenta,
  .metric-time-badge-type.metric-time-badge-quick-sale,
  .metric-time-badge-type.metric-time-badge-sale,
  .metric-time-badge-type.metric-time-badge-refurbishment,
  .metric-time-badge-type.metric-time-badge-task,
  .metric-time-badge-type.metric-time-badge-tarea
) {
  border-color: color-mix(in srgb, var(--cp-accent) 35%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 10%, var(--surface));
  color: var(--cp-accent);
}

body.dashboard-dark-active #metrics-page :where(
  .metric-time-badge-type.metric-time-badge-repair,
  .metric-time-badge-type.metric-time-badge-trade-in,
  .metric-time-badge-type.metric-time-badge-tradein,
  .metric-time-badge-type.metric-time-badge-quote,
  .metric-time-badge-tone-amber,
  .metric-time-badge-tone-orange
) {
  border-color: color-mix(in srgb, var(--cp-warning) 35%, var(--border-1));
  background: color-mix(in srgb, var(--cp-warning) 10%, var(--surface));
  color: var(--cp-warning);
}

body.dashboard-dark-active #metrics-page :where(.metric-time-badge-task-category, .metric-time-badge-tone-green) {
  border-color: color-mix(in srgb, var(--cp-success) 35%, var(--border-1));
  background: color-mix(in srgb, var(--cp-success) 10%, var(--surface));
  color: var(--cp-success);
}

body.dashboard-dark-active #metrics-page .metric-time-badge-tone-red {
  border-color: color-mix(in srgb, var(--cp-danger) 35%, var(--border-1));
  background: color-mix(in srgb, var(--cp-danger) 10%, var(--surface));
  color: var(--cp-danger);
}

body.dashboard-dark-active #metrics-page :where(
  .metric-time-badge-type:not(.metric-time-badge-repair):not(.metric-time-badge-quick-sale):not(.metric-time-badge-sale):not(.metric-time-badge-trade-in):not(.metric-time-badge-tradein):not(.metric-time-badge-quote):not(.metric-time-badge-refurbishment):not(.metric-time-badge-task):not(.metric-time-badge-tarea),
  .metric-time-badge-department,
  .metric-time-badge-neutral,
  .metric-time-badge-tone-gray,
  .metric-time-badge-tone-slate
) {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-2);
}

/* Team, HR files, commissions, and their dialogs -------------------------- */
body.dashboard-dark-active #team-page {
  --staff-accent: var(--cp-accent);
  --staff-accent-dark: var(--cp-accent-hover);
  --staff-panel: var(--surface);
  --staff-line: var(--border-1);
  --staff-muted: var(--content-3);
}

body.dashboard-dark-active #team-page :where(.staff-filter-panel, .staff-main, .staff-form, .staff-attendance-form, .staff-import-bar, .staff-table-wrap, .staff-summary-strip article),
body.dashboard-dark-active #team-page .staff-edit-card {
  border-color: var(--border-1);
  background: var(--surface);
  background-image: none;
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #team-page :where(.staff-filter-title, .staff-title-bar, .staff-section-tabs, .staff-filter-footer, .staff-overview-head),
body.dashboard-dark-active #team-page :where(.staff-edit-head, .staff-edit-body, .staff-edit-foot) {
  border-color: var(--border-1);
  background: var(--surface-2);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #team-page :where(.staff-filter-title, .staff-title-bar) {
  background: var(--surface);
}

body.dashboard-dark-active #team-page :where(.staff-title-bar h2, .staff-filter-title, .staff-name-cell, .staff-overview-head h3, .staff-summary-strip strong, .staff-edit-head h3) {
  color: var(--content-1);
}

body.dashboard-dark-active #team-page .staff-section-tabs button {
  border-color: transparent;
  background: transparent;
  color: var(--content-2);
}

body.dashboard-dark-active #team-page .staff-section-tabs button:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

body.dashboard-dark-active #team-page .staff-section-tabs button.active {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

body.dashboard-dark-active #team-page .staff-list-table :where(th, td):nth-child(9) {
  background: var(--surface);
  box-shadow: none;
}

body.dashboard-dark-active #team-page .staff-list-table th:nth-child(9) {
  background: var(--surface-2);
}

body.dashboard-dark-active #team-page :where(.staff-role-badge, .staff-position-badge, .staff-department-badge) {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-2);
}

body.dashboard-dark-active #team-page .staff-role-worker {
  border-color: color-mix(in srgb, var(--cp-accent) 36%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 14%, var(--surface));
  color: color-mix(in srgb, var(--cp-accent) 82%, white);
}

body.dashboard-dark-active #team-page .staff-role-admin {
  border-color: color-mix(in srgb, var(--cp-warning) 40%, var(--border-1));
  background: color-mix(in srgb, var(--cp-warning) 14%, var(--surface));
  color: color-mix(in srgb, var(--cp-warning) 78%, white);
}

body.dashboard-dark-active #team-page :is(.staff-role-superadmin, .staff-role-super-admin) {
  border-color: color-mix(in srgb, var(--cp-danger) 36%, var(--border-1));
  background: color-mix(in srgb, var(--cp-danger) 13%, var(--surface));
  color: color-mix(in srgb, var(--cp-danger) 76%, white);
}

body.dashboard-dark-active #team-page .staff-department-sales {
  border-color: color-mix(in srgb, var(--cp-danger) 34%, var(--border-1));
  background: color-mix(in srgb, var(--cp-danger) 12%, var(--surface));
  color: color-mix(in srgb, var(--cp-danger) 72%, white);
}

body.dashboard-dark-active #team-page .staff-department-workshop {
  border-color: color-mix(in srgb, var(--cp-accent) 36%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 13%, var(--surface));
  color: color-mix(in srgb, var(--cp-accent) 82%, white);
}

body.dashboard-dark-active #team-page .staff-department-inventory {
  border-color: color-mix(in srgb, var(--cp-success) 34%, var(--border-1));
  background: color-mix(in srgb, var(--cp-success) 12%, var(--surface));
  color: color-mix(in srgb, var(--cp-success) 74%, white);
}

body.dashboard-dark-active #team-page :is(.staff-department-support, .staff-department-management, .staff-department-human-resources) {
  border-color: color-mix(in srgb, var(--cp-accent) 30%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 8%, var(--surface-3));
  color: var(--content-1);
}

body.dashboard-dark-active #app-view #team-page .staff-table .team-actions .btn-secondary {
  border-color: color-mix(in srgb, var(--cp-accent) 52%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 16%, var(--surface));
  color: color-mix(in srgb, var(--cp-accent) 82%, white);
}

body.dashboard-dark-active #app-view #team-page .staff-table .team-actions .btn-secondary:hover {
  border-color: var(--cp-accent);
  background: color-mix(in srgb, var(--cp-accent) 24%, var(--surface));
  color: white;
}

body.dashboard-dark-active #team-page .staff-active-badge {
  border-color: color-mix(in srgb, var(--cp-success) 35%, var(--border-1));
  background: color-mix(in srgb, var(--cp-success) 12%, var(--surface));
  color: var(--cp-success);
}

body.dashboard-dark-active #team-page .staff-active-badge.inactive {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-3);
}

body.dashboard-dark-active #team-page .staff-edit-avatar {
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

body.dashboard-dark-active #team-page .staff-edit-close {
  border-color: transparent;
  background: transparent;
  color: var(--content-2);
}

body.dashboard-dark-active #team-page .staff-edit-close:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

body.dashboard-dark-active #hr-page :where(
  .hr-library-shell,
  .hr-library-main,
  .hr-library-storage-card,
  .hr-library-table-wrap,
  .hr-library-card,
  .hr-library-modal-card,
  .hr-commission-hero,
  .hr-commission-filter-card,
  .hr-commission-rules-card,
  .hr-commission-panel,
  .hr-commission-modal-card,
  .hr-tech-view-panel,
  .hr-tech-primary-card,
  .hr-tech-metric-card,
  .hr-tech-support-card,
  .hr-sales-view-panel,
  .hr-sales-primary-card,
  .hr-sales-metric-card,
  .hr-sales-support-card,
  .hr-referral-view-panel,
  .hr-referral-program-card,
  .hr-referral-workflow-card
) {
  border-color: var(--border-1);
  background: var(--surface);
  background-image: none;
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #hr-page :where(
  .hr-library-sidebar,
  .hr-library-toolbar,
  .hr-library-modal-card > header,
  .hr-library-modal-card > footer,
  .hr-section-tabs,
  .hr-tech-workspace-nav,
  .hr-tech-filter-shell,
  .hr-sales-workspace-nav,
  .hr-sales-filter-shell,
  .hr-referral-workspace-nav,
  .hr-referral-period-shell,
  .hr-commission-modal-card > header,
  .hr-commission-modal-card > footer
) {
  border-color: var(--border-1);
  background: var(--surface-2);
  color: var(--content-1);
}

body.dashboard-dark-active #hr-page :where(.hr-section-tabs, .hr-tech-workspace-nav, .hr-sales-workspace-nav, .hr-referral-workspace-nav) button {
  border-color: transparent;
  background: transparent;
  color: var(--content-2);
  box-shadow: none;
}

body.dashboard-dark-active #hr-page :where(.hr-section-tabs, .hr-tech-workspace-nav, .hr-sales-workspace-nav, .hr-referral-workspace-nav) button:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

body.dashboard-dark-active #hr-page :where(.hr-section-tabs, .hr-tech-workspace-nav, .hr-sales-workspace-nav, .hr-referral-workspace-nav) button:is(.is-active, [aria-selected="true"]) {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

body.dashboard-dark-active #hr-page :where(.hr-commission-table, .hr-library-table) :where(th, td) {
  border-color: var(--border-1);
}

body.dashboard-dark-active #hr-page :where(.hr-commission-table, .hr-library-table) th {
  background: var(--surface-2);
  color: var(--content-3);
}

body.dashboard-dark-active #hr-page :where(.hr-commission-table, .hr-library-table) td {
  background: var(--surface);
  color: var(--content-1);
}

body.dashboard-dark-active #hr-page :where(.hr-commission-table, .hr-library-table) tbody tr:hover td {
  background: var(--surface-hover);
}

/* Settings, including notification and call-answering subsections ---------- */
body.dashboard-dark-active #settings-page .rq-settings-shell.settings-shell-v2,
body.dashboard-dark-active #settings-page :where(.rq-settings-main, .rq-settings-overview, .rq-settings-detail, .settings-suppliers-page, .settings-supplier-form-panel) {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #settings-page .rq-settings-sidebar {
  border-color: var(--border-1);
  background: var(--surface-2);
  color: var(--content-1);
}

body.dashboard-dark-active #settings-page :where(.rq-settings-side-link, .rq-settings-sub-link) {
  border-color: transparent;
  background: transparent;
  color: var(--content-2);
  box-shadow: none;
}

body.dashboard-dark-active #settings-page :where(.rq-settings-side-link, .rq-settings-sub-link):hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

body.dashboard-dark-active #settings-page :where(.rq-settings-side-link, .rq-settings-sub-link):is(.active, [aria-current="page"]) {
  background: transparent;
  color: var(--cp-accent);
  box-shadow: inset var(--space-1) 0 0 var(--cp-accent);
}

body.dashboard-dark-active #settings-page .rq-settings-sidebar .rq-settings-subnav {
  border-color: var(--border-1);
  background: transparent;
}

body.dashboard-dark-active #settings-page .rq-settings-sidebar .rq-settings-sub-link {
  border-color: transparent;
  background: transparent;
  color: var(--content-2);
  box-shadow: none;
}

body.dashboard-dark-active #settings-page .rq-settings-sidebar .rq-settings-sub-link:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

body.dashboard-dark-active #settings-page .rq-settings-sidebar .rq-settings-sub-link.active {
  background: transparent;
  color: var(--cp-accent);
  box-shadow: inset var(--space-1) 0 0 var(--cp-accent);
}

body.dashboard-dark-active #settings-page .settings-tax-rates {
  background: transparent;
  color: var(--content-1);
}

body.dashboard-dark-active #settings-page .settings-title-bar {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #settings-page :where(.settings-panel-head, .settings-subsection-head, .settings-suppliers-toolbar, .settings-supplier-rq-footer, .rq-settings-detail-actions) {
  border-color: var(--border-1);
  background: transparent;
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #settings-page :where(
  .settings-panel,
  .settings-subsection,
  .settings-profile-card,
  .settings-supplier-rq-card,
  .settings-toggle,
  .settings-method-chip,
  .settings-discount-rule,
  .settings-discount-access-block,
  .settings-discount-chip,
  .settings-tax-row,
  .settings-tax-rate-row,
  .settings-readonly-grid > div,
  .settings-calls-checklist-row,
  .settings-calls-agent-preview
) {
  border-color: var(--border-1);
  background: var(--surface);
  background-image: none;
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #settings-page .rq-settings-group {
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.dashboard-dark-active #settings-page .rq-settings-group h3 {
  border-left-color: var(--cp-accent);
  background: var(--surface-2);
  color: var(--content-1);
}

body.dashboard-dark-active #settings-page .rq-settings-card {
  border-color: var(--border-1);
  background: transparent;
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #settings-page .rq-settings-detail :is(.settings-panel, .settings-subsection) {
  background: transparent;
  box-shadow: none;
}

body.dashboard-dark-active #settings-page :where(.rq-settings-card, .settings-toggle, .settings-method-chip, .settings-discount-chip):hover {
  border-color: var(--border-2);
  background: var(--surface-hover);
}

body.dashboard-dark-active #settings-page :where(.settings-method-chip, .settings-discount-chip):has(input:checked) {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

body.dashboard-dark-active #settings-page :where(.settings-panel-head h3, .settings-subsection-head h4, .rq-settings-card strong, .settings-toggle strong, .settings-readonly-grid strong) {
  color: var(--content-1);
}

body.dashboard-dark-active #settings-page :where(.settings-panel-head p, .settings-subsection-head p, .rq-settings-card span, .settings-toggle span, .settings-readonly-grid span, .settings-discount-hint, .settings-calls-checklist-row span) {
  color: var(--content-3);
}

body.dashboard-dark-active #settings-page :where(.settings-table-wrap, .settings-suppliers-table-wrap, .settings-backup-table-wrap) {
  border-color: var(--border-1);
  background: var(--surface);
  box-shadow: none;
}

/* eBay desk --------------------------------------------------------------- */
body.dashboard-dark-active #ebay-page .ebay-workspace {
  background: var(--surface-2);
  color: var(--content-1);
}

body.dashboard-dark-active #ebay-page .ebay-head {
  border: 1px solid var(--border-1);
  border-left: var(--space-1) solid var(--cp-accent);
  background: var(--surface);
  background-image: none;
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #ebay-page .ebay-head :where(h1, .ebay-kicker) {
  color: var(--content-1);
}

body.dashboard-dark-active #ebay-page .ebay-head-metric,
body.dashboard-dark-active #ebay-page :where(
  .ebay-queue,
  .ebay-editor,
  .ebay-review,
  .ebay-published-desk,
  .ebay-subpanel,
  .ebay-side-section,
  .ebay-draft-row,
  .ebay-candidate-row,
  .ebay-published-row,
  .ebay-stat-grid > div,
  .ebay-balance-grid > div,
  .ebay-metric-stack > div,
  .ebay-policy-summary,
  .ebay-empty
) {
  border-color: var(--border-1);
  background: var(--surface);
  background-image: none;
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #ebay-page .ebay-head-metric {
  background: var(--surface-2);
}

body.dashboard-dark-active #ebay-page .ebay-head-metric :where(span, strong) {
  color: var(--content-1);
}

body.dashboard-dark-active #ebay-page :where(.ebay-queue-tools, .ebay-panel-head, .ebay-subpanel-head, .ebay-section-head, .ebay-editor-head, .ebay-status-strip, .ebay-drawer > summary) {
  border-color: var(--border-1);
  background: var(--surface-2);
  color: var(--content-1);
}

body.dashboard-dark-active #ebay-page :where(.ebay-panel-head h2, .ebay-section-head h2, .ebay-editor-head h2, .ebay-side-section h2, .ebay-subpanel-head h3, .ebay-row-title) {
  color: var(--content-1);
}

body.dashboard-dark-active #ebay-page :where(.ebay-field span, .ebay-row-meta, .ebay-panel-eyebrow, .ebay-kicker) {
  color: var(--content-3);
}

body.dashboard-dark-active #ebay-page :where(.ebay-filter-tabs, .ebay-payload-tabs) button {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-2);
}

body.dashboard-dark-active #ebay-page :where(.ebay-filter-tabs, .ebay-payload-tabs) button:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

body.dashboard-dark-active #ebay-page :where(.ebay-filter-tabs, .ebay-payload-tabs) button.active {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

body.dashboard-dark-active #ebay-page :where(.ebay-draft-row:hover, .ebay-draft-row.selected, .ebay-published-row:hover) {
  border-color: var(--cp-accent);
  background: var(--surface-hover);
  box-shadow: inset var(--space-1) 0 0 var(--cp-accent);
}

body.dashboard-dark-active #ebay-page .ebay-head-actions .btn-secondary {
  border-color: var(--border-2);
  background: var(--surface-2);
  color: var(--content-1);
}

body.dashboard-dark-active #ebay-page .ebay-head-actions .btn-secondary:hover {
  background: var(--surface-hover);
}

body.dashboard-dark-active #ebay-page .ebay-pill {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-2);
}

body.dashboard-dark-active #ebay-page :where(
  .ebay-live-chip,
  .ebay-pill-approved,
  .ebay-pill-ready,
  .ebay-pill-staged,
  .ebay-pill-published,
  .ebay-pill-sold
) {
  border-color: color-mix(in srgb, var(--cp-success) 35%, var(--border-1));
  background: color-mix(in srgb, var(--cp-success) 10%, var(--surface));
  color: var(--cp-success);
}

body.dashboard-dark-active #ebay-page :where(
  .ebay-live-chip-warning,
  .ebay-pill-needs_review,
  .ebay-pill-ai_unavailable,
  .ebay-pill-waiting_for_inventory,
  .ebay-pill-needs_approval,
  .ebay-pill-needs_photos,
  .ebay-pill-missing_required_fields,
  .ebay-alert-warning
) {
  border-color: color-mix(in srgb, var(--cp-warning) 35%, var(--border-1));
  background: color-mix(in srgb, var(--cp-warning) 10%, var(--surface));
  color: var(--cp-warning);
}

body.dashboard-dark-active #ebay-page .ebay-pill-error {
  border-color: color-mix(in srgb, var(--cp-danger) 35%, var(--border-1));
  background: color-mix(in srgb, var(--cp-danger) 10%, var(--surface));
  color: var(--cp-danger);
}

body.dashboard-dark-active #ebay-page :where(.ebay-drawer-body, .ebay-policy-summary) {
  border-color: var(--border-1);
}

body.dashboard-dark-active #ebay-page .ebay-drawer > summary::after {
  background: var(--surface-3);
  color: var(--content-2);
}

body.dashboard-dark-active #ebay-page .ebay-payload {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-1);
}

/* Camera upload workspace and camera/account sheets ----------------------- */
body.dashboard-dark-active #camera-page .repair-panel,
body.dashboard-dark-active #camera-page :where(.dropzone, .preview-list, .upload-progress),
body.dashboard-dark-active .camera-sheet {
  border-color: var(--border-1);
  background: var(--surface);
  background-image: none;
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #camera-page .repair-panel-title,
body.dashboard-dark-active .camera-bar {
  border-color: var(--border-1);
  background: var(--surface-2);
  color: var(--content-1);
}

body.dashboard-dark-active #camera-page :where(.drop-title, .upload-progress-head),
body.dashboard-dark-active .camera-title {
  color: var(--content-1);
}

body.dashboard-dark-active #camera-page :where(.drop-subtitle, .drop-formats) {
  color: var(--content-3);
}

body.dashboard-dark-active #camera-page .dropzone:hover,
body.dashboard-dark-active #camera-page .dropzone.is-dragover {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
}

body.dashboard-dark-active .camera-round-btn {
  border-color: var(--border-2);
  background: var(--surface-3);
  color: var(--content-1);
}

body.dashboard-dark-active .camera-round-btn:hover {
  background: var(--surface-hover);
}

body.dashboard-dark-active .camera-preview-wrap {
  border-color: var(--border-1);
  background: var(--surface-3);
}

/* Post-sale ticket --------------------------------------------------------- */
body.dashboard-dark-active #post-sale-ticket-page :where(
  .post-sale-shell,
  .post-sale-card,
  .post-sale-disclosure,
  .post-sale-kpi,
  .post-sale-line,
  .post-sale-tender,
  .post-sale-photo,
  .post-sale-attachment,
  .post-sale-note-composer,
  .post-sale-timeline-entry,
  .post-sale-action-bar,
  .post-sale-return-line,
  .post-sale-modal-line,
  .post-sale-check,
  .post-sale-modal-card
) {
  border-color: var(--border-1);
  background: var(--surface);
  background-image: none;
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #post-sale-ticket-page :where(.post-sale-topbar, .post-sale-disclosure summary, .post-sale-modal-head, .post-sale-modal-actions, .post-sale-action-bar) {
  border-color: var(--border-1);
  background: var(--surface-2);
  color: var(--content-1);
}

body.dashboard-dark-active #post-sale-ticket-page :where(.post-sale-banner, .post-sale-workspace-banner) {
  border-color: var(--border-1);
  background: var(--surface);
  background-image: none;
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #post-sale-ticket-page .post-sale-new-ticket-menu {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
}

body.dashboard-dark-active #post-sale-ticket-page .post-sale-new-ticket-menu button {
  background: transparent;
  color: var(--content-1);
}

body.dashboard-dark-active #post-sale-ticket-page .post-sale-new-ticket-menu button:hover {
  background: var(--surface-hover);
}

body.dashboard-dark-active #post-sale-ticket-page .post-sale-modal-backdrop {
  background: color-mix(in srgb, var(--content-1) 55%, transparent);
}

/* --------------------------------------------------------------------------
   System workspace foundation
   --------------------------------------------------------------------------
   This file is loaded after the domain stylesheets. Keep the shared workspace
   hierarchy intact in dark mode instead of reviving legacy tab containers or
   nested button surfaces through more specific domain selectors.
   -------------------------------------------------------------------------- */
body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) [data-cp-workspace-head] {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :is(
  .devices-toolbar-row-top,
  .cp-workspace-toolbar
) {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :is(
  .devices-toolbar-row-filters,
  .inventory-filters,
  .metrics-global-controls
) {
  border-color: var(--border-1);
  background: var(--surface-2);
  color: var(--content-2);
  box-shadow: none;
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) .devices-pagination-summary :is(
  .dev-tb-lbl,
  strong
) {
  color: var(--content-2);
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) .devices-pagination-summary strong,
body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :is(.empty-title, .inventory-empty strong) {
  color: var(--content-1);
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :is(
  .devices-date-chip,
  .inventory-filter-pill
) :is(span, svg) {
  color: var(--content-1);
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :is(
  .empty-body,
  .inventory-empty,
  .devices-empty
) {
  color: var(--content-2);
}

body.dashboard-dark-active :is(
  #inventory-page,
  #customers-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page
) [data-cp-workspace-head] > :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

body.dashboard-dark-active :is(
  #inventory-page,
  #customers-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page
) [data-cp-workspace-head] > :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) :where(a, button) {
  border-color: transparent;
  background: transparent;
  color: var(--content-2);
  box-shadow: none;
}

body.dashboard-dark-active :is(
  #inventory-page,
  #customers-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page
) [data-cp-workspace-head] > :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) :where(a, button):hover {
  border-color: transparent;
  background: transparent;
  color: var(--content-1);
}

body.dashboard-dark-active :is(
  #inventory-page,
  #customers-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page
) [data-cp-workspace-head] > :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) :where(a, button).active {
  border-color: var(--cp-accent);
  background: transparent;
  color: var(--cp-accent);
}

/* Narrow layouts keep their task hierarchy and avoid clipped subnavigation. */
@media (max-width: 760px) {
  body.dashboard-dark-active #settings-page .rq-settings-sidebar,
  body.dashboard-dark-active #customer-profile-page .cprofile-sidebar,
  body.dashboard-dark-active :is(#opportunities-contacts-page, #opportunities-quotes-page, #opportunities-appointments-page) .inventory-section-tabs,
  body.dashboard-dark-active #hr-page :where(.hr-section-tabs, .hr-tech-workspace-nav, .hr-sales-workspace-nav, .hr-referral-workspace-nav) {
    border-color: var(--border-1);
    background: var(--surface);
  }

  body.dashboard-dark-active #reports-page .reports-menu {
    border-color: var(--border-1);
    background: var(--surface);
  }
}

/* --------------------------------------------------------------------------
   Workflow harmony: shared filter flow and secondary workspaces
   -------------------------------------------------------------------------- */
body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) .cp-toolbar-location {
  border-color: transparent;
  background: var(--surface);
  color: var(--content-2);
  box-shadow: none;
  opacity: 1;
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) .cp-toolbar-flow :is(
  .devices-link-btn,
  .inventory-reset,
  .devices-date-chip,
  .devices-keyword-input,
  .customers-keyword-input,
  select
) {
  border-color: var(--border-2);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) .cp-toolbar-flow :is(
  .devices-link-btn,
  .inventory-reset
):hover {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

body.dashboard-dark-active :is(
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page
) .opportunities-workspace,
body.dashboard-dark-active :is(
  #catalog-item-view-page .civ-shell,
  #catalog-item-edit-page .cie-shell,
  #inventory-item-manage-page .iim-shell
) {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active :is(
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page,
  #catalog-item-view-page,
  #catalog-item-edit-page,
  #inventory-item-manage-page
) [data-cp-workspace-head] {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #opportunities-contacts-page :is(
  .opportunities-list-toolbar,
  .opportunities-toolbar,
  .opportunities-filters,
  .inventory-section,
  .opportunities-contacts-table-wrap
) {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #opportunities-contacts-page .opportunities-filters {
  background: var(--surface-2);
}

body.dashboard-dark-active #opportunities-contacts-page .opportunities-contacts-table {
  color: var(--content-1);
}

body.dashboard-dark-active #opportunities-contacts-page .opportunities-contacts-table :is(th, td) {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
}

body.dashboard-dark-active #opportunities-contacts-page .opportunities-contacts-table th {
  background: var(--surface-2);
  color: var(--content-2);
}

body.dashboard-dark-active #opportunities-contacts-page .opportunities-contacts-table :is(
  .cp-ticket-link,
  button:not(.btn-primary),
  a:not(.btn-primary)
) {
  color: var(--content-1);
}

body.dashboard-dark-active #opportunities-contacts-page .opportunities-contacts-table tbody tr:hover :is(td, .cp-ticket-link) {
  background: var(--surface-hover);
  color: var(--content-1);
}

body.dashboard-dark-active :is(
  #catalog-item-view-page,
  #catalog-item-edit-page,
  #inventory-item-manage-page
) [data-cp-workspace-head] :is(h2, h3, p, a) {
  color: var(--content-1);
}

body.dashboard-dark-active :is(
  #catalog-item-view-page .civ-title-sub,
  #catalog-item-edit-page .cie-title-copy p,
  #inventory-item-manage-page .iim-back-link
) {
  color: var(--content-2);
}

/* --------------------------------------------------------------------------
   HR → Technician Commissions → Commission Plan (Q4 2026 technician plan)
   The light-theme soft danger tint stays light in this scope, so the plan
   panel mixes its tints from the dark surface instead.
   -------------------------------------------------------------------------- */
body.dashboard-dark-active #hr-commissions-view :where(.hr-plan-section, .hr-plan-period-picker button, .hr-plan-rate, .hr-plan-recent-videos li) {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
}

body.dashboard-dark-active #hr-commissions-view :where(
  .hr-plan-rate-group,
  .hr-plan-progress-card,
  .hr-plan-video-card,
  .hr-plan-period-picker,
  .hr-plan-statement-footer,
  .hr-plan-progress-empty
) {
  border-color: var(--border-1);
  background: var(--surface-2);
  color: var(--content-1);
}

body.dashboard-dark-active #hr-commissions-view .hr-plan-progress-card.is-primary {
  border-color: color-mix(in srgb, var(--cp-accent) 36%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 10%, var(--surface-2));
}

body.dashboard-dark-active #hr-tech-plan-panel .hr-commission-status.is-excluded,
body.dashboard-dark-active #hr-commissions-view .hr-plan-inline-error,
body.dashboard-dark-active #hr-commissions-view .hr-plan-decision-actions button.is-danger:hover {
  border-color: color-mix(in srgb, var(--cp-danger) 40%, var(--border-1));
  background: color-mix(in srgb, var(--cp-danger) 16%, var(--surface));
  color: color-mix(in srgb, var(--cp-danger) 55%, var(--content-1));
}

body.dashboard-dark-active #hr-commissions-view :where(.hr-plan-deduction, .hr-plan-decision-actions button.is-danger) {
  color: color-mix(in srgb, var(--cp-danger) 55%, var(--content-1));
}

body.dashboard-dark-active #hr-commissions-view :where(.hr-plan-timecard-badge, .hr-plan-blockers) {
  border-color: color-mix(in srgb, var(--cp-warning) 45%, var(--border-1));
  background: color-mix(in srgb, var(--cp-warning) 14%, var(--surface));
  color: var(--content-1);
}

body.dashboard-dark-active #hr-commissions-view :where(.hr-plan-timecard-badge, .hr-plan-blockers strong, .hr-plan-short, .hr-plan-link) {
  color: color-mix(in srgb, var(--cp-warning) 70%, var(--content-1));
}

body.dashboard-dark-active #hr-commissions-view .hr-plan-month-table input {
  border-color: var(--border-2);
  background: var(--surface-3);
  color: var(--content-1);
  color-scheme: dark;
}

body.dashboard-dark-active #hr-commissions-view .hr-plan-month-table tr.hr-plan-month-new td {
  background: color-mix(in srgb, var(--cp-accent) 8%, var(--surface));
}

body.dashboard-dark-active #hr-commissions-view .hr-plan-meter {
  background: var(--surface-3);
}

body.dashboard-dark-active #hr-page #hr-commissions-view .hr-commission-modal-body :is(input[type="date"], input[type="month"]) {
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   HR → Sales Commissions → Team Goal (Q4 2026 sales team goal)
   Mirrors the technician Commission Plan: tints are mixed from the dark
   surface because the light-theme soft danger tint stays light here.
   -------------------------------------------------------------------------- */
body.dashboard-dark-active #hr-sales-commissions-view .hr-sales-plan-section {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #hr-sales-commissions-view :where(
  .hr-sales-plan-card,
  .hr-sales-plan-empty,
  .hr-sales-plan-footnote,
  .hr-sales-plan-statement-footer
) {
  border-color: var(--border-1);
  background: var(--surface-2);
  color: var(--content-1);
}

body.dashboard-dark-active #hr-sales-commissions-view .hr-sales-plan-card.is-primary {
  border-color: color-mix(in srgb, var(--cp-accent) 36%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 10%, var(--surface-2));
}

body.dashboard-dark-active #hr-sales-team-goal-panel :where(.hr-commission-status.is-excluded, .hr-commission-error),
body.dashboard-dark-active #hr-sales-commissions-view .hr-sales-plan-inline-error {
  border-color: color-mix(in srgb, var(--cp-danger) 40%, var(--border-1));
  background: color-mix(in srgb, var(--cp-danger) 16%, var(--surface));
  color: color-mix(in srgb, var(--cp-danger) 55%, var(--content-1));
}

body.dashboard-dark-active #hr-sales-commissions-view .hr-sales-plan-modal-hint {
  border-color: color-mix(in srgb, var(--cp-warning) 45%, var(--border-1));
  background: color-mix(in srgb, var(--cp-warning) 14%, var(--surface));
  color: var(--content-1);
}

body.dashboard-dark-active #hr-sales-commissions-view :where(.hr-sales-plan-period-table input, .hr-sales-plan-period-picker select) {
  border-color: var(--border-2);
  background: var(--surface-3);
  color: var(--content-1);
  color-scheme: dark;
}

body.dashboard-dark-active #hr-sales-commissions-view .hr-sales-plan-period-table tr.hr-sales-plan-period-new td {
  background: color-mix(in srgb, var(--cp-accent) 8%, var(--surface));
}

body.dashboard-dark-active #hr-sales-commissions-view .hr-sales-plan-meter {
  background: var(--surface-3);
}

body.dashboard-dark-active #hr-page #hr-sales-commissions-view .hr-commission-modal-body input[type="date"] {
  color-scheme: dark;
}

/* HR simple pay workspace (technicians and sellers). */
body.dashboard-dark-active #hr-page :where(.hr-pay-goal-card, .hr-pay-person, .hr-pay-attention, .hr-pay-totals > div) {
  background: var(--surface);
  color: var(--content-1);
}

body.dashboard-dark-active #hr-page .hr-pay-goal-card.is-primary {
  border-color: color-mix(in srgb, var(--cp-accent) 36%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 10%, var(--surface));
}

body.dashboard-dark-active #hr-page .hr-pay-attention li {
  background: var(--surface-2);
}

body.dashboard-dark-active #hr-page .hr-pay-meter {
  background: var(--surface-3);
}