/*
 * Dark theme — single source of truth.
 *
 * Strategy: override all design tokens in :root at the top so that
 * component CSS picks them up automatically. Only add element-specific
 * overrides for things that can't be expressed through tokens (e.g.
 * gradient backgrounds, hardcoded hex in light-mode rules).
 *
 * Keep token overrides here. Final, small cross-cutting dark-theme
 * adjustments can live in theme-dark-overrides.css when needed.
 */

html[data-theme="dark"] {
    color-scheme: dark;

    /* ── Brand ── */
    /* BUG FIX: --primary was set to #b8bcc4 (grey) which destroyed brand
       identity in dark mode — buttons, links, and focus rings all went grey.
       Replaced with a lightened blue that reads well on dark surfaces. */
    --primary:        #6fa3ff;
    --primary-hover:  #91baff;
    --primary-strong: #c8dcff;
    --primary-light:  rgba(111, 163, 255, 0.14);

    /* ── Blue ramp ── */
    /* BUG FIX: ramp was replaced with neutral greys, destroying all blue
       semantic meaning (info states, brand elements). Restored as a proper
       dark-adapted blue ramp (light stops become dark, dark stops become light). */
    --blue-900: #cfe3ff;
    --blue-800: #a8c8ff;
    --blue-700: #7aaaff;
    --blue-600: #6fa3ff;
    --blue-500: #5585e0;
    --blue-400: #3a64b8;
    --blue-300: #234591;
    --blue-200: #152e6b;
    --blue-100: #0d1e4a;
    --blue-sky: #7dd8f8;

    /* ── Grey ramp ── */
    --grey-900: rgba(255, 255, 255, 0.9);
    --grey-800: #d8d8d8;
    --grey-700: #b3b3b3;
    --grey-600: #8a8a8a;
    --grey-500: #777777;
    --grey-400: #666666;
    --grey-300: #444444;
    --grey-200: #2d2d2d;
    --grey-100: #1f1f1f;

    /* ── Semantic ── */
    --ink-900:    rgba(255, 255, 255, 0.9);
    --success:    #6ee7b7;
    --success-bg: rgba(16, 185, 129, 0.15);
    --danger:     #ff8da0;
    --danger-bg:  rgba(244, 63, 94, 0.14);
    --warning:    #f8cf6a;
    --warning-bg: rgba(245, 158, 11, 0.16);

    /* ── Surfaces ── */
    --surface:       #222222;
    --surface-soft:  #1e1e1e;
    --border:        #333333;
    /* BUG FIX: --border-strong was a flat grey (#4a4a4a) losing the blue tint
       that signals selected/active states. Restored as a blue-tinted value. */
    --border-strong: rgba(111, 163, 255, 0.38);

    /* ── Elevation ── */
    --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 16px 36px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 22px 52px rgba(0, 0, 0, 0.42);

    /* ── Marketing tokens ── */
    --marketing-navy:        #f3f4f6;
    --marketing-ink:         #c7c9ce;
    --marketing-cyan:        #d4d6db;
    --marketing-gold:        #f8cf6a;
    --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);
    --marketing-shadow:      0 24px 70px rgba(0, 0, 0, 0.38);
    --marketing-shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.26);

    /* ── App-shell dark tokens (used by JS for shell-level theming) ── */
    --dark-app-bg:          #121212;
    --dark-sidebar-bg:      #1a1a1a;
    --dark-topbar-bg:       #1e1e1e;
    --dark-surface:         #222222;
    --dark-surface-elevated:#242424;
    --dark-hover:           #2a2a2a;
    --dark-border:          #333333;
    --dark-text:            rgba(255, 255, 255, 0.9);
    --dark-text-secondary:  #b3b3b3;
    --dark-text-muted:      #8a8a8a;
    --dark-text-disabled:   #666666;

    /* ── Body background token (overrides light-mode gradient) ── */
    --body-bg: #121212;

    /* Focus ring — blue-tinted, slightly more visible in dark */
    /* BUG FIX: was rgba(190,190,190,0.28) (grey), stripping the blue focus
       affordance. Restored with the corrected --primary colour. */
    --focus-ring: 0 0 0 3px rgba(111, 163, 255, 0.30);
}

/* ── Base ── */
html[data-theme="dark"] body,
html[data-theme="dark"] body.admin-auth-page,
html[data-theme="dark"] .marketing-body {
    color: var(--grey-900);
    /* BUG FIX: was background: #121212 !important — hardcoded and overriding
       the token. Now uses --body-bg so a single token controls the bg. */
    background: var(--body-bg);
}

html[data-theme="dark"] .container,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .page-shell,
html[data-theme="dark"] .workspace-surface-shell,
html[data-theme="dark"] .content-area {
    background: #121212;
    color: var(--grey-900);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] strong {
    color: var(--ink-900);
}

html[data-theme="dark"] a            { color: var(--primary); }
html[data-theme="dark"] a:hover      { color: var(--primary-hover); }
html[data-theme="dark"] ::selection  { background: rgba(190, 190, 190, 0.28); }

