/*
 * Final dark-mode neutralizer.
 *
 * This file is appended again by theme_controller.js after page CSS loads, so
 * these rules are the last shared dark-theme pass. Keep dark mode graphite:
 * black, grey, white, and semantic status colors only. No blue/navy/teal UI.
 */

html[data-theme="dark"] {
    --primary: #b8bcc4;
    --primary-hover: #d4d6db;
    --primary-strong: #f3f4f6;
    --primary-light: rgba(255, 255, 255, 0.08);
    --blue-900: #f3f4f6;
    --blue-800: #d4d6db;
    --blue-700: #c2c5cc;
    --blue-600: #a8adb7;
    --blue-500: #8d939e;
    --blue-400: #707782;
    --blue-300: #4b4f56;
    --blue-200: #33363a;
    --blue-100: #24262a;
    --blue-sky: #c4c7ce;
    --grey-900: rgba(255, 255, 255, 0.92);
    --grey-800: #d8d8d8;
    --grey-700: #b8b8b8;
    --grey-600: #9a9a9a;
    --grey-500: #777777;
    --grey-400: #666666;
    --grey-300: #444444;
    --grey-200: #2d2d2d;
    --grey-100: #1f1f1f;
    --ink-900: rgba(255, 255, 255, 0.94);
    --statement-dark-page: #101010;
    --statement-dark-surface: rgba(255, 255, 255, 0.03);
    --statement-dark-soft: rgba(255, 255, 255, 0.04);
    --statement-dark-active: rgba(255, 255, 255, 0.07);
    --statement-dark-control: rgba(255, 255, 255, 0.04);
    --surface: var(--statement-dark-surface);
    --surface-soft: var(--statement-dark-soft);
    --border: #333333;
    --border-strong: #555555;
    --dark-app-bg: var(--statement-dark-page);
    --dark-sidebar-bg: var(--statement-dark-surface);
    --dark-topbar-bg: var(--statement-dark-surface);
    --dark-surface: var(--statement-dark-surface);
    --dark-surface-elevated: var(--statement-dark-soft);
    --dark-hover: var(--statement-dark-active);
    --dark-border: #333333;
    --dark-text: rgba(255, 255, 255, 0.92);
    --dark-text-secondary: #b8b8b8;
    --dark-text-muted: #8f8f8f;
    --focus-ring: 0 0 0 3px rgba(190, 190, 190, 0.28);
    --marketing-navy: #f3f4f6;
    --marketing-ink: #c7c9ce;
    --marketing-cyan: #d4d6db;
    --marketing-panel: rgba(31, 31, 31, 0.94);
    --marketing-panel-soft: rgba(39, 39, 39, 0.9);
    --marketing-stroke: rgba(180, 180, 180, 0.2);
    --invp-bg: var(--statement-dark-page);
    --invp-surface: var(--statement-dark-surface);
    --invp-surface-soft: var(--statement-dark-soft);
    --invp-border: #333333;
    --invp-border-strong: #555555;
    --invp-text: rgba(255, 255, 255, 0.92);
    --invp-muted: #b8b8b8;
    --invp-muted-strong: #f3f4f6;
    --invp-primary: #b8bcc4;
    --invp-primary-dark: #f3f4f6;
    --invp-primary-soft: rgba(180, 180, 180, 0.14);
    --hr-bg: var(--statement-dark-page);
    --hr-surface: var(--statement-dark-surface);
    --hr-surface-strong: var(--statement-dark-soft);
    --hr-surface-soft: var(--statement-dark-soft);
    --hr-border: #333333;
    --hr-primary: #b8bcc4;
    --hr-primary-dark: #d8d8d8;
    --ui-surface: var(--statement-dark-surface);
    --ui-surface-muted: var(--statement-dark-soft);
    --ui-border: #333333;
    --ui-border-strong: #555555;
    --ui-muted: #9a9a9a;
    /* ap-* admin portal token overrides */
    --ap-app-bg:        #101010;
    --ap-bg:            #141414;
    --ap-surface:       rgba(255, 255, 255, 0.03);
    --ap-surface-soft:  rgba(255, 255, 255, 0.04);
    --ap-surface-hover: rgba(255, 255, 255, 0.07);
    --ap-border:        #333333;
    --ap-divider:       #2d2d2d;
    --ap-heading:       rgba(255, 255, 255, 0.92);
    --ap-text:          rgba(255, 255, 255, 0.88);
    --ap-text-muted:    #b8b8b8;
    --ap-text-faint:    #6a6a6a;
    --ap-accent-soft:   rgba(255, 255, 255, 0.06);
    --ap-accent:        #d4d6db;
    --sb-indicator:     #d4d6db;
    --sb-flyout-bg:     #1b1b1d;
    --sb-flyout-border: #303033;
    --sb-flyout-text:   rgba(255, 255, 255, 0.92);
    --sb-flyout-muted:  #b7bcc5;
}

html[data-theme="dark"] body,
html[data-theme="dark"] body.admin-auth-page,
html[data-theme="dark"] .marketing-body,
html[data-theme="dark"] .container,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .page-shell,
html[data-theme="dark"] .content-area,
html[data-theme="dark"] .workspace-surface-shell,
html[data-theme="dark"] .invoices-shell,
html[data-theme="dark"] .quotations-shell,
html[data-theme="dark"] .payslip-shell,
html[data-theme="dark"] .employee-shell,
html[data-theme="dark"] .finance-library-shell,
html[data-theme="dark"] .cpf-shell,
html[data-theme="dark"] .hr-suite-shell,
html[data-theme="dark"] .finance-create-shell,
html[data-theme="dark"] .task-create-shell,
html[data-theme="dark"] .company-profile-shell,
html[data-theme="dark"] .payslip-create-shell {
    background: var(--statement-dark-page) !important;
    background-image: none !important;
    color: var(--grey-900) !important;
}

html[data-theme="dark"] a,
html[data-theme="dark"] a:hover,
html[data-theme="dark"] .form-hint-tooltip__bubble a {
    color: var(--primary-hover) !important;
}

html[data-theme="dark"] ::selection {
    background: rgba(190, 190, 190, 0.28) !important;
}

