/* ============================================================================
   Compupod dark theme — shared application foundation
   ----------------------------------------------------------------------------
   This layer owns the global chrome and reusable primitives. Domain stylesheets
   remain responsible for workflow-specific layout and semantic status colors.

   The dedicated Chat application is intentionally excluded. Its React island
   owns a permanent dark palette and must not inherit the system theme rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Semantic theme contract
   -------------------------------------------------------------------------- */
body.dashboard-dark-active {
  color-scheme: dark;

  --surface: var(--cp-dashboard-dark-surface);
  --surface-2: var(--cp-dashboard-dark-surface-2);
  --surface-3: var(--cp-dashboard-dark-surface-3);
  --surface-hover: var(--cp-dashboard-dark-surface-hover);
  --content-1: var(--cp-dashboard-dark-content-1);
  --content-2: var(--cp-dashboard-dark-content-2);
  --content-3: var(--cp-dashboard-dark-content-3);
  --content-placeholder: var(--content-3);
  --content-placeholder-inv: var(--content-3);
  --content-inv: var(--cp-dashboard-dark-content-1);
  --border-1: var(--cp-dashboard-dark-border-1);
  --border-2: var(--cp-dashboard-dark-border-2);
  --cp-accent-soft: var(--cp-dashboard-dark-accent-soft);

  /* Compatibility aliases used by the legacy modules. Keeping them mapped to
     semantic tokens prevents isolated white surfaces from leaking through. */
  --bg: var(--cp-dashboard-dark-canvas);
  --bg-elev: var(--surface);
  --bg-elev-2: var(--surface-2);
  --bg-input: var(--surface-3);
  --border: var(--border-1);
  --border-strong: var(--border-2);
  --border-bright: var(--border-2);
  --text: var(--content-1);
  --text-soft: var(--content-2);
  --text-dim: var(--content-3);
  --text-mute: var(--content-3);
  --accent: var(--cp-accent);
  --accent-hover: var(--cp-accent-hover);
  --accent-soft: var(--cp-accent-soft);
  --accent-text: var(--cp-accent);
  --cp-surface: var(--surface);
  --cp-surface-raised: var(--surface-3);
  --cp-surface-muted: var(--surface-2);
  --cp-line: var(--border-1);
  --cp-line-strong: var(--border-2);
  --cp-ink: var(--content-1);
  --cp-muted: var(--content-2);
  --cp-nav: var(--cp-dashboard-dark-surface-2);
  --cp-nav-elev: var(--cp-dashboard-dark-surface-3);
  --cp-focus: color-mix(in srgb, var(--cp-accent) 22%, transparent);
  --field-empty-surface: color-mix(in srgb, var(--cp-accent-soft) 42%, var(--surface-3));
  --field-empty-border: color-mix(in srgb, var(--cp-accent) 28%, var(--border-1));
  --field-filled-surface: var(--surface-3);
  --field-filled-border: var(--border-1);

  background: var(--cp-dashboard-dark-canvas);
  color: var(--content-1);
}