/* ── Cards / surfaces ── */
html[data-theme="dark"] .card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .surface-panel,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .billing-card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .workspace-filter-bar,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .purchase-card,
html[data-theme="dark"] .purchase-panel,
html[data-theme="dark"] .story-panel,
html[data-theme="dark"] .security-panel,
html[data-theme="dark"] .cta-panel,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .faq-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .showcase-card,
html[data-theme="dark"] .billing-status-card,
html[data-theme="dark"] .billing-status-note,
html[data-theme="dark"] .workspace-section,
html[data-theme="dark"] .settings-card__meta,
html[data-theme="dark"] .um-user-card,
html[data-theme="dark"] .um-permission-card,
html[data-theme="dark"] .workspace-metric,
html[data-theme="dark"] .customer-metric,
html[data-theme="dark"] .company-profile-hero,
html[data-theme="dark"] .company-profile-section,
html[data-theme="dark"] .company-module-card,
html[data-theme="dark"] .invoice-form-card,
html[data-theme="dark"] .invoice-section,
html[data-theme="dark"] .document-total-card,
html[data-theme="dark"] .finance-entry-card,
html[data-theme="dark"] .workspace-summary-card,
html[data-theme="dark"] .invp-panel,
html[data-theme="dark"] .invp-metric-card,
html[data-theme="dark"] .invp-library-card,
html[data-theme="dark"] .invp-preview-shell,
html[data-theme="dark"] .invp-preview-stat,
html[data-theme="dark"] .invp-preview-empty,
html[data-theme="dark"] .finance-currency-card,
html[data-theme="dark"] .employee-detail-card,
html[data-theme="dark"] .employee-profile-grid .invp-preview-stat,
html[data-theme="dark"] .hr-suite-card,
html[data-theme="dark"] .hr-overview-metric,
html[data-theme="dark"] .hr-policy-preview,
html[data-theme="dark"] .bank-account-card,
html[data-theme="dark"] .qtp-card,
html[data-theme="dark"] .qtp-preview-shell,
html[data-theme="dark"] .qtp-toolbar,
html[data-theme="dark"] .qtp-empty,
html[data-theme="dark"] .sr-doc-card,
html[data-theme="dark"] .sr-doc-section,
html[data-theme="dark"] .sr-doc-confirm,
html[data-theme="dark"] .auth-feature,
html[data-theme="dark"] .task-commercial-card,
html[data-theme="dark"] .task-card-select__label,
html[data-theme="dark"] .activity-item,
html[data-theme="dark"] .invp-card,
html[data-theme="dark"] .page-toolbar {
    background: var(--surface) !important;
    background-image: none !important;
    border-color: var(--border) !important;
    color: var(--grey-900);
    box-shadow: none !important;
}

/* Hover states */
html[data-theme="dark"] .metric-card:hover,
html[data-theme="dark"] .workspace-section:hover,
html[data-theme="dark"] .company-module-card:hover,
html[data-theme="dark"] .um-user-card:hover,
html[data-theme="dark"] .invp-card:hover,
html[data-theme="dark"] .invp-library-card:hover,
html[data-theme="dark"] .activity-item:hover,
html[data-theme="dark"] .task-row:hover,
html[data-theme="dark"] .quote-row:hover,
html[data-theme="dark"] .customer-list-item:hover,
html[data-theme="dark"] .auth-feature:hover {
    background: var(--dark-hover) !important;
}

/* Selected / active cards */
html[data-theme="dark"] .um-user-card.is-selected,
html[data-theme="dark"] .invp-card.is-active,
html[data-theme="dark"] .company-module-card.is-enabled,
html[data-theme="dark"] .company-module-card.is-required,
html[data-theme="dark"] .qtp-card:hover,
html[data-theme="dark"] .qtp-card.is-active {
    background: #242424 !important;
    background-image: none !important;
    border-color: var(--border-strong) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .invoices-shell .invp-library-card {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .invoices-shell .invp-library-card::after {
    background: linear-gradient(
        90deg,
        rgba(148, 163, 184, 0),
        rgba(148, 163, 184, 0.28) 14%,
        rgba(148, 163, 184, 0.28) 86%,
        rgba(148, 163, 184, 0)
    ) !important;
}

html[data-theme="dark"] .invoices-shell .invp-library-card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(148, 163, 184, 0.08)) !important;
}

html[data-theme="dark"] .invoices-shell .invp-library-card.is-active {
    background: #242424 !important;
    border-color: transparent !important;
    box-shadow: inset 0 0 0 1px #4a4a4a !important;
}