html[data-theme="dark"] :where(
    .dashboard-hero,
    .workspace-hero,
    .customer-hero,
    .auth-panel-brand,
    .auth-panel-brand-admin,
    .payroll-hero,
    .payslip-hero,
    .invp-hero,
    .invoice-create-hero,
    .qtp-toolbar,
    .workspace-section,
    .company-profile-section,
    .company-profile-hero,
    .settings-card,
    .settings-card__surface,
    .settings-action-card,
    .settings-link-card,
    .settings-access-actions,
    .pdf-theme-shell,
    .pdf-theme-option,
    .statement-panel,
    .statement-list-panel,
    .statement-detail-panel,
    .statement-customer-card,
    .statement-filters,
    .statement-metrics article,
    .statement-table-wrap,
    .arap-panel,
    .panel,
    .card,
    .surface-panel,
    .table-card,
    .form-card,
    .metric-card,
    .billing-card,
    .workspace-summary-card,
    .workspace-metric,
    .customer-metric,
    .customer-panel,
    .customer-list-item,
    .invoice-form-card,
    .invoice-section,
    .finance-library-shell,
    .invp-panel,
    .invp-metric-card,
    .invp-library-card,
    .invp-preview-shell,
    .invp-preview-stat,
    .invp-preview-empty,
    .qtp-card,
    .qtp-preview-shell,
    .qtp-empty,
    .sr-doc-card,
    .sr-doc-section,
    .sr-doc-confirm,
    .employee-detail-card,
    .employee-profile-grid .invp-preview-stat,
    .hr-suite-card,
    .hr-overview-metric,
    .hr-policy-preview,
    .task-preview-card,
    .task-detail-section,
    .task-commercial-card,
    .task-remarks-box,
    .task-card-select__label,
    .activity-item,
    .admin-module-card,
    .admin-subscription-grid article,
    .admin-check-row,
    .admin-risk-row,
    .admin-details summary,
    .admin-details pre,
    .admin-code-block,
    .admin-panel,
    .admin-form-card,
    .purchase-card,
    .purchase-panel,
    .story-panel,
    .security-panel,
    .cta-panel,
    .feature-card,
    .pricing-card,
    .showcase-card,
    .billing-status-card,
    .billing-status-note,
    .invp-card,
    .pay-stat-card,
    .pay-panel,
    .pay-detail-card,
    .pay-hero-card:not(.pay-hero-card-highlight),
    .employee-card,
    .employee-summary-card,
    .ui-card,
    .ui-panel,
    .ui-table-scroll,
    .ui-toggle-card,
    .ui-package-button,
    .modal,
    .dialog
) {
    background: var(--statement-dark-surface) !important;
    background-image: none !important;
    border-color: #333333 !important;
    box-shadow: none !important;
}

/* BUG FIX: .settings-access-block is a purely structural wrapper nested
   inside .workspace-section, which already gets the same translucent
   overlay above. Two "identical" rgba(255,255,255,X) overlays stacked on
   top of each other compound — the child paints on top of the parent's
   already-lightened pixels, not the raw page background — so this nested
   block visually read as its own separate "lighter" panel rather than part
   of the surrounding card. Kept transparent so it relies purely on the
   ancestor .workspace-section's surface. */
html[data-theme="dark"] .settings-access-block {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

html[data-theme="dark"] :where(
    .workspace-filter-bar,
    .workspace-filter-search,
    .invp-tabs,
    .brand-asset-choice,
    .empty-state,
    .invp-empty,
    .finance-source-empty,
    .finance-link-empty,
    .master-detail-preview,
    .master-detail-preview__pane
) {
    background: var(--statement-dark-soft) !important;
    background-image: none !important;
    border-color: #333333 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .admin-sidebar {
    --sb-bg: #171717 !important;
    --sb-surface: #1f1f1f !important;
    --sb-border: #303030 !important;
    --sb-text: rgba(255, 255, 255, 0.9) !important;
    --sb-muted: rgba(255, 255, 255, 0.62) !important;
    --sb-faint: rgba(255, 255, 255, 0.38) !important;
    --sb-icon: rgba(255, 255, 255, 0.6) !important;
    --sb-hover: #232323 !important;
    --sb-active: #252525 !important;
    --sb-active-strong: #2a2a2a !important;
    --sb-shadow: none !important;
    --sb-flyout-shadow: 0 24px 54px rgba(0, 0, 0, 0.38) !important;
    background: var(--statement-dark-surface) !important;
    background-image: none !important;
    border-color: #333333 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .sidebar-search-trigger,
html[data-theme="dark"] .toggle-btn,
html[data-theme="dark"] .sidebar--grouped .sidebar-group__toggle,
html[data-theme="dark"] .has-quick-action .quick-action {
    box-shadow: none !important;
}

html[data-theme="dark"] .sidebar-group__section-title,
html[data-theme="dark"] .sidebar--grouped .sidebar-group__label,
html[data-theme="dark"] .sidebar-search-trigger kbd {
    color: var(--sb-faint) !important;
}

html[data-theme="dark"] .sidebar-menu li > a:not(.quick-action):hover,
html[data-theme="dark"] .sidebar-menu li .sidebar-link:hover,
html[data-theme="dark"] .sidebar--grouped .sidebar-group__toggle:hover,
html[data-theme="dark"] .toggle-btn:hover,
html[data-theme="dark"] .sidebar-search-trigger:hover,
html[data-theme="dark"] .has-quick-action .quick-action:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border) !important;
}

html[data-theme="dark"] .sidebar-menu li.is-active > a:not(.quick-action),
html[data-theme="dark"] .sidebar-menu li.is-active .sidebar-link,
html[data-theme="dark"] .sidebar--grouped .sidebar-group.is-open .sidebar-group__toggle,
html[data-theme="dark"] .sidebar--grouped .sidebar-group.is-flyout-open .sidebar-group__toggle {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--sb-text) !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .sidebar--grouped.collapsed .sidebar-group:not(.sidebar-group--pinned) .sidebar-flyout__title {
    color: var(--sb-flyout-muted) !important;
}

html[data-theme="dark"] .sidebar--grouped.collapsed .sidebar-group:not(.sidebar-group--pinned) .sidebar-group__body .sidebar-menu li > a:not(.quick-action),
html[data-theme="dark"] .sidebar--grouped.collapsed .sidebar-group:not(.sidebar-group--pinned) .sidebar-group__body .sidebar-menu li .sidebar-link {
    color: var(--sb-flyout-muted) !important;
}