body.dashboard-dark-active .shell {
  background: var(--cp-dashboard-dark-canvas);
  color: var(--content-1);
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) {
  color: var(--content-1);
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :where(.muted, .hint, .help-text, .subtitle, .meta) {
  color: var(--content-2);
}

/* --------------------------------------------------------------------------
   Application chrome
   -------------------------------------------------------------------------- */
body.dashboard-dark-active .topbar {
  border-color: var(--border-1);
  background: var(--cp-dashboard-dark-surface-2);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active .nav-btn {
  color: var(--content-2);
}

body.dashboard-dark-active .nav-btn:hover,
body.dashboard-dark-active .nav-btn.active,
body.dashboard-dark-active .nav-menu.open > .nav-btn {
  background: var(--surface-hover);
  color: var(--content-1);
}

body.dashboard-dark-active :where(.status-pill, .worker-pill, .register-chip, .top-actions .account-menu-btn) {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active :where(.status-pill, .worker-pill) :where(span, strong) {
  color: inherit;
}

body.dashboard-dark-active .worker-pill #worker-label {
  color: var(--content-3);
}

body.dashboard-dark-active .subbar {
  border-color: var(--border-1);
  background: color-mix(in srgb, var(--surface-2) 94%, transparent);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active :where(.dashboard-breadcrumb, .subbar-breadcrumb) {
  border-color: var(--border-1);
  background: transparent;
  color: var(--content-2);
  box-shadow: none;
}

body.dashboard-dark-active :where(.dashboard-breadcrumb, .subbar-breadcrumb) :where(a, span, svg) {
  color: inherit;
}

body.dashboard-dark-active :where(.dashboard-breadcrumb, .subbar-breadcrumb) a:hover {
  color: var(--cp-accent);
}

/* Search scopes, calculator, price check and the compact search field form one
   quiet toolbar. Borders stay structural instead of turning into white rails. */
body.dashboard-dark-active :where(.search-scopes, .subbar .top-search, .subbar .top-icon-btn, .subbar .repair-price-calc-btn) {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-2);
  box-shadow: none;
}

body.dashboard-dark-active .search-scopes {
  overflow: hidden;
}

body.dashboard-dark-active .scope-btn {
  border-color: var(--border-1);
  background: transparent;
  color: var(--content-2);
  box-shadow: none;
}

body.dashboard-dark-active .scope-btn + .scope-btn {
  border-left-color: var(--border-1);
}

body.dashboard-dark-active .scope-btn:hover:not(:disabled):not(.active):not([aria-pressed="true"]),
body.dashboard-dark-active :where(.subbar .top-icon-btn, .subbar .repair-price-calc-btn):hover:not(:disabled) {
  background: var(--surface-hover);
  color: var(--content-1);
}

body.dashboard-dark-active .scope-btn:is(.active, [aria-pressed="true"]),
body.dashboard-dark-active .scope-btn:is(.active, [aria-pressed="true"]):is(:hover, :focus, :focus-visible, :active) {
  border-color: var(--cp-accent);
  background: var(--cp-accent) !important;
  color: var(--cp-accent-content) !important;
}

body.dashboard-dark-active .subbar .top-search input {
  border: 0;
  background: transparent;
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active .subbar .top-search input::placeholder {
  color: var(--content-3);
}

body.dashboard-dark-active .subbar .top-search:focus-within {
  border-color: var(--cp-accent);
  box-shadow: var(--focus-ring);
}

body.dashboard-dark-active .subbar .top-search button {
  border-color: var(--cp-accent);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
  box-shadow: none;
}

body.dashboard-dark-active .subbar .top-search button:hover:not(:disabled) {
  border-color: var(--cp-accent-hover);
  background: var(--cp-accent-hover);
}

/* --------------------------------------------------------------------------
   Menus, listboxes, context menus and popovers
   -------------------------------------------------------------------------- */
body.dashboard-dark-active :where(
  .nav-dropdown,
  .account-menu,
  .ticket-menu,
  .inv-row-menu,
  .reports-menu-dropdown,
  .devices-add-filter-popover,
  .devices-date-popover,
  .devices-multiselect-popover,
  .devices-date-popover-standalone,
  .invord-itype-popover,
  .pc-type-popover,
  .cie-lock-popover,
  .iim-ref-popover,
  .dropdown,
  .popover,
  .context-menu,
  [role="menu"],
  [role="listbox"]
):not(#react-chat-root *, #compupod-chat-page *) {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
}

body.dashboard-dark-active :where(.nav-dropdown, .account-menu) {
  overflow: hidden;
}

body.dashboard-dark-active :where(
  .nav-dropdown-item,
  .account-menu-item,
  .ticket-menu-item,
  .inv-row-menu button,
  .reports-menu-option,
  [role="menuitem"],
  [role="option"]
):not(#react-chat-root *, #compupod-chat-page *) {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active :where(
  .nav-dropdown-item,
  .account-menu-item,
  .ticket-menu-item,
  .inv-row-menu button,
  .reports-menu-option,
  [role="menuitem"],
  [role="option"]
):not(#react-chat-root *, #compupod-chat-page *):hover:not(:disabled),
body.dashboard-dark-active [role="option"][aria-selected="true"]:not(#react-chat-root *, #compupod-chat-page *) {
  background: var(--surface-hover);
  color: var(--content-1);
}

body.dashboard-dark-active :where(
  .nav-dropdown-item,
  .account-menu-item,
  .ticket-menu-item,
  [role="menuitem"],
  [role="option"]
):not(#react-chat-root *, #compupod-chat-page *):focus-visible {
  background: var(--surface-hover);
  box-shadow: inset var(--space-1) 0 0 var(--cp-accent);
}

/* --------------------------------------------------------------------------
   Forms and controls
   -------------------------------------------------------------------------- */
body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea
),
body.dashboard-dark-active :where(
  .modal,
  .pc-modal,
  .rpc-modal,
  .newpo-modal-overlay,
  .inv-form-overlay,
  .trade-modal-overlay,
  .repair-technician-modal-overlay,
  .staff-edit-modal,
  .worker-message-overlay,
  .post-sale-modal
) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea
) {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :where(input, textarea)::placeholder,
body.dashboard-dark-active :where(.modal, .pc-modal, .rpc-modal, .newpo-modal-overlay, .inv-form-overlay, .trade-modal-overlay, .repair-technician-modal-overlay, .staff-edit-modal, .worker-message-overlay, .post-sale-modal) :where(input, textarea)::placeholder {
  color: var(--content-3);
  opacity: 1;
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea
):focus,
body.dashboard-dark-active :where(.modal, .pc-modal, .rpc-modal, .newpo-modal-overlay, .inv-form-overlay, .trade-modal-overlay, .repair-technician-modal-overlay, .staff-edit-modal, .worker-message-overlay, .post-sale-modal) :where(input, select, textarea):focus {
  border-color: var(--cp-accent);
  background: var(--surface-3);
  box-shadow: var(--focus-ring);
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :where(input, select, textarea):disabled,
body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :where(input, textarea)[readonly] {
  border-color: var(--border-1);
  background: var(--surface-2);
  color: var(--content-3);
  opacity: 1;
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :where(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--cp-danger);
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :where(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--cp-accent);
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) label,
body.dashboard-dark-active :where(.modal, .pc-modal, .rpc-modal, .newpo-modal-overlay, .inv-form-overlay, .trade-modal-overlay, .repair-technician-modal-overlay, .staff-edit-modal, .worker-message-overlay, .post-sale-modal) label {
  color: var(--content-2);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
body.dashboard-dark-active :where(
  #app-view > main:not(#compupod-chat-page),
  .modal,
  .pc-modal,
  .rpc-modal,
  .newpo-modal-overlay,
  .inv-form-overlay,
  .trade-modal-overlay,
  .repair-technician-modal-overlay,
  .staff-edit-modal,
  .worker-message-overlay,
  .post-sale-modal
) :where(.btn-primary, button.btn-primary) {
  border-color: var(--cp-accent);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
  box-shadow: none;
}

body.dashboard-dark-active :where(
  #app-view > main:not(#compupod-chat-page),
  .modal,
  .pc-modal,
  .rpc-modal,
  .newpo-modal-overlay,
  .inv-form-overlay,
  .trade-modal-overlay,
  .repair-technician-modal-overlay,
  .staff-edit-modal,
  .worker-message-overlay,
  .post-sale-modal
) :where(.btn-primary, button.btn-primary):hover:not(:disabled) {
  border-color: var(--cp-accent-hover);
  background: var(--cp-accent-hover);
  color: var(--cp-accent-content);
}

body.dashboard-dark-active :where(
  #app-view > main:not(#compupod-chat-page),
  .modal,
  .pc-modal,
  .rpc-modal,
  .newpo-modal-overlay,
  .inv-form-overlay,
  .trade-modal-overlay,
  .repair-technician-modal-overlay,
  .staff-edit-modal,
  .worker-message-overlay,
  .post-sale-modal
) :where(.btn-secondary, button.btn-secondary, .icon-btn, .inventory-page-btn, .pagination button) {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active :where(
  #app-view > main:not(#compupod-chat-page),
  .modal,
  .pc-modal,
  .rpc-modal,
  .newpo-modal-overlay,
  .inv-form-overlay,
  .trade-modal-overlay,
  .repair-technician-modal-overlay,
  .staff-edit-modal,
  .worker-message-overlay,
  .post-sale-modal
) :where(.btn-secondary, button.btn-secondary, .icon-btn, .inventory-page-btn, .pagination button):hover:not(:disabled) {
  border-color: var(--border-2);
  background: var(--surface-hover);
  color: var(--content-1);
}

/* Legacy secondary actions frequently combine `.btn` with a variant class,
   making them more specific than the low-weight shared rule above. */
body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :is(
  .btn.btn-secondary,
  .btn.btn-outline,
  .btn.btn-ghost
) {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :is(
  .btn.btn-secondary,
  .btn.btn-outline,
  .btn.btn-ghost
):hover:not(:disabled) {
  border-color: var(--border-2);
  background: var(--surface-hover);
  color: var(--content-1);
}

body.dashboard-dark-active :where(
  #app-view > main:not(#compupod-chat-page),
  .modal,
  .pc-modal,
  .rpc-modal,
  .newpo-modal-overlay,
  .inv-form-overlay,
  .trade-modal-overlay,
  .repair-technician-modal-overlay,
  .staff-edit-modal,
  .worker-message-overlay,
  .post-sale-modal
) :where(button, .btn):disabled {
  color: var(--content-3);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Tables and data lists
   -------------------------------------------------------------------------- */
body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :where(
  .customers-table-wrap,
  .inventory-table-wrap,
  .devices-table-wrap,
  .trade-table-wrap,
  .sale-items-table-wrap,
  .refurb-items-table-wrap,
  .invord-table-wrap,
  .newpo-table-wrap,
  .settings-table-wrap,
  .settings-suppliers-table-wrap,
  .metric-time-table-wrap,
  .cash-detail-table-wrap
) {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
  scrollbar-color: var(--border-2) transparent;
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) table {
  background: transparent;
  color: var(--content-1);
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) table :where(th, thead td) {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-2);
  box-shadow: none;
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) table td {
  border-color: var(--border-1);
  background: transparent;
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) table tbody tr {
  border-color: var(--border-1);
  background: transparent;
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) table tbody tr:hover {
  background: var(--surface-hover);
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) table tbody tr:hover td {
  background: transparent;
}

/* --------------------------------------------------------------------------
   Generic cards and panels
   -------------------------------------------------------------------------- */
body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :where(
  .panel,
  .card,
  .repair-panel,
  .repair-fast-panel,
  .metric-card,
  .metric-panel,
  .metric-time-card,
  .dashboard-op-card,
  .ticket-create-nav-box,
  .ticket-create-financial-box,
  .settings-card,
  .settings-panel,
  .rq-settings-card,
  .report-panel,
  .cash-card,
  .civ-panel,
  .newpo-panel
) {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
  background-clip: padding-box;
}

/* Keep coloured header/body surfaces inside their parent's curved silhouette
   without clipping dropdowns, focus rings or sticky content. */
body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :where(
  .panel,
  .card,
  .repair-panel,
  .repair-fast-panel,
  .metric-panel,
  .settings-panel,
  .report-panel,
  .cash-card,
  .civ-panel,
  .newpo-panel
) > :first-child {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :where(
  .panel,
  .card,
  .repair-panel,
  .repair-fast-panel,
  .metric-panel,
  .settings-panel,
  .report-panel,
  .cash-card,
  .civ-panel,
  .newpo-panel
) > :last-child {
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :where(
  .panel-head,
  .panel-header,
  .repair-panel-title,
  .repair-fast-panel-head,
  .metric-panel-head,
  .settings-panel-head,
  .newpo-panel-head,
  .civ-panel-head,
  .card-header
) {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :where(
  .panel-body,
  .card-body,
  .repair-panel-body,
  .repair-fast-panel-body,
  .newpo-panel-body
) {
  background: var(--surface);
  color: var(--content-1);
}

/* --------------------------------------------------------------------------
   Modals, drawers and overlays
   -------------------------------------------------------------------------- */
body.dashboard-dark-active dialog:not(#compupod-chat-page *, #react-chat-root *) {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
}

body.dashboard-dark-active dialog:not(#compupod-chat-page *, #react-chat-root *)::backdrop {
  background: color-mix(in srgb, var(--cp-dashboard-dark-canvas) 76%, transparent);
}

body.dashboard-dark-active :where(
  .modal,
  .camera-modal,
  .pc-modal,
  .rpc-modal,
  .newpo-modal-overlay,
  .inv-form-overlay,
  .trade-modal-overlay,
  .repair-technician-modal-overlay,
  .staff-edit-modal,
  .worker-message-overlay,
  .post-sale-modal,
  .hr-library-modal,
  .hr-commission-modal
):not(#react-chat-root *, #compupod-chat-page *) {
  background-color: color-mix(in srgb, var(--cp-dashboard-dark-canvas) 76%, transparent);
}

body.dashboard-dark-active :where(
  .modal-body,
  .camera-sheet,
  .pc-modal-body,
  .rpc-modal-body,
  .newpo-modal-card,
  .inv-form-panel,
  .trade-modal-panel,
  .repair-technician-modal-card,
  .staff-edit-card,
  .worker-message-card,
  .post-sale-modal-card,
  .hr-library-modal-card,
  .hr-commission-modal-card
):not(#react-chat-root *, #compupod-chat-page *) {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
  background-clip: padding-box;
}

body.dashboard-dark-active :where(
  .modal-bar,
  .pc-modal-bar,
  .rpc-modal-head,
  .newpo-modal-head,
  .newpo-modal-foot,
  .staff-edit-head,
  .staff-edit-foot,
  .post-sale-modal-head,
  .post-sale-modal-actions,
  .hr-library-modal-card > header,
  .hr-library-modal-card > footer,
  .hr-commission-modal-card > header,
  .hr-commission-modal-card > footer
):not(#react-chat-root *, #compupod-chat-page *) {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active :where(.drawer, [class*="-drawer"]):not(#react-chat-root *, #compupod-chat-page *) {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
}

body.dashboard-dark-active :where(
  .modal-close,
  .newpo-modal-close,
  .pc-modal-close-btn,
  .repair-technician-modal-close,
  .staff-edit-close,
  [data-modal-close]
):not(#react-chat-root *, #compupod-chat-page *) {
  border-color: transparent;
  background: transparent;
  color: var(--content-2);
  box-shadow: none;
}

body.dashboard-dark-active :where(
  .modal-close,
  .newpo-modal-close,
  .pc-modal-close-btn,
  .repair-technician-modal-close,
  .staff-edit-close,
  [data-modal-close]
):not(#react-chat-root *, #compupod-chat-page *):hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

/* --------------------------------------------------------------------------
   Toasts, loading, empty and error-neutral states
   -------------------------------------------------------------------------- */
body.dashboard-dark-active :where(
  .toast:not(.error):not(.success):not(.warning):not(.danger),
  .notification-toast
):not(#react-chat-root *, #compupod-chat-page *) {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
}

body.dashboard-dark-active #app-view > main:not(#compupod-chat-page) :where(
  .empty,
  .inventory-empty,
  .dashboard-empty,
  .metrics-empty,
  .metric-chart-empty,
  .staff-empty,
  .newpo-empty,
  .cash-detail-empty,
  .catalog-empty-row,
  [data-empty-state]
) {
  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) :where(
  .loading,
  .is-loading,
  .dashboard-loading,
  .tickets-loading,
  .ticket-detail-loading,
  .customers-loading,
  .devices-loading,
  .metrics-loading,
  .sale-ticket-loading,
  .repair-ticket-loading,
  .trade-ticket-loading,
  .refurbish-ticket-loading,
  .inventory-loading,
  .cash-register-loading,
  [aria-busy="true"]
) {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-2);
  box-shadow: none;
}

/* Native widgets and scrolling should match the selected appearance. */
body.dashboard-dark-active #app-view > main:not(#compupod-chat-page),
body.dashboard-dark-active :where(.modal, .pc-modal, .rpc-modal, .newpo-modal-overlay, .inv-form-overlay, .trade-modal-overlay, .repair-technician-modal-overlay, .staff-edit-modal, .worker-message-overlay, .post-sale-modal) {
  scrollbar-color: var(--border-2) var(--surface-2);
}

@media (prefers-reduced-motion: reduce) {
  body.dashboard-dark-active :where(
    #app-view > main:not(#compupod-chat-page),
    .modal,
    .pc-modal,
    .rpc-modal,
    .newpo-modal-overlay,
    .inv-form-overlay,
    .trade-modal-overlay,
    .repair-technician-modal-overlay,
    .staff-edit-modal,
    .worker-message-overlay,
    .post-sale-modal
  ) * {
    scroll-behavior: auto;
  }
}

/* Shared filter/date controls are mounted under document.body.  Theme them
   globally so Tickets, Inventory, Customers, Devices and Contacts receive the
   same readable popover regardless of the page that created it. */
body.dashboard-dark-active :is(
  .devices-date-popover,
  .devices-date-popover-standalone,
  .devices-add-filter-popover,
  .devices-multiselect-popover
) {
  color-scheme: dark;
  border-color: var(--border-2);
  background: var(--surface-3);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
}

body.dashboard-dark-active :is(
  .devices-date-popover,
  .devices-date-popover-standalone,
  .devices-add-filter-popover,
  .devices-multiselect-popover
) :is(.devices-date-section-title, .devices-ms-title) {
  color: var(--content-1);
}

body.dashboard-dark-active :is(
  .devices-date-popover,
  .devices-date-popover-standalone,
  .devices-add-filter-popover,
  .devices-multiselect-popover
) :is(input, select, textarea, .devices-ms-search) {
  border-color: var(--border-2);
  background: var(--surface-2);
  color: var(--content-1);
}

body.dashboard-dark-active :is(
  .devices-date-popover,
  .devices-date-popover-standalone,
  .devices-add-filter-popover,
  .devices-multiselect-popover
) :is(input, textarea)::placeholder {
  color: var(--content-placeholder);
}

body.dashboard-dark-active .devices-multiselect-popover :is(
  .devices-ms-actions,
  .devices-ms-footer
) {
  border-color: var(--border-1);
  background: var(--surface-3);
}

body.dashboard-dark-active .devices-multiselect-popover .devices-ms-action {
  border-color: var(--border-2);
  background: var(--surface-2);
  color: var(--cp-accent);
}

body.dashboard-dark-active .devices-multiselect-popover .devices-ms-action:hover {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

body.dashboard-dark-active .devices-multiselect-popover .devices-ms-section-header {
  border-color: var(--border-1);
  background: var(--surface-2);
  color: var(--content-2);
}

body.dashboard-dark-active .devices-multiselect-popover :is(
  .devices-ms-option,
  .devices-ms-option label,
  .devices-ms-option span,
  .devices-ms-list label,
  .devices-ms-list span
) {
  color: var(--content-1);
}

body.dashboard-dark-active .devices-multiselect-popover :is(
  .devices-ms-option,
  .devices-ms-list label
):hover {
  background: var(--surface-hover);
}

body.dashboard-dark-active :is(
  .devices-date-popover,
  .devices-date-popover-standalone,
  .devices-add-filter-popover,
  .devices-multiselect-popover
) input[type="checkbox"],
body.dashboard-dark-active :is(
  .devices-date-popover,
  .devices-date-popover-standalone,
  .devices-add-filter-popover,
  .devices-multiselect-popover
) input[type="radio"] {
  accent-color: var(--cp-accent);
}