/* ── Muted text ── */
html[data-theme="dark"] label,
html[data-theme="dark"] .page-head p,
html[data-theme="dark"] .page-intro p,
html[data-theme="dark"] .small-note,
html[data-theme="dark"] .workspace-filter-hint,
html[data-theme="dark"] .workspace-filter-meta,
html[data-theme="dark"] .workspace-filter-field > label,
html[data-theme="dark"] .workspace-filter-summary,
html[data-theme="dark"] .workspace-section-head p,
html[data-theme="dark"] .settings-card__meta span,
html[data-theme="dark"] .metric-label,
html[data-theme="dark"] .metric-note,
html[data-theme="dark"] .activity-copy span,
html[data-theme="dark"] .task-row span,
html[data-theme="dark"] .quote-row span,
html[data-theme="dark"] .activity-item time,
html[data-theme="dark"] .task-preview-label,
html[data-theme="dark"] .task-link-empty,
html[data-theme="dark"] .task-form-hint,
html[data-theme="dark"] .task-selection-status,
html[data-theme="dark"] .task-commercial-card span,
html[data-theme="dark"] .customer-copy span,
html[data-theme="dark"] .customer-meta span,
html[data-theme="dark"] .customer-metric span,
html[data-theme="dark"] .um-user-meta,
html[data-theme="dark"] .um-permission-card small,
html[data-theme="dark"] .workspace-summary-label,
html[data-theme="dark"] .workspace-summary-note,
html[data-theme="dark"] .invp-metric-label,
html[data-theme="dark"] .invp-metric-note,
html[data-theme="dark"] .invp-toolbar-kicker,
html[data-theme="dark"] .invp-card-subline,
html[data-theme="dark"] .invp-library-customer,
html[data-theme="dark"] .invp-library-date,
html[data-theme="dark"] .invp-preview-stat span,
html[data-theme="dark"] .workspace-metric span,
html[data-theme="dark"] .finance-source-empty,
html[data-theme="dark"] .finance-link-empty,
html[data-theme="dark"] .invp-preview-empty p,
html[data-theme="dark"] .hr-overview-metric span,
html[data-theme="dark"] .hr-overview-metric p,
html[data-theme="dark"] .hr-policy-preview li span,
html[data-theme="dark"] .sr-doc-label {
    color: var(--grey-700) !important;
}

html[data-theme="dark"] .settings-card__meta strong,
html[data-theme="dark"] .um-permission-card span,
html[data-theme="dark"] .um-user-card strong,
html[data-theme="dark"] .task-preview-card strong,
html[data-theme="dark"] .task-detail-section h3,
html[data-theme="dark"] .task-detail-grid strong,
html[data-theme="dark"] .task-commercial-card strong,
html[data-theme="dark"] .task-remarks-box,
html[data-theme="dark"] .customer-copy strong,
html[data-theme="dark"] .customer-metric strong,
html[data-theme="dark"] .activity-copy strong,
html[data-theme="dark"] .task-row strong,
html[data-theme="dark"] .quote-row strong,
html[data-theme="dark"] .task-meta b,
html[data-theme="dark"] .quote-meta b,
html[data-theme="dark"] .hr-overview-metric strong,
html[data-theme="dark"] .hr-policy-preview__top strong,
html[data-theme="dark"] .hr-policy-preview li strong,
html[data-theme="dark"] .invp-preview-stat strong,
html[data-theme="dark"] .workspace-metric strong,
html[data-theme="dark"] .workspace-summary-card strong,
html[data-theme="dark"] .customer-metric strong,
html[data-theme="dark"] .metric-card strong,
html[data-theme="dark"] .invp-metric-card strong,
html[data-theme="dark"] .invp-library-number,
html[data-theme="dark"] .invp-library-amount,
html[data-theme="dark"] .invp-amount,
html[data-theme="dark"] .pay-stat-card strong,
html[data-theme="dark"] .pay-detail-list strong {
    color: var(--ink-900) !important;
}

html[data-theme="dark"] .task-selection-status {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .task-selection-status[data-state="ready"] {
    background: #242424 !important;
    border-color: #4a4a4a !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .task-selection-status[data-state="invalid"] {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #f4c56b !important;
}

html[data-theme="dark"] .task-card-select__label {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .task-card-select__label:hover {
    background: transparent !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .task-card-select__label:hover .task-card-select__box {
    border-color: rgba(190, 190, 190, 0.46) !important;
}

html[data-theme="dark"] .task-card-select__box {
    background: #181818 !important;
    border-color: var(--border-strong) !important;
}

html[data-theme="dark"] .task-card-select__label input:focus-visible + .task-card-select__box {
    box-shadow: 0 0 0 3px rgba(190, 190, 190, 0.18) !important;
}

html[data-theme="dark"] .task-card-select__label input:checked + .task-card-select__box {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

html[data-theme="dark"] .mode-block {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .mode-block label {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--grey-600) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .mode-block label:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--grey-900) !important;
}

html[data-theme="dark"] .mode-block label:has(input:checked) {
    background: #262626 !important;
    border-color: rgba(190, 190, 190, 0.28) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .mode-block label:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(190, 190, 190, 0.18) !important;
}

html[data-theme="dark"] .invp-library-card.is-bulk-selected {
    background: #242424 !important;
    border-color: var(--border-strong) !important;
}

/* ── Form inputs ── */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="color"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: var(--surface-soft) !important;
    border-color: var(--border) !important;
    color: var(--grey-900) !important;
    box-shadow: none;
}

html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="datetime-local"] { color-scheme: dark; }

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    background: #1a1c20 !important;
    border-color: var(--primary) !important;
    box-shadow: var(--focus-ring) !important;
}

html[data-theme="dark"] input[readonly],
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled {
    background: #212327 !important;
    color: var(--grey-600) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--grey-600);
    opacity: 1;
}