html[data-theme="dark"] .sidebar--grouped.collapsed .sidebar-group:not(.sidebar-group--pinned) .sidebar-group__body .sidebar-menu li > a:not(.quick-action):hover,
html[data-theme="dark"] .sidebar--grouped.collapsed .sidebar-group:not(.sidebar-group--pinned) .sidebar-group__body .sidebar-menu li .sidebar-link:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--sb-flyout-text) !important;
}

html[data-theme="dark"] .sidebar--grouped.collapsed .sidebar-group:not(.sidebar-group--pinned) .sidebar-group__body .sidebar-menu li.is-active > a:not(.quick-action),
html[data-theme="dark"] .sidebar--grouped.collapsed .sidebar-group:not(.sidebar-group--pinned) .sidebar-group__body .sidebar-menu li.is-active .sidebar-link {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--sb-flyout-text) !important;
}

html[data-theme="dark"] .workspace-topbar,
html[data-theme="dark"] .marketing-header {
    background: var(--statement-dark-surface) !important;
    background-image: none !important;
    border-color: #333333 !important;
}

/* Topbar action buttons: transparent so they use the topbar background */
html[data-theme="dark"] .workspace-topbar__primary-actions .invp-tabs {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .workspace-topbar__primary-actions .invp-tab {
    color: rgba(255, 255, 255, 0.5) !important;
}

html[data-theme="dark"] .workspace-topbar__primary-actions .invp-tab:hover {
    color: rgba(255, 255, 255, 0.82) !important;
    background: transparent !important;
}

html[data-theme="dark"] .workspace-topbar__primary-actions .invp-tab.is-active {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .workspace-topbar__primary-actions .btn-secondary {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.65) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .workspace-topbar__primary-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

html[data-theme="dark"] :where(
    .btn:not(.btn-danger),
    .btn-secondary,
    .btn-outline,
    .auth-submit,
    .auth-admin-link,
    .marketing-btn--secondary,
    .marketing-btn--ghost,
    .invp-create-btn,
    .invp-action-btn,
    .section-action,
    .customer-edit-chip,
    .finance-action-chip,
    .finance-action-lock,
    .theme-choice-chip,
    .settings-save-button,
    .workspace-topbar__link,
    .workspace-topbar__logout button,
    .theme-switcher__option[aria-pressed="true"]
) {
    background: var(--statement-dark-active) !important;
    background-image: none !important;
    border-color: #444444 !important;
    color: #f2f2f2 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] :where(
    .btn:not(.btn-danger):hover,
    .btn-secondary:hover,
    .btn-outline:hover,
    .auth-submit:hover,
    .auth-admin-link:hover,
    .marketing-btn--secondary:hover,
    .marketing-btn--ghost:hover,
    .invp-create-btn:hover,
    .invp-action-btn:hover,
    .customer-edit-chip:hover,
    .finance-action-chip:hover,
    .finance-action-lock:hover,
    .workspace-topbar__link:hover,
    .workspace-topbar__logout button:hover,
    .theme-switcher__option:hover
) {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #555555 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] :where(
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="datetime-local"],
    input[type="search"],
    input[type="color"],
    select,
    textarea
) {
    background: var(--statement-dark-control) !important;
    background-image: none !important;
    border-color: #3a3a3a !important;
    color: #f2f2f2 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] :where(input, select, textarea):focus,
html[data-theme="dark"] .enhanced-select__trigger:focus,
html[data-theme="dark"] .enhanced-select__trigger[aria-expanded="true"] {
    border-color: #6a6a6a !important;
    box-shadow: var(--focus-ring) !important;
}

html[data-theme="dark"] :where(
    .dashboard-kicker,
    .panel-kicker,
    .workspace-kicker,
    .invp-kicker,
    .invoice-kicker,
    .company-profile-kicker,
    .um-kicker,
    .hr-suite-kicker,
    .health-chip,
    .panel-pill,
    .status-pill,
    .task-status-chip,
    .task-link-chip,
    .activity-badge,
    .company-module-badge,
    .invp-count-badge,
    .invp-source-pill,
    .invp-source-badge,
    .invp-source-remote,
    .finance-source-badge,
    .finance-link-chip,
    .mini-chip,
    .module-pill,
    .admin-pill,
    .admin-pill--active,
    .admin-pill--inactive,
    .payslip-cpf-status-pill[data-state="info"],
    .payslip-cpf-status-pill[data-state="pending"],
    .statement-currency-pill,
    .arap-chip
) {
    background: var(--statement-dark-soft) !important;
    background-image: none !important;
    border-color: #3a3a3a !important;
    color: #d8d8d8 !important;
}

/* .status-scheduled is info/blue (matching its light appearance and the shared
   status semantics); needs (0,2,0)!important to beat the grey base-pill group
   above, exactly like .status-completed/-cancelled/-tbc do in theme-dark.css. */
html[data-theme="dark"] .status-scheduled {
    background: rgba(59, 130, 246, 0.16) !important;
    border-color: rgba(96, 165, 250, 0.34) !important;
    color: #bcd6ff !important;
}

html[data-theme="dark"] :where(
    .progress-bar,
    .task-card-select__label input:checked + .task-card-select__box,
    .customer-type-toggle__option input:checked + span,
    .mode-block label:has(input:checked),
    .invp-tab.is-active,
    .pdf-theme-preview__bar,
    .admin-directory-card:hover,
    .admin-directory-card:focus-visible,
    .admin-directory-card.is-selected
) {
    background: var(--statement-dark-active) !important;
    background-image: none !important;
    border-color: #6a6a6a !important;
    color: #ffffff !important;
}

/* BUG FIX: when most/all cards in a feature-toggle grid are enabled at
   once, a full translucent-wash background on every enabled card reads as
   one undifferentiated light rectangle instead of a set of distinct
   toggles. A left-edge accent border distinguishes "enabled" without
   raising the whole card's background. */
html[data-theme="dark"] .ui-package-button.is-active,
html[data-theme="dark"] .ui-toggle-card.is-enabled {
    background: var(--statement-dark-surface) !important;
    background-image: none !important;
    border-color: #3a3a3a !important;
    border-left: 3px solid var(--blue-500) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] :where(
    .table th,
    .data-table th,
    .admin-table th,
    .finance-table th,
    .documents-table th,
    .statement-table th,
    .arap-table th,
    .hr-table thead th
) {
    /* Unified graphite header (matches .cp-data-table + the enterprise default
       dark header) so all listing tables share one look in dark mode. */
    background: rgba(255, 255, 255, 0.06) !important;
    background-image: none !important;
    color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="dark"] :where(
    .table tbody tr:hover td,
    .data-table tbody tr:hover td,
    .admin-table tbody tr:hover td,
    .finance-table tbody tr:hover td,
    .documents-table tbody tr:hover td,
    .statement-table tbody tr:hover td,
    .arap-table tbody tr:hover td,
    .hr-table tbody tr:hover td,
    .invp-library-card:hover,
    .activity-item:hover,
    .task-row:hover,
    .quote-row:hover,
    .customer-list-item:hover,
    .display-name-suggestions__option:hover,
    .display-name-suggestions__option:focus
) {
    background: var(--statement-dark-active) !important;
    background-image: none !important;
}

html[data-theme="dark"] :where(
    .info-message,
    .inline-notice,
    .form-hint-tooltip__icon,
    .form-hint-tooltip__bubble,
    .auth-message
) {
    background: var(--statement-dark-soft) !important;
    background-image: none !important;
    border-color: #3a3a3a !important;
    color: #d8d8d8 !important;
}

html[data-theme="dark"] .workspace-summary-note,
html[data-theme="dark"] .invp-metric-note {
    display: inline;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--grey-700) !important;
}

html[data-theme="dark"] :where(
    .hero-copy,
    .hero-card,
    .purchase-panel,
    .pricing-card--featured,
    .security-panel,
    .cta-panel,
    .hero-trust div,
    .purchase-points div,
    .purchase-preview div,
    .purchase-plan-card,
    .security-list article,
    .showcase-card__placeholder
) {
    background: var(--statement-dark-surface) !important;
    background-image: none !important;
    border-color: #333333 !important;
}

html[data-theme="dark"] .admin-danger-zone {
    background: rgba(244, 63, 94, 0.12) !important;
    border-color: rgba(244, 63, 94, 0.24) !important;
}

html[data-theme="dark"] .customer-form-panel .panel-head .btn-secondary,
html[data-theme="dark"] .customer-form-panel .panel-head .btn-secondary:hover,
html[data-theme="dark"] .customer-form-actions__cancel,
html[data-theme="dark"] .customer-form-actions__cancel:hover,
html[data-theme="dark"] .customer-type-toggle__option input:checked + span,
html[data-theme="dark"] .brand-asset-card.is-default .brand-asset-choice,
html[data-theme="dark"] .settings-theme-switcher .theme-switcher__option:hover,
html[data-theme="dark"] .settings-theme-switcher .theme-switcher__option[aria-pressed="true"],
html[data-theme="dark"] .settings-theme-switcher__preview,
html[data-theme="dark"] .finance-table tbody tr:hover,
html[data-theme="dark"] .currency-checkbox {
    background: var(--statement-dark-active) !important;
    background-image: none !important;
    border-color: #555555 !important;
    color: #f2f2f2 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .display-name-suggestions,
html[data-theme="dark"] .display-name-suggestions__option:hover,
html[data-theme="dark"] .display-name-suggestions__option:focus {
    background: var(--statement-dark-soft) !important;
    background-image: none !important;
    border-color: #3a3a3a !important;
    color: #f2f2f2 !important;
    box-shadow: none !important;
}

@media (max-width: 960px) {
    html[data-theme="dark"] .workspace-topbar__company {
        display: none;
    }
}

/* ── cp-* company workspace shell ────────────────────────────────── */

html[data-theme="dark"] .cp-workspace {
    --cp-heading:    #93c5fd;
    --cp-text:       rgba(255, 255, 255, 0.88);
    --cp-text-muted: rgba(255, 255, 255, 0.55);
    --cp-text-faint: rgba(255, 255, 255, 0.4);
    --cp-divider:    #2d2d2d;
    --cp-border:     #333333;
    --cp-surface:    #1a1a1a;
    --cp-surface-soft: #151515;
    --cp-surface-hover: #202020;
    background: var(--statement-dark-surface) !important;
    background-image: none !important;
    border-color: #333333 !important;
}

html[data-theme="dark"] .cp-workspace-metrics,
html[data-theme="dark"] .cp-workspace-foot {
    background: var(--statement-dark-soft) !important;
    background-image: none !important;
    border-color: #333333 !important;
}

html[data-theme="dark"] .cp-ws-col + .cp-ws-col,
html[data-theme="dark"] .cp-ws-section,
html[data-theme="dark"] .cp-ws-metric,
html[data-theme="dark"] .cp-workspace-body {
    border-color: #2d2d2d !important;
}

html[data-theme="dark"] .cp-ws-metric-value {
    color: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="dark"] .cp-ws-metric-label,
html[data-theme="dark"] .cp-ws-metric-note,
html[data-theme="dark"] .cp-ws-section-label,
html[data-theme="dark"] .cp-ws-eyebrow {
    color: #6a6a6a !important;
}

html[data-theme="dark"] .cp-ws-section-title,
html[data-theme="dark"] .cp-ws-name {
    color: var(--cp-heading) !important;
}

html[data-theme="dark"] .cp-ws-chip {
    background: rgba(255, 255, 255, 0.06) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #b8b8b8 !important;
}

html[data-theme="dark"] .cp-ws-stat {
    background: var(--statement-dark-soft) !important;
    background-image: none !important;
    border-color: #2d2d2d !important;
}

html[data-theme="dark"] .cp-ws-stat-value {
    color: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="dark"] .cp-ws-stat-label {
    color: #6a6a6a !important;
}

html[data-theme="dark"] .cp-ws-progress {
    background: #2d2d2d !important;
}

html[data-theme="dark"] .cp-ws-progress .progress-bar {
    background: #b8bcc4 !important;
    background-image: none !important;
}

html[data-theme="dark"] .cp-ws-empty {
    background: var(--statement-dark-soft) !important;
    background-image: none !important;
    border-color: #333333 !important;
    color: #6a6a6a !important;
}

html[data-theme="dark"] .cp-ws-alert {
    background: var(--statement-dark-soft) !important;
    background-image: none !important;
    border-color: #333333 !important;
    color: #b8b8b8 !important;
}

html[data-theme="dark"] :where(
    .cp-ws-stat,
    .cp-ws-empty
) {
    background: var(--statement-dark-soft) !important;
    background-image: none !important;
    border-color: #2d2d2d !important;
}

/* ── Flat rows: transparent bg, dark dividers ── */
html[data-theme="dark"] .cp-workspace .activity-item,
html[data-theme="dark"] .cp-workspace .task-row,
html[data-theme="dark"] .cp-workspace .quote-row {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    border-bottom-color: #2d2d2d !important;
    box-shadow: none !important;
}

/* last-child has no border */
html[data-theme="dark"] .cp-workspace .activity-item:last-child,
html[data-theme="dark"] .cp-workspace .task-row:last-child,
html[data-theme="dark"] .cp-workspace .quote-row:last-child {
    border-bottom-color: transparent !important;
}

/* Text inside flat rows */
html[data-theme="dark"] .cp-workspace .activity-copy strong,
html[data-theme="dark"] .cp-workspace .task-row strong,
html[data-theme="dark"] .cp-workspace .quote-row strong {
    color: rgba(255, 255, 255, 0.88) !important;
}

html[data-theme="dark"] .cp-workspace .activity-copy span,
html[data-theme="dark"] .cp-workspace .task-row > div:first-child > span,
html[data-theme="dark"] .cp-workspace .quote-row > div:first-child > span,
html[data-theme="dark"] .cp-workspace .activity-item time {
    color: #6a6a6a !important;
}

html[data-theme="dark"] .cp-workspace .quote-meta b {
    color: #8aadff !important;
}

/* Activity badge in dark mode */
html[data-theme="dark"] .cp-workspace .activity-badge {
    background: rgba(255, 255, 255, 0.07) !important;
    background-image: none !important;
    color: #8a8fa8 !important;
}

/* Filter bar: flat/transparent in dark mode (override generic .workspace-filter-bar rule above) */
html[data-theme="dark"] .cp-workspace .workspace-filter-bar {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    border-bottom-color: #2d2d2d !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .cp-workspace .workspace-filter-search {
    background: var(--statement-dark-soft) !important;
    background-image: none !important;
    border-color: #2d2d2d !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .cp-workspace .workspace-filter-search input {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Quick-access footer links — cp-bg token is hardcoded white, fix for dark */
html[data-theme="dark"] .cp-workspace .quick-access-link {
    background: var(--statement-dark-soft) !important;
    background-image: none !important;
    border-color: #2d2d2d !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

html[data-theme="dark"] .cp-workspace .quick-access-link:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: #3a3a3a !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* -----------------------------------------------------------------
   cp-ws-tabs -- workspace tab strip (Active / Deleted)
   ----------------------------------------------------------------- */
html[data-theme="dark"] .cp-ws-tabs {
    background: var(--statement-dark-soft) !important;
    border-bottom-color: #2d2d2d !important;
}

html[data-theme="dark"] .cp-ws-tab {
    color: #6a6a6a !important;
}

html[data-theme="dark"] .cp-ws-tab:hover {
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none !important;
}

html[data-theme="dark"] .cp-ws-tab.is-active {
    color: #8aadff !important;
    border-bottom-color: #8aadff !important;
}

/* -----------------------------------------------------------------
   cp-ws-alert--error in dark mode
   ----------------------------------------------------------------- */
html[data-theme="dark"] .cp-ws-alert--error {
    background: rgba(220, 38, 38, 0.12) !important;
    background-image: none !important;
    border-bottom-color: rgba(220, 38, 38, 0.22) !important;
    color: #fca5a5 !important;
}

/* -----------------------------------------------------------------
   cp-form-note dark mode
   ----------------------------------------------------------------- */
html[data-theme="dark"] .cp-form-note {
    background: var(--statement-dark-soft) !important;
    color: var(--dark-text-secondary) !important;
}

html[data-theme="dark"] .cp-form-note--info {
    background: rgba(31, 111, 255, 0.1) !important;
    border-color: rgba(31, 111, 255, 0.2) !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] .cp-form-note--warn {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
}

/* -----------------------------------------------------------------
   Invoice library cards -- flat rows in dark mode
   ----------------------------------------------------------------- */
html[data-theme="dark"] .cp-workspace .invp-library-card {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    border-bottom-color: #2d2d2d !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

html[data-theme="dark"] .cp-workspace .invp-library-card:last-of-type {
    border-bottom-color: transparent !important;
}

html[data-theme="dark"] .cp-workspace .invp-library-card.is-active {
    background: rgba(138, 173, 255, 0.08) !important;
    background-image: none !important;
}

/* invp-panel inside workspace -- no card in dark */
html[data-theme="dark"] .cp-workspace .invp-panel {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Flat preview stat grid in dark mode */
html[data-theme="dark"] .cp-workspace .invp-preview-meta {
    border-bottom-color: #2d2d2d !important;
}

html[data-theme="dark"] .cp-workspace .invp-preview-stat {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    border-right-color: #2d2d2d !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .cp-workspace .invp-preview-stat:last-child {
    border-right-color: transparent !important;
}

html[data-theme="dark"] .cp-workspace .invp-preview-stat strong {
    color: rgba(255, 255, 255, 0.85) !important;
}

html[data-theme="dark"] .cp-workspace .invp-preview-stat span {
    color: #6a6a6a !important;
}

/* Employee profile stat strip in dark: border-bottom uses divider colour */
html[data-theme="dark"] .cp-workspace .employee-profile-grid {
    border-bottom-color: #2d2d2d !important;
}

/* Flat tone cells: the value text carries the tone colour; labels/notes stay
   muted like every other stat cell. Specificity (0,5,2) beats the general
   strong rule above (0,3,2). */
html[data-theme="dark"] .cp-workspace .employee-profile-grid .invp-preview-stat[data-tone="warning"] > strong {
    color: #f8cf6a !important;
}
html[data-theme="dark"] .cp-workspace .employee-profile-grid .invp-preview-stat[data-tone="success"] > strong {
    color: #6ee7b7 !important;
}
html[data-theme="dark"] .cp-workspace .employee-profile-grid .invp-preview-stat[data-tone="info"] > strong {
    color: var(--cp-heading) !important;
}

/* Employee detail sections: override the :where() dark card rule */
html[data-theme="dark"] .cp-workspace .employee-detail-card {
    background: transparent !important;
    background-image: none !important;
    border-color: #2d2d2d !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .cp-workspace .employee-detail-card .pay-detail-list > div {
    border-top-color: #2d2d2d !important;
}

/* Task management: override :where() card backgrounds on flat elements */
html[data-theme="dark"] .cp-workspace .task-preview-card,
html[data-theme="dark"] .cp-workspace .task-detail-section,
html[data-theme="dark"] .cp-workspace .task-commercial-card,
html[data-theme="dark"] .cp-workspace .task-remarks-box {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Restore the structural dividers that use var(--cp-divider) */
html[data-theme="dark"] .cp-workspace .task-preview-card {
    border-right-color: #2d2d2d !important;
}

html[data-theme="dark"] .cp-workspace .task-preview-card:last-child {
    border-right-color: transparent !important;
}

html[data-theme="dark"] .cp-workspace .task-detail-sections > * {
    border-bottom-color: #2d2d2d !important;
}

html[data-theme="dark"] .cp-workspace .task-detail-sections > *:last-child {
    border-bottom-color: transparent !important;
}

html[data-theme="dark"] .cp-workspace .task-detail-row .task-detail-section {
    border-right-color: #2d2d2d !important;
    border-bottom-color: transparent !important;
}

html[data-theme="dark"] .cp-workspace .task-detail-row .task-detail-section:last-child {
    border-right-color: transparent !important;
}

html[data-theme="dark"] .cp-workspace .task-detail-grid > div {
    border-top-color: #2d2d2d !important;
}

html[data-theme="dark"] .cp-workspace .task-detail-grid > div:first-child,
html[data-theme="dark"] .cp-workspace .task-detail-grid > div:nth-child(2) {
    border-top-color: transparent !important;
}

/* h3 section headings inside task detail: must use cp-heading token, not the generic white override */
html[data-theme="dark"] .cp-workspace .task-detail-section h3 {
    color: var(--cp-heading) !important;
}

/* All h2 headings inside .cp-workspace use --cp-heading (accent blue) in dark mode.
   html[data-theme="dark"] h2 is specificity (0,1,2); this rule is (0,2,2) with !important. */
html[data-theme="dark"] .cp-workspace h2 {
    color: var(--cp-heading) !important;
}

/* HR suite: flatten card and metric backgrounds that bleed white from :where() base rules */
html[data-theme="dark"] .cp-workspace .hr-suite-card,
html[data-theme="dark"] .cp-workspace .hr-overview-metric,
html[data-theme="dark"] .cp-workspace .hr-policy-preview {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* -----------------------------------------------------------------
   customer_data.php — semantic status chips and secret field
   ----------------------------------------------------------------- */
html[data-theme="dark"] .customer-data-type-chip,
html[data-theme="dark"] .customer-data-status {
    color: var(--cp-text-muted) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .customer-data-status--active {
    color: #86efac !important;
    background: rgba(74, 222, 128, 0.14) !important;
}

html[data-theme="dark"] .customer-data-status--review {
    color: #fcd34d !important;
    background: rgba(251, 191, 36, 0.14) !important;
}

html[data-theme="dark"] .customer-data-secret-field,
html[data-theme="dark"] .customer-data-secret-reveal,
html[data-theme="dark"] .customer-data-secret-pill {
    border-color: rgba(168, 139, 250, 0.2) !important;
    background: rgba(168, 139, 250, 0.1) !important;
    color: #c4b5fd !important;
}

html[data-theme="dark"] .customer-data-secret-reveal code {
    background: rgba(15, 23, 42, 0.9) !important;
    border-color: rgba(168, 139, 250, 0.2) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* -----------------------------------------------------------------
   add_customer.php — country autocomplete list
   ----------------------------------------------------------------- */
html[data-theme="dark"] .country-list {
    background: var(--statement-dark-soft) !important;
    background-image: none !important;
    border-color: #3a3a3a !important;
    color: rgba(255, 255, 255, 0.85) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .country-list li:hover {
    background: var(--statement-dark-active) !important;
}

/* -----------------------------------------------------------------
   customer_form_links.php — status badges
   ----------------------------------------------------------------- */
html[data-theme="dark"] .customer-form-status--active {
    background: rgba(34, 211, 238, 0.14) !important;
    color: #67e8f9 !important;
}

html[data-theme="dark"] .customer-form-status--completed {
    background: rgba(74, 222, 128, 0.14) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .customer-form-status--expired,
html[data-theme="dark"] .customer-form-status--revoked {
    background: rgba(148, 163, 184, 0.16) !important;
    color: #cbd5e1 !important;
}

/* -----------------------------------------------------------------
   settings.css — settings hub panels + feature access panel
   ----------------------------------------------------------------- */
html[data-theme="dark"] .stg-logo {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .stg-logo.has-logo {
    background: rgba(255, 255, 255, 0.97) !important;
}

html[data-theme="dark"] .settings-access-block,
html[data-theme="dark"] .settings-access-actions {
    border-color: var(--border) !important;
}

/* -----------------------------------------------------------------
   company_profile.php — brand asset edit button and choice
   ----------------------------------------------------------------- */
html[data-theme="dark"] .brand-asset-card__edit {
    background: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .brand-asset-card__edit:hover {
    background: rgba(96, 165, 250, 0.18) !important;
}

html[data-theme="dark"] .brand-asset-card__edit-icon {
    color: #ffffff !important;
}

html[data-theme="dark"] .brand-asset-card {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .brand-asset-card.is-default,
html[data-theme="dark"] .brand-asset-card.has-pending-change {
    border-color: rgba(31, 111, 255, 0.35) !important;
}

html[data-theme="dark"] .brand-asset-choice {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--cp-text-muted) !important;
}

html[data-theme="dark"] .brand-asset-card.is-default .brand-asset-choice {
    background: rgba(79, 140, 255, 0.12) !important;
    border-color: rgba(79, 140, 255, 0.3) !important;
}

/* -----------------------------------------------------------------
   dynamic_option_input — + button dark mode
   ----------------------------------------------------------------- */
html[data-theme="dark"] .dynamic-option-add {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgb(51, 51, 51) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

/* -----------------------------------------------------------------
   add_customer — country-list panel + enhanced-select options
   ----------------------------------------------------------------- */
html[data-theme="dark"] .country-list {
    background: #1e2027 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

html[data-theme="dark"] .country-list li:hover {
    background: rgba(79, 140, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Display name suggestion panel */
html[data-theme="dark"] .display-name-suggestions {
    background: #1e2027 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .display-name-suggestions__option {
    color: rgba(255, 255, 255, 0.92) !important;
}

html[data-theme="dark"] .display-name-suggestions__option:hover,
html[data-theme="dark"] .display-name-suggestions__option:focus {
    background: rgba(79, 140, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Enhanced-select option hover — primary-light is near-transparent in dark mode */
html[data-theme="dark"] .enhanced-select__option:hover,
html[data-theme="dark"] .enhanced-select__option.is-selected {
    background: rgba(79, 140, 255, 0.14) !important;
    border-color: rgba(79, 140, 255, 0.22) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

/* -----------------------------------------------------------------
   Universal Search overlay -- token redefinition.
   Redefines --us-* tokens on .universal-search so every child rule
   that references a --us-* variable automatically gets the dark value.
   No per-child selector needed.
   ----------------------------------------------------------------- */
html[data-theme="dark"] .universal-search {
    --us-bg:          #1a1a1a !important;
    --us-soft:        #232323 !important;
    --us-border:      #333333 !important;
    --us-divider:     #2d2d2d !important;
    --us-text:        rgba(255, 255, 255, 0.88) !important;
    --us-muted:       rgba(255, 255, 255, 0.55) !important;
    --us-faint:       rgba(255, 255, 255, 0.4) !important;
    --us-accent:      #4f8cff !important;
    --us-accent-soft: rgba(79, 140, 255, 0.1) !important;
    --us-heading:     #93c5fd !important;
}

html[data-theme="dark"] .universal-search__status.is-error {
    color: #f87171 !important;
}

/* -----------------------------------------------------------------
   pdf_themes.php — selected card tint + preview border
   ----------------------------------------------------------------- */
html[data-theme="dark"] .pdf-theme-card.is-selected {
    background: color-mix(in srgb, var(--pdf-theme-surface) 14%, rgba(255, 255, 255, 0.04)) !important;
}

html[data-theme="dark"] .pdf-theme-card__preview {
    border-color: var(--border) !important;
}

/* -----------------------------------------------------------------
   ap-* admin portal workspace shell
   Level 1 — token redefinition on .ap-workspace so any child rule
   using var(--ap-*) automatically gets the dark value. Per-element
   !important overrides are only needed for hardcoded colours.
   ----------------------------------------------------------------- */
html[data-theme="dark"] .ap-workspace {
    --ap-heading:    rgba(255, 255, 255, 0.92);
    --ap-text:       rgba(255, 255, 255, 0.88);
    --ap-text-muted: rgba(255, 255, 255, 0.55);
    --ap-text-faint: rgba(255, 255, 255, 0.4);
    --ap-divider:    #2d2d2d;
    background: var(--ap-bg) !important;
    background-image: none !important;
    border-color: #333333 !important;
}

html[data-theme="dark"] .ap-workspace .admin-metric-card {
    background: transparent !important;
    border-color: #2d2d2d !important;
}

html[data-theme="dark"] .ap-workspace .admin-metric-card span {
    color: #6a6a6a !important;
}

html[data-theme="dark"] .ap-workspace .admin-metric-card strong {
    color: rgba(255, 255, 255, 0.88) !important;
}

html[data-theme="dark"] .ap-workspace .admin-action-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: #333333 !important;
}

html[data-theme="dark"] .ap-workspace .admin-panel-head {
    border-bottom-color: #2d2d2d !important;
}

html[data-theme="dark"] .ap-workspace .admin-manage-grid > .admin-panel + .admin-panel {
    border-left-color: #2d2d2d !important;
}

html[data-theme="dark"] .ap-workspace .admin-security-layout > .admin-panel {
    border-right-color: #2d2d2d !important;
}

html[data-theme="dark"] .ap-workspace .admin-form-section + .admin-form-section {
    border-top-color: #2d2d2d !important;
}

html[data-theme="dark"] .ap-workspace .admin-form-actions {
    border-top-color: #2d2d2d !important;
}

html[data-theme="dark"] .ap-workspace .workspace-filter-bar {
    border-bottom-color: #2d2d2d !important;
}

html[data-theme="dark"] .ap-workspace .admin-count {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #d4d6db !important;
}

html[data-theme="dark"] .ap-ws-chip {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #d4d6db !important;
}

html[data-theme="dark"] .ap-ws-alert {
    background: var(--statement-dark-soft) !important;
    background-image: none !important;
    border-bottom-color: #333333 !important;
    color: #b8b8b8 !important;
}

html[data-theme="dark"] .ap-ws-alert--error {
    background: rgba(220, 38, 38, 0.12) !important;
    background-image: none !important;
    border-bottom-color: rgba(220, 38, 38, 0.22) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .ap-ws-section {
    border-bottom-color: #2d2d2d !important;
}

html[data-theme="dark"] .ap-ws-chip {
    background: rgba(255, 255, 255, 0.06) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #b8b8b8 !important;
}

html[data-theme="dark"] .ap-ws-empty {
    background: var(--statement-dark-soft) !important;
    background-image: none !important;
    border-color: #333333 !important;
    color: #6a6a6a !important;
}

/* ap-form-note dark variants */
html[data-theme="dark"] .ap-form-note {
    background: var(--statement-dark-soft) !important;
    background-image: none !important;
    border-color: #333333 !important;
    color: #b8b8b8 !important;
}

html[data-theme="dark"] .ap-form-note--info {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #d4d6db !important;
}

html[data-theme="dark"] .ap-form-note--success {
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.22) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .ap-form-note--error {
    background: rgba(220, 38, 38, 0.12) !important;
    border-color: rgba(220, 38, 38, 0.22) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .ap-form-note--warn {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
}

html[data-theme="dark"] .admin-check-card {
    background: var(--statement-dark-soft) !important;
    background-image: none !important;
    border-color: #333333 !important;
}

html[data-theme="dark"] .admin-check-card span {
    color: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="dark"] .admin-check-card:hover,
html[data-theme="dark"] .admin-check-card.is-selected,
html[data-theme="dark"] .admin-check-card:has(input:checked) {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

html[data-theme="dark"] .admin-chip {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #d4d6db !important;
}

/* admin-data-table header rows — unified graphite (matches all listing tables) */
html[data-theme="dark"] .admin-data-table th {
    background: rgba(255, 255, 255, 0.06) !important;
    background-image: none !important;
}

html[data-theme="dark"] .admin-data-table td {
    border-bottom-color: #2d2d2d !important;
    color: #b8b8b8 !important;
}

/* admin-metric-strip-bg used by admin-data-table th */
html[data-theme="dark"] {
    --ap-metric-strip-bg: rgba(255, 255, 255, 0.04);
}

/* ap-workspace-metrics strip */
html[data-theme="dark"] .ap-workspace-metrics,
html[data-theme="dark"] .ap-workspace-foot {
    background: var(--statement-dark-soft) !important;
    background-image: none !important;
    border-color: #2d2d2d !important;
}

html[data-theme="dark"] .ap-ws-metric {
    border-right-color: #2d2d2d !important;
}

html[data-theme="dark"] .ap-ws-metric-value {
    color: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="dark"] .ap-ws-metric-label,
html[data-theme="dark"] .ap-ws-metric-note {
    color: #6a6a6a !important;
}

html[data-theme="dark"] .ap-ws-metric[data-metric-warn] .ap-ws-metric-value {
    color: #fcd34d !important;
}

/* ap-ws-tabs */
html[data-theme="dark"] .ap-ws-tabs {
    background: var(--statement-dark-soft) !important;
    border-bottom-color: #2d2d2d !important;
}

html[data-theme="dark"] .ap-ws-tab {
    color: #6a6a6a !important;
}

html[data-theme="dark"] .ap-ws-tab:hover {
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none !important;
}

html[data-theme="dark"] .ap-ws-tab.is-active {
    color: var(--ap-accent) !important;
    border-bottom-color: var(--ap-accent) !important;
}

/* ap-workspace-body column divider */
html[data-theme="dark"] .ap-ws-col + .ap-ws-col {
    border-left-color: #2d2d2d !important;
}

/* ap-ws-stat-grid */
html[data-theme="dark"] .ap-ws-stat {
    background: var(--statement-dark-soft) !important;
    background-image: none !important;
    border-color: #2d2d2d !important;
}

html[data-theme="dark"] .ap-ws-stat-value {
    color: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="dark"] .ap-ws-stat-label {
    color: #6a6a6a !important;
}

/* ap-ws-progress */
html[data-theme="dark"] .ap-ws-progress {
    background: #2d2d2d !important;
}

html[data-theme="dark"] .ap-ws-progress .progress-bar {
    background: #b8bcc4 !important;
    background-image: none !important;
}

/* admin-data-table: header text unified with the other listing tables + hover */
html[data-theme="dark"] .admin-data-table th {
    color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="dark"] .admin-data-table tbody tr:hover td {
    background: var(--statement-dark-active) !important;
    background-image: none !important;
}

/* cp-workspace form containers: collapse stacked rgba surfaces to match workspace bg */
html[data-theme="dark"] .cp-workspace .invoice-form-card,
html[data-theme="dark"] .cp-workspace .invoice-section,
html[data-theme="dark"] .cp-workspace .document-total-card,
html[data-theme="dark"] .cp-workspace .finance-entry-card,
html[data-theme="dark"] .cp-workspace .task-commercial-card {
    background: transparent !important;
    background-image: none !important;
    border-color: var(--cp-divider) !important;
}

/* cp-workspace invoice/quotation table: transparent flat rows, no dark card surface */
html[data-theme="dark"] .cp-workspace #invoiceTable,
html[data-theme="dark"] .cp-workspace #quotationTable {
    background: transparent !important;
    border: none !important;
}

html[data-theme="dark"] .cp-workspace #invoiceTable thead th,
html[data-theme="dark"] .cp-workspace #quotationTable thead th {
    background: transparent !important;
    color: var(--cp-heading) !important;
    border-color: var(--cp-divider) !important;
}

html[data-theme="dark"] .cp-workspace #invoiceTable td,
html[data-theme="dark"] .cp-workspace #quotationTable td {
    background: transparent !important;
    border-color: var(--cp-divider) !important;
    color: var(--cp-text) !important;
}

html[data-theme="dark"] .cp-workspace #invoiceTable tbody tr:nth-child(even) td,
html[data-theme="dark"] .cp-workspace #quotationTable tbody tr:nth-child(even) td {
    background: transparent !important;
}

/* Statutory / payroll pages (cpf_configuration.css) - brighten status colours
   on dark backgrounds so checklist and review flags stay legible. */
html[data-theme="dark"] .cp-workspace .cpf-status-ok {
    color: #4ade80 !important;
}

html[data-theme="dark"] .cp-workspace .cpf-status-bad,
html[data-theme="dark"] .cp-workspace .cpf-flag {
    color: #f87171 !important;
}

html[data-theme="dark"] .cp-workspace .cpf-status-warn {
    color: #f4c56b !important;
}

html[data-theme="dark"] .cp-workspace .cpf-readiness-icon--ok,
html[data-theme="dark"] .cp-workspace .cpf-readiness-badge--ok,
html[data-theme="dark"] .cp-workspace .cpf-ready-summary--ok {
    background: rgba(74, 222, 128, 0.14) !important;
    color: #4ade80 !important;
}

html[data-theme="dark"] .cp-workspace .cpf-readiness-icon--bad,
html[data-theme="dark"] .cp-workspace .cpf-readiness-badge--bad {
    background: rgba(248, 113, 113, 0.14) !important;
    color: #f87171 !important;
}

html[data-theme="dark"] .cp-workspace .cpf-ready-summary--warn {
    background: rgba(245, 197, 107, 0.16) !important;
    color: #f4c56b !important;
}

/* Dark mode stays graphite - neutralise the light-mode navy/white table
   (global cp-data-table component). */
html[data-theme="dark"] .cp-data-table-wrap,
html[data-theme="dark"] .cp-data-table thead th,
html[data-theme="dark"] .cp-data-table tbody td {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .cp-data-table thead th {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border-right-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .cp-data-table tbody td {
    background: transparent !important;
}

html[data-theme="dark"] .cp-data-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.03) !important;
}

html[data-theme="dark"] .cp-data-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.06) !important;
}