/*
 * 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;
}

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,
    .admin-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,
    .pdf-theme-card,
    .pdf-theme-a4-stage,
    .statement-panel,
    .statement-list-panel,
    .statement-detail-panel,
    .statement-customer-card,
    .statement-filters,
    .statement-metrics article,
    .statement-table-wrap,
    .arap-panel,
    .arap-action-card,
    .arap-aging-card,
    .arap-empty,
    .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-entry-card,
    .finance-currency-card,
    .finance-export-actions,
    .finance-table-wrap,
    .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,
    .bank-account-card,
    .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,
    .faq-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),
    .payslip-breakdown-card,
    .employee-card,
    .employee-summary-card,
    .finance-ledger-panel,
    .ui-card,
    .ui-panel,
    .ui-table-scroll,
    .ui-toggle-card,
    .ui-package-button,
    .modal,
    .dialog,
    .page-toolbar
) {
    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 {
    background: var(--statement-dark-surface) !important;
    background-image: none !important;
    border-color: #333333 !important;
    box-shadow: none !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;
}

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;
}

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
) {
    background: var(--statement-dark-soft) !important;
    background-image: none !important;
    color: #f2f2f2 !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;
    }
}