html[data-theme="dark"] option {
    background: #16181b;
    color: var(--grey-900);
}

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--grey-900);
    box-shadow: 0 0 0 1000px var(--surface-soft) inset;
}

html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] { accent-color: var(--primary); }

/* ── Buttons ──
   BUG FIX: solid buttons used var(--primary) (#6fa3ff, a light pastel blue
   chosen for link/accent legibility on a dark page background) as a fill
   color underneath white text. White-on-#6fa3ff is roughly a 1.9:1 contrast
   ratio, well below the WCAG AA minimum of 4.5:1 for text, so button labels
   were hard to read. --primary itself is correct for links/accents/progress
   bars (light color against dark background) and must not change for those;
   solid buttons need a separate, darker fill that still reads as "brand
   blue" but gives white text real contrast (~5.7:1 below). */
html[data-theme="dark"] .btn:not(.btn-outline):not(.btn-secondary):not(.btn-danger),
html[data-theme="dark"] .invp-create-btn,
html[data-theme="dark"] .auth-submit {
    background: #2f5fcf !important;
    background-image: none !important;
    border-color: #2f5fcf !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn:not(.btn-outline):not(.btn-secondary):not(.btn-danger):hover,
html[data-theme="dark"] .invp-create-btn:hover,
html[data-theme="dark"] .auth-submit:hover {
    background: #25509f !important;
    border-color: #25509f !important;
}

html[data-theme="dark"] .btn:disabled,
html[data-theme="dark"] .btn:disabled:hover {
    opacity: 1;
    background: rgba(120, 120, 120, 0.35) !important;
    color: rgba(245, 245, 245, 0.72) !important;
    border: 1px solid rgba(190, 190, 190, 0.18) !important;
}

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .invp-action-btn,
html[data-theme="dark"] .auth-admin-link,
html[data-theme="dark"] .marketing-btn--secondary,
html[data-theme="dark"] .marketing-btn--ghost,
html[data-theme="dark"] .finance-action-chip,
html[data-theme="dark"] .finance-action-lock {
    background: var(--surface-soft) !important;
    background-image: none !important;
    border-color: var(--border) !important;
    color: var(--grey-900) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] .invp-action-btn:hover,
html[data-theme="dark"] .finance-action-chip:hover,
html[data-theme="dark"] .finance-action-lock:hover {
    background: var(--dark-hover) !important;
    border-color: var(--border) !important;
}

/* ── Password toggle ── */
html[data-theme="dark"] .password-toggle,
html[data-theme="dark"] .auth-password-toggle {
    background: var(--surface-soft) !important;
    border-color: var(--border) !important;
    color: var(--grey-900) !important;
}

html[data-theme="dark"] .password-toggle:hover,
html[data-theme="dark"] .auth-password-toggle:hover {
    background: var(--dark-hover) !important;
    color: #ffffff !important;
}

/* ── Alert banners ── */
html[data-theme="dark"] .success-message,
html[data-theme="dark"] .alert-success {
    background: rgba(76, 175, 80, 0.14) !important;
    border-color: rgba(76, 175, 80, 0.32) !important;
    color: #9ce2a0 !important;
}

html[data-theme="dark"] .error-message,
html[data-theme="dark"] .alert-danger {
    background: rgba(244, 67, 54, 0.14) !important;
    border-color: rgba(244, 67, 54, 0.32) !important;
    color: #ffd2cf !important;
}

html[data-theme="dark"] .purchase-card .error-message {
    background: rgba(86, 24, 20, 0.92) !important;
    border-color: rgba(255, 157, 148, 0.42) !important;
    color: #ffe7e4 !important;
}

html[data-theme="dark"] .purchase-card .error-message p {
    color: inherit !important;
}

html[data-theme="dark"] .info-message {
    background: rgba(120, 120, 120, 0.18) !important;
    border-color: var(--border) !important;
    /* BUG FIX: --blue-800 in dark mode resolves to a mid-dark blue (#3a64b8),
       poor contrast on a dark bg. Use --blue-900 (lightest stop = #cfe3ff). */
    color: var(--blue-900) !important;
}

/* ── Tables ── */
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
    border-color: var(--border) !important;
}

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

/* ── Status / badge pills ── */
html[data-theme="dark"] .health-chip,
html[data-theme="dark"] .panel-pill,
html[data-theme="dark"] .status-pill,
html[data-theme="dark"] .payslip-period-chip,
html[data-theme="dark"] .pay-period-pill,
html[data-theme="dark"] .invp-count-badge,
html[data-theme="dark"] .invp-source-pill,
html[data-theme="dark"] .invp-source-badge,
html[data-theme="dark"] .finance-source-badge,
html[data-theme="dark"] .finance-link-chip,
html[data-theme="dark"] .employee-residency-chip,
html[data-theme="dark"] .task-status-chip,
html[data-theme="dark"] .task-link-chip,
html[data-theme="dark"] .activity-badge,
html[data-theme="dark"] .um-count,
html[data-theme="dark"] .um-role-pill,
html[data-theme="dark"] .um-user-state,
html[data-theme="dark"] .company-module-badge {
    background: var(--dark-hover) !important;
    border: 1px solid var(--border) !important;
    color: var(--grey-700) !important;
    box-shadow: none !important;
}

/* Success variants */
html[data-theme="dark"] .invp-status-badge--paid,
html[data-theme="dark"] .invp-status-badge--active,
html[data-theme="dark"] .payslip-cpf-status-pill[data-state="success"],
html[data-theme="dark"] .status-completed {
    background: rgba(76, 175, 80, 0.14) !important;
    border-color: rgba(76, 175, 80, 0.32) !important;
    color: #9ce2a0 !important;
}

/* Warning variants */
html[data-theme="dark"] .invp-status-badge--partial,
html[data-theme="dark"] .invp-status-badge--pending,
html[data-theme="dark"] .invp-status-badge--draft,
html[data-theme="dark"] .payslip-cpf-status-pill[data-state="warning"],
html[data-theme="dark"] .status-tbc {
    background: rgba(255, 193, 7, 0.14) !important;
    border-color: rgba(255, 193, 7, 0.32) !important;
    color: #ffd869 !important;
}

/* Info / blue variants */
html[data-theme="dark"] .invp-status-badge--unpaid,
html[data-theme="dark"] .invp-status-badge--remote,
html[data-theme="dark"] .payslip-cpf-status-pill[data-state="info"],
html[data-theme="dark"] .payslip-cpf-status-pill[data-state="pending"] {
    background: rgba(120, 120, 120, 0.18) !important;
    border-color: rgba(180, 180, 180, 0.28) !important;
    color: #d8d8d8 !important;
}

/* Danger variants */
html[data-theme="dark"] .invp-status-badge--waived,
html[data-theme="dark"] .status-cancelled,
html[data-theme="dark"] .invp-danger-btn,
html[data-theme="dark"] .removeRowBtn,
html[data-theme="dark"] .finance-action-chip--danger {
    background: rgba(244, 67, 54, 0.16) !important;
    border-color: rgba(244, 67, 54, 0.34) !important;
    color: #ffd2cf !important;
}

html[data-theme="dark"] .invp-danger-btn:hover,
html[data-theme="dark"] .removeRowBtn:hover,
html[data-theme="dark"] .finance-action-chip--danger:hover {
    background: rgba(244, 67, 54, 0.24) !important;
}

/* ── Enhanced select ── */
html[data-theme="dark"] .enhanced-select__trigger {
    background: var(--surface-soft) !important;
    border-color: var(--border) !important;
    color: var(--grey-900) !important;
}

html[data-theme="dark"] .enhanced-select.is-open .enhanced-select__trigger,
html[data-theme="dark"] .enhanced-select__trigger:focus {
    background: #1a1c20 !important;
    border-color: var(--primary) !important;
    box-shadow: var(--focus-ring) !important;
}

html[data-theme="dark"] .enhanced-select__label.is-placeholder,
html[data-theme="dark"] .enhanced-select__icon,
html[data-theme="dark"] .enhanced-select__empty {
    color: var(--grey-600) !important;
}

html[data-theme="dark"] .enhanced-select__panel {
    background: #181a1d !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
}

html[data-theme="dark"] .enhanced-select__option {
    background: #202226 !important;
    border-color: rgba(148, 163, 184, 0.1) !important;
    color: var(--grey-900) !important;
}

/* BUG FIX: .country-list (the floating country-search dropdown on
   company/add_customer.php) used to share the same translucent surface
   overlay as in-flow page content (rgba(255,255,255,0.03)-ish via --surface).
   That works for elements that sit flush in the normal page flow, where
   revealing a sliver of the page's own background through them is the
   intended "elevation" effect. It does not work for a floating, absolutely
   positioned dropdown that sits on top of other content — the translucent
   background let whatever was behind it bleed through, making the option
   text unreadable ("transparent dropdown, can't see the option" reported
   during this audit). Floating dropdowns/menus need a solid, opaque
   background regardless of what's behind them. Matched to the same solid
   colors already used correctly by .enhanced-select__panel/__option above,
   so every floating dropdown in the app shares one generic, working pattern
   instead of each component inventing its own. */
html[data-theme="dark"] .country-list {
    background: #181a1d !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
}
html[data-theme="dark"] .country-list li {
    background: #202226 !important;
    color: var(--grey-900) !important;
}
html[data-theme="dark"] .country-list li:hover {
    background: #2a2a2a !important;
}

html[data-theme="dark"] .enhanced-select__option:hover,
html[data-theme="dark"] .enhanced-select__option.is-selected {
    background: #2a2a2a !important;
    border-color: var(--border-strong) !important;
    color: var(--ink-900) !important;
}

/* ── Sidebar ── */
html[data-theme="dark"] .sidebar { background: #1a1a1a !important; box-shadow: none; }
html[data-theme="dark"] .sidebar-footer-card { background: rgba(255,255,255,0.06) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .toggle-btn { background: rgba(255,255,255,0.06) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .sidebar-footer { border-color: var(--border) !important; }

html[data-theme="dark"] .sidebar-menu li a:hover,
html[data-theme="dark"] .sidebar-menu li .quick-action:hover,
html[data-theme="dark"] .toggle-btn:hover {
    background: var(--dark-hover) !important;
}

html[data-theme="dark"] .sidebar-menu li.is-active > a,
html[data-theme="dark"] .sidebar-menu li.is-active > .quick-action {
    background: var(--dark-hover) !important;
    border-color: var(--border) !important;
    color: #ffffff !important;
}

/* ── Top bar ── */
html[data-theme="dark"] .workspace-topbar {
    background: var(--dark-topbar-bg) !important;
    border-bottom-color: var(--border) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .workspace-topbar__theme {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

html[data-theme="dark"] .workspace-topbar__link,
html[data-theme="dark"] .workspace-topbar__logout button {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--border) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .workspace-topbar__link:hover,
html[data-theme="dark"] .workspace-topbar__logout button:hover,
html[data-theme="dark"] .workspace-topbar__theme .theme-switcher__option:hover {
    background: var(--dark-hover) !important;
}

html[data-theme="dark"] .workspace-topbar__theme .theme-switcher__option[aria-pressed="true"] {
    background: #2a2a2a !important;
    color: #ffffff !important;
}

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

html[data-theme="dark"] .workspace-filter-search:focus-within {
    background: #1a1c20 !important;
    border-color: var(--primary) !important;
    box-shadow: var(--focus-ring) !important;
}

html[data-theme="dark"] .workspace-filter-search input,
html[data-theme="dark"] .workspace-filter-search input:focus {
    /* BUG FIX: input:focus was listed twice in the selector. Removed duplicate. */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 14px 0 40px !important;
}

html[data-theme="dark"] .workspace-topbar__link--danger {
    border-color: rgba(244, 67, 54, 0.4) !important;
}

html[data-theme="dark"] .workspace-topbar__link--danger:hover {
    background: rgba(244, 67, 54, 0.14) !important;
}

html[data-theme="dark"] .workspace-topbar__theme .theme-switcher__option::after,
html[data-theme="dark"] .workspace-topbar__link--icon::after {
    background: #23262c !important;
    color: var(--grey-900) !important;
}

/* ── Hero sections ── */
html[data-theme="dark"] .dashboard-hero,
html[data-theme="dark"] .workspace-hero,
html[data-theme="dark"] .invp-hero,
html[data-theme="dark"] .invoice-create-hero,
html[data-theme="dark"] .customer-hero,
html[data-theme="dark"] .auth-panel-brand,
html[data-theme="dark"] .auth-panel-brand-admin {
    background: var(--surface) !important;
    background-image: none !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    color: var(--grey-900) !important;
}

html[data-theme="dark"] .workspace-kicker,
html[data-theme="dark"] .dashboard-kicker,
html[data-theme="dark"] .panel-kicker,
html[data-theme="dark"] .invp-kicker,
html[data-theme="dark"] .invoice-kicker,
html[data-theme="dark"] .company-profile-kicker,
html[data-theme="dark"] .um-kicker,
html[data-theme="dark"] .hr-suite-kicker,
html[data-theme="dark"] .hr-inline-note {
    background: var(--dark-hover) !important;
    border: 1px solid var(--border) !important;
    /* BUG FIX: --grey-700 (#b3b3b3) on --dark-hover (#2a2a2a) fails contrast
       for small badge text. Bumped to --grey-900 (rgba 255,255,255,0.9). */
    color: var(--grey-900) !important;
}

/* ── Marketing pages ── */
html[data-theme="dark"] .marketing-header {
    background: rgba(24, 24, 24, 0.92) !important;
    border-color: rgba(180, 180, 180, 0.18) !important;
}

html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .brand-mark:hover,
html[data-theme="dark"] .marketing-nav a,
html[data-theme="dark"] .marketing-link { color: var(--grey-900) !important; }

html[data-theme="dark"] .hero-copy,
html[data-theme="dark"] .purchase-panel,
html[data-theme="dark"] .pricing-card--featured,
html[data-theme="dark"] .security-panel,
html[data-theme="dark"] .cta-panel {
    background: linear-gradient(160deg, rgba(31, 31, 31, 0.96), rgba(39, 39, 39, 0.92)) !important;
}

html[data-theme="dark"] .purchase-panel p {
    color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="dark"] .hero-card {
    background: linear-gradient(180deg, rgba(24, 24, 24, 0.98), rgba(42, 42, 42, 0.94)) !important;
}

html[data-theme="dark"] .hero-trust div,
html[data-theme="dark"] .purchase-points div,
html[data-theme="dark"] .purchase-preview div,
html[data-theme="dark"] .purchase-plan-card,
html[data-theme="dark"] .security-list article,
html[data-theme="dark"] .showcase-card__placeholder {
    background: rgba(32, 32, 32, 0.88) !important;
    border-color: rgba(180, 180, 180, 0.18) !important;
}

/* ── Form hint tooltips ── */
html[data-theme="dark"] .form-hint-tooltip__icon {
    background: rgba(120, 120, 120, 0.18) !important;
    color: #d8d8d8 !important;
}

html[data-theme="dark"] .form-hint-tooltip__bubble {
    background: rgba(24, 24, 24, 0.98) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--grey-800) !important;
}

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

/* ── Invoices shell tokens ── */
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 {
    --invp-bg:           #121212;
    --invp-surface:      var(--surface);
    --invp-surface-soft: var(--surface-soft);
    --invp-border:       var(--border);
    --invp-border-strong:var(--border-strong);
    --invp-text:         var(--grey-900);
    --invp-muted:        var(--grey-700);
    --invp-muted-strong: #ffffff;
    --invp-primary:      var(--primary);
    --invp-primary-dark: #ffffff;
    --invp-primary-soft: rgba(180, 180, 180, 0.14);
    --invp-success-soft: rgba(76, 175, 80, 0.14);
    --invp-shadow-sm:    none;
    --invp-shadow-md:    none;

    --hr-bg:           #121212;
    --hr-surface:      var(--surface);
    --hr-surface-strong: var(--surface);
    --hr-surface-soft: var(--surface-soft);
    --hr-border:       var(--border);
    --hr-border-strong:var(--border-strong);
    --hr-text:         var(--grey-900);
    --hr-muted:        var(--grey-700);
    --hr-muted-strong: var(--grey-600);
    --hr-primary:      var(--primary);
    --hr-primary-dark: #d8d8d8;
    --hr-primary-soft: var(--dark-hover);
    --hr-success-soft: rgba(76, 175, 80, 0.14);
    --hr-warning-soft: rgba(255, 193, 7, 0.14);
    --hr-danger-soft:  rgba(244, 67, 54, 0.14);
    --hr-shadow-sm:    none;
    --hr-shadow-md:    none;
}

/* ── Tabs ── */
html[data-theme="dark"] .invp-tabs {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .invp-tab {
    background: transparent !important;
    color: var(--grey-700) !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .invp-tab:hover {
    background: var(--dark-hover) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .invp-tab.is-active {
    background: var(--dark-hover) !important;
    border-color: var(--border-strong) !important;
    color: #ffffff !important;
}

/* ── Document / A4 page ── */
html[data-theme="dark"] .a4-page {
    background: #17191c !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-md) !important;
    color: #f7fbff !important;
}

html[data-theme="dark"] .a4-page .billto,
html[data-theme="dark"] .a4-page .meta-right,
html[data-theme="dark"] .a4-page .inv-support-card,
html[data-theme="dark"] .a4-page .sr-doc-card,
html[data-theme="dark"] .a4-page .sr-doc-section,
html[data-theme="dark"] .a4-page .sr-doc-confirm,
html[data-theme="dark"] .a4-page .pay-hero-card:not(.pay-hero-card-highlight),
html[data-theme="dark"] .a4-page .pay-panel,
html[data-theme="dark"] .a4-page .pay-detail-card,
html[data-theme="dark"] .a4-page .pay-stat-card,
html[data-theme="dark"] .a4-page .total-box {
    background: #202226 !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .a4-page .inv-head,
html[data-theme="dark"] .a4-page .inv-footer,
html[data-theme="dark"] .a4-page .pay-head,
html[data-theme="dark"] .a4-page .sr-doc-line {
    border-color: var(--border) !important;
}

/* BUG FIX: .sr-vessel-grid (vessel-template service report preview) had a
   hardcoded `background: #ffffff` in company/css/service_reports.css with
   no dark-mode override at all, unlike its sibling .sr-doc-card/.sr-doc-section
   blocks above. The grid stayed a bright white card while the generic
   `html[data-theme="dark"] strong { color: var(--ink-900) }` rule (tied in
   specificity with, and loaded after, .sr-vessel-cell strong's own light-mode
   color) turned its value text near-white — white text on a white card,
   fully invisible. */
html[data-theme="dark"] .a4-page .sr-vessel-grid {
    background: #202226 !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .a4-page .sr-vessel-cell {
    border-color: var(--border) !important;
}

html[data-theme="dark"] .a4-page .sr-vessel-cell span {
    color: var(--grey-700) !important;
}

html[data-theme="dark"] .a4-page .sr-vessel-cell strong {
    color: #f7fbff !important;
}

/* Document tables */
html[data-theme="dark"] #invoiceTable,
html[data-theme="dark"] #quotationTable,
html[data-theme="dark"] .payslip-breakdown-table,
html[data-theme="dark"] .pay-table,
html[data-theme="dark"] .inv-items,
html[data-theme="dark"] .quo-items,
html[data-theme="dark"] .app-data-table {
    background: #181818 !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] #invoiceTable thead th,
html[data-theme="dark"] #quotationTable thead th,
html[data-theme="dark"] .payslip-breakdown-table th,
html[data-theme="dark"] .pay-table thead th,
html[data-theme="dark"] .inv-items thead th,
html[data-theme="dark"] .quo-items thead th,
html[data-theme="dark"] .app-data-table thead th {
    background: #1e1e1e !important;
    background-image: none !important;
    border-color: var(--border) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] #invoiceTable td,
html[data-theme="dark"] #quotationTable td,
html[data-theme="dark"] .payslip-breakdown-table td,
html[data-theme="dark"] .pay-table tbody td,
html[data-theme="dark"] .inv-items tbody td,
html[data-theme="dark"] .quo-items tbody td,
html[data-theme="dark"] .app-data-table td {
    background: #181818 !important;
    border-color: var(--border) !important;
    color: var(--grey-900) !important;
}

html[data-theme="dark"] #invoiceTable tbody tr:nth-child(even) td,
html[data-theme="dark"] #quotationTable tbody tr:nth-child(even) td,
html[data-theme="dark"] .payslip-breakdown-table tbody tr:nth-child(even) td,
html[data-theme="dark"] .pay-table tbody tr:nth-child(even) td,
html[data-theme="dark"] .inv-items tbody tr:nth-child(even) td,
html[data-theme="dark"] .quo-items tbody tr:nth-child(even) td,
html[data-theme="dark"] .app-data-table tbody tr:nth-child(even) td {
    background: #1c1c1c !important;
}

/* ── Progress bar ── */
html[data-theme="dark"] .progress-shell  { background: var(--surface-soft) !important; }
html[data-theme="dark"] .progress-bar    { background: var(--primary) !important; }

/* ── Dividers ── */
html[data-theme="dark"] hr,
html[data-theme="dark"] .admin-form-section + .admin-form-section,
html[data-theme="dark"] .admin-checkbox,
html[data-theme="dark"] .sidebar-footer,
html[data-theme="dark"] .hr-table-wrap,
html[data-theme="dark"] .sr-doc-line,
html[data-theme="dark"] .auth-message,
html[data-theme="dark"] .auth-footer {
    border-color: var(--border) !important;
}

/* ── Admin panel ── */
html[data-theme="dark"] .admin-sidebar {
    background: linear-gradient(180deg, #161616 0%, #1c1c1c 54%, #222222 100%) !important;
}

html[data-theme="dark"] .admin-hero,
html[data-theme="dark"] .auth-panel-brand-admin {
    background: linear-gradient(135deg, #1b1b1b 0%, #252525 52%, #303030 100%) !important;
}

html[data-theme="dark"] .admin-directory-card,
html[data-theme="dark"] .admin-permission-card,
html[data-theme="dark"] .admin-module-card,
html[data-theme="dark"] .admin-subscription-grid article {
    background: rgba(32, 32, 32, 0.9) !important;
    border-color: rgba(180, 180, 180, 0.18) !important;
}

html[data-theme="dark"] .admin-directory-card:hover,
html[data-theme="dark"] .admin-directory-card:focus-visible,
html[data-theme="dark"] .admin-directory-card.is-selected {
    background: rgba(46, 46, 46, 0.94) !important;
    border-color: rgba(190, 190, 190, 0.42) !important;
    box-shadow: var(--shadow-md) !important;
}

html[data-theme="dark"] .admin-pill              { background: rgba(140, 140, 140, 0.18) !important; color: #d8d8d8 !important; }
html[data-theme="dark"] .admin-pill--active      { background: rgba(16, 185, 129, 0.18) !important; color: #8cf2c6 !important; }
html[data-theme="dark"] .admin-pill--inactive    { background: rgba(245, 158, 11, 0.18) !important; color: #f8cf6a !important; }
html[data-theme="dark"] .admin-pill--suspended   { background: rgba(244, 63, 94, 0.18) !important;  color: #ff9bad !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"] .admin-directory-meta,
html[data-theme="dark"] .admin-directory-state,
html[data-theme="dark"] .admin-count,
html[data-theme="dark"] .admin-form-section p,
html[data-theme="dark"] .admin-permission-card small,
html[data-theme="dark"] .admin-module-card small,
html[data-theme="dark"] .admin-subscription-grid span { color: var(--grey-700) !important; }

html[data-theme="dark"] .admin-permission-card span,
html[data-theme="dark"] .admin-module-card span,
html[data-theme="dark"] .admin-subscription-grid strong { color: var(--ink-900) !important; }

/* ── Employee tone states ── */
html[data-theme="dark"] .employee-profile-grid .invp-preview-stat[data-tone="success"] {
    background: rgba(20, 67, 49, 0.96) !important;
    border-color: rgba(110, 231, 183, 0.24) !important;
}

html[data-theme="dark"] .employee-profile-grid .invp-preview-stat[data-tone="warning"] {
    background: rgba(88, 56, 18, 0.96) !important;
    border-color: rgba(248, 207, 106, 0.24) !important;
}

html[data-theme="dark"] .employee-profile-grid .invp-preview-stat[data-tone="info"] {
    background: #242424 !important;
    border-color: #4a4a4a !important;
}

html[data-theme="dark"] .invp-preview-pane.is-loading::after {
    background: rgba(18, 18, 18, 0.5) !important;
}

/* ── HR table ── */
html[data-theme="dark"] .hr-table thead th { background: rgba(28, 28, 28, 0.96) !important; }
html[data-theme="dark"] .hr-table tbody tr:hover td { background: rgba(120, 120, 120, 0.12) !important; }
html[data-theme="dark"] .hr-table th, html[data-theme="dark"] .hr-table td { border-color: var(--border) !important; }
html[data-theme="dark"] .hr-policy-preview li { border-color: var(--border) !important; }
html[data-theme="dark"] .hr-table-wrap { border-color: var(--border) !important; }

/* ── Topbar company label on mobile ── */
@media (max-width: 960px) {
    html[data-theme="dark"] .workspace-topbar__company { display: none; }
}