/* =====================================================================
   WorkDu candidate panel — DARK THEME
   =====================================================================
   Loaded on candidate-panel pages only, and LAST in <head> (after
   @stack('page-css')) so it beats a page's own literals. Every rule is
   scoped to html[data-theme="dark"], so in light mode this file costs
   nothing but its bytes.

   How it works
   ------------
   The panel's colour is already mostly token-driven: workdu-ui.css
   declares --wds-* on `body.li-app`, linkedin-theme.css declares --li-*
   and --dash-* on the same element, dashboard-v3-dark.css declares
   --wdu-*, and naukri-candidate.css's --nk-* chain off --wds-*. So
   section 1 re-declares those tokens at a higher specificity
   (html[data-theme="dark"] body.li-app = 0,2,2 beats body.li-app =
   0,1,1) and everything token-driven flips with it.

   Sections 2+ exist because ~170 selectors across those stylesheets
   paint a literal #fff / light grey instead of a token. Those are
   overridden by name, grouped by what they are. When a new panel page
   shows a white slab in dark mode, the fix belongs in the matching
   section here — NOT in the page's own stylesheet, which would then
   carry two palettes.

   Blue on dark
   ------------
   --wds-blue becomes a LIGHT blue, because on a #1b2025 card a deep
   blue link fails contrast. That inverts the filled-button contract:
   a light-blue fill needs a DARK label, so section 3 lists the filled
   blue families and flips their text. This is the same trade LinkedIn's
   own dark mode makes; the alternative (keeping a deep blue so white
   labels still work) leaves every blue link underreadable.
   ===================================================================== */

/* =====================================================================
   1. TOKENS
   ===================================================================== */
html[data-theme="dark"] {
    /* Native widgets — scrollbars, form controls, the canvas behind the
       page — follow this and nothing else. Without it Chrome paints a
       white scrollbar track down the side of a dark page. */
    color-scheme: dark;
}

html[data-theme="dark"] body.li-app {
    /* --- Brand ------------------------------------------------------ */
    /* Page headers: one solid deep logo blue (see workdu-ui.css). */
    --wds-hero-bg:     #1C397D;
    --wds-blue:        #71b7fb;
    --wds-blue-hover:  #8cc6fd;
    --wds-blue-active: #a5d3fe;
    --wds-blue-tint:   rgba(113, 183, 251, .14);
    --wds-blue-100:    rgba(113, 183, 251, .26);
    --wds-ring:        rgba(113, 183, 251, .38);

    /* --- Surfaces --------------------------------------------------- */
    --wds-bg:        #12161a;
    --wds-surface:   #1b2025;
    --wds-surface-2: #22282e;
    --wds-surface-3: #2a3138;

    /* --- Ink -------------------------------------------------------- */
    /* --wds-ink-3 is helper text, so it must pass on every surface it can
       land on, insets included: #838c97 was 4.82:1 on a card but 4.37:1 on
       --wds-surface-2 and 4.08:1 on -3. #9099a5 is 5.69 / 5.16 / 4.57. */
    --wds-ink:   #e6e9ed;
    --wds-ink-2: #aeb6bf;
    --wds-ink-3: #9099a5;

    /* --- Lines ------------------------------------------------------ */
    --wds-line:      #2e353c;
    --wds-line-soft: #242a30;
    --wds-line-mid:  #3d464f;

    /* --- Status ----------------------------------------------------- */
    /* The tints are backgrounds behind same-hue text, so they invert to
       a translucent wash of the (lightened) ink rather than a pale
       pastel, which would go white-hot on a dark card. */
    --wds-green:        #58d0a4;
    --wds-green-hover:  #74dab4;
    --wds-green-tint:   rgba(88, 208, 164, .14);
    --wds-green-line:   rgba(88, 208, 164, .32);
    --wds-amber:        #e5b567;
    --wds-amber-tint:   rgba(229, 181, 103, .14);
    --wds-amber-line:   rgba(229, 181, 103, .32);
    --wds-red:          #f28b7d;
    --wds-red-hover:    #f5a49a;
    --wds-red-tint:     rgba(242, 139, 125, .14);
    --wds-red-line:     rgba(242, 139, 125, .32);
    --wds-violet:       #b29cf0;
    --wds-violet-tint:  rgba(178, 156, 240, .14);
    --wds-violet-line:  rgba(178, 156, 240, .32);

    /* --- Fills ------------------------------------------------------ */
    --wds-fill:       #242b31;
    --wds-fill-hover: #2d353d;

    /* --- Shadows ---------------------------------------------------- */
    /* Black shadows are invisible on a dark ground; depth on dark comes
       from a lighter edge, so these drop to a hairline ring plus a much
       deeper, softer black. */
    --wds-shadow-brand: 0 2px 6px rgba(0, 0, 0, .45), 0 8px 18px rgba(0, 0, 0, .35);
    --wds-shadow-card:  0 0 0 1px rgba(255, 255, 255, .04), 0 2px 10px rgba(0, 0, 0, .38);
    --wds-shadow-lift:  0 0 0 1px rgba(255, 255, 255, .06), 0 10px 24px rgba(0, 0, 0, .48);
    --wds-shadow-pop:   0 0 0 1px rgba(255, 255, 255, .07), 0 8px 24px rgba(0, 0, 0, .55);
    --wds-shadow-modal: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 48px rgba(0, 0, 0, .65);

    /* --- linkedin-theme.css (--li-* / --dash-*) --------------------- */
    /* These are declared as rgba(0,0,0,a) ink over a light ground, so
       each one becomes the same alpha of white. */
    --li-bg:               #12161a;
    --li-surface:          #1b2025;
    --li-ink:              rgba(255, 255, 255, .92);
    --li-ink-muted:        rgba(255, 255, 255, .64);
    /* .52, not the .46 that mirrored light's .45: like --wds-ink-3 it is
       text ("6 followers", hints), and .46 fell to 4.34:1 on an inset. */
    --li-ink-faint:        rgba(255, 255, 255, .52);
    --li-border:           rgba(255, 255, 255, .12);
    --li-border-mid:       rgba(255, 255, 255, .20);
    --li-border-strong:    rgba(255, 255, 255, .58);
    --li-blue:             #71b7fb;
    --li-blue-hover:       #8cc6fd;
    --li-blue-active:      #a5d3fe;
    --li-blue-tint:        rgba(113, 183, 251, .14);
    --li-blue-tint-strong: rgba(113, 183, 251, .24);
    --li-blue-fill:        #1d2b3a;
    --li-ring:             rgba(113, 183, 251, .38);
    --li-green:            #58d0a4;
    --li-green-hover:      #74dab4;
    --li-green-tint:       rgba(88, 208, 164, .14);
    --li-green-fill:       #17302a;
    --li-amber:            #e5b567;
    --li-amber-tint:       rgba(229, 181, 103, .14);
    --li-amber-fill:       #332a1b;
    --li-red:              #f28b7d;
    --li-red-tint:         rgba(242, 139, 125, .14);
    --li-red-fill:         #33211d;

    --dash-bg:             #12161a;
    --dash-surface:        #1b2025;
    --dash-border:         rgba(255, 255, 255, .12);
    --dash-text:           rgba(255, 255, 255, .92);
    --dash-muted:          rgba(255, 255, 255, .64);
    --dash-primary:        #71b7fb;
    --dash-primary-dark:   #a5d3fe;
    --dash-cyan:           #71b7fb;
    --dash-success:        #58d0a4;
    --dash-danger:         #f28b7d;
    --dash-pink:           #f28b7d;
    --dash-yellow:         #e5b567;
    --dash-secondary:      #e5b567;
    --dash-purple:         #b29cf0;
    --dash-sidebar-bg:     #1b2025;
    --dash-sidebar-ink:    rgba(255, 255, 255, .92);
    --dash-sidebar-text:   rgba(255, 255, 255, .64);
    --dash-sidebar-line:   rgba(255, 255, 255, .12);
    --dash-sidebar-hover:  rgba(255, 255, 255, .06);
    --dash-sidebar-active: #71b7fb;
    --dash-sidebar-tint:   rgba(113, 183, 251, .16);

    /* --- dashboard-v3-dark.css (--wdu-*) --------------------------- */
    --wdu-primary:       #71b7fb;
    --wdu-primary-light: rgba(113, 183, 251, .16);
    --wdu-primary-dark:  #a5d3fe;
    --wdu-bg:            #12161a;
    --wdu-card:          #1b2025;
    --wdu-border:        #2e353c;
    --wdu-text:          #e6e9ed;
    --wdu-text-sec:      #aeb6bf;
    --wdu-text-muted:    #9099a5;
    --wdu-success:       #58d0a4;
    --wdu-warning:       #e5b567;
    --wdu-danger:        #f28b7d;
    --wdu-purple:        #b29cf0;
    --wdu-orange:        #e5a476;
    --wdu-teal:          #5fc4d4;
    --wdu-shadow:        0 0 0 1px rgba(255, 255, 255, .04), 0 2px 10px rgba(0, 0, 0, .38);

    /* --- naukri-candidate.css literals that do not chain ----------- */
    --nk-blue-tint-2: rgba(113, 183, 251, .10);
    --nk-shadow-md:   0 0 0 1px rgba(255, 255, 255, .07), 0 8px 24px rgba(0, 0, 0, .55);

    /* --- career-details.blade.php's page-local :root block ---------
       Job Preferences declares --li-card/--li-line/--li-ink-2/--li-accent
       for itself, and --li-ink-2 exists ONLY there. A dark value declared
       on body would be shadowed for --li-ink (which the page also sets) but
       nothing at all covered --li-ink-2, so every hint and placeholder on
       that page stayed rgba(0,0,0,.6) — black on a dark card. Declared here
       on body, which beats the page's :root for body's subtree. */
    --li-card:   #1b2025;
    --li-line:   #2e353c;
    --li-ink-2:  rgba(255, 255, 255, .64);
    --li-accent: #71b7fb;

    /* --- top nav (declared in the sidebar component) --------------- */
    --wd-nav-ink:    #e6e9ed;
    --wd-nav-muted:  #aeb6bf;
    --wd-nav-line:   #2e353c;
    --wd-nav-accent: #71b7fb;

    /* --- bootstrap-ish leftovers in linkedin-theme.css ------------- */
    --primary-50:  rgba(113, 183, 251, .10);
    --primary-100: rgba(113, 183, 251, .18);
    --primary-200: rgba(113, 183, 251, .30);
    --primary-500: #71b7fb;
    --primary-600: #a5d3fe;
    --workdu-light: #12161a;
    --workdu-primary: #71b7fb;
    --shadow-md: 0 0 0 1px rgba(255, 255, 255, .07), 0 8px 24px rgba(0, 0, 0, .55);
    --shadow-lg: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 48px rgba(0, 0, 0, .65);
}

/* =====================================================================
   2. THE GROUND
   Body and the panel's content shells. The layout paints the body from
   partials/styles.blade.php, which is a literal.
   ===================================================================== */
html[data-theme="dark"] body.li-app,
html[data-theme="dark"] body.li-app .dashboard-wrapper,
html[data-theme="dark"] body.li-app .dashboard-main,
html[data-theme="dark"] body.li-app .dashboard-right-content {
    background-color: var(--wds-bg) !important;
    color: var(--wds-ink);
}
html[data-theme="dark"] body.li-app .dashboard-right {
    background: transparent !important;
}

/* =====================================================================
   2b. LEGACY PAGE PALETTE  (generated — tools/gen-candidate-dark-theme.js)
   ---------------------------------------------------------------------
   The pages below set colour and background to literals instead of to
   tokens — including light gradients, which no token change can reach —
   so section 1 could not touch their text or their cards. Each rule here
   restates the page's own literal as the token for its ROLE, classified
   from that literal's luminance and hue: near-black -> --wds-ink, mid
   slate -> --wds-ink-2, brand blue -> --wds-blue, a near-white fill ->
   --wds-surface, a pale hue -> that hue's tint.

   This block sits BEFORE the hand-written sections on purpose. It is a
   broad mechanical sweep, and sections 3+ are the deliberate exceptions
   to it — a light-blue fill that needs a dark label, ink on a disc that
   stays white in both themes. Equal specificity plus later source order
   is what lets those exceptions win.

   Regenerate rather than hand-edit: the generator re-reads the source
   stylesheets, so a change there is picked up instead of drifting.
   ===================================================================== */

/* --- Account Settings — assets/css/candidate-settings.css --- */
html[data-theme="dark"] body.li-app .cs-section,
html[data-theme="dark"] body.li-app .cs-section .form-control,
html[data-theme="dark"] body.li-app .cs-section .form-select,
html[data-theme="dark"] body.li-app .cs-section .form-control:focus,
html[data-theme="dark"] body.li-app .cs-section .form-select:focus,
html[data-theme="dark"] body.li-app .cs-section .btn-outline-primary,
html[data-theme="dark"] body.li-app .cs-section .btn-outline-danger,
html[data-theme="dark"] body.li-app .cs-section .skills-search-trigger,
html[data-theme="dark"] body.li-app .cs-tabs-nav,
html[data-theme="dark"] body.li-app .cs-tab-btn:hover,
html[data-theme="dark"] body.li-app .cs-tab-btn.danger:hover,
html[data-theme="dark"] body.li-app #experienceSlider .noUi-handle,
html[data-theme="dark"] body.li-app .dashboard-account-setting-item,
html[data-theme="dark"] body.li-app .resume-drop-zone,
html[data-theme="dark"] body.li-app .resume-uploaded-card,
html[data-theme="dark"] body.li-app .resume-uploading,
html[data-theme="dark"] body.li-app .custom-toggle-slider:before,
html[data-theme="dark"] body.li-app .privacy-toggle-card,
html[data-theme="dark"] body.li-app .select2-container--default .select2-selection--single,
html[data-theme="dark"] body.li-app .lang-dropdown,
html[data-theme="dark"] body.li-app .address-suggestions-dropdown,
html[data-theme="dark"] body.li-app .address-suggestion-item:hover,
html[data-theme="dark"] body.li-app .cropper-modal-box,
html[data-theme="dark"] body.li-app .profile-file-upload-content,
html[data-theme="dark"] body.li-app .profile-file-upload-content2,
html[data-theme="dark"] body.li-app .cs-current-email,
html[data-theme="dark"] body.li-app .cs-email-pending {
    background-color: var(--wds-surface) !important;
}
html[data-theme="dark"] body.li-app .cs-section-head,
html[data-theme="dark"] body.li-app .cs-section .card,
html[data-theme="dark"] body.li-app .cs-section .resume-uploaded-card,
html[data-theme="dark"] body.li-app .cs-section .resume-drop-zone,
html[data-theme="dark"] body.li-app .cs-section .privacy-toggle-card,
html[data-theme="dark"] body.li-app .cs-photo-block .profile-image-upload-wrap,
html[data-theme="dark"] body.li-app .profile-image-upload-wrap,
html[data-theme="dark"] body.li-app .profile-image-upload-wrap:hover {
    background-color: var(--wds-surface) !important;
    background-image: none !important;
}
html[data-theme="dark"] body.li-app .cs-section-icon.blue,
html[data-theme="dark"] body.li-app .cs-section-icon.green,
html[data-theme="dark"] body.li-app .cs-section-icon.orange,
html[data-theme="dark"] body.li-app .cs-section-icon.purple,
html[data-theme="dark"] body.li-app .cs-section-icon.red,
html[data-theme="dark"] body.li-app .cs-section .skill-chip,
html[data-theme="dark"] body.li-app .cs-section .alert-info,
html[data-theme="dark"] body.li-app .cs-photo-block .profile-file-upload-content2 {
    background-color: var(--wds-surface-2) !important;
    background-image: none !important;
}
html[data-theme="dark"] body.li-app #experienceSlider.noUi-target,
html[data-theme="dark"] body.li-app .custom-toggle-slider {
    background-color: var(--wds-surface-2) !important;
}
html[data-theme="dark"] body.li-app .cs-section,
html[data-theme="dark"] body.li-app .cs-section .form-control,
html[data-theme="dark"] body.li-app .cs-section .form-select,
html[data-theme="dark"] body.li-app .cs-section .form-control:hover:not(:focus):not([readonly]),
html[data-theme="dark"] body.li-app .cs-section .form-select:hover:not(:focus),
html[data-theme="dark"] body.li-app .cs-section .btn-outline-primary,
html[data-theme="dark"] body.li-app .cs-section .btn-outline-danger,
html[data-theme="dark"] body.li-app .cs-section .resume-drop-zone,
html[data-theme="dark"] body.li-app .cs-section .privacy-toggle-card:hover,
html[data-theme="dark"] body.li-app .cs-section .skills-search-trigger,
html[data-theme="dark"] body.li-app .cs-section .alert-info,
html[data-theme="dark"] body.li-app .cs-tabs-nav,
html[data-theme="dark"] body.li-app .cs-photo-block .profile-file-upload-content2,
html[data-theme="dark"] body.li-app .cs-photo-block .profile-file-upload-content2 .profile-file-upload-image,
html[data-theme="dark"] body.li-app .cs-photo-block .image-title-wrap button,
html[data-theme="dark"] body.li-app .cs-photo-block .profile-image-upload-wrap,
html[data-theme="dark"] body.li-app .dashboard-account-setting-item,
html[data-theme="dark"] body.li-app .resume-drop-zone,
html[data-theme="dark"] body.li-app .resume-uploaded-card,
html[data-theme="dark"] body.li-app .resume-uploading,
html[data-theme="dark"] body.li-app .dashboard-account-setting-item .form-control:hover:not(:focus):not([readonly]),
html[data-theme="dark"] body.li-app .privacy-toggle-card,
html[data-theme="dark"] body.li-app .country-flag-option img.flag-icon,
html[data-theme="dark"] body.li-app .select2-container--default .select2-selection--single,
html[data-theme="dark"] body.li-app .lang-dropdown,
html[data-theme="dark"] body.li-app .address-suggestions-dropdown,
html[data-theme="dark"] body.li-app .profile-image-upload-wrap,
html[data-theme="dark"] body.li-app .profile-file-upload-image,
html[data-theme="dark"] body.li-app .profile-remove-image,
html[data-theme="dark"] body.li-app .profile-edit-image,
html[data-theme="dark"] body.li-app .dashboard-account-setting-item .form-control,
html[data-theme="dark"] body.li-app .cs-current-email,
html[data-theme="dark"] body.li-app .cs-email-pending {
    border-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .cs-section-head,
html[data-theme="dark"] body.li-app .address-suggestion-item,
html[data-theme="dark"] body.li-app .cropper-modal-header {
    border-bottom-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .setting-border,
html[data-theme="dark"] body.li-app .cropper-modal-footer {
    border-top-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .cs-section-icon.blue,
html[data-theme="dark"] body.li-app .cs-section .btn-outline-primary,
html[data-theme="dark"] body.li-app .cs-section .skill-chip,
html[data-theme="dark"] body.li-app .cs-section .alert-info,
html[data-theme="dark"] body.li-app .cs-tab-btn:hover,
html[data-theme="dark"] body.li-app .address-suggestion-item i,
html[data-theme="dark"] body.li-app .cs-email-pending,
html[data-theme="dark"] body.li-app .cs-email-pending-note,
html[data-theme="dark"] body.li-app .cs-link-btn {
    color: var(--wds-blue) !important;
}
html[data-theme="dark"] body.li-app .cs-section-icon.green {
    color: var(--wds-green) !important;
}
html[data-theme="dark"] body.li-app .cs-section-icon.orange {
    color: var(--wds-amber) !important;
}
html[data-theme="dark"] body.li-app .cs-section-icon.purple {
    color: var(--wds-violet) !important;
}
html[data-theme="dark"] body.li-app .cs-section-icon.red,
html[data-theme="dark"] body.li-app .cs-section .btn-outline-danger,
html[data-theme="dark"] body.li-app .cs-tab-btn.danger:hover {
    color: var(--wds-red) !important;
}

/* Delete Account: the danger-zone card and its confirmation modal. Their
   light gradients and pink callouts are white/pink slabs in dark mode. */
html[data-theme="dark"] body.li-app .cs-section--danger .cs-section-head,
html[data-theme="dark"] body.li-app .cs-danger-modal__head,
html[data-theme="dark"] body.li-app .cs-danger-modal__foot {
    background-color: var(--wds-surface-2) !important;
    background-image: none !important;
    border-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .cs-danger-callout,
html[data-theme="dark"] body.li-app .cs-danger-confirm,
html[data-theme="dark"] body.li-app .cs-danger-confirm:has(input:checked),
html[data-theme="dark"] body.li-app .cs-danger-modal .form-control {
    background-color: var(--wds-surface) !important;
    border-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .cs-danger-confirm:has(input:checked),
html[data-theme="dark"] body.li-app .cs-danger-modal .form-control:focus {
    border-color: var(--wds-red) !important;
}
html[data-theme="dark"] body.li-app .cs-danger-modal__heading h6,
html[data-theme="dark"] body.li-app .cs-danger-modal__field .form-label,
html[data-theme="dark"] body.li-app .cs-danger-confirm,
html[data-theme="dark"] body.li-app .cs-danger-callout,
html[data-theme="dark"] body.li-app .cs-danger-zone__text p {
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app .cs-danger-modal__hint,
html[data-theme="dark"] body.li-app .cs-danger-modal__close {
    color: var(--wds-ink-3) !important;
}
html[data-theme="dark"] body.li-app .cs-danger-modal__heading p,
html[data-theme="dark"] body.li-app .cs-danger-callout > i,
html[data-theme="dark"] body.li-app .cs-danger-modal__close:hover {
    color: var(--wds-red) !important;
}
html[data-theme="dark"] body.li-app .cs-danger-modal__close:hover {
    background-color: var(--wds-surface) !important;
}
html[data-theme="dark"] body.li-app .cs-section .form-label,
html[data-theme="dark"] body.li-app .cs-photo-block .drag-text h3,
html[data-theme="dark"] body.li-app .cs-photo-title,
html[data-theme="dark"] body.li-app .dashboard-account-setting-item h6,
html[data-theme="dark"] body.li-app .dashboard-account-setting-item .form-label,
html[data-theme="dark"] body.li-app .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] body.li-app .lang-search-box,
html[data-theme="dark"] body.li-app .lang-search-box input,
html[data-theme="dark"] body.li-app .lang-dd-item,
html[data-theme="dark"] body.li-app .drag-text h3,
html[data-theme="dark"] body.li-app .password-toggle:hover,
html[data-theme="dark"] body.li-app .cs-current-email {
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app .cs-section small.text-muted,
html[data-theme="dark"] body.li-app .cs-section .skills-search-trigger,
html[data-theme="dark"] body.li-app .cs-tab-btn,
html[data-theme="dark"] body.li-app .cs-photo-block .drag-text p,
html[data-theme="dark"] body.li-app .cs-photo-hint,
html[data-theme="dark"] body.li-app .exp-slider-scale,
html[data-theme="dark"] body.li-app .drag-text p,
html[data-theme="dark"] body.li-app .password-toggle,
html[data-theme="dark"] body.li-app .cs-link-btn--muted {
    color: var(--wds-ink-2) !important;
}

/* --- Find Jobs — pages/jobs-modern.blade.php --- */
html[data-theme="dark"] body.li-app .wd-find-jobs,
html[data-theme="dark"] body.li-app .wd-search-strip,
html[data-theme="dark"] body.li-app .wd-search-inner,
html[data-theme="dark"] body.li-app .wd-search-field,
html[data-theme="dark"] body.li-app .wd-search-field--loc,
html[data-theme="dark"] body.li-app .wd-loc-dropdown,
html[data-theme="dark"] body.li-app .wd-loc-option:hover,
html[data-theme="dark"] body.li-app .wd-loc-option.is-active,
html[data-theme="dark"] body.li-app .wd-tab:hover,
html[data-theme="dark"] body.li-app .wd-tab--active,
html[data-theme="dark"] body.li-app .wd-view-btn,
html[data-theme="dark"] body.li-app .wd-view-btn:hover,
html[data-theme="dark"] body.li-app .wd-sort select,
html[data-theme="dark"] body.li-app .wd-sort-wrap,
html[data-theme="dark"] body.li-app .wd-sort-wrap select,
html[data-theme="dark"] body.li-app body.li-app .wd-sort-wrap select,
html[data-theme="dark"] body.li-app .wd-filter-card,
html[data-theme="dark"] body.li-app .wd-filter-card .accordion-button,
html[data-theme="dark"] body.li-app .wd-filter-card .accordion-button:hover,
html[data-theme="dark"] body.li-app .wd-filter-card .accordion-button:not(.collapsed),
html[data-theme="dark"] body.li-app .wd-source-tab,
html[data-theme="dark"] body.li-app .wd-source-tab.active,
html[data-theme="dark"] body.li-app .wd-source-tab:hover:not(.active),
html[data-theme="dark"] body.li-app .wd-filter-card .accordion-body,
html[data-theme="dark"] body.li-app .wd-check:hover,
html[data-theme="dark"] body.li-app .wd-filter-search,
html[data-theme="dark"] body.li-app .wd-filter-search:focus,
html[data-theme="dark"] body.li-app .wd-filter-select,
html[data-theme="dark"] body.li-app .wd-filter-select:hover,
html[data-theme="dark"] body.li-app .wd-filter-select:focus,
html[data-theme="dark"] body.li-app .wd-filter-select option,
html[data-theme="dark"] body.li-app .wd-filter-select option:checked,
html[data-theme="dark"] body.li-app article.wd-job-row,
html[data-theme="dark"] body.li-app article.wd-job-row:hover,
html[data-theme="dark"] body.li-app .wd-tag,
html[data-theme="dark"] body.li-app .wd-tag--remote,
html[data-theme="dark"] body.li-app .wd-pagination .page-link,
html[data-theme="dark"] body.li-app .wd-empty-state,
html[data-theme="dark"] body.li-app article.wd-job-row .wd-tag,
html[data-theme="dark"] body.li-app article.wd-job-row .wd-tag--remote,
html[data-theme="dark"] body.li-app .wd-find-jobs--dashboard .wd-search-strip,
html[data-theme="dark"] body.li-app .wd-find-jobs--dashboard .wd-search-field,
html[data-theme="dark"] body.li-app .wd-qchip,
html[data-theme="dark"] body.li-app .wd-qchip.on {
    background-color: var(--wds-surface) !important;
}
html[data-theme="dark"] body.li-app .wd-view-btn.active,
html[data-theme="dark"] body.li-app .wd-applied-chip,
html[data-theme="dark"] body.li-app .wd-applied-chip:hover,
html[data-theme="dark"] body.li-app .wd-sort-wrap select:hover,
html[data-theme="dark"] body.li-app .wd-sort-wrap select:focus,
html[data-theme="dark"] body.li-app body.li-app .wd-sort-wrap select:hover,
html[data-theme="dark"] body.li-app body.li-app .wd-sort-wrap select:focus,
html[data-theme="dark"] body.li-app .wd-external-divider::before,
html[data-theme="dark"] body.li-app .wd-external-divider::after,
html[data-theme="dark"] body.li-app article.wd-job-row .wd-tag {
    background-color: var(--wds-surface-2) !important;
}
html[data-theme="dark"] body.li-app .wd-search-strip,
html[data-theme="dark"] body.li-app .wd-tabs-bar,
html[data-theme="dark"] body.li-app .wd-filter-head,
html[data-theme="dark"] body.li-app .wd-filter-card .accordion-item,
html[data-theme="dark"] body.li-app #cvModal .modal-header,
html[data-theme="dark"] body.li-app .wd-search-field {
    border-bottom-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .wd-search-inner,
html[data-theme="dark"] body.li-app .wd-loc-dropdown,
html[data-theme="dark"] body.li-app .wd-loc-dropdown::-webkit-scrollbar-thumb,
html[data-theme="dark"] body.li-app .wd-view-toggle,
html[data-theme="dark"] body.li-app .wd-sort select,
html[data-theme="dark"] body.li-app .wd-applied-chip,
html[data-theme="dark"] body.li-app .wd-applied-chip:hover,
html[data-theme="dark"] body.li-app .wd-sort-wrap,
html[data-theme="dark"] body.li-app .wd-sort-wrap:hover,
html[data-theme="dark"] body.li-app .wd-filter-card,
html[data-theme="dark"] body.li-app .wd-source-tab,
html[data-theme="dark"] body.li-app .wd-source-tab.active,
html[data-theme="dark"] body.li-app .wd-source-tab:hover:not(.active),
html[data-theme="dark"] body.li-app .wd-filter-search,
html[data-theme="dark"] body.li-app .wd-filter-select,
html[data-theme="dark"] body.li-app .wd-filter-select:hover,
html[data-theme="dark"] body.li-app article.wd-job-row,
html[data-theme="dark"] body.li-app .wd-job-row__logo,
html[data-theme="dark"] body.li-app .wd-tag,
html[data-theme="dark"] body.li-app .wd-tag--remote,
html[data-theme="dark"] body.li-app .wd-pagination .page-link,
html[data-theme="dark"] body.li-app .wd-empty-state,
html[data-theme="dark"] body.li-app .wd-find-jobs--dashboard .wd-search-inner,
html[data-theme="dark"] body.li-app article.wd-job-row:hover,
html[data-theme="dark"] body.li-app article.wd-job-row .wd-tag,
html[data-theme="dark"] body.li-app article.wd-job-row .wd-tag--remote,
html[data-theme="dark"] body.li-app .wd-find-jobs--dashboard .wd-search-strip,
html[data-theme="dark"] body.li-app .wd-find-jobs--dashboard .wd-search-field,
html[data-theme="dark"] body.li-app .wd-qchip {
    border-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .wd-search-field {
    border-right-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .wd-view-btn + .wd-view-btn {
    border-left-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app article.wd-job-row:first-child,
html[data-theme="dark"] body.li-app article.wd-job-row:only-child,
html[data-theme="dark"] body.li-app .wd-job-row__foot,
html[data-theme="dark"] body.li-app #cvModal .modal-footer {
    border-top-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .wd-loc-option,
html[data-theme="dark"] body.li-app .wd-search-field input,
html[data-theme="dark"] body.li-app .wd-results-count,
html[data-theme="dark"] body.li-app .wd-results-count strong,
html[data-theme="dark"] body.li-app .wd-sort select,
html[data-theme="dark"] body.li-app .wd-sort-wrap select,
html[data-theme="dark"] body.li-app .wd-filter-head h5,
html[data-theme="dark"] body.li-app .wd-filter-card .accordion-button,
html[data-theme="dark"] body.li-app .wd-check,
html[data-theme="dark"] body.li-app .wd-filter-search,
html[data-theme="dark"] body.li-app .wd-filter-select,
html[data-theme="dark"] body.li-app .wd-filter-select option,
html[data-theme="dark"] body.li-app .wd-job-row__title,
html[data-theme="dark"] body.li-app .wd-job-row__company strong,
html[data-theme="dark"] body.li-app .wd-pagination .page-link,
html[data-theme="dark"] body.li-app #cvModal .modal-title,
html[data-theme="dark"] body.li-app article.wd-job-row .wd-job-row__title {
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app .wd-loc-option:hover,
html[data-theme="dark"] body.li-app .wd-loc-option.is-active,
html[data-theme="dark"] body.li-app .wd-loc-option:hover i,
html[data-theme="dark"] body.li-app .wd-loc-option.is-active i,
html[data-theme="dark"] body.li-app .wd-loc-option mark,
html[data-theme="dark"] body.li-app .wd-tab:hover,
html[data-theme="dark"] body.li-app .wd-tab--active,
html[data-theme="dark"] body.li-app .wd-view-btn:hover,
html[data-theme="dark"] body.li-app .wd-view-btn.active,
html[data-theme="dark"] body.li-app .wd-applied-chip,
html[data-theme="dark"] body.li-app .wd-applied-clear:hover,
html[data-theme="dark"] body.li-app .wd-filter-head h5::before,
html[data-theme="dark"] body.li-app .wd-filter-head a,
html[data-theme="dark"] body.li-app .wd-filter-card .accordion-button:hover,
html[data-theme="dark"] body.li-app .wd-filter-card .accordion-button:not(.collapsed),
html[data-theme="dark"] body.li-app .wd-source-tab.active,
html[data-theme="dark"] body.li-app .wd-source-tab:hover:not(.active),
html[data-theme="dark"] body.li-app .wd-check input[type="checkbox"]:checked + span,
html[data-theme="dark"] body.li-app .wd-check input[type="radio"]:checked + span,
html[data-theme="dark"] body.li-app .wd-filter-select option:checked,
html[data-theme="dark"] body.li-app .wd-job-row__logo-initial,
html[data-theme="dark"] body.li-app .wd-job-row__title:hover,
html[data-theme="dark"] body.li-app .wd-save-btn:hover,
html[data-theme="dark"] body.li-app .wd-save-btn.bookmarked,
html[data-theme="dark"] body.li-app .wd-tag,
html[data-theme="dark"] body.li-app .wd-apply-btn,
html[data-theme="dark"] body.li-app article.wd-job-row .wd-save-btn:hover,
html[data-theme="dark"] body.li-app article.wd-job-row .wd-save-btn.bookmarked,
html[data-theme="dark"] body.li-app .wd-qchip:hover,
html[data-theme="dark"] body.li-app .wd-qchip.on,
html[data-theme="dark"] body.li-app article.wd-job-row .wd-tag {
    color: var(--wds-blue) !important;
}
html[data-theme="dark"] body.li-app .wd-tab,
html[data-theme="dark"] body.li-app .wd-view-btn,
html[data-theme="dark"] body.li-app .wd-sort label,
html[data-theme="dark"] body.li-app .wd-applied-filters__label,
html[data-theme="dark"] body.li-app .wd-applied-clear,
html[data-theme="dark"] body.li-app .wd-source-tab,
html[data-theme="dark"] body.li-app .wd-job-row__company,
html[data-theme="dark"] body.li-app .wd-job-row__meta,
html[data-theme="dark"] body.li-app article.wd-job-row .wd-job-row__company,
html[data-theme="dark"] body.li-app article.wd-job-row .wd-job-row__meta span,
html[data-theme="dark"] body.li-app article.wd-job-row .wd-tag,
html[data-theme="dark"] body.li-app .wd-qc-label,
html[data-theme="dark"] body.li-app .wd-qchip,
html[data-theme="dark"] body.li-app .wd-results-count {
    color: var(--wds-ink-2) !important;
}
html[data-theme="dark"] body.li-app .wd-tag--remote,
html[data-theme="dark"] body.li-app .wd-applied,
html[data-theme="dark"] body.li-app article.wd-job-row .wd-job-row__meta span:has(> .ph-currency-inr),
html[data-theme="dark"] body.li-app article.wd-job-row .wd-job-row__meta .ph-currency-inr,
html[data-theme="dark"] body.li-app article.wd-job-row .wd-tag--remote {
    color: var(--wds-green) !important;
}
html[data-theme="dark"] body.li-app .wd-expired {
    color: var(--wds-red) !important;
}

/* --- Job Preferences — pages/candidate/career-details.blade.php --- */
html[data-theme="dark"] body.li-app .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] body.li-app .select2-container--default .select2-selection--single,
html[data-theme="dark"] body.li-app .location-chips-wrapper,
html[data-theme="dark"] body.li-app .locations-dropdown,
html[data-theme="dark"] body.li-app .location-group-header,
html[data-theme="dark"] body.li-app .location-option:hover,
html[data-theme="dark"] body.li-app .employment-chip,
html[data-theme="dark"] body.li-app .job-role-chip .remove-job-role-chip:hover,
html[data-theme="dark"] body.li-app .job-roles-dropdown,
html[data-theme="dark"] body.li-app .job-role-option:hover,
html[data-theme="dark"] body.li-app .pref-card,
html[data-theme="dark"] body.li-app .pref-card .form-control,
html[data-theme="dark"] body.li-app .employment-chips-wrapper,
html[data-theme="dark"] body.li-app .location-chips-wrapper,
html[data-theme="dark"] body.li-app #experienceSlider .noUi-handle,
html[data-theme="dark"] body.li-app .pref-card__icon,
html[data-theme="dark"] body.li-app .pref-card__icon--blue,
html[data-theme="dark"] body.li-app .pref-card__icon--green,
html[data-theme="dark"] body.li-app .pref-card__icon--violet,
html[data-theme="dark"] body.li-app .pref-card .li-combo__btn:hover,
html[data-theme="dark"] body.li-app .pref-card .li-switch__track::after {
    background-color: var(--wds-surface) !important;
}
html[data-theme="dark"] body.li-app .location-option.selected,
html[data-theme="dark"] body.li-app .job-role-option.selected,
html[data-theme="dark"] body.li-app #experienceSlider.noUi-target,
html[data-theme="dark"] body.li-app .job-role-chip,
html[data-theme="dark"] body.li-app .pref-card .li-combo__option:hover,
html[data-theme="dark"] body.li-app .pref-card .li-combo__option.is-active,
html[data-theme="dark"] body.li-app .pref-card .li-combo__option[aria-selected="true"],
html[data-theme="dark"] body.li-app .pref-card .location-chip,
html[data-theme="dark"] body.li-app .pref-card .location-option:hover,
html[data-theme="dark"] body.li-app .pref-card .location-option.selected,
html[data-theme="dark"] body.li-app .pref-card .job-role-option:hover,
html[data-theme="dark"] body.li-app .pref-card .job-role-option.selected {
    background-color: var(--wds-surface-2) !important;
}
html[data-theme="dark"] body.li-app .dashboard-wrapper {
    background-color: var(--wds-surface) !important;
    background-image: none !important;
}
html[data-theme="dark"] body.li-app .experience-item,
html[data-theme="dark"] body.li-app .location-chips-wrapper,
html[data-theme="dark"] body.li-app .locations-dropdown,
html[data-theme="dark"] body.li-app .job-roles-dropdown,
html[data-theme="dark"] body.li-app .pref-card .form-control,
html[data-theme="dark"] body.li-app .employment-chips-wrapper,
html[data-theme="dark"] body.li-app .location-chips-wrapper,
html[data-theme="dark"] body.li-app .job-role-chip,
html[data-theme="dark"] body.li-app .pref-card .location-chip {
    border-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .location-group-header {
    border-bottom-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app #locationSearchInput:focus {
    border-color: var(--wds-green-line) !important;
}
html[data-theme="dark"] body.li-app .experience-item h6,
html[data-theme="dark"] body.li-app .experience-item .form-label,
html[data-theme="dark"] body.li-app .dashboard-right-header .left-text h3,
html[data-theme="dark"] body.li-app .pref-card__title,
html[data-theme="dark"] body.li-app .pref-card .form-control,
html[data-theme="dark"] body.li-app .pref-card .form-control::placeholder {
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app .location-group-header,
html[data-theme="dark"] body.li-app .pref-page-sub,
html[data-theme="dark"] body.li-app .pref-card__sub,
html[data-theme="dark"] body.li-app .exp-slider-scale {
    color: var(--wds-ink-2) !important;
}
html[data-theme="dark"] body.li-app .job-role-option:hover {
    color: var(--wds-blue) !important;
}
html[data-theme="dark"] body.li-app .pref-card .li-hint.is-error {
    color: var(--wds-red) !important;
}

/* --- Browse Companies — pages/employees.blade.php --- */
html[data-theme="dark"] body.li-app .emp-filterbar__actions,
html[data-theme="dark"] body.li-app .emp-chip,
html[data-theme="dark"] body.li-app .emp-card,
html[data-theme="dark"] body.li-app .emp-card__tag,
html[data-theme="dark"] body.li-app .emp-card__tag--jobs,
html[data-theme="dark"] body.li-app .emp-card__tag--nojobs,
html[data-theme="dark"] body.li-app .emp-empty,
html[data-theme="dark"] body.li-app .emp-loading-overlay,
html[data-theme="dark"] body.li-app .emp-filter-scroll::-webkit-scrollbar-track,
html[data-theme="dark"] body.li-app .emp-filterbar-card,
html[data-theme="dark"] body.li-app .emp-filterbar-card__btn--ghost {
    background-color: var(--wds-surface) !important;
}
html[data-theme="dark"] body.li-app .emp-filterbar-card__divider,
html[data-theme="dark"] body.li-app .emp-filterbar-card__btn--ghost:hover {
    background-color: var(--wds-surface-2) !important;
}
html[data-theme="dark"] body.li-app .emp-filterbar__field {
    border-bottom-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .emp-chip,
html[data-theme="dark"] body.li-app .emp-card,
html[data-theme="dark"] body.li-app .emp-card__logo,
html[data-theme="dark"] body.li-app .emp-card__tag--jobs,
html[data-theme="dark"] body.li-app .emp-empty,
html[data-theme="dark"] body.li-app .emp-spinner,
html[data-theme="dark"] body.li-app .emp-filterbar-card {
    border-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .emp-card__right {
    border-top-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .emp-hero__title,
html[data-theme="dark"] body.li-app .emp-toolbar__count strong,
html[data-theme="dark"] body.li-app .emp-card__name,
html[data-theme="dark"] body.li-app .emp-empty__title,
html[data-theme="dark"] body.li-app .emp-filter-option__text,
html[data-theme="dark"] body.li-app .emp-filterbar-card__btn--ghost:hover {
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app .emp-hero__sub,
html[data-theme="dark"] body.li-app .emp-toolbar__count,
html[data-theme="dark"] body.li-app .emp-chip button,
html[data-theme="dark"] body.li-app .emp-card__meta,
html[data-theme="dark"] body.li-app .emp-card__tag,
html[data-theme="dark"] body.li-app .emp-filterbar-card__icon,
html[data-theme="dark"] body.li-app .emp-filterbar-card__btn--ghost {
    color: var(--wds-ink-2) !important;
}
html[data-theme="dark"] body.li-app .emp-hero__crumbs a,
html[data-theme="dark"] body.li-app .emp-hero__crumbs a:hover,
html[data-theme="dark"] body.li-app .emp-chip,
html[data-theme="dark"] body.li-app .emp-card__tag--jobs,
html[data-theme="dark"] body.li-app .emp-filterbar-card__input-wrap:focus-within .emp-filterbar-card__icon {
    color: var(--wds-blue) !important;
}
html[data-theme="dark"] body.li-app .emp-chip button:hover {
    color: var(--wds-red) !important;
}
html[data-theme="dark"] body.li-app .emp-card__tag--nojobs {
    color: var(--wds-amber) !important;
}

/* --- My Resumes — css/resume-linkedin.css --- */
html[data-theme="dark"] body.li-app .rs-card,
html[data-theme="dark"] body.li-app .rs-modal .modal-header,
html[data-theme="dark"] body.li-app .rs-modal .modal-footer,
html[data-theme="dark"] body.li-app .rs-input,
html[data-theme="dark"] body.li-app .rs-drop,
html[data-theme="dark"] body.li-app .resume-wizard-card,
html[data-theme="dark"] body.li-app .resume-wizard-card > .card-header,
html[data-theme="dark"] body.li-app .resume-wizard-card .card-body > .bg-light,
html[data-theme="dark"] body.li-app .step-circle,
html[data-theme="dark"] body.li-app .resume-wizard-card .form-control,
html[data-theme="dark"] body.li-app .resume-wizard-card .form-select,
html[data-theme="dark"] body.li-app .step-navigation {
    background-color: var(--wds-surface) !important;
}

/* --- Feed — pages/feed/index.blade.php (redesigned 20 Oct 2026) ----------
   public/frontend/css/feed.css draws the whole page from its --fd-* tokens,
   so dark mode only re-points them to the approved dark palette. Brand
   fills take dark ink (#0B1430); the toast turns light on the dark page. */
html[data-theme="dark"] body.li-app {
    --fd-bg: #0D1320;
    --fd-card: #141C2C;
    --fd-card-2: #182234;
    --fd-border: #25314A;
    --fd-menu-border: #33425F;
    --fd-input-border: #33425F;
    --fd-text: #E9EEF7;
    --fd-muted: #97A3B9;
    --fd-brand: #8AA8EE;
    --fd-brand-hover: #A6BEF3;
    --fd-brand-ink: #0B1430;
    --fd-brand-tint: #1A2850;
    --fd-green: #4CC98A;
    --fd-green-tint: rgba(76, 201, 138, .14);
    --fd-red: #F28B82;
    --fd-danger-ink: #0B1430;
    --fd-orange: #F4A261;
    --fd-violet: #B9A2F5;
    --fd-cover: #1C397D;
    --fd-overlay: rgba(0, 0, 0, .62);
    --fd-pop-shadow: 0 10px 28px rgba(0, 0, 0, .45);
    --fd-toast-bg: #E9EEF7;
    --fd-toast-ink: #0B1430;
    --fd-toast-link: #2B55BB;
}

/* --- Messaging — livewire/chat/chat-box.blade.php --- */
html[data-theme="dark"] body.li-app .li-msg .li-th-menu .li-th-menu-items,
html[data-theme="dark"] body.li-app .li-th-menu-items a,
html[data-theme="dark"] body.li-app .li-th-menu-items button,
html[data-theme="dark"] body.li-app .message.received,
html[data-theme="dark"] body.li-app .message.sent,
html[data-theme="dark"] body.li-app .cjc-type,
html[data-theme="dark"] body.li-app .li-emoji-pop {
    background-color: var(--wds-surface) !important;
}
html[data-theme="dark"] body.li-app .li-th-menu-items .li-th-menu-danger,
html[data-theme="dark"] body.li-app .li-composer-error {
    color: var(--wds-red) !important;
}

/* --- ATS Resume Score — css/ats-linkedin.css --- */
html[data-theme="dark"] body.li-app .ats-card,
html[data-theme="dark"] body.li-app .ats-drop,
html[data-theme="dark"] body.li-app .ats-textarea {
    background-color: var(--wds-surface) !important;
}

/* --- Notifications — pages/partials/notification-center.blade.php --- */
html[data-theme="dark"] body.li-app .wdnc-shell,
html[data-theme="dark"] body.li-app .wdnc-btn,
html[data-theme="dark"] body.li-app .wdnc-btn:hover,
html[data-theme="dark"] body.li-app .wdnc-tab,
html[data-theme="dark"] body.li-app .wdnc-item,
html[data-theme="dark"] body.li-app .wdnc-item.is-unread,
html[data-theme="dark"] body.li-app .wdnc-item:hover,
html[data-theme="dark"] body.li-app .wdnc-icon--amber,
html[data-theme="dark"] body.li-app .wdnc-icon--emerald,
html[data-theme="dark"] body.li-app .wdnc-icon--slate,
html[data-theme="dark"] body.li-app .wdnc-empty {
    background-color: var(--wds-surface) !important;
}
html[data-theme="dark"] body.li-app .wdnc-head,
html[data-theme="dark"] body.li-app .wdnc-skeleton-row {
    background-color: var(--wds-surface) !important;
    background-image: none !important;
}
html[data-theme="dark"] body.li-app .wdnc-tab:hover,
html[data-theme="dark"] body.li-app .wdnc-icon--blue,
html[data-theme="dark"] body.li-app .wdnc-icon--violet {
    background-color: var(--wds-surface-2) !important;
}
html[data-theme="dark"] body.li-app .wdnc-shell,
html[data-theme="dark"] body.li-app .wdnc-btn,
html[data-theme="dark"] body.li-app .wdnc-btn:hover,
html[data-theme="dark"] body.li-app .wdnc-spinner,
html[data-theme="dark"] body.li-app .wdnc-search,
html[data-theme="dark"] body.li-app .wdnc-search:focus,
html[data-theme="dark"] body.li-app .wdnc-tab,
html[data-theme="dark"] body.li-app .wdnc-empty {
    border-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .wdnc-head,
html[data-theme="dark"] body.li-app .wdnc-item {
    border-bottom-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .wdnc-title,
html[data-theme="dark"] body.li-app .wdnc-item-title {
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app .wdnc-sub,
html[data-theme="dark"] body.li-app .wdnc-icon--slate,
html[data-theme="dark"] body.li-app .wdnc-item-message,
html[data-theme="dark"] body.li-app .wdnc-item-time,
html[data-theme="dark"] body.li-app .wdnc-empty p {
    color: var(--wds-ink-2) !important;
}
html[data-theme="dark"] body.li-app .wdnc-search,
html[data-theme="dark"] body.li-app .wdnc-empty h4 {
    color: var(--wds-blue) !important;
}
html[data-theme="dark"] body.li-app .wdnc-icon--amber {
    color: var(--wds-amber) !important;
}
html[data-theme="dark"] body.li-app .wdnc-icon--violet {
    color: var(--wds-violet) !important;
}
html[data-theme="dark"] body.li-app .wdnc-icon--emerald {
    color: var(--wds-green) !important;
}

/* --- Public profile — pages/candidate/public-profile.blade.php --- */
html[data-theme="dark"] body.li-app .cpp-wrap,
html[data-theme="dark"] body.li-app .cpp-card,
html[data-theme="dark"] body.li-app .cpp-btn,
html[data-theme="dark"] body.li-app .cpp-btn--state,
html[data-theme="dark"] body.li-app .cpp-btn--state:hover,
html[data-theme="dark"] body.li-app .cpp-endorse-btn,
html[data-theme="dark"] body.li-app .cpp-rec-pending {
    background-color: var(--wds-surface) !important;
}
html[data-theme="dark"] body.li-app .cpp-avatar,
html[data-theme="dark"] body.li-app .cpp-open-badge,
html[data-theme="dark"] body.li-app .cpp-btn--state,
html[data-theme="dark"] body.li-app .cpp-btn--state:hover,
html[data-theme="dark"] body.li-app .cpp-rec-pending,
html[data-theme="dark"] body.li-app .cpp-rec-del,
html[data-theme="dark"] body.li-app .cpp-rec-form input,
html[data-theme="dark"] body.li-app .cpp-rec-form textarea,
html[data-theme="dark"] body.li-app .cpp-privacy {
    border-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .cpp-entry,
html[data-theme="dark"] body.li-app .cpp-skill-row,
html[data-theme="dark"] body.li-app .cpp-rec,
html[data-theme="dark"] body.li-app .cpp-rec-form,
html[data-theme="dark"] body.li-app .cpp-fact,
html[data-theme="dark"] body.li-app .cpp-showall {
    border-top-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .cpp-dot {
    color: var(--wds-ink) !important;
}
/* Connections / Following Companies cards and the Activity cards and Posts
   page (profile-activity.css, 26 Oct 2026): .cpa carries its own tokens. */
html[data-theme="dark"] body.li-app .cpp-statcard {
    background-color: var(--wds-surface) !important;
    border-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .cpa {
    --cpa-ink: rgba(255, 255, 255, .92);
    --cpa-mid: rgba(255, 255, 255, .75);
    --cpa-mute: rgba(255, 255, 255, .58);
    --cpa-line: var(--wds-line);
    --cpa-line-soft: var(--wds-line);
    --cpa-surface: var(--wds-surface);
    --cpa-fill: var(--wds-surface-2);
    --cpa-blue: #71b7fb;
    --cpa-tint: rgba(113, 183, 251, .14);
}
html[data-theme="dark"] body.li-app .cpp-check.done {
    color: var(--wds-green) !important;
}

/* --- Feed search — pages/feed/search.blade.php --- */
html[data-theme="dark"] body.li-app .fd-tabs,
html[data-theme="dark"] body.li-app .fs-box,
html[data-theme="dark"] body.li-app .fs-item,
html[data-theme="dark"] body.li-app .fs-hint,
html[data-theme="dark"] body.li-app .fs-none {
    background-color: var(--wds-surface) !important;
}
html[data-theme="dark"] body.li-app .fs-box,
html[data-theme="dark"] body.li-app .fs-item,
html[data-theme="dark"] body.li-app .fs-hint,
html[data-theme="dark"] body.li-app .fs-none {
    border-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .fd-tab,
html[data-theme="dark"] body.li-app .fs-sub,
html[data-theme="dark"] body.li-app .fs-hint,
html[data-theme="dark"] body.li-app .fs-none {
    color: var(--wds-ink-2) !important;
}
html[data-theme="dark"] body.li-app .fd-tab:hover,
html[data-theme="dark"] body.li-app .fs-name,
html[data-theme="dark"] body.li-app .fs-hint p,
html[data-theme="dark"] body.li-app .fs-none p {
    color: var(--wds-ink) !important;
}

/* --- Applied Jobs — pages/candidate/applied-jobs.blade.php --- */
html[data-theme="dark"] body.li-app .accordion-button:hover,
html[data-theme="dark"] body.li-app .accordion-button:not(.collapsed),
html[data-theme="dark"] body.li-app .offer-reject-btn:hover,
html[data-theme="dark"] body.li-app .applied-job-modal .modal-header,
html[data-theme="dark"] body.li-app .applied-job-modal .modal-body,
html[data-theme="dark"] body.li-app .cm-modal .modal-body,
html[data-theme="dark"] body.li-app .cm-modal .modal-footer,
html[data-theme="dark"] body.li-app .view-details-toggle,
html[data-theme="dark"] body.li-app .view-details-toggle:hover,
html[data-theme="dark"] body.li-app .wd-stage-stepper .wd-step-dot,
html[data-theme="dark"] body.li-app .wd-app-detail-body,
html[data-theme="dark"] body.li-app .wd-appcard__btn,
html[data-theme="dark"] body.li-app .wd-chip-status--active,
html[data-theme="dark"] body.li-app .wd-btn-withdraw,
html[data-theme="dark"] body.li-app .wd-btn-withdraw:hover,
html[data-theme="dark"] body.li-app .wd-resume-link,
html[data-theme="dark"] body.li-app .wd-offer-decline {
    background-color: var(--wds-surface) !important;
}
html[data-theme="dark"] body.li-app .view-details-toggle:hover,
html[data-theme="dark"] body.li-app .wd-chip-status--expired,
html[data-theme="dark"] body.li-app .wd-resume-link__icon {
    background-color: var(--wds-surface-2) !important;
}
html[data-theme="dark"] body.li-app .accordion-button:not(.collapsed),
html[data-theme="dark"] body.li-app .applied-job-modal .modal-header {
    border-bottom-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .cm-modal .cm-textarea,
html[data-theme="dark"] body.li-app .view-details-toggle,
html[data-theme="dark"] body.li-app .view-details-toggle:hover,
html[data-theme="dark"] body.li-app .wd-stage-stepper .wd-step-dot,
html[data-theme="dark"] body.li-app .wd-appcard,
html[data-theme="dark"] body.li-app .wd-btn-withdraw,
html[data-theme="dark"] body.li-app .wd-resume-link,
html[data-theme="dark"] body.li-app .wd-offer-decline {
    border-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .applied-job-modal .modal-title-eyebrow,
html[data-theme="dark"] body.li-app .applied-job-modal .modal-meta,
html[data-theme="dark"] body.li-app .cm-modal .cm-note,
html[data-theme="dark"] body.li-app .wd-resume-link__type {
    color: var(--wds-ink-2) !important;
}
html[data-theme="dark"] body.li-app .applied-job-modal .modal-title,
html[data-theme="dark"] body.li-app .cm-modal .cm-label,
html[data-theme="dark"] body.li-app .wd-appcard__stat-value,
html[data-theme="dark"] body.li-app .wd-cover-body,
html[data-theme="dark"] body.li-app .wd-resume-link__name {
    color: var(--wds-ink) !important;
}

/* --- Job details — pages/job-details.blade.php --- */
html[data-theme="dark"] body.li-app .job-details-wrapper .job-hero,
html[data-theme="dark"] body.li-app .job-details-wrapper .sidebar-card,
html[data-theme="dark"] body.li-app .wd-sticky-apply,
html[data-theme="dark"] body.li-app .job-details-wrapper,
html[data-theme="dark"] body.li-app .job-details-wrapper .tag-primary,
html[data-theme="dark"] body.li-app .job-details-wrapper .tag-deadline,
html[data-theme="dark"] body.li-app .job-details-wrapper .tag-remote,
html[data-theme="dark"] body.li-app .job-details-wrapper .tag-featured,
html[data-theme="dark"] body.li-app .job-details-wrapper .job-hero-right,
html[data-theme="dark"] body.li-app .job-details-wrapper .content-card,
html[data-theme="dark"] body.li-app .job-details-wrapper .sidebar-card,
html[data-theme="dark"] body.li-app .job-details-wrapper .key-skill-tag,
html[data-theme="dark"] body.li-app .job-details-wrapper .skills-tags .skill-tag,
html[data-theme="dark"] body.li-app .job-details-wrapper .skills-list li,
html[data-theme="dark"] body.li-app .job-details-wrapper .content-card,
html[data-theme="dark"] body.li-app .job-details-wrapper .sidebar-card,
html[data-theme="dark"] body.li-app .job-details-wrapper .sidebar-apply-card,
html[data-theme="dark"] body.li-app .job-details-wrapper .key-skill-tag,
html[data-theme="dark"] body.li-app .job-details-wrapper .benefit-item,
html[data-theme="dark"] body.li-app .job-details-wrapper .wd-savejob-btn,
html[data-theme="dark"] body.li-app .job-details-wrapper .wd-match-ring span,
html[data-theme="dark"] body.li-app .related-job-card,
html[data-theme="dark"] body.li-app .ats-improve-btn,
html[data-theme="dark"] body.li-app .ats-improve-btn:hover,
html[data-theme="dark"] body.li-app .modern-modal-content,
html[data-theme="dark"] body.li-app .modern-modal-header,
html[data-theme="dark"] body.li-app .modern-modal-body,
html[data-theme="dark"] body.li-app .modern-modal-body::-webkit-scrollbar-track,
html[data-theme="dark"] body.li-app #cvModal .form-control,
html[data-theme="dark"] body.li-app #cvModal select,
html[data-theme="dark"] body.li-app #cvModal textarea,
html[data-theme="dark"] body.li-app #cvModal input[type="text"],
html[data-theme="dark"] body.li-app #cvModal input[type="number"],
html[data-theme="dark"] body.li-app .li-apply-resume,
html[data-theme="dark"] body.li-app .li-apply-resume__icon,
html[data-theme="dark"] body.li-app .li-apply-resume__view,
html[data-theme="dark"] body.li-app #cvModal .li-apply-resume select#resume_id,
html[data-theme="dark"] body.li-app #cvModal .li-apply-resume select#resume_id:hover,
html[data-theme="dark"] body.li-app #cvModal .li-apply-resume select#resume_id:focus,
html[data-theme="dark"] body.li-app .li-apply-notice,
html[data-theme="dark"] body.li-app .modern-modal-footer,
html[data-theme="dark"] body.li-app .tag-featured,
html[data-theme="dark"] body.li-app .tag-remote,
html[data-theme="dark"] body.li-app .tag-deadline,
html[data-theme="dark"] body.li-app .tag-experience,
html[data-theme="dark"] body.li-app .status-pending,
html[data-theme="dark"] body.li-app .rejected-badge,
html[data-theme="dark"] body.li-app .sidebar-apply-card,
html[data-theme="dark"] body.li-app .content-card,
html[data-theme="dark"] body.li-app .skill-tag.matched,
html[data-theme="dark"] body.li-app .skill-tag.more,
html[data-theme="dark"] body.li-app .benefit-item,
html[data-theme="dark"] body.li-app .share-url input,
html[data-theme="dark"] body.li-app .sidebar-card,
html[data-theme="dark"] body.li-app .optional-badge,
html[data-theme="dark"] body.li-app .skill-badge.must-have,
html[data-theme="dark"] body.li-app .skill-badge.nice-to-have,
html[data-theme="dark"] body.li-app .overview-icon.green,
html[data-theme="dark"] body.li-app .overview-icon.cyan,
html[data-theme="dark"] body.li-app .salary-card .salary-type,
html[data-theme="dark"] body.li-app .company-link,
html[data-theme="dark"] body.li-app .company-link:hover,
html[data-theme="dark"] body.li-app .hero-actions,
html[data-theme="dark"] body.li-app .hero-posted-at,
html[data-theme="dark"] body.li-app .content-card,
html[data-theme="dark"] body.li-app .sidebar-card,
html[data-theme="dark"] body.li-app .key-skill-tag,
html[data-theme="dark"] body.li-app .key-skill-tag:nth-child(2n),
html[data-theme="dark"] body.li-app .key-skill-tag:nth-child(3n),
html[data-theme="dark"] body.li-app .skill-group-label em,
html[data-theme="dark"] body.li-app .job-details-wrapper .key-skill-tag.is-must,
html[data-theme="dark"] body.li-app .job-details-wrapper .key-skill-tag.is-nice,
html[data-theme="dark"] body.li-app .match-score-card,
html[data-theme="dark"] body.li-app .sidebar-action-btn,
html[data-theme="dark"] body.li-app .sidebar-action-btn:hover,
html[data-theme="dark"] body.li-app .sidebar-action-btn.active,
html[data-theme="dark"] body.li-app .sidebar-action-btn--share,
html[data-theme="dark"] body.li-app .related-jobs-wrap,
html[data-theme="dark"] body.li-app .related-job-chip,
html[data-theme="dark"] body.li-app .related-job-chip--soft,
html[data-theme="dark"] body.li-app .related-job-chip--accent,
html[data-theme="dark"] body.li-app .related-job-arrow {
    background-color: var(--wds-surface) !important;
}
html[data-theme="dark"] body.li-app .job-details-wrapper .tag-experience,
html[data-theme="dark"] body.li-app .job-details-wrapper .hero-posted-at,
html[data-theme="dark"] body.li-app .tag-primary,
html[data-theme="dark"] body.li-app .breakdown-bar,
html[data-theme="dark"] body.li-app .skill-tag.missing,
html[data-theme="dark"] body.li-app .copy-btn,
html[data-theme="dark"] body.li-app .copy-btn:hover,
html[data-theme="dark"] body.li-app .overview-icon.blue,
html[data-theme="dark"] body.li-app .overview-icon.red,
html[data-theme="dark"] body.li-app .overview-icon.purple,
html[data-theme="dark"] body.li-app .overview-icon.indigo,
html[data-theme="dark"] body.li-app .tag-remote,
html[data-theme="dark"] body.li-app .tag-experience,
html[data-theme="dark"] body.li-app .tag-deadline,
html[data-theme="dark"] body.li-app .key-skill-tag:nth-child(5n),
html[data-theme="dark"] body.li-app .overview-icon.green,
html[data-theme="dark"] body.li-app .skill-badge.must-have {
    background-color: var(--wds-surface-2) !important;
}
html[data-theme="dark"] body.li-app .workdu-apply-btn::before,
html[data-theme="dark"] body.li-app .match-score-card,
html[data-theme="dark"] body.li-app .skills-card.must-have,
html[data-theme="dark"] body.li-app .salary-card,
html[data-theme="dark"] body.li-app .job-hero,
html[data-theme="dark"] body.li-app .related-job-card {
    background-color: var(--wds-surface) !important;
    background-image: none !important;
}
html[data-theme="dark"] body.li-app .skills-card.nice-to-have {
    background-color: var(--wds-surface-2) !important;
    background-image: none !important;
}
html[data-theme="dark"] body.li-app .job-details-wrapper .job-hero,
html[data-theme="dark"] body.li-app .job-details-wrapper .sidebar-card,
html[data-theme="dark"] body.li-app .job-details-wrapper .job-hero-right,
html[data-theme="dark"] body.li-app .job-details-wrapper .content-card,
html[data-theme="dark"] body.li-app .job-details-wrapper .sidebar-card,
html[data-theme="dark"] body.li-app .job-details-wrapper .key-skill-tag,
html[data-theme="dark"] body.li-app .job-details-wrapper .skills-tags .skill-tag,
html[data-theme="dark"] body.li-app .job-details-wrapper .skills-list li,
html[data-theme="dark"] body.li-app .related-jobs-wrap,
html[data-theme="dark"] body.li-app .related-job-card,
html[data-theme="dark"] body.li-app .ats-improve-btn-secondary:hover,
html[data-theme="dark"] body.li-app #cvModal .select2-container--default .select2-selection--single,
html[data-theme="dark"] body.li-app .company-logo,
html[data-theme="dark"] body.li-app .status-pending,
html[data-theme="dark"] body.li-app .rejected-badge,
html[data-theme="dark"] body.li-app .sidebar-apply-card,
html[data-theme="dark"] body.li-app .content-card,
html[data-theme="dark"] body.li-app .match-score-card,
html[data-theme="dark"] body.li-app .benefit-item,
html[data-theme="dark"] body.li-app .map-container,
html[data-theme="dark"] body.li-app .share-url input,
html[data-theme="dark"] body.li-app .sidebar-card,
html[data-theme="dark"] body.li-app .skills-card.must-have,
html[data-theme="dark"] body.li-app .skills-card.nice-to-have,
html[data-theme="dark"] body.li-app .skill-badge.must-have,
html[data-theme="dark"] body.li-app .skill-badge.nice-to-have,
html[data-theme="dark"] body.li-app .salary-card,
html[data-theme="dark"] body.li-app .salary-card .salary-type,
html[data-theme="dark"] body.li-app .company-card-logo,
html[data-theme="dark"] body.li-app .job-hero,
html[data-theme="dark"] body.li-app .company-logo-wrapper,
html[data-theme="dark"] body.li-app .hero-actions,
html[data-theme="dark"] body.li-app .hero-posted-at,
html[data-theme="dark"] body.li-app .content-card,
html[data-theme="dark"] body.li-app .sidebar-card,
html[data-theme="dark"] body.li-app .key-skill-tag,
html[data-theme="dark"] body.li-app .key-skill-tag:nth-child(2n),
html[data-theme="dark"] body.li-app .key-skill-tag:nth-child(5n),
html[data-theme="dark"] body.li-app .skill-group-label em,
html[data-theme="dark"] body.li-app .job-details-wrapper .key-skill-tag.is-must,
html[data-theme="dark"] body.li-app .job-details-wrapper .key-skill-tag.is-nice,
html[data-theme="dark"] body.li-app .sidebar-action-btn,
html[data-theme="dark"] body.li-app .share-url,
html[data-theme="dark"] body.li-app .related-job-card:hover,
html[data-theme="dark"] body.li-app .related-job-logo {
    border-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .wd-sticky-apply,
html[data-theme="dark"] body.li-app .job-details-title-box-card,
html[data-theme="dark"] body.li-app .section-title,
html[data-theme="dark"] body.li-app .sidebar-card-title,
html[data-theme="dark"] body.li-app .overview-item,
html[data-theme="dark"] body.li-app .salary-card .sidebar-card-title,
html[data-theme="dark"] body.li-app .related-jobs-header {
    border-bottom-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .skills-match-section,
html[data-theme="dark"] body.li-app .skill-group + .skill-group,
html[data-theme="dark"] body.li-app .related-job-footer,
html[data-theme="dark"] body.li-app .job-hero-right {
    border-top-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .tag-featured,
html[data-theme="dark"] body.li-app .key-skill-tag:nth-child(3n) {
    border-color: var(--wds-amber-line) !important;
}
html[data-theme="dark"] body.li-app .job-hero-right {
    border-left-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .job-details-wrapper .job-title,
html[data-theme="dark"] body.li-app .job-details-wrapper .sidebar-card-title,
html[data-theme="dark"] body.li-app .wd-sticky-apply__title,
html[data-theme="dark"] body.li-app .job-details-wrapper .sidebar-apply-title,
html[data-theme="dark"] body.li-app .job-details-wrapper .section-title,
html[data-theme="dark"] body.li-app .job-details-wrapper .sidebar-card-title,
html[data-theme="dark"] body.li-app .job-details-wrapper .job-description-content,
html[data-theme="dark"] body.li-app .related-jobs-header h4,
html[data-theme="dark"] body.li-app .modern-modal-title,
html[data-theme="dark"] body.li-app .wd-apply-head__eyebrow,
html[data-theme="dark"] body.li-app .wd-apply-head__meta,
html[data-theme="dark"] body.li-app .wd-apply-head__company,
html[data-theme="dark"] body.li-app .wd-apply-head__dot,
html[data-theme="dark"] body.li-app .modern-btn-close,
html[data-theme="dark"] body.li-app .modern-btn-close:hover,
html[data-theme="dark"] body.li-app .modern-modal-body label,
html[data-theme="dark"] body.li-app #cvModal .form-control,
html[data-theme="dark"] body.li-app #cvModal select,
html[data-theme="dark"] body.li-app #cvModal textarea,
html[data-theme="dark"] body.li-app #cvModal input[type="text"],
html[data-theme="dark"] body.li-app #cvModal input[type="number"],
html[data-theme="dark"] body.li-app .li-apply-label,
html[data-theme="dark"] body.li-app .li-apply-optional,
html[data-theme="dark"] body.li-app .li-apply-hint,
html[data-theme="dark"] body.li-app .li-apply-resume__note,
html[data-theme="dark"] body.li-app #cvModal .li-apply-resume select#resume_id,
html[data-theme="dark"] body.li-app .li-apply-notice,
html[data-theme="dark"] body.li-app #cvModal .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] body.li-app .job-title,
html[data-theme="dark"] body.li-app .company-name,
html[data-theme="dark"] body.li-app .sidebar-apply-title,
html[data-theme="dark"] body.li-app .section-title,
html[data-theme="dark"] body.li-app .job-description-content h1,
html[data-theme="dark"] body.li-app .job-description-content h2,
html[data-theme="dark"] body.li-app .job-description-content h3,
html[data-theme="dark"] body.li-app .copy-btn:hover,
html[data-theme="dark"] body.li-app .sidebar-card-title,
html[data-theme="dark"] body.li-app .overview-value,
html[data-theme="dark"] body.li-app .company-card-name,
html[data-theme="dark"] body.li-app .job-description-content,
html[data-theme="dark"] body.li-app .match-info h3,
html[data-theme="dark"] body.li-app .sidebar-action-btn,
html[data-theme="dark"] body.li-app .sidebar-action-btn--share,
html[data-theme="dark"] body.li-app .location-address,
html[data-theme="dark"] body.li-app .benefit-item,
html[data-theme="dark"] body.li-app .related-job-title,
html[data-theme="dark"] body.li-app .related-job-salary {
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app .job-details-wrapper .company-name,
html[data-theme="dark"] body.li-app .job-details-wrapper .tag-primary,
html[data-theme="dark"] body.li-app .job-details-wrapper .sidebar-action-btn:hover,
html[data-theme="dark"] body.li-app .job-details-wrapper .section-title i,
html[data-theme="dark"] body.li-app .job-details-wrapper .sidebar-card-title i,
html[data-theme="dark"] body.li-app .job-details-wrapper .key-skill-tag,
html[data-theme="dark"] body.li-app .job-details-wrapper .skills-tags .skill-tag,
html[data-theme="dark"] body.li-app .job-details-wrapper .skills-list li,
html[data-theme="dark"] body.li-app .related-jobs-viewall,
html[data-theme="dark"] body.li-app .related-jobs-viewall:hover,
html[data-theme="dark"] body.li-app .ats-improve-btn,
html[data-theme="dark"] body.li-app .ats-improve-btn:hover,
html[data-theme="dark"] body.li-app .job-title-highlight,
html[data-theme="dark"] body.li-app .wd-apply-head__logo span,
html[data-theme="dark"] body.li-app .li-apply-btn--outline,
html[data-theme="dark"] body.li-app .li-apply-btn--outline:hover,
html[data-theme="dark"] body.li-app .li-apply-btn--outline:focus,
html[data-theme="dark"] body.li-app .li-apply-btn--tertiary,
html[data-theme="dark"] body.li-app .li-apply-btn--tertiary:hover,
html[data-theme="dark"] body.li-app .li-apply-btn--tertiary:focus,
html[data-theme="dark"] body.li-app .li-apply-resume__icon,
html[data-theme="dark"] body.li-app .li-apply-notice a,
html[data-theme="dark"] body.li-app .modern-btn-secondary,
html[data-theme="dark"] body.li-app .modern-btn-secondary:hover,
html[data-theme="dark"] body.li-app .modern-btn-secondary:focus,
html[data-theme="dark"] body.li-app .company-name:hover,
html[data-theme="dark"] body.li-app .tag-primary,
html[data-theme="dark"] body.li-app .section-title i,
html[data-theme="dark"] body.li-app .match-info h3,
html[data-theme="dark"] body.li-app .match-score,
html[data-theme="dark"] body.li-app .breakdown-label,
html[data-theme="dark"] body.li-app .breakdown-value,
html[data-theme="dark"] body.li-app .benefit-item,
html[data-theme="dark"] body.li-app .benefit-item i,
html[data-theme="dark"] body.li-app .sidebar-card-title i,
html[data-theme="dark"] body.li-app .overview-icon.blue,
html[data-theme="dark"] body.li-app .overview-icon.indigo,
html[data-theme="dark"] body.li-app .overview-icon.cyan,
html[data-theme="dark"] body.li-app .job-back-link,
html[data-theme="dark"] body.li-app .job-back-link:hover,
html[data-theme="dark"] body.li-app .company-name,
html[data-theme="dark"] body.li-app .key-skill-tag,
html[data-theme="dark"] body.li-app .company-profile-link,
html[data-theme="dark"] body.li-app .company-profile-link:hover,
html[data-theme="dark"] body.li-app .sidebar-action-btn:hover,
html[data-theme="dark"] body.li-app .sidebar-action-btn.active,
html[data-theme="dark"] body.li-app .skill-badge.must-have,
html[data-theme="dark"] body.li-app .related-job-logo-fallback,
html[data-theme="dark"] body.li-app .related-job-company,
html[data-theme="dark"] body.li-app .related-job-chip,
html[data-theme="dark"] body.li-app .related-job-arrow {
    color: var(--wds-blue) !important;
}
html[data-theme="dark"] body.li-app .wd-sticky-apply__company,
html[data-theme="dark"] body.li-app .job-details-wrapper .job-title,
html[data-theme="dark"] body.li-app .job-details-wrapper .location-badge,
html[data-theme="dark"] body.li-app .job-details-wrapper .location-badge i,
html[data-theme="dark"] body.li-app .job-details-wrapper .hero-posted-at,
html[data-theme="dark"] body.li-app .job-details-wrapper .job-description-content,
html[data-theme="dark"] body.li-app .location-badge,
html[data-theme="dark"] body.li-app .sidebar-apply-desc,
html[data-theme="dark"] body.li-app .job-description-content,
html[data-theme="dark"] body.li-app .location-address,
html[data-theme="dark"] body.li-app .share-url input,
html[data-theme="dark"] body.li-app .copy-btn,
html[data-theme="dark"] body.li-app .overview-label,
html[data-theme="dark"] body.li-app .company-card-industry,
html[data-theme="dark"] body.li-app .hero-posted-at,
html[data-theme="dark"] body.li-app .section-title i,
html[data-theme="dark"] body.li-app .sidebar-card-title i,
html[data-theme="dark"] body.li-app .company-card-desc,
html[data-theme="dark"] body.li-app .skill-badge.nice-to-have,
html[data-theme="dark"] body.li-app .related-job-location {
    color: var(--wds-ink-2) !important;
}
html[data-theme="dark"] body.li-app .job-details-wrapper .tag-experience,
html[data-theme="dark"] body.li-app .tag-experience,
html[data-theme="dark"] body.li-app .skills-card.nice-to-have .sidebar-card-title,
html[data-theme="dark"] body.li-app .skills-card.nice-to-have .sidebar-card-title i,
html[data-theme="dark"] body.li-app .skill-badge.nice-to-have,
html[data-theme="dark"] body.li-app .overview-icon.purple,
html[data-theme="dark"] body.li-app .key-skill-tag:nth-child(5n),
html[data-theme="dark"] body.li-app .skill-group-label--nice,
html[data-theme="dark"] body.li-app .skill-group-label em,
html[data-theme="dark"] body.li-app .job-details-wrapper .key-skill-tag.is-nice,
html[data-theme="dark"] body.li-app .related-job-chip--soft {
    color: var(--wds-violet) !important;
}
html[data-theme="dark"] body.li-app .job-details-wrapper .tag-deadline,
html[data-theme="dark"] body.li-app .job-details-wrapper .tag-featured,
html[data-theme="dark"] body.li-app .tag-featured,
html[data-theme="dark"] body.li-app .status-pending,
html[data-theme="dark"] body.li-app .key-skill-tag:nth-child(3n),
html[data-theme="dark"] body.li-app .related-job-chip--accent {
    color: var(--wds-amber) !important;
}
html[data-theme="dark"] body.li-app .job-details-wrapper .tag-remote,
html[data-theme="dark"] body.li-app .related-job-salary,
html[data-theme="dark"] body.li-app .tag-remote,
html[data-theme="dark"] body.li-app .skills-group.matched .skills-group-title,
html[data-theme="dark"] body.li-app .skill-tag.matched,
html[data-theme="dark"] body.li-app .skill-tag.more,
html[data-theme="dark"] body.li-app .skills-card.must-have .sidebar-card-title,
html[data-theme="dark"] body.li-app .skill-badge.must-have,
html[data-theme="dark"] body.li-app .overview-icon.green,
html[data-theme="dark"] body.li-app .salary-card .sidebar-card-title,
html[data-theme="dark"] body.li-app .salary-card .sidebar-card-title i,
html[data-theme="dark"] body.li-app .salary-amount,
html[data-theme="dark"] body.li-app .salary-type,
html[data-theme="dark"] body.li-app .salary-card .salary-type,
html[data-theme="dark"] body.li-app .key-skill-tag:nth-child(2n),
html[data-theme="dark"] body.li-app .skill-group-label--must,
html[data-theme="dark"] body.li-app .job-details-wrapper .key-skill-tag.is-must,
html[data-theme="dark"] body.li-app .benefit-item i {
    color: var(--wds-green) !important;
}
html[data-theme="dark"] body.li-app .li-apply-required,
html[data-theme="dark"] body.li-app .li-apply-notice svg,
html[data-theme="dark"] body.li-app .tag-deadline,
html[data-theme="dark"] body.li-app .rejected-badge,
html[data-theme="dark"] body.li-app .sidebar-apply-expired,
html[data-theme="dark"] body.li-app .skills-group.missing .skills-group-title,
html[data-theme="dark"] body.li-app .skill-tag.missing,
html[data-theme="dark"] body.li-app .overview-icon.red {
    color: var(--wds-red) !important;
}

/* --- Company profile — pages/employe-details.blade.php --- */
html[data-theme="dark"] body.li-app .ep-btn-outline:hover,
html[data-theme="dark"] body.li-app .ep-btn-follow.following,
html[data-theme="dark"] body.li-app .ep-tab-count,
html[data-theme="dark"] body.li-app .ep-job-item__badge,
html[data-theme="dark"] body.li-app .ep-social-btn,
html[data-theme="dark"] body.li-app .ep-btn-badge,
html[data-theme="dark"] body.li-app .ep-btn-outline .ep-btn-badge,
html[data-theme="dark"] body.li-app .ep-map-directions:hover,
html[data-theme="dark"] body.li-app .ep-reviews-empty,
html[data-theme="dark"] body.li-app .ep-reviews-empty__icon,
html[data-theme="dark"] body.li-app .ep-job-item__badge--featured,
html[data-theme="dark"] body.li-app .ep-form-note {
    background-color: var(--wds-surface) !important;
}
html[data-theme="dark"] body.li-app .ep-review-bar,
html[data-theme="dark"] body.li-app .ep-social-btn:hover {
    background-color: var(--wds-surface-2) !important;
}
html[data-theme="dark"] body.li-app .ep-logo-box,
html[data-theme="dark"] body.li-app .ep-social-btn,
html[data-theme="dark"] body.li-app .ep-form-note {
    border-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .ep-review-item {
    border-bottom-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .ep-job-item__badge--featured,
html[data-theme="dark"] body.li-app .ep-field-error {
    color: var(--wds-red) !important;
}
html[data-theme="dark"] body.li-app .ep-form-note {
    color: var(--wds-green) !important;
}
html[data-theme="dark"] body.li-app .ep-person-name {
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app .ep-person-role {
    color: var(--wds-ink-2) !important;
}

/* --- Company profile — assets/css/company-details.css --- */
html[data-theme="dark"] body.li-app .company-description-card,
html[data-theme="dark"] body.li-app .share-profile-card,
html[data-theme="dark"] body.li-app .share-btn,
html[data-theme="dark"] body.li-app .company-info-card,
html[data-theme="dark"] body.li-app .contact-info-card,
html[data-theme="dark"] body.li-app .map-location-card,
html[data-theme="dark"] body.li-app .social-media-card {
    background-color: var(--wds-surface) !important;
}
html[data-theme="dark"] body.li-app .info-box {
    background-color: var(--wds-surface) !important;
    background-image: none !important;
}
html[data-theme="dark"] body.li-app .info-box:hover,
html[data-theme="dark"] body.li-app .contact-item,
html[data-theme="dark"] body.li-app .contact-item:hover,
html[data-theme="dark"] body.li-app .social-icon-btn {
    background-color: var(--wds-surface-2) !important;
    background-image: none !important;
}
html[data-theme="dark"] body.li-app .company-description-card,
html[data-theme="dark"] body.li-app .share-profile-card,
html[data-theme="dark"] body.li-app .share-btn,
html[data-theme="dark"] body.li-app .company-info-card,
html[data-theme="dark"] body.li-app .info-box,
html[data-theme="dark"] body.li-app .info-box:hover,
html[data-theme="dark"] body.li-app .contact-info-card,
html[data-theme="dark"] body.li-app .map-location-card,
html[data-theme="dark"] body.li-app .social-media-card,
html[data-theme="dark"] body.li-app .social-icon-btn {
    border-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .share-btn-twitter:hover,
html[data-theme="dark"] body.li-app .social-icon-btn.twitter:hover {
    border-color: var(--wds-blue-100) !important;
}
html[data-theme="dark"] body.li-app .social-icon-btn.whatsapp:hover {
    border-color: var(--wds-green-line) !important;
}
html[data-theme="dark"] body.li-app .company-description-text,
html[data-theme="dark"] body.li-app .info-box-label,
html[data-theme="dark"] body.li-app .contact-item-label {
    color: var(--wds-ink-2) !important;
}
html[data-theme="dark"] body.li-app .share-btn {
    color: var(--wds-blue) !important;
}
html[data-theme="dark"] body.li-app .info-box-value,
html[data-theme="dark"] body.li-app .contact-item-value {
    color: var(--wds-ink) !important;
}

/* --- Share sheet — components/share-to-chat.blade.php --- */
html[data-theme="dark"] body.li-app .wd-share-sheet,
html[data-theme="dark"] body.li-app .wd-share-preview,
html[data-theme="dark"] body.li-app .wd-share-icon-btn,
html[data-theme="dark"] body.li-app .wd-share-qr canvas,
html[data-theme="dark"] body.li-app .wd-share-repost,
html[data-theme="dark"] body.li-app .wd-share-repost:hover,
html[data-theme="dark"] body.li-app .wd-share-repost__icon,
html[data-theme="dark"] body.li-app .wd-share-person:hover,
html[data-theme="dark"] body.li-app .wd-share-app:hover,
html[data-theme="dark"] body.li-app .wd-share-secondary {
    background-color: var(--wds-surface) !important;
}
html[data-theme="dark"] body.li-app .wd-share-head {
    border-bottom-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .wd-share-preview,
html[data-theme="dark"] body.li-app .wd-share-preview__logo,
html[data-theme="dark"] body.li-app .wd-share-icon-btn,
html[data-theme="dark"] body.li-app .wd-share-qr canvas,
html[data-theme="dark"] body.li-app .wd-share-search,
html[data-theme="dark"] body.li-app .wd-share-repost,
html[data-theme="dark"] body.li-app .wd-share-person__tick,
html[data-theme="dark"] body.li-app .wd-share-compose input,
html[data-theme="dark"] body.li-app .wd-share-secondary {
    border-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .wd-share-head__icon,
html[data-theme="dark"] body.li-app .wd-share-icon-btn,
html[data-theme="dark"] body.li-app .wd-share-icon-btn:hover,
html[data-theme="dark"] body.li-app .wd-share-repost__icon,
html[data-theme="dark"] body.li-app .wd-share-secondary:hover {
    color: var(--wds-blue) !important;
}
html[data-theme="dark"] body.li-app .wd-share-head h3,
html[data-theme="dark"] body.li-app .wd-share-preview__text strong,
html[data-theme="dark"] body.li-app .wd-share-search,
html[data-theme="dark"] body.li-app .wd-share-repost strong,
html[data-theme="dark"] body.li-app .wd-share-compose input {
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app .wd-share-close,
html[data-theme="dark"] body.li-app .wd-share-preview__text span,
html[data-theme="dark"] body.li-app .wd-share-section,
html[data-theme="dark"] body.li-app .wd-share-repost small,
html[data-theme="dark"] body.li-app .wd-share-person__name,
html[data-theme="dark"] body.li-app .wd-share-app__label,
html[data-theme="dark"] body.li-app .wd-share-empty,
html[data-theme="dark"] body.li-app .wd-share-secondary {
    color: var(--wds-ink-2) !important;
}

/* --- ATS score detail — candidate/ats-score/show.blade.php --- */
html[data-theme="dark"] body.li-app .ats-detail .ats-card,
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-green.ats-rating-pill,
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-amber.ats-rating-pill,
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-red.ats-rating-pill,
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-green.ats-callout,
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-amber.ats-callout,
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-red.ats-callout,
html[data-theme="dark"] body.li-app .ats-detail .ats-range-chip,
html[data-theme="dark"] body.li-app .ats-detail .ats-range-chip.is-active,
html[data-theme="dark"] body.li-app .ats-detail .ats-breakdown-item,
html[data-theme="dark"] body.li-app .ats-detail .ats-breakdown-icon,
html[data-theme="dark"] body.li-app .ats-detail .ats-bar,
html[data-theme="dark"] body.li-app .ats-detail .ats-suggest-item,
html[data-theme="dark"] body.li-app .ats-detail .ats-suggest-num,
html[data-theme="dark"] body.li-app .ats-btn-ghost,
html[data-theme="dark"] body.li-app .ats-btn-ghost:hover {
    background-color: var(--wds-surface) !important;
}
html[data-theme="dark"] body.li-app .ats-detail .ats-card,
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-green.ats-rating-pill,
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-amber.ats-rating-pill,
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-red.ats-rating-pill,
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-green.ats-callout,
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-amber.ats-callout,
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-red.ats-callout,
html[data-theme="dark"] body.li-app .ats-detail .ats-range-chip,
html[data-theme="dark"] body.li-app .ats-detail .ats-breakdown-item,
html[data-theme="dark"] body.li-app .ats-detail .ats-breakdown-item:hover,
html[data-theme="dark"] body.li-app .ats-detail .ats-suggest-item,
html[data-theme="dark"] body.li-app .ats-btn-ghost {
    border-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .ats-detail .ats-card-head {
    border-bottom-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .ats-detail .ats-card-head,
html[data-theme="dark"] body.li-app .ats-detail .ats-range-chip.is-active,
html[data-theme="dark"] body.li-app .ats-detail .ats-breakdown-name,
html[data-theme="dark"] body.li-app .ats-detail .ats-breakdown-score,
html[data-theme="dark"] body.li-app .ats-detail .ats-suggest-item,
html[data-theme="dark"] body.li-app .ats-detail .ats-next-title {
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app .ats-detail .ats-card-head i,
html[data-theme="dark"] body.li-app .ats-detail .ats-suggest-num,
html[data-theme="dark"] body.li-app .ats-btn-ghost:hover {
    color: var(--wds-blue) !important;
}
html[data-theme="dark"] body.li-app .ats-detail .ats-card-title,
html[data-theme="dark"] body.li-app .ats-detail .ats-callout p,
html[data-theme="dark"] body.li-app .ats-detail .ats-range-title,
html[data-theme="dark"] body.li-app .ats-detail .ats-range-chip,
html[data-theme="dark"] body.li-app .ats-detail .ats-suggest-intro,
html[data-theme="dark"] body.li-app .ats-btn-ghost {
    color: var(--wds-ink-2) !important;
}
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-green.ats-rating-pill,
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-green .ats-callout-title {
    color: var(--wds-green) !important;
}
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-amber.ats-rating-pill,
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-amber .ats-callout-title {
    color: var(--wds-amber) !important;
}
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-red.ats-rating-pill,
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-red .ats-callout-title {
    color: var(--wds-red) !important;
}

/* --- Network view — pages/network-view.blade.php --- */
html[data-theme="dark"] body.li-app .nw-section-title .nw-count,
html[data-theme="dark"] body.li-app .nw-card,
html[data-theme="dark"] body.li-app .nw-btn-ghost,
html[data-theme="dark"] body.li-app .nwv-more,
html[data-theme="dark"] body.li-app .nw-empty {
    background-color: var(--wds-surface) !important;
}
html[data-theme="dark"] body.li-app .nw-btn-ghost:hover,
html[data-theme="dark"] body.li-app .nwv-more:hover {
    background-color: var(--wds-surface-2) !important;
}
html[data-theme="dark"] body.li-app .nw-card,
html[data-theme="dark"] body.li-app .nwv-more,
html[data-theme="dark"] body.li-app .nw-empty {
    border-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .nw-section-title,
html[data-theme="dark"] body.li-app .nw-name,
html[data-theme="dark"] body.li-app .nw-btn-ghost,
html[data-theme="dark"] body.li-app .nw-btn-ghost:hover,
html[data-theme="dark"] body.li-app .nwv-more,
html[data-theme="dark"] body.li-app .nwv-more:hover,
html[data-theme="dark"] body.li-app .nw-empty p {
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app .nw-section-title .nw-count,
html[data-theme="dark"] body.li-app .nw-name:hover {
    color: var(--wds-blue) !important;
}
html[data-theme="dark"] body.li-app .nw-role,
html[data-theme="dark"] body.li-app .nw-empty {
    color: var(--wds-ink-2) !important;
}

/* --- Resume builder — pages/candidate/resume-builder.blade.php --- */
html[data-theme="dark"] body.li-app .step-circle,
html[data-theme="dark"] body.li-app .step-line,
html[data-theme="dark"] body.li-app .skill-option-resume.selected,
html[data-theme="dark"] body.li-app .add-custom-skill-btn-resume:hover {
    background-color: var(--wds-surface-2) !important;
}
html[data-theme="dark"] body.li-app .step-navigation,
html[data-theme="dark"] body.li-app .skill-item,
html[data-theme="dark"] body.li-app .experience-item,
html[data-theme="dark"] body.li-app .education-item,
html[data-theme="dark"] body.li-app .language-item,
html[data-theme="dark"] body.li-app .tpl-card,
html[data-theme="dark"] body.li-app .tpl-overlay .select-template,
html[data-theme="dark"] body.li-app .tpl-overlay .select-template:hover,
html[data-theme="dark"] body.li-app .tpl-meta,
html[data-theme="dark"] body.li-app .tpl-action,
html[data-theme="dark"] body.li-app .tpl-action:hover,
html[data-theme="dark"] body.li-app .rb-date-btn,
html[data-theme="dark"] body.li-app .skills-chips-wrapper-resume,
html[data-theme="dark"] body.li-app .skills-dropdown-resume,
html[data-theme="dark"] body.li-app .skills-category-tabs,
html[data-theme="dark"] body.li-app .skills-cat-tab,
html[data-theme="dark"] body.li-app .skills-cat-tab:hover,
html[data-theme="dark"] body.li-app .skills-dropdown-foot,
html[data-theme="dark"] body.li-app .skills-category-header,
html[data-theme="dark"] body.li-app .skills-category-count,
html[data-theme="dark"] body.li-app .skill-option-resume:hover,
html[data-theme="dark"] body.li-app .add-custom-skill-btn-resume,
html[data-theme="dark"] body.li-app .institution-suggestions,
html[data-theme="dark"] body.li-app .institution-suggestion-item:hover,
html[data-theme="dark"] body.li-app .loading-item,
html[data-theme="dark"] body.li-app .loading-item:hover {
    background-color: var(--wds-surface) !important;
}
html[data-theme="dark"] body.li-app .step-circle,
html[data-theme="dark"] body.li-app .skill-item,
html[data-theme="dark"] body.li-app .tpl-card,
html[data-theme="dark"] body.li-app .tpl-action,
html[data-theme="dark"] body.li-app input[type="date"].date-input-custom,
html[data-theme="dark"] body.li-app .skills-chips-wrapper-resume,
html[data-theme="dark"] body.li-app .skills-dropdown-resume,
html[data-theme="dark"] body.li-app .skills-cat-tab,
html[data-theme="dark"] body.li-app .add-custom-skill-btn-resume,
html[data-theme="dark"] body.li-app .add-custom-skill-btn-resume:hover,
html[data-theme="dark"] body.li-app .institution-suggestions,
html[data-theme="dark"] body.li-app .form-select:focus,
html[data-theme="dark"] body.li-app .form-select-sm:focus {
    border-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .step-navigation,
html[data-theme="dark"] body.li-app .tpl-meta,
html[data-theme="dark"] body.li-app .skills-dropdown-foot,
html[data-theme="dark"] body.li-app .skills-category-header,
html[data-theme="dark"] body.li-app .add-custom-skill-row-resume {
    border-top-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .skills-category-tabs,
html[data-theme="dark"] body.li-app .institution-suggestion-item {
    border-bottom-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .step-circle,
html[data-theme="dark"] body.li-app .step-label,
html[data-theme="dark"] body.li-app .step-page-counter,
html[data-theme="dark"] body.li-app .step6-header p,
html[data-theme="dark"] body.li-app .tpl-desc,
html[data-theme="dark"] body.li-app input[type="date"].date-input-custom::-webkit-datetime-edit-text,
html[data-theme="dark"] body.li-app .url-icon,
html[data-theme="dark"] body.li-app .skills-cat-tab,
html[data-theme="dark"] body.li-app .skills-dropdown-count,
html[data-theme="dark"] body.li-app .skills-category-header {
    color: var(--wds-ink-2) !important;
}
html[data-theme="dark"] body.li-app .step6-header h5,
html[data-theme="dark"] body.li-app .tpl-overlay .select-template,
html[data-theme="dark"] body.li-app .tpl-name,
html[data-theme="dark"] body.li-app .institution-suggestion-item .fw-bold {
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app .skills-cat-tab:hover,
html[data-theme="dark"] body.li-app .skill-option-resume:hover,
html[data-theme="dark"] body.li-app .skill-option-resume.selected,
html[data-theme="dark"] body.li-app .skill-option-resume.selected::after {
    color: var(--wds-blue) !important;
}

/* =====================================================================
   3. FILLED BLUE — light fill needs a dark label
   See the file header. Anything whose BACKGROUND is --wds-blue is
   listed here; anything whose TEXT is --wds-blue is already correct.
   ===================================================================== */
html[data-theme="dark"] body.li-app .wds-btn--primary,
html[data-theme="dark"] body.li-app .wds-btn--primary:hover,
html[data-theme="dark"] body.li-app .wds-btn--primary:active,
html[data-theme="dark"] body.li-app .btn-primary,
html[data-theme="dark"] body.li-app .btn-primary:hover,
html[data-theme="dark"] body.li-app .wd-apply-btn,
html[data-theme="dark"] body.li-app .wd-search-btn,
html[data-theme="dark"] body.li-app .workdu-apply-btn,
html[data-theme="dark"] body.li-app .wd-btn-apply,
html[data-theme="dark"] body.li-app .jc-card__apply,
html[data-theme="dark"] body.li-app .ats-btn-choose,
html[data-theme="dark"] body.li-app .ats-submit,
html[data-theme="dark"] body.li-app .ats-drop:hover .ats-btn-choose,
html[data-theme="dark"] body.li-app .ats-act--primary,
html[data-theme="dark"] body.li-app .ats-act--primary:hover,
html[data-theme="dark"] body.li-app .ats-act--primary i,
html[data-theme="dark"] body.li-app .ats-saved__icon,
html[data-theme="dark"] body.li-app .ats-saved__icon i,
html[data-theme="dark"] body.li-app .fd-tab.active,
html[data-theme="dark"] body.li-app .wdnc-tab.active,
html[data-theme="dark"] body.li-app .pref-submit-btn,
html[data-theme="dark"] body.li-app .pref-submit-btn:hover,
html[data-theme="dark"] body.li-app a.wd-apply-cta,
html[data-theme="dark"] body.li-app a.wd-empty__cta,
html[data-theme="dark"] body.li-app .wd-apply-filter,
html[data-theme="dark"] body.li-app .custom-btn-primary,
html[data-theme="dark"] body.li-app .wd-pagination .active span,
html[data-theme="dark"] body.li-app .wd-pagination .active a,
html[data-theme="dark"] body.li-app .wd-nav-avatar,
html[data-theme="dark"] body.li-app .wds-btn--primary i,
html[data-theme="dark"] body.li-app .btn-primary i,
/* The feed's "We're hiring" card CTA, its primary button (Post, the photo
   cropper's Apply) and the resume builder's Done button all fill with
   --wds-blue through var(), which the sweep in 2b cannot see, and kept a
   white label: 2.13:1. The applied CTA is a green status chip, not a blue
   fill, so it keeps its own green ink. (The feed's Follow pills are not
   listed: 2b holds their fill at --wds-surface even on hover, so their
   white hover label is already readable.) */
html[data-theme="dark"] body.li-app .fd-job-cta:not(.is-applied),
html[data-theme="dark"] body.li-app .fd-btn-primary,
html[data-theme="dark"] body.li-app .skills-dropdown-done {
    color: #08121c !important;
}
/* The avatar ring and initial sit on that same light blue. */
html[data-theme="dark"] body.li-app .wd-nav-avatar-initial { color: #08121c; }

/* Same contract, for the families that fill with --li-blue instead: the
   network pages' primary button and their avatar discs, and the Me menu's
   outlined CTA once it fills on hover. */
html[data-theme="dark"] body.li-app .nw-btn-primary,
html[data-theme="dark"] body.li-app .nw-row-avatar,
html[data-theme="dark"] body.li-app .nw-row-avatar > span,
html[data-theme="dark"] body.li-app .nw-tile-avatar,
/* The initial inside the tile avatar was missed when its row-avatar twin two
   lines up was listed -- white on the light blue disc, at 2.13. */
html[data-theme="dark"] body.li-app .nw-tile-avatar > span,
html[data-theme="dark"] body.li-app .wd-me-cta:hover,
html[data-theme="dark"] body.li-app .li-btn-primary,
html[data-theme="dark"] body.li-app .btn-primary:focus,
html[data-theme="dark"] body.li-app .wds-btn--primary:focus {
    color: #08121c !important;
}

/* The hero is a blue GRADIENT with white text on it, built from
   --wds-blue-active -> --wds-blue -> a literal #3f9bff. With the light
   blues above it became a pale slab under white type, so it keeps a
   deep gradient of its own and its white ink. */
/* Account Settings and Job Preferences roll their own hero instead of using
   <x-website.candidate.page-header>, but both copy .wds-hero's gradient
   verbatim — candidate-settings.css even says so in a comment: "Same
   gradient, radius and shadow as .wds-hero — the header every other
   candidate page now opens with."

   That means all three share the same fate here: the formula ends on
   var(--wds-blue-active) -> var(--wds-blue), and both are LIGHT blues in
   dark mode, so the band washes out to a pale slab under white type. Only
   .wds-hero had the deep pair; these two were left behind and read as a
   different colour from every other page. Listed together so they cannot
   drift apart again. */
/* 15 Oct 2026: all three are one SOLID colour now, --wds-hero-bg, which is
   #1C397D here (the logo blue, deepened), with no gradient and no glow. */
html[data-theme="dark"] body.li-app .wds-hero,
html[data-theme="dark"] body.li-app .cs-page-header,
html[data-theme="dark"] body.li-app .jp-hero {
    background: var(--wds-hero-bg);
}
html[data-theme="dark"] body.li-app .wds-hero::after,
html[data-theme="dark"] body.li-app .cs-page-header::after,
html[data-theme="dark"] body.li-app .jp-hero::after {
    content: none;
    display: none;
}

/* =====================================================================
   3b. PAGINATION
   vendor/pagination/frontend.blade.php ships its own <style> INSIDE the
   markup it renders, and that block hardcodes a light theme with
   !important:

       .pagination .page-item:not(.active) .page-link {
           color: #1f2a44 !important; background: #ffffff; }

   Two consequences on dark. The ink is pinned to a near-black navy, which
   over a --wds-surface card measures 1.15 -- every page number but the
   current one, and both arrows, were invisible. And because that rule is
   emitted in the BODY, it is both more specific than linkedin-theme's
   `body.li-app .pagination .page-link` (0,4,0 over 0,3,1) and later in the
   document, so nothing in a stylesheet could reach it by ordinary means.
   Hence the long selectors below: they have to out-specify a 0,4,0
   !important rule, not merely follow it.

   Fixing it at the source would be better, but that partial paginates the
   public site and the company panel too, so re-colouring it would change
   light mode everywhere it is used. The theme is the right place.

   The active page is the separate, ordinary problem: it fills with
   --li-blue, which is LIGHT here, and the partial pins white on it (2.13).
   Same contract as section 3 -- light fill, dark label.
   ===================================================================== */
html[data-theme="dark"] body.li-app .pagination .page-item:not(.active) .page-link {
    color: var(--wds-ink-2) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}
/* A disabled arrow should read as unavailable rather than merely dim. */
html[data-theme="dark"] body.li-app .pagination .page-item .page-link:disabled,
html[data-theme="dark"] body.li-app .pagination .page-item .page-link[disabled] {
    color: var(--wds-ink-3) !important;
}
html[data-theme="dark"] body.li-app .pagination .page-item:not(.active) .page-link:hover {
    color: var(--wds-blue) !important;
    background-color: var(--wds-fill) !important;
    border-color: transparent !important;
}
html[data-theme="dark"] body.li-app .pagination .page-item.active .page-link,
html[data-theme="dark"] body.li-app .pagination .page-item.active button.page-link,
html[data-theme="dark"] body.li-app .pagination .page-item.active .page-link:hover {
    background-color: var(--wds-blue) !important;
    border-color: var(--wds-blue) !important;
    color: #08121c !important;
    box-shadow: none;
}
/* The ellipsis between page ranges is a bare <span> in a .disabled <li>,
   with no .page-link to inherit from. */
html[data-theme="dark"] body.li-app .pagination li.disabled > span {
    color: var(--wds-ink-3) !important;
}

/* =====================================================================
   4. THE TOP BAR AND ITS MENUS
   All literals, declared in the sidebar component's own <style>.
   ===================================================================== */
html[data-theme="dark"] body.li-app .wd-topnav {
    background: var(--wds-surface);
    border-bottom-color: var(--wds-line);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] body.li-app .wd-topnav-search {
    background: var(--wds-fill);
    border-color: var(--wds-line-mid);
}
html[data-theme="dark"] body.li-app .wd-topnav-search:hover { border-color: var(--wds-ink-3); }
html[data-theme="dark"] body.li-app .wd-topnav .wd-topnav-search input::placeholder { color: var(--wds-ink-3); }
html[data-theme="dark"] body.li-app .wd-topnav .wd-topnav-search input:-webkit-autofill,
html[data-theme="dark"] body.li-app .wd-topnav .wd-topnav-search input:-webkit-autofill:hover,
html[data-theme="dark"] body.li-app .wd-topnav .wd-topnav-search input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--wds-fill) inset !important;
    box-shadow: 0 0 0 1000px var(--wds-fill) inset !important;
    -webkit-text-fill-color: var(--wds-ink) !important;
}

/* The dropdown panels set their own background at !important (they have
   to, to beat dashboard-v3-dark.css), so these must too. */
html[data-theme="dark"] body.li-app .wd-me-dropdown,
html[data-theme="dark"] body.li-app .wd-notif-dropdown,
html[data-theme="dark"] body.li-app .wd-me-dropdown > *,
html[data-theme="dark"] body.li-app .wd-notif-dropdown > *,
html[data-theme="dark"] body.li-app .wd-me-item,
html[data-theme="dark"] body.li-app .wd-notif-dropdown-item,
html[data-theme="dark"] body.li-app .wd-drawer-panel {
    background-color: var(--wds-surface) !important;
    color: var(--wds-ink);
}
html[data-theme="dark"] body.li-app .wd-me-dropdown,
html[data-theme="dark"] body.li-app .wd-notif-dropdown,
html[data-theme="dark"] body.li-app .wd-typeahead {
    border-color: var(--wds-line);
    box-shadow: var(--wds-shadow-pop);
}
html[data-theme="dark"] body.li-app .wd-typeahead { background: var(--wds-surface); }
html[data-theme="dark"] body.li-app .wd-ta-row { color: var(--wds-ink); }
html[data-theme="dark"] body.li-app .wd-ta-row:hover,
html[data-theme="dark"] body.li-app .wd-ta-row.is-active,
html[data-theme="dark"] body.li-app .wd-ta-foot:hover,
html[data-theme="dark"] body.li-app .wd-me-item:hover,
html[data-theme="dark"] body.li-app .wd-notif-dropdown-item:hover {
    background-color: var(--wds-fill-hover) !important;
}
html[data-theme="dark"] body.li-app .wd-ta-avatar { background: var(--wds-fill); }
html[data-theme="dark"] body.li-app .wd-ta-foot { border-top-color: var(--wds-line-soft); }
html[data-theme="dark"] body.li-app .wd-me-head,
html[data-theme="dark"] body.li-app .wd-notif-dropdown-head,
html[data-theme="dark"] body.li-app .wd-notif-dropdown-footer,
html[data-theme="dark"] body.li-app .wd-me-group {
    border-color: var(--wds-line-soft);
}
html[data-theme="dark"] body.li-app .wd-notif-dropdown-item.is-unread {
    background-color: var(--wds-blue-tint) !important;
}

/* The wordmark is dark-on-transparent, so the bar renders the white
   variant instead. Both <img>s ship; CSS picks one, which keeps the
   swap out of JS and off the critical path.

   The light-mode half of the pair is NOT scoped to a theme: this file is
   loaded on every candidate-panel page, and `.wd-topnav-logo img` in the
   nav component sets display:block, so without this the white wordmark
   sits beside the blue one on a light bar. */
body.li-app .wd-topnav-logo-dark { display: none; }
html[data-theme="dark"] body.li-app .wd-topnav-logo-light { display: none; }
html[data-theme="dark"] body.li-app .wd-topnav-logo-dark  { display: block; }

/* =====================================================================
   5. CARDS AND PANELS
   Every family that paints a literal white card.
   ===================================================================== */
html[data-theme="dark"] body.li-app .wds-card,
html[data-theme="dark"] body.li-app .wds-panel,
html[data-theme="dark"] body.li-app .card,
html[data-theme="dark"] body.li-app .panel,
html[data-theme="dark"] body.li-app .panel-card,
html[data-theme="dark"] body.li-app .box,
html[data-theme="dark"] body.li-app .white-box,
html[data-theme="dark"] body.li-app .content-card,
html[data-theme="dark"] body.li-app .dashboard-box,
html[data-theme="dark"] body.li-app section.block,
html[data-theme="dark"] body.li-app .wd-panel,
html[data-theme="dark"] body.li-app .wd-jobcard,
html[data-theme="dark"] body.li-app .job-card,
html[data-theme="dark"] body.li-app .wd-filter-card,
html[data-theme="dark"] body.li-app .wd-results-bar,
html[data-theme="dark"] body.li-app .wd-search-strip,
html[data-theme="dark"] body.li-app .wd-empty-state,
html[data-theme="dark"] body.li-app .empty-state,
html[data-theme="dark"] body.li-app .wd-tipbox,
html[data-theme="dark"] body.li-app .nw-card,
html[data-theme="dark"] body.li-app .cpp-card,
html[data-theme="dark"] body.li-app .dash-card,
html[data-theme="dark"] body.li-app .wdb-card {
    background-color: var(--wds-surface) !important;
    border-color: var(--wds-line);
    color: var(--wds-ink);
}
html[data-theme="dark"] body.li-app .card .card-header,
html[data-theme="dark"] body.li-app .card .card-footer,
html[data-theme="dark"] body.li-app .wd-filter-head {
    background-color: var(--wds-surface-2) !important;
    border-color: var(--wds-line);
    color: var(--wds-ink);
}

/* =====================================================================
   6. FORM CONTROLS
   workdu-ui.css already forces these with !important (the theme strips
   bare inputs), so the dark values have to as well.
   ===================================================================== */
html[data-theme="dark"] body.li-app .form-control,
html[data-theme="dark"] body.li-app .form-select,
html[data-theme="dark"] body.li-app .wds-input,
html[data-theme="dark"] body.li-app .wds-select,
html[data-theme="dark"] body.li-app .wds-textarea,
html[data-theme="dark"] body.li-app input[type="text"],
html[data-theme="dark"] body.li-app input[type="email"],
html[data-theme="dark"] body.li-app input[type="number"],
html[data-theme="dark"] body.li-app input[type="password"],
html[data-theme="dark"] body.li-app input[type="tel"],
html[data-theme="dark"] body.li-app input[type="url"],
html[data-theme="dark"] body.li-app input[type="date"],
html[data-theme="dark"] body.li-app input[type="search"],
html[data-theme="dark"] body.li-app textarea,
html[data-theme="dark"] body.li-app select {
    background-color: var(--wds-surface-2) !important;
    border-color: var(--wds-line-mid) !important;
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app input::placeholder,
html[data-theme="dark"] body.li-app textarea::placeholder {
    color: var(--wds-ink-3) !important;
}
/* The top-bar search input is deliberately transparent — it lives inside
   its own pill, which section 4 already paints. So does My Circle's search,
   whose pill takes the dark --li-surface from network-linkedin.css. */
html[data-theme="dark"] body.li-app .wd-topnav .wd-topnav-search input,
html[data-theme="dark"] body.li-app .wd-topnav .wd-topnav-search input[type="text"],
html[data-theme="dark"] body.li-app .dashboard-right .nw-search input[type="text"] {
    background-color: transparent !important;
    color: var(--wds-ink) !important;
}
/* select2, used across the panel's filter and profile forms. */
html[data-theme="dark"] body.li-app .select2-container--default .select2-selection--single,
html[data-theme="dark"] body.li-app .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] body.li-app .select2-dropdown,
html[data-theme="dark"] body.li-app .select2-search__field {
    background-color: var(--wds-surface-2) !important;
    border-color: var(--wds-line-mid) !important;
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app .select2-results__option { color: var(--wds-ink); }
html[data-theme="dark"] body.li-app .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--wds-blue-tint) !important;
    color: var(--wds-ink) !important;
}

/* The filter drawer button (x-ui.filter-drawer-toggle): "More Filters" on
   Browse Companies, "Filters" on Find Jobs below 992px. ui-components.css
   draws it white with a light-grey border, so it was a white slab on the dark
   page (9 Oct QA). */
html[data-theme="dark"] body.li-app .wd-filters-toggle {
    background-color: var(--wds-surface-2) !important;
    border-color: var(--wds-line-mid) !important;
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app .wd-filters-toggle:hover,
html[data-theme="dark"] body.li-app .wd-filters-toggle:focus-visible {
    border-color: var(--wds-blue) !important;
    color: var(--wds-blue) !important;
}
/* Its slot in the search bar (x-ui.search-bar's .wd-search-action) is
   painted with the public --wd-surface, white, so the dark button still sat
   in a white box (9 Oct QA, second pass). The bar behind it is already the
   panel surface; let it show, and draw the divider in the panel's line. */
html[data-theme="dark"] body.li-app .wd-search-action {
    background: transparent !important;
    border-color: var(--wds-line) !important;
}

/* =====================================================================
   7. TABLES, DIVIDERS, MODALS
   ===================================================================== */
html[data-theme="dark"] body.li-app .table,
html[data-theme="dark"] body.li-app .table > :not(caption) > * > * {
    background-color: transparent !important;
    border-color: var(--wds-line) !important;
    color: var(--wds-ink);
}
html[data-theme="dark"] body.li-app .table thead th { color: var(--wds-ink-2); }
html[data-theme="dark"] body.li-app .table-hover > tbody > tr:hover > * {
    background-color: var(--wds-fill) !important;
}
html[data-theme="dark"] body.li-app hr { border-color: var(--wds-line); opacity: 1; }
html[data-theme="dark"] body.li-app .modal-content,
html[data-theme="dark"] body.li-app .modal-header,
html[data-theme="dark"] body.li-app .modal-footer,
html[data-theme="dark"] body.li-app .offcanvas {
    background-color: var(--wds-surface) !important;
    border-color: var(--wds-line) !important;
    color: var(--wds-ink);
}
/* Bootstrap ships .btn-close as a DARK svg, so on a dark panel it has to be
   inverted to show up. Not inside .cm-modal though: that button sits on the
   brand gradient header, where the page already inverts it — doing it twice,
   over a background the sweep had tinted light grey, rendered it as a black
   box. Kept transparent there so only the glyph shows. */
html[data-theme="dark"] body.li-app .btn-close:not(.cm-modal .btn-close) {
    filter: invert(1) grayscale(1) brightness(1.8);
}
html[data-theme="dark"] body.li-app .cm-modal .btn-close {
    background-color: transparent !important;
}
/* naukri-candidate.css writes this one as a literal #6b7280 rather than a
   token, and that file is not in the generated sweep — its ~180 literals
   are a bigger change than one label warrants. Overridden by name: at
   3.4:1 the uppercase labels above Cover Letter and Resume were the only
   text left under AA inside the application modal. */
html[data-theme="dark"] body.li-app .wd-label-upper {
    color: var(--wds-ink-2) !important;
}
/* x-ui.step-form and x-ui.field-error in the apply dialog. These used to
   sit in ui-components.css, keyed on html[data-theme="dark"] alone -- but
   that sheet also loads on public pages, which stay light while <html>
   still carries the visitor's theme, so a dark-mode visitor got light-grey
   step labels on a white dialog. Here they only reach the panel. */
html[data-theme="dark"] body.li-app .wd-steps li { color: var(--wd-neutral-300); border-top-color: var(--wd-neutral-600); }
html[data-theme="dark"] body.li-app .wd-steps li.is-current { color: var(--wd-brand-300); border-top-color: var(--wd-brand-300); }
html[data-theme="dark"] body.li-app .wd-steps li.is-done { color: var(--wd-neutral-300); border-top-color: var(--wd-success); }
html[data-theme="dark"] body.li-app .wd-field-error { color: var(--wd-danger-bg); }
html[data-theme="dark"] body.li-app .wd-field-error::before { background: var(--wd-danger-bg); color: var(--wd-danger-ink); }

/* =====================================================================
   8. THE THEME SWITCH ITSELF
   A two-stop segmented control in the Me menu and the mobile drawer.
   Light-mode styling included here rather than in the component, so the
   whole feature is one file to read.
   ===================================================================== */
body.li-app .wd-theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: none;
    padding: 2px;
    border: 1px solid var(--wds-line, #e4eaf3);
    border-radius: 999px;
    background: var(--wds-fill, #eef2f8);
}
body.li-app .wd-theme-switch__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--wds-ink-3, #8792a8);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
body.li-app .wd-theme-switch__btn:hover { color: var(--wds-ink, #0d1526); }
/* In the Me menu header the switch is the trailing item, so it takes the
   slack rather than crowding the name beside it. .wd-me-head is a flex row
   whose text cell has no flex-grow of its own. */
body.li-app .wd-me-head .wd-theme-switch { margin-left: auto; }
body.li-app .wd-theme-switch__btn[aria-pressed="true"] {
    background: var(--wds-surface, #fff);
    color: var(--wds-blue, #1875e5);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}
/* On dark, a surface-lifted chip is only a few points brighter than the
   track it sits in, which does not read as "selected" at 22px. The blue
   tint plus the blue glyph does. */
html[data-theme="dark"] body.li-app .wd-theme-switch__btn[aria-pressed="true"] {
    background: var(--wds-blue-tint);
    box-shadow: inset 0 0 0 1px var(--wds-blue-100);
}
/* In the drawer it is a full row, like the links around it. */
body.li-app .wd-theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 16px;
    font-size: 14px;
    color: var(--wds-ink-2, #4c586e);
}
body.li-app .wd-theme-row > span { display: inline-flex; align-items: center; gap: 10px; }

/* =====================================================================
   8b. PAGE FAMILIES WITH THEIR OWN LITERALS
   Each of these is a white chip or ring drawn over a card, so it reads as
   a bright hole in dark mode. Company LOGO backings are deliberately left
   white — a logo needs a light disc behind it in either theme, which is
   what LinkedIn does too.
   ===================================================================== */
/* The tile avatar's white ring separates it from the cover art above; on
   dark the card surface is what it should be separating against. */
html[data-theme="dark"] body.li-app .nw-tile-avatar {
    box-shadow: 0 0 0 2px var(--wds-surface);
}
/* The public profile, which a candidate reaches under /candidate/profile/…
   and so renders with the panel's palette. */
html[data-theme="dark"] body.li-app .cpp-btn--state,
html[data-theme="dark"] body.li-app .cpp-check {
    background-color: var(--wds-surface-2) !important;
    border-color: var(--wds-line);
    color: var(--wds-ink-2);
}

/* =====================================================================
   8c. PAGES THAT DECLARE THEIR PALETTE IN A @push('page-css') BLOCK
   These five pages predate the design system and paint their own white
   cards from a <style> in the Blade, so no token change can reach them.
   Found by walking each rendered page for opaque near-white fills over
   2500px2 rather than by eye — rerun that probe when adding a page.
   ===================================================================== */

/* --- Find Jobs (pages/jobs-modern.blade.php, shared with /jobs) ------- */
html[data-theme="dark"] body.li-app .wd-find-jobs,
html[data-theme="dark"] body.li-app .wd-find-jobs--dashboard {
    background: var(--wds-bg) !important;
}
html[data-theme="dark"] body.li-app .wd-search-inner,
html[data-theme="dark"] body.li-app .wd-sort-wrap,
html[data-theme="dark"] body.li-app .wd-job-row,
html[data-theme="dark"] body.li-app .accordion-item,
html[data-theme="dark"] body.li-app .accordion-button,
html[data-theme="dark"] body.li-app .accordion-button.collapsed,
html[data-theme="dark"] body.li-app .accordion-body,
html[data-theme="dark"] body.li-app .accordion-collapse {
    background-color: var(--wds-surface) !important;
    border-color: var(--wds-line) !important;
    color: var(--wds-ink) !important;
}
/* The accordion frame comes from the Bootstrap bundle, not from any page
   stylesheet, so the sweep never sees it and the filter panel kept a pale
   grey edge on Find Jobs and Applied Jobs. Set directly rather than through
   --bs-accordion-*: this is Bootstrap 5.0.2, which predates those custom
   properties (they arrive in 5.2), so a token override here would be dead. */
html[data-theme="dark"] body.li-app .accordion,
html[data-theme="dark"] body.li-app .accordion-item,
html[data-theme="dark"] body.li-app .accordion-header,
html[data-theme="dark"] body.li-app .accordion-collapse {
    border-color: var(--wds-line) !important;
}
/* Bootstrap's accordion chevron is a dark-ink data: URI. */
html[data-theme="dark"] body.li-app .accordion-button::after { filter: invert(1) brightness(1.6); }
html[data-theme="dark"] body.li-app .accordion-button:not(.collapsed) {
    background-color: var(--wds-surface-2) !important;
    box-shadow: none;
}
/* noUiSlider, the experience/salary ranges: a light track with a white
   handle and a white tooltip label. */
html[data-theme="dark"] body.li-app .noUi-target { background: var(--wds-fill) !important; border-color: var(--wds-line) !important; box-shadow: none; }
html[data-theme="dark"] body.li-app .noUi-handle { background: var(--wds-blue) !important; border-color: var(--wds-blue) !important; box-shadow: none; }
html[data-theme="dark"] body.li-app .noUi-tooltip { background: var(--wds-surface-3) !important; border-color: var(--wds-line) !important; color: var(--wds-ink) !important; }

/* The bookmark button and the outline-secondary button both keep a
   literal white fill that the sweep misses: .wd-save-btn declares
   `background:transparent` in its own rule and picks the white up from a
   later one, and .btn-outline-secondary comes from the Bootstrap layer
   rather than from any page. */
html[data-theme="dark"] body.li-app .wd-save-btn,
html[data-theme="dark"] body.li-app .wd-save,
html[data-theme="dark"] body.li-app .wd-bookmark,
html[data-theme="dark"] body.li-app .wd-bookmark-toggle,
html[data-theme="dark"] body.li-app .bookmark-btn,
html[data-theme="dark"] body.li-app .btn-outline-secondary,
html[data-theme="dark"] body.li-app .btn-light {
    background-color: var(--wds-fill) !important;
    border-color: var(--wds-line) !important;
    color: var(--wds-ink-2) !important;
}
html[data-theme="dark"] body.li-app .wd-save-btn:hover,
html[data-theme="dark"] body.li-app .wd-save-btn.bookmarked,
html[data-theme="dark"] body.li-app .btn-outline-secondary:hover {
    background-color: var(--wds-fill-hover) !important;
    color: var(--wds-blue) !important;
}

/* Its two siblings, for the same reason -- Bootstrap, not a page stylesheet,
   so nothing in the sweep can reach them. An outline button is a border and a
   label over whatever is behind it; Bootstrap's is white-filled, which put
   "Add More Experience" at 2.13 on the resume builder and the same on every
   add/remove control it uses. Transparent, so the card shows through, and the
   colour lives in the border and the label the way the variant intends. */
html[data-theme="dark"] body.li-app .btn-outline-primary,
html[data-theme="dark"] body.li-app .btn-outline-primary:focus {
    background-color: transparent !important;
    border-color: var(--wds-blue) !important;
    color: var(--wds-blue) !important;
}
html[data-theme="dark"] body.li-app .btn-outline-primary:hover,
html[data-theme="dark"] body.li-app .btn-outline-primary:active {
    background-color: var(--wds-blue-tint) !important;
    border-color: var(--wds-blue) !important;
    color: var(--wds-blue) !important;
}
html[data-theme="dark"] body.li-app .btn-outline-danger,
html[data-theme="dark"] body.li-app .btn-outline-danger:focus {
    background-color: transparent !important;
    border-color: var(--wds-red-line) !important;
    color: var(--wds-red) !important;
}
html[data-theme="dark"] body.li-app .btn-outline-danger:hover,
html[data-theme="dark"] body.li-app .btn-outline-danger:active {
    background-color: var(--wds-red-tint) !important;
    border-color: var(--wds-red) !important;
    color: var(--wds-red) !important;
}
/* Bootstrap paints the label on a child span in some of these, and the sweep
   left those alone because the button, not the span, carried the fill. */
html[data-theme="dark"] body.li-app .btn-outline-primary span,
html[data-theme="dark"] body.li-app .btn-outline-primary i {
    color: inherit !important;
}
html[data-theme="dark"] body.li-app .btn-outline-danger span,
html[data-theme="dark"] body.li-app .btn-outline-danger i {
    color: inherit !important;
}

/* --- Account Settings (assets/css/candidate-settings.css) ------------ */
html[data-theme="dark"] body.li-app .cs-section,
html[data-theme="dark"] body.li-app .cs-tabs-nav,
html[data-theme="dark"] body.li-app .cs-card,
html[data-theme="dark"] body.li-app .cs-current-email {
    background-color: var(--wds-surface) !important;
    border-color: var(--wds-line) !important;
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app .cs-current-email { background-color: var(--wds-surface-2) !important; }
html[data-theme="dark"] body.li-app .cs-photo-hint,
html[data-theme="dark"] body.li-app .text-muted {
    color: var(--wds-ink-2) !important;
}

/* --- Job Preferences (pages/candidate/career-details.blade.php) ------ */
html[data-theme="dark"] body.li-app .db-job-card-table,
html[data-theme="dark"] body.li-app .dashboard-account-setting-item,
html[data-theme="dark"] body.li-app .pref-card,
html[data-theme="dark"] body.li-app .li-toggle-row,
html[data-theme="dark"] body.li-app .li-combo__btn,
html[data-theme="dark"] body.li-app .li-combo__menu,
html[data-theme="dark"] body.li-app .li-pill {
    background-color: var(--wds-surface) !important;
    border-color: var(--wds-line) !important;
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app .pref-card,
html[data-theme="dark"] body.li-app .li-toggle-row {
    background-color: var(--wds-surface-2) !important;
}
html[data-theme="dark"] body.li-app .li-pill.is-selected,
html[data-theme="dark"] body.li-app .li-pill input:checked + span {
    background-color: var(--wds-blue-tint) !important;
    border-color: var(--wds-blue-100) !important;
}

/* --- Browse Companies (pages/employees.blade.php) -------------------- */
html[data-theme="dark"] body.li-app .emp-filterbar-card,
html[data-theme="dark"] body.li-app .emp-card,
html[data-theme="dark"] body.li-app .emp-toolbar {
    background-color: var(--wds-surface) !important;
    border-color: var(--wds-line) !important;
    color: var(--wds-ink) !important;
}
/* The logo tile keeps a light disc — see the note in 8b — but the page's
   own #f8f9fb is brighter than it needs to be behind a dark card. */
html[data-theme="dark"] body.li-app .emp-card__logo { background-color: #f4f6f9 !important; }
html[data-theme="dark"] body.li-app .emp-card__tag--jobs {
    background-color: var(--wds-blue-tint) !important;
    color: var(--wds-blue) !important;
}
html[data-theme="dark"] body.li-app .emp-toolbar__count,
html[data-theme="dark"] body.li-app .emp-toolbar__count strong,
html[data-theme="dark"] body.li-app .emp-card__meta-text {
    color: var(--wds-ink-2) !important;
}
/* The "loading" veil is a white wash over the grid; on dark it has to
   darken, or a filter change flashes the page white. */
html[data-theme="dark"] body.li-app .emp-loading-overlay {
    background-color: rgba(18, 22, 26, .66) !important;
}

/* The pill's two fields are meant to be bare text on the card: the page
   neutralises main.css's boxed input at body.li-app .emp-filterbar-card
   .emp-filterbar-card__input (0,3,1). Section 6's input[type="text"] rule
   is 0,3,3, so on dark it won and each field painted a surface-2 strip,
   19px tall, inside the surface-coloured card. Same exception as the
   top-bar search: transparent, at a weight that beats the generic rule.
   The rounded wrap then carries the hover/focus tint the light design
   has, one step up from the card so it actually shows. */
html[data-theme="dark"] body.li-app .emp-filterbar-card .emp-filterbar-card__input,
html[data-theme="dark"] body.li-app .emp-filterbar-card .emp-filterbar-card__input:focus {
    background-color: transparent !important;
}
html[data-theme="dark"] body.li-app .emp-filterbar-card__input-wrap:hover,
html[data-theme="dark"] body.li-app .emp-filterbar-card__input-wrap:focus-within {
    background-color: var(--wds-surface-2) !important;
}

/* --- My Resumes (css/resume-linkedin.css) ---------------------------- */
html[data-theme="dark"] body.li-app .rs-card,
html[data-theme="dark"] body.li-app .rs-panel {
    background-color: var(--wds-surface) !important;
    border-color: var(--wds-line) !important;
    color: var(--wds-ink) !important;
}
/* Fills with --li-blue, so the same dark-label contract as section 3.
   resume-linkedin.css also pins -webkit-text-fill-color: #fff on it, which
   beats `color` in Chrome and Safari, so that has to flip as well. */
html[data-theme="dark"] body.li-app .rs-btn--primary,
html[data-theme="dark"] body.li-app .rs-btn--primary:hover {
    color: #08121c !important;
    -webkit-text-fill-color: #08121c;
}

/* --- My Resumes (css/my-resumes.css) -----------------------------------
   my-resumes.css re-declares --li-blue, --li-border, --li-ink and
   --li-ink-muted on .rs-dashboard, inside body.li-app, so it shadows
   section 1 for the whole page -- the same shape as the messenger and the
   public profile in 8d. That is why the cards went dark (2b paints them)
   while the resume name kept #10233f on them: 1.04:1, invisible. Declared
   one level deeper so it wins.

   The rest of that file is literals, and it is not in the generated sweep,
   so each one is restated below as the token for its role, the same
   mapping the sweep uses: the "View" and "1 file" blues (2.06 and 2.44 on
   a dark card) become --wds-blue, every pale wash becomes its hue's tint
   and line, and the white ring track steps out to --wds-surface-3. */
html[data-theme="dark"] body.li-app .rs-dashboard {
    --li-blue:       var(--wds-blue);
    --li-blue-hover: var(--wds-blue-hover);
    --li-border:     var(--wds-line);
    --li-ink:        var(--wds-ink);
    --li-ink-muted:  var(--wds-ink-2);
}
html[data-theme="dark"] body.li-app .rs-dashboard .rs-card__head {
    border-bottom-color: var(--wds-line);
}
html[data-theme="dark"] body.li-app .rs-dashboard .rs-card__count {
    border-color: var(--wds-line);
    color: var(--wds-blue);
}
html[data-theme="dark"] body.li-app .rs-dashboard .rs-item__icon {
    border-color: var(--wds-line);
}
html[data-theme="dark"] body.li-app .rs-dashboard .rs-item__icon--pdf {
    background: var(--wds-amber-tint);
    color: var(--wds-amber);
}
html[data-theme="dark"] body.li-app .rs-dashboard .rs-act {
    border-color: var(--wds-line-mid);
    color: var(--wds-blue) !important;
}
html[data-theme="dark"] body.li-app .rs-dashboard .rs-act--danger {
    background: var(--wds-red-tint);
    border-color: var(--wds-red-line);
    color: var(--wds-red) !important;
}
/* The base outline first, so each tone's own line below wins the tie. */
html[data-theme="dark"] body.li-app .rs-dashboard .rs-ats__status {
    border-color: var(--wds-line);
}
html[data-theme="dark"] body.li-app .rs-dashboard .rs-badge--primary,
html[data-theme="dark"] body.li-app .rs-dashboard .rs-ats__status--pass {
    background: var(--wds-green-tint);
    border-color: var(--wds-green-line);
    color: var(--wds-green);
}
html[data-theme="dark"] body.li-app .rs-dashboard .rs-ats__status--weak {
    background: var(--wds-amber-tint);
    border-color: var(--wds-amber-line);
    color: var(--wds-amber);
}
html[data-theme="dark"] body.li-app .rs-dashboard .rs-ats__status--issue {
    background: var(--wds-red-tint);
    border-color: var(--wds-red-line);
    color: var(--wds-red);
}
html[data-theme="dark"] body.li-app .rs-dashboard .rs-empty__icon {
    background: var(--wds-blue-tint);
    color: var(--wds-blue);
}
html[data-theme="dark"] body.li-app .rs-dashboard .rs-ats__track {
    stroke: var(--wds-surface-3);
}
html[data-theme="dark"] body.li-app .rs-dashboard .rs-ats__progress {
    stroke: var(--wds-blue);
}
html[data-theme="dark"] body.li-app .rs-dashboard :is(a, button):focus-visible {
    outline-color: var(--wds-blue);
}
html[data-theme="dark"] body.li-app .rs-dashboard .wds-hero :is(a, button):focus-visible {
    outline-color: #fff;
}

/* --- Ink that sits on a disc which stays white ------------------------ */
/* The job row's logo tile keeps a white disc in both themes (a company
   mark needs one), so its fallback initials are the one place on that page
   where the blue has to stay DARK. The generated sweep in 2b lightens
   every blue on the page, including this one, which put a light blue on
   white at 2.1:1. */
html[data-theme="dark"] body.li-app .wd-job-row__logo-initial,
html[data-theme="dark"] body.li-app .nw-tile-avatar--square,
html[data-theme="dark"] body.li-app .emp-card__logo {
    color: #0f52a8 !important;
}

/* --- The plain company tag ------------------------------------------- */
/* .emp-card__tag has a literal #f1f2f4 chip; only its --jobs variant was
   tinted in 8c, so the neutral one kept a light grey fill under the
   lightened ink. */
html[data-theme="dark"] body.li-app .emp-card__tag {
    background-color: var(--wds-fill) !important;
}
html[data-theme="dark"] body.li-app .emp-card__tag--jobs {
    background-color: var(--wds-blue-tint) !important;
}

/* --- The hero's white button ----------------------------------------- */
/* .wds-btn--white is a white fill whose LABEL is --wds-blue-active, so
   lightening that token left light blue text on white — 1.6:1. It is the
   one place the blue has to stay dark, because the fill is fixed white in
   both themes. */
html[data-theme="dark"] body.li-app .wds-btn--white,
html[data-theme="dark"] body.li-app .wds-btn--white:hover {
    color: #0f52a8;
}
/* Inside a page header its label is the header's own dark blue. */
html[data-theme="dark"] body.li-app :is(.wds-hero, .cs-page-header, .jp-hero) .wds-btn--white,
html[data-theme="dark"] body.li-app :is(.wds-hero, .cs-page-header, .jp-hero) .wds-btn--white:hover {
    color: #1C397D;
}
/* =====================================================================
   8d. FEED, MESSAGING, ATS AND NOTIFICATIONS
   The generated sweep in 2b covers these four pages' literals. What is
   left here is the part a sweep cannot reason about: a page that
   re-declares the shared tokens for its own subtree, and states whose
   more specific rule the sweep's base-class rewrite would otherwise win
   against.
   ===================================================================== */

/* --- Messaging -------------------------------------------------------
   chat-box.blade.php declares the whole --li-* set on `.li-msg`, INSIDE
   body.li-app, so it shadows section 1 for everything in the messenger.
   That is why the bubbles went dark (they read global tokens) while the
   pane and the conversation list stayed white (they read these). Same
   shape as career-details' :root block; re-declared one level deeper so
   it wins.

   --li-canvas is the ground BEHIND the bubbles and --li-bg the panel
   itself, so the canvas is the darker of the two here, matching how the
   page uses them. */
html[data-theme="dark"] body.li-app .li-msg {
    --li-bg:        #1b2025;
    --li-canvas:    #12161a;
    --li-line:      #2e353c;
    --li-line-soft: #242a30;
    --li-ink:       rgba(255, 255, 255, .92);
    --li-ink2:      rgba(255, 255, 255, .64);
    --li-ink3:      rgba(255, 255, 255, .46);
    --li-blue:      #71b7fb;
    --li-blue-dark: #a5d3fe;
    --li-blue-soft: rgba(113, 183, 251, .14);
    --li-green:     #58d0a4;
    --li-amber:     #e5b567;
    --li-amber-soft: rgba(229, 181, 103, .14);
    /* Tokens added with the component-library pass (13 Oct 2026). --li-blue
       is LIGHT here, so anything filled with it takes the dark --li-on-blue
       label; your bubble uses a deeper blue that keeps white text at AA. */
    --li-ink-label: rgba(255, 255, 255, .84);
    --li-blue-press: #c4e1fe;
    --li-blue-soft-2: rgba(113, 183, 251, .24);
    --li-on-blue:   #0b1a2b;
    --li-ring:      rgba(113, 183, 251, .35);
    /* Your bubble: a neutral raised fill, with grey ticks until read and
       light blue ones after (26 Oct 2026; it was solid blue). */
    --li-me-bg:     #26303d;
    --li-me-line:   #34404f;
    --li-me-ink:    rgba(255, 255, 255, .92);
    --li-tick:      rgba(255, 255, 255, .5);
    --li-tick-read: #71b7fb;
    --li-green-soft: rgba(88, 208, 164, .14);
    --li-red:       #f97066;
    --li-red-soft:  rgba(249, 112, 102, .14);
    --li-sh-1:      0 1px 2px rgba(0, 0, 0, .4);
    --li-sh-2:      0 4px 12px rgba(0, 0, 0, .45);
    --li-sh-3:      0 14px 34px rgba(0, 0, 0, .55);
    --li-sh-brand:  0 8px 20px rgba(0, 0, 0, .5);
}
/* --li-canvas does double duty in that file: it is the ground behind the
   bubbles (.messages-area) AND the hover wash on rows and pills. Dark is
   the right answer for the thread — bubbles sit lighter on it, as they do
   in the rest of the theme — but it makes a hovered row SINK instead of
   lift, so the hover states are given the fill token back. */
html[data-theme="dark"] body.li-app .li-msg .conversation-item:hover {
    background: var(--wds-fill-hover);
}
/* Your bubble keeps its own fill (--li-me-bg, a neutral raised tone since
   26 Oct 2026). The messaging block in section 2b paints .message.sent with
   the surface at 0,4,2; this is 0,5,2. */
html[data-theme="dark"] body.li-app .li-msg .message.sent {
    background-color: var(--li-me-bg) !important;
    border-color: var(--li-me-line) !important;
}

/* --- Public profile ---------------------------------------------------
   public-profile.blade.php declares its own --li-* block on `.cpp-wrap`,
   so for that whole page the theme's tokens are shadowed. It is the
   third file to do this, after career-details and the messenger, and it
   is why the Location line rendered as near-black text on a dark card
   while the email and phone beside it — which are <a>s, and pick up the
   link colour from elsewhere — stayed readable. The row dividers and the
   page ground came from the same block.

   --li-mid sits between ink and mute and has no --wds-* counterpart, so
   it is given the midpoint rather than folded into one of them. */
html[data-theme="dark"] body.li-app .cpp-wrap {
    --li-blue:      #71b7fb;
    --li-blue-dark: #a5d3fe;
    --li-tint:      rgba(113, 183, 251, .14);
    --li-ink:       rgba(255, 255, 255, .92);
    --li-mid:       rgba(255, 255, 255, .78);
    --li-mute:      rgba(255, 255, 255, .64);
    --li-line:      #2e353c;
    background: var(--wds-bg);
}

/* The sweep leaves anything matching /avatar|-bar/ alone, because those
   words also name the rings and meters drawn in white ON a hero band. These
   two are not on a hero — they are a white disc behind the profile photo and
   the unfilled half of the strength meter, both sitting on a dark card. */
html[data-theme="dark"] body.li-app .cpp-avatar {
    background: var(--wds-surface);
}
html[data-theme="dark"] body.li-app .cpp-bar-track {
    background: var(--wds-fill);
}
/* Same exclusion, same fix: the application stepper's connector rail for
   steps not yet reached is a literal #e5e7eb, and /-bar\b/ keeps the sweep
   off it — so it stayed a bright grey line across a dark modal. The
   reached part of the rail is green from a token and is left alone. */
html[data-theme="dark"] body.li-app .wd-stage-stepper .wd-step-bar {
    background: var(--wds-line);
}
html[data-theme="dark"] body.li-app .wd-stage-stepper .wd-step.done .wd-step-bar {
    background: var(--wds-green);
}
/* The surface sweep above paints every step dot, so a reached step, the
   current one and a closed application's outcome all read like a step not
   reached. They keep their colour; the tokens are pale here, so the icon
   on them is dark, not white. */
html[data-theme="dark"] body.li-app .wd-stage-stepper .wd-step.done .wd-step-dot {
    background-color: var(--wds-green) !important;
    border-color: var(--wds-green) !important;
    color: var(--wds-surface);
}
html[data-theme="dark"] body.li-app .wd-stage-stepper .wd-step.active .wd-step-dot {
    background-color: var(--wds-blue) !important;
    border-color: var(--wds-blue) !important;
    color: var(--wds-surface);
}
html[data-theme="dark"] body.li-app .wd-stage-stepper .wd-step.failed .wd-step-dot {
    background-color: var(--wds-red) !important;
    border-color: var(--wds-red) !important;
    color: var(--wds-surface);
}
html[data-theme="dark"] body.li-app .wd-stage-stepper .wd-step.done:has(+ .wd-step.failed) .wd-step-bar {
    background: var(--wds-red);
}

/* The Message Company modal keeps a brand gradient header in both themes —
   it is a band, not a surface — but its light-mode stops run navy to
   --wds-blue, and that token is a LIGHT blue here, which left white title
   text on a pale end. Given its own deep pair, like .wds-hero. */
html[data-theme="dark"] body.li-app .cm-modal .modal-header {
    background: linear-gradient(135deg, #0b1a2e 0%, #14538f 100%);
}
/* --- Feed search ------------------------------------------------------
   The Feed's Search tab repeats the --fd-* block from index.blade.php on
   its own selectors, so it needs the same two literals re-declared. */
html[data-theme="dark"] body.li-app .fs-wrap,
html[data-theme="dark"] body.li-app .fs-list,
html[data-theme="dark"] body.li-app .fs-box {
    --fd-accent-line: rgba(113, 183, 251, .26);
}

/* --- Feed ------------------------------------------------------------
   feed/index.blade.php declares its own --fd-* block on .fd-layout and
   its siblings. Two of the four are literals rather than chains off
   --wds-*, so they stayed light: the soft fill behind an accented row,
   and the line the Follow button is outlined in — which is why that
   button kept a pale blue edge after the border sweep (the sweep only
   rewrites literals where they are USED, and these are used through
   var()). Declared one level deeper than the page's own rule. */
html[data-theme="dark"] body.li-app .fd-layout,
html[data-theme="dark"] body.li-app .fd-rail,
html[data-theme="dark"] body.li-app .fd-me-rail,
html[data-theme="dark"] body.li-app .fd-tabs {
    --fd-accent-soft: rgba(113, 183, 251, .14);
    --fd-accent-line: rgba(113, 183, 251, .26);
}

/* The avatar disc is a light backing painted at !important behind a
   photo, so it shows as a pale ring around every avatar on a dark card. */
html[data-theme="dark"] body.li-app .fd-avatar:has(img),
html[data-theme="dark"] body.li-app .fd-me-avatar:has(img),
html[data-theme="dark"] body.li-app .fd-rail-avatar:has(img) {
    background: var(--wds-fill) !important;
}
/* .fd-tab sets its colour on the BASE class and .fd-tab.active overrides
   it — but 2b rewrites the base at a higher specificity than the page's
   own `.fd-tab.active`, so the active tab lost its label colour and came
   out grey on blue. Restated here, after 2b. (The dark label itself is
   in section 3, with the rest of the blue-filled families.) */
html[data-theme="dark"] body.li-app .fd-tab.active {
    box-shadow: none;
}
/* --- Job details -----------------------------------------------------
   pages/job-details.blade.php declares a COMPLETE palette of its own on
   :root -- --wd-ink, --wd-muted, --wd-line and twelve more -- and then
   reads it through var() for most of the page. The generated sweep above
   only rewrites literals where they are USED, so none of that was
   reachable: the breadcrumb, the Save job button, the match bars and the
   "Stay safe" note all kept #16202e ink on a dark card, which measures a
   contrast ratio of 1.0 -- the text was not dim, it was invisible.

   Re-pointing the page's own properties fixes every rule that reads them
   at once. html[data-theme="dark"] ... .job-details-wrapper outranks the
   page's bare :root, so this wins even though the page's <style> sits
   later in the document.

   Scoped to this page's three roots rather than declared on :root here:
   the --wd-* names are shared with components/ui/{badge,button,card,
   empty-state}, which appear on pages this file also covers. Related
   Jobs and the apply modal are siblings of the wrapper, not children,
   so each is named. */
html[data-theme="dark"] body.li-app .job-details-wrapper,
html[data-theme="dark"] body.li-app .related-jobs-area,
html[data-theme="dark"] body.li-app #cvModal {
    --wd-brand:      var(--wds-blue);
    --wd-brand-deep: var(--wds-blue-hover);
    --wd-tint:       var(--wds-blue-tint);
    --wd-tint2:      var(--wds-surface-2);
    --wd-ink:        var(--wds-ink);
    --wd-muted:      var(--wds-ink-2);
    --wd-faint:      var(--wds-ink-3);
    --wd-line:       var(--wds-line);
    --wd-line-soft:  var(--wds-line-soft);
    --wd-good:       var(--wds-green);
    --wd-good-tint:  var(--wds-green-tint);
    --wd-warn:       var(--wds-amber);
    --wd-warn-tint:  var(--wds-amber-tint);
    --wd-viol:       var(--wds-violet);
    --wd-viol-tint:  var(--wds-violet-tint);
}
/* Section 3 already gives .workdu-apply-btn a dark label, because in dark
   mode it fills with --wds-blue, which is LIGHT. But this page pins white
   on the button's children too --

       .workdu-apply-btn, .workdu-apply-btn .btn-text,
       .workdu-apply-btn .btn-icon, .workdu-apply-btn i,
       .workdu-apply-btn svg { color:#ffffff !important }

   -- and section 3 names only the button itself, so the label inside it
   stayed white on light blue at a contrast ratio of 2.1. The children need
   the same contract as the parent. */
html[data-theme="dark"] body.li-app .workdu-apply-btn .btn-text,
html[data-theme="dark"] body.li-app .workdu-apply-btn .btn-icon,
html[data-theme="dark"] body.li-app .workdu-apply-btn i,
html[data-theme="dark"] body.li-app .workdu-apply-btn svg {
    color: #08121c !important;
}

/* The highlight tiles are the one place --wd-faint sits on --wd-tint2
   rather than on a card, and --wds-ink-3 against --wds-surface-2 measures
   4.37 — just under AA for text this size. One step up clears it. */
html[data-theme="dark"] body.li-app .job-details-wrapper .wd-fact-label {
    color: var(--wds-ink-2);
}
/* --- Company profile — /employer/{username} ---------------------------
   Two stylesheets, one page: employe-details.blade.php declares an --ep-*
   palette on :root and reads it through var() for nearly everything, and
   company-details.css paints the contact, map, social and share cards.
   The generated sweep above reaches the literals in both, but a var()
   chain is invisible to it -- so the page rendered as dark ground under
   white cards, and the panel's LIGHT ink then landed on those white
   cards: the company name, every card title and every form label
   measured 1.22 against the surface behind them. Not dim, invisible.

   Re-pointing the page's own properties fixes every rule that reads them
   at once. Scoped to the page's three roots rather than declared on
   :root here: the identity band, the tab strip and the body grid are
   siblings, and this keeps the --ep-* names to the page that owns them. */
html[data-theme="dark"] body.li-app .ep-identity,
html[data-theme="dark"] body.li-app .ep-tabs,
html[data-theme="dark"] body.li-app .ep-body {
    --ep-primary:   var(--wds-blue);
    --ep-primary-d: var(--wds-blue-hover);
    --ep-green:     var(--wds-green);
    --ep-bg:        var(--wds-bg);
    --ep-surface:   var(--wds-surface);
    --ep-border:    var(--wds-line);
    --ep-text:      var(--wds-ink);
    --ep-muted:     var(--wds-ink-2);
    --ep-body:      var(--wds-ink-2);
    --ep-fill:      var(--wds-surface-2);
    --ep-fill-line: var(--wds-line);
}

/* --ep-primary is the light blue now, so the few elements it FILLS take
   the dark label section 3 gives every other filled blue. The contact
   tile is listed by shape rather than by colour because the page pins
   stroke AND fill to #fff on every child of that svg, to keep the glyph
   visible on the blue tile -- the same pin has to flip with it. */
html[data-theme="dark"] body.li-app .ep-btn-primary,
html[data-theme="dark"] body.li-app .ep-btn-primary:hover,
html[data-theme="dark"] body.li-app .ep-review-avatar,
html[data-theme="dark"] body.li-app .ep-info-icon svg {
    color: #08121c !important;
}
html[data-theme="dark"] body.li-app .contact-item-icon svg,
html[data-theme="dark"] body.li-app .contact-item-icon svg path,
html[data-theme="dark"] body.li-app .contact-item-icon svg circle,
html[data-theme="dark"] body.li-app .contact-item-icon svg rect,
html[data-theme="dark"] body.li-app .contact-item-icon svg line,
html[data-theme="dark"] body.li-app .contact-item-icon svg polyline {
    stroke: #08121c !important;
    fill: #08121c !important;
}

/* The section headers are bands, not controls, so they take the other
   half of that contract -- the one .wds-hero makes in section 3: a deep
   blue that keeps its white ink. They fill from --primary-500, which is
   light in dark mode, and washed out to a pale slab under a white title
   at 1.75. .ep-sidebar-head is a gradient that already ended on a deep
   #1677d3; only its light first stop had to go. */
html[data-theme="dark"] body.li-app .ep-sidebar-head {
    background: linear-gradient(100deg, #0d4f96 0%, #1362b8 100%);
}
html[data-theme="dark"] body.li-app .company-description-header,
html[data-theme="dark"] body.li-app .company-info-header,
html[data-theme="dark"] body.li-app .contact-info-header,
html[data-theme="dark"] body.li-app .map-location-header,
html[data-theme="dark"] body.li-app .share-profile-header,
html[data-theme="dark"] body.li-app .social-media-header {
    background: #10538f;
}

/* Tints the sweep read as near-white and flattened onto --wds-surface.
   Above L .92 it cannot tell a #eff6ff status chip from a white card,
   and this page is built out of very pale chips -- so the job count, the
   Featured flag, the Following state and the success note all came out
   the same colour as the card behind them. Each goes back to the tint of
   its own hue. */
html[data-theme="dark"] body.li-app .ep-tab-count,
html[data-theme="dark"] body.li-app .ep-job-item__badge,
html[data-theme="dark"] body.li-app .ep-btn-outline:hover,
html[data-theme="dark"] body.li-app .ep-btn-outline .ep-btn-badge,
html[data-theme="dark"] body.li-app .ep-social-btn,
html[data-theme="dark"] body.li-app .ep-map-directions:hover,
html[data-theme="dark"] body.li-app .info-box {
    background-color: var(--wds-blue-tint) !important;
}
html[data-theme="dark"] body.li-app .ep-btn-follow.following,
html[data-theme="dark"] body.li-app .ep-form-note {
    background-color: var(--wds-green-tint) !important;
    border-color: var(--wds-green-line) !important;
}
html[data-theme="dark"] body.li-app .ep-job-item__badge--featured {
    background-color: var(--wds-red-tint) !important;
}
html[data-theme="dark"] body.li-app .ep-reviews-empty__icon {
    background-color: var(--wds-amber-tint) !important;
}
/* Review cards (20 Oct 2026): the viewer's own, the "Your review" tag, a
   picked reviewer type and the icon of the sign-in / own-company note were
   light literals. */
html[data-theme="dark"] body.li-app .ep-rv.is-own {
    background-color: var(--wds-blue-tint) !important;
    border-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .ep-rv__own,
html[data-theme="dark"] body.li-app .ep-rv-state__icon,
html[data-theme="dark"] body.li-app .ep-rv-chip input:checked + span {
    background-color: var(--wds-blue-tint) !important;
}
html[data-theme="dark"] body.li-app .ep-form-note--error,
html[data-theme="dark"] body.li-app .ep-btn-danger:hover {
    background-color: var(--wds-red-tint) !important;
    border-color: var(--wds-line) !important;
}
/* An empty star read as a lit one in light grey, and the red Delete was
   dark red on the dark card. */
html[data-theme="dark"] body.li-app .ep-rv__stars span:not(.is-on) {
    color: #4a5368 !important;
}
html[data-theme="dark"] body.li-app .ep-btn-danger {
    color: #f28b82 !important;
    border-color: rgba(242, 139, 130, .45) !important;
}
/* The reviews empty state is a dashed box INSIDE a card, so it has to sit
   a step off that card rather than on the same surface as it. */
html[data-theme="dark"] body.li-app .ep-reviews-empty {
    background-color: var(--wds-surface-2) !important;
}

/* Leaflet's zoom and attribution controls are white tiles printed on the
   map raster, and a map stays light in both themes. The panel's link
   colour reached into them and put the light blue on white at 1.8, so
   they keep an ink of their own. */
html[data-theme="dark"] body.li-app .leaflet-control-zoom a,
html[data-theme="dark"] body.li-app .leaflet-control-attribution,
html[data-theme="dark"] body.li-app .leaflet-control-attribution a {
    color: #0a1a2b !important;
}

/* --- ATS score detail — the sweep's blind spots ------------------------
   candidate/ats-score/show.blade.php is in the generated block above, which
   turns its cards and its ink. What it cannot judge is DEPTH and HUE, and
   this page leans on both. --------------------------------------------- */

/* Depth. Every inset on this page is a pale grey step INTO a white card --
   #f8fafc, #fcfdff, #eef2f7 -- and the sweep classifies a fill by luminance
   alone, so above L .88 all of them land on --wds-surface, the same colour
   as the card they sit in. On dark the step has to go the other way, out
   from the card, so each moves up one surface and the bar track, which is
   an inset inside an inset, moves up two. */
html[data-theme="dark"] body.li-app .ats-detail .ats-breakdown-item,
html[data-theme="dark"] body.li-app .ats-detail .ats-suggest-item,
html[data-theme="dark"] body.li-app .ats-detail .ats-range-chip,
html[data-theme="dark"] body.li-app .ats-btn-ghost {
    background-color: var(--wds-surface-2) !important;
}
html[data-theme="dark"] body.li-app .ats-detail .ats-bar {
    background-color: var(--wds-surface-3) !important;
}

/* Hue. The callout and the rating pill carry the verdict -- green for a
   good score, amber for average, red for poor -- in a wash so pale
   (#f0fdf4, #fffbeb, #fef2f2) that the sweep reads it as white and drops
   the hue entirely, leaving three states that look identical. Each goes
   back to the tint and edge of its own colour; the text on them is already
   the matching token from the sweep. */
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-green.ats-callout,
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-green.ats-rating-pill {
    background-color: var(--wds-green-tint) !important;
    border-color: var(--wds-green-line) !important;
}
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-amber.ats-callout,
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-amber.ats-rating-pill {
    background-color: var(--wds-amber-tint) !important;
    border-color: var(--wds-amber-line) !important;
}
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-red.ats-callout,
html[data-theme="dark"] body.li-app .ats-detail .ats-tone-red.ats-rating-pill {
    background-color: var(--wds-red-tint) !important;
    border-color: var(--wds-red-line) !important;
}
html[data-theme="dark"] body.li-app .ats-detail .ats-suggest-num {
    background-color: var(--wds-blue-tint) !important;
}

/* Two fills are a color-mix of a live --chip-color into #fff, so the sweep
   -- which only ever sees the literal in the value -- flattened both to a
   plain surface and threw the category colour away. Mixed into a dark base
   instead, at a higher ratio because a tint needs more pigment to read on
   dark than it does on white. */
html[data-theme="dark"] body.li-app .ats-detail .ats-range-chip.is-active,
html[data-theme="dark"] body.li-app .ats-detail .ats-breakdown-icon {
    background-color: color-mix(in srgb, var(--chip-color) 22%, var(--wds-surface-2)) !important;
}

/* The three breakdown tones, which the tile now reads through --chip-color
   for its icon tint, its bar fill and its percent label. Re-pointed
   together: #E05151 on a dark tile measures 3.9, so the label under a poor
   category was the one thing on the page still failing after everything
   above. */
html[data-theme="dark"] body.li-app .ats-detail .ats-breakdown-item.ats-tone-green { --chip-color: var(--wds-green); }
html[data-theme="dark"] body.li-app .ats-detail .ats-breakdown-item.ats-tone-amber { --chip-color: var(--wds-amber); }
html[data-theme="dark"] body.li-app .ats-detail .ats-breakdown-item.ats-tone-red   { --chip-color: var(--wds-red); }

/* The score ring's unfilled track is an SVG stroke attribute, not a fill,
   so nothing in the sweep can see it -- a #eef2f7 hoop stayed bright on a
   dark card, and the lower the score the more of it showed. */
html[data-theme="dark"] body.li-app .ats-detail .ats-ring-track {
    stroke: var(--wds-surface-3);
}

/* Filled blue, so it takes section 3's contract like every other primary
   button in the panel. Its own #1875e5 under white measures 4.45, which is
   under AA and also the one deep-blue button left on an otherwise
   light-blue panel. */
html[data-theme="dark"] body.li-app .ats-btn-primary,
html[data-theme="dark"] body.li-app .ats-btn-primary:hover {
    background: var(--wds-blue) !important;
    color: #08121c !important;
    box-shadow: none;
}

/* --- Network view — the sweep's blind spots ----------------------------
   Depth again. The ghost button sits INSIDE .nw-card, and its #f3f4f6 reads
   as near-white to the sweep, so it landed on --wds-surface -- the same
   colour as the card around it, leaving "View Profile" as floating text.
   One step out, and its hover one further. */
html[data-theme="dark"] body.li-app .nw-btn-ghost {
    background-color: var(--wds-surface-2) !important;
}
html[data-theme="dark"] body.li-app .nw-btn-ghost:hover {
    background-color: var(--wds-surface-3) !important;
}

/* Hue. The count chip beside each section title is a pale indigo wash
   (#eef2ff) under indigo text; at L .90 the sweep read it as white and
   flattened it to a plain surface, which drops the one bit of colour those
   headings carry. The ink beside it is already --wds-blue. */
html[data-theme="dark"] body.li-app .nw-section-title .nw-count {
    background-color: var(--wds-blue-tint) !important;
}

/* --- Job Preferences — the controls the sweep cannot see --------------
   A blind spot worth naming: the sweep, and the contrast audit that checks
   it, both look at TEXT and at light slabs. A control with no text in it --
   a slider track, a switch knob -- can end up the same colour as the thing
   it sits on and neither notices. On this page five of them had:

       slider track   #22282e on #22282e   1.00
       slider handle  #1b2025 on #22282e   1.10
       slider tooltip #2a3138 on #1b2025   1.25
       switch track   #161a1e on #22282e   1.18   (rgba(0,0,0,.35) on dark)
       switch knob    #1b2025 on #161a1e   1.07

   Three different causes, all in one place.
   ===================================================================== */

/* The track is a groove, and the sweep's luminance rule put it on exactly
   the surface it lies in. In light mode it is #e6ecf5 on white, a 1.24
   whisper, so the fix is not to make it loud -- it is to put it back on the
   other side of the card, a hair lighter rather than identical. */
html[data-theme="dark"] body.li-app #experienceSlider.noUi-target {
    background: var(--wds-line-mid) !important;
}
/* The handle and the switch knob are the same mistake in reverse: both are
   #fff because they are the MOVING part, the thing your eye tracks, and the
   sweep read that white as a card and darkened it. They stay light. */
html[data-theme="dark"] body.li-app #experienceSlider .noUi-handle {
    background: var(--wds-ink) !important;
}
/* The tooltip is a chip floating over a card, and every dark fill available
   is within a shade of the card. Rather than brighten it out of character,
   give it an edge to be defined by -- the arrow included, or it points in a
   colour the chip no longer is. */
html[data-theme="dark"] body.li-app #experienceSlider .noUi-tooltip {
    background: var(--wds-surface-3) !important;
    border: 1px solid var(--wds-line-mid) !important;
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app #experienceSlider .noUi-tooltip::after {
    border-top-color: var(--wds-line-mid);
}

/* The switch's OFF track is rgba(0,0,0,.35) -- a black wash, which is a grey
   on a white card and nothing at all on a dark one. Inverted to a white wash
   of the alpha that lands in the same place: 3.4 against the card, where the
   light theme measures 3.5. */
html[data-theme="dark"] body.li-app .pref-card .li-switch__track {
    background: rgba(255, 255, 255, .38);
}
html[data-theme="dark"] body.li-app .pref-card .li-switch__track::after {
    background: #ffffff !important;
}
/* ON, the track fills with --li-green, which is a LIGHT green here, so the
   white knob would sit on it at 1.9. Section 3's contract applies to a knob
   as much as to a label: light fill, dark rider. */
html[data-theme="dark"] body.li-app .pref-card .li-switch input:checked + .li-switch__track {
    background: var(--wds-green);
}
html[data-theme="dark"] body.li-app .pref-card .li-switch input:checked + .li-switch__track::after {
    background: #08121c !important;
}

/* --- The panel ground is the page GROUND, not a card -------------------
   Job Preferences paints the whole panel behind itself:

       .dashboard-wrapper { background: linear-gradient(180deg,#f6f8fc,#eef2f9) }

   Two very light stops, so the sweep averaged them and did what it does with
   any near-white fill -- called it --wds-surface. But .dashboard-wrapper is
   not a card, it is the ground the cards sit ON, and dashboard-v3-dark.css
   also holds it at min-height:100vh. Together that put a full-viewport slab
   of #1b2025 on a #12161a page: a visible seam under the last card, and the
   emptier the page the more of it showed. Reported as a gap at the bottom of
   Job Preferences.

   Section 2 already assigns this element --wds-bg; it is only listed again
   because the generated block above runs later. Named on its own rather than
   moved into section 2 so that the reason survives a regeneration. */
html[data-theme="dark"] body.li-app .dashboard-wrapper {
    background-color: var(--wds-bg) !important;
    background-image: none !important;
}

/* The resume builder's calendar button is a white backing behind the icon,
   there to mask the date text under it on a light field. On a dark field
   there is nothing to mask, and the sweep's --wds-surface leaves a chip a
   shade off the input it sits on. Only the icon should show. */
html[data-theme="dark"] body.li-app .rb-date-btn {
    background: transparent !important;
}

/* Bootstrap's checkbox and radio set appearance:none and paint themselves,
   so the root's color-scheme:dark never reaches them -- they stayed a solid
   white square with a rgba(0,0,0,.25) border that is invisible on dark. Seen
   on the resume builder's "Current" box, but this is the Bootstrap layer, so
   it is every checkbox in the panel. */
html[data-theme="dark"] body.li-app .form-check-input {
    background-color: var(--wds-fill) !important;
    border-color: var(--wds-line-mid) !important;
}
/* Checked keeps a DEEP blue rather than taking --wds-blue like the other
   filled controls. Bootstrap draws the tick as a white data: URI baked into
   background-image, so a light fill would need that SVG replaced to keep the
   tick readable; a deep fill keeps the white tick Bootstrap ships (5.5) and
   the light-blue border below makes the box itself read against the card. */
html[data-theme="dark"] body.li-app .form-check-input:checked {
    background-color: #0a65cc !important;
    border-color: var(--wds-blue) !important;
}
html[data-theme="dark"] body.li-app .form-check-input:focus {
    border-color: var(--wds-blue) !important;
    box-shadow: 0 0 0 .2rem var(--wds-ring) !important;
}

/* =====================================================================
   9. MEDIA
   Photos and company logos stay untouched — inverting them is the
   classic dark-mode mistake. Only flat art that is drawn in black ink
   on a transparent ground gets lifted.
   ===================================================================== */
html[data-theme="dark"] body.li-app .wd-empty__art-bg { fill: var(--wds-surface-2); }
html[data-theme="dark"] body.li-app .wd-empty__art-fg { fill: var(--wds-surface-3); }

/* =====================================================================
   10. ONBOARDING  (/candidate/welcome)
   The wizard predates this file and paints its own light literals —
   #374151 labels, #0f172a headings, #fff fields, #eef2f7 rails. The card
   behind them goes dark from section 2, so in dark mode every label and
   heading sat near-black on near-black and the step was unreadable.
   Overridden by name here rather than in the page, per the note at the
   top of this file: the page must carry ONE palette, not two.
   ===================================================================== */
html[data-theme="dark"] body.li-app .ob-card {
    background: var(--wds-surface);
    border-color: var(--wds-line);
    box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 18px 40px -22px rgba(0,0,0,.6);
}
html[data-theme="dark"] body.li-app .ob-bar .ob-signout { color: var(--wds-ink-2) !important; }
html[data-theme="dark"] body.li-app .ob-head { border-bottom-color: var(--wds-line); }
html[data-theme="dark"] body.li-app .ob-head h1 { color: var(--wds-ink); }
html[data-theme="dark"] body.li-app .ob-head p { color: var(--wds-ink-2); }

html[data-theme="dark"] body.li-app .ob-field label { color: var(--wds-ink); }
html[data-theme="dark"] body.li-app .ob-hint { color: var(--wds-ink-2); }

/* The fields are .ob-input, not a Bootstrap .form-control, so section 8's
   control rules never reached them. */
html[data-theme="dark"] body.li-app .ob-field .ob-input,
html[data-theme="dark"] body.li-app .ob-field select.ob-input {
    background: var(--wds-surface-2);
    border-color: var(--wds-line-mid);
    color: var(--wds-ink);
}
html[data-theme="dark"] body.li-app .ob-field .ob-input::placeholder { color: var(--wds-ink-3); }
html[data-theme="dark"] body.li-app .ob-field .ob-input[readonly] {
    background: var(--wds-surface-3);
    color: var(--wds-ink-2);
}
html[data-theme="dark"] body.li-app .ob-field .ob-input:focus {
    border-color: var(--wds-blue);
    box-shadow: 0 0 0 3px var(--wds-ring);
}

html[data-theme="dark"] body.li-app .ob-progress-track { background: var(--wds-surface-3); }
html[data-theme="dark"] body.li-app .ob-steps span { color: var(--wds-ink-2); }

html[data-theme="dark"] body.li-app .ob-chip {
    background: var(--wds-surface-3);
    border-color: var(--wds-line-mid);
}
html[data-theme="dark"] body.li-app .ob-file {
    background: var(--wds-surface-2);
    border-color: var(--wds-line-mid);
}
html[data-theme="dark"] body.li-app .ob-file:hover,
html[data-theme="dark"] body.li-app .ob-file.is-over {
    background: var(--wds-surface-3);
    border-color: var(--wds-blue);
}
html[data-theme="dark"] body.li-app .ob-file i { color: var(--wds-ink-3); }

/* The seven-step version (29 Sept 2026) adds choice cards, pills, tiles, a
   segmented control, suggestion groups and repeater cards, all painted in
   the same light literals as the fields above. */
html[data-theme="dark"] body.li-app .ob-progress-step,
html[data-theme="dark"] body.li-app .ob-section small,
html[data-theme="dark"] body.li-app .ob-note,
html[data-theme="dark"] body.li-app .ob-mine span,
html[data-theme="dark"] body.li-app .ob-group__sub,
html[data-theme="dark"] body.li-app .ob-choice__sub { color: var(--wds-ink-2); }
html[data-theme="dark"] body.li-app .ob-section,
html[data-theme="dark"] body.li-app .ob-label,
html[data-theme="dark"] body.li-app .ob-mine strong,
html[data-theme="dark"] body.li-app .ob-group__title,
html[data-theme="dark"] body.li-app .ob-exp__title,
html[data-theme="dark"] body.li-app .ob-file-name,
html[data-theme="dark"] body.li-app .ob-choice__title { color: var(--wds-ink); }
html[data-theme="dark"] body.li-app .ob-checks li { color: var(--wds-ink-2); }

html[data-theme="dark"] body.li-app .ob-choice,
html[data-theme="dark"] body.li-app .ob-pill,
html[data-theme="dark"] body.li-app .ob-tile,
html[data-theme="dark"] body.li-app .ob-seg button,
html[data-theme="dark"] body.li-app .ob-sugg,
html[data-theme="dark"] body.li-app .ob-check,
html[data-theme="dark"] body.li-app .ob-choice__tags span {
    background: var(--wds-surface-2);
    border-color: var(--wds-line-mid);
    color: var(--wds-ink);
}
html[data-theme="dark"] body.li-app .ob-tile i { color: var(--wds-ink-2); }
html[data-theme="dark"] body.li-app .ob-choice.is-selected,
html[data-theme="dark"] body.li-app .ob-pill.is-on,
html[data-theme="dark"] body.li-app .ob-tile.is-on,
html[data-theme="dark"] body.li-app .ob-sugg.is-added,
html[data-theme="dark"] body.li-app .ob-check.is-on {
    background: var(--wds-blue-tint);
    border-color: var(--wds-blue);
    color: var(--wds-blue);
}
html[data-theme="dark"] body.li-app .ob-tile.is-on i { color: var(--wds-blue); }
html[data-theme="dark"] body.li-app .ob-choice.is-selected .ob-choice__tags span { background: var(--wds-surface); border-color: var(--wds-line-mid); color: var(--wds-blue); }
html[data-theme="dark"] body.li-app .ob-choice__icon,
html[data-theme="dark"] body.li-app .ob-group__icon { background: var(--wds-blue-tint); color: var(--wds-blue); }
html[data-theme="dark"] body.li-app .ob-choice.is-selected .ob-choice__icon { background: var(--wds-blue); color: #fff; }
html[data-theme="dark"] body.li-app .ob-choice__radio { border-color: var(--wds-line-mid); }
html[data-theme="dark"] body.li-app .ob-seg button.is-on { background: var(--wds-blue); border-color: var(--wds-blue); color: #fff; }

html[data-theme="dark"] body.li-app .ob-group,
html[data-theme="dark"] body.li-app .ob-exp { background: var(--wds-surface-2); border-color: var(--wds-line); }
html[data-theme="dark"] body.li-app .ob-exp__head { background: var(--wds-surface-3); border-bottom-color: var(--wds-line); }
html[data-theme="dark"] body.li-app .ob-exp .ob-exp-del { color: var(--wds-ink-3); }
html[data-theme="dark"] body.li-app .ob-add { background: var(--wds-blue-tint); color: var(--wds-blue); }
html[data-theme="dark"] body.li-app .ob-add:hover { background: var(--wds-surface-3); }
html[data-theme="dark"] body.li-app .ob-btn-ghost { background: var(--wds-surface-2); border-color: var(--wds-line-mid); color: var(--wds-ink) !important; }
html[data-theme="dark"] body.li-app .ob-foot { border-top-color: var(--wds-line); }
html[data-theme="dark"] body.li-app .ob-alert { background: var(--wds-red-tint); border-color: var(--wds-red); color: var(--wds-red); }
html[data-theme="dark"] body.li-app .ob-autofill { background: var(--wds-surface-2); border-color: var(--wds-line-mid); }
html[data-theme="dark"] body.li-app .ob-autofill__icon { background: var(--wds-blue-tint); color: var(--wds-blue); }
html[data-theme="dark"] body.li-app .ob-autofill__body strong { color: var(--wds-ink); }
html[data-theme="dark"] body.li-app .ob-autofill__body span { color: var(--wds-ink-2); }
html[data-theme="dark"] body.li-app .ob-autofill__status.is-done { color: var(--wds-green); }
html[data-theme="dark"] body.li-app .ob-autofill__status.is-error { color: var(--wds-red); }

/* =====================================================================
   11. CANDIDATE SETTINGS — privacy options, chip rows, skills picker
   Three widgets on /candidate/settings paint their own light literals
   inside page <style> blocks, so section 8's control rules never reach
   them:
     - the privacy radio CARDS  (#f5f6ff when selected, #111827 titles):
       the selected card rendered as a white slab and every UNSELECTED
       title was near-black on a near-black card — invisible.
     - the skills / languages chip rows (#f9fafb): two light bars.
     - the Select Skills modal (background: white, #f8fafc headers):
       the whole dialog stayed light, and its skill names sat on it in
       colours meant for a white sheet.
   ===================================================================== */

/* ── Privacy option cards ── */
html[data-theme="dark"] body.li-app .conn-privacy-option {
    border-color: var(--wds-line-mid);
    background: var(--wds-surface-2);
}
html[data-theme="dark"] body.li-app .conn-privacy-option:hover { border-color: var(--wds-blue); }
/* Selected reads as a blue-tinted card, not the #f5f6ff sheet of paper
   the light theme uses. */
html[data-theme="dark"] body.li-app .conn-privacy-option.is-selected {
    border-color: var(--wds-blue);
    background: var(--wds-blue-tint, rgba(88, 166, 255, .14));
}
html[data-theme="dark"] body.li-app .conn-privacy-option b { color: var(--wds-ink); }
html[data-theme="dark"] body.li-app .conn-privacy-option small { color: var(--wds-ink-2); }

/* ── Skills / languages chip rows (both use .skills-chips-wrapper) ── */
html[data-theme="dark"] body.li-app .skills-chips-wrapper,
html[data-theme="dark"] body.li-app .skills-chips-wrapper-resume {
    background-color: var(--wds-surface-2);
    border-color: var(--wds-line-mid);
}
html[data-theme="dark"] body.li-app .skills-chips-wrapper:empty::after,
html[data-theme="dark"] body.li-app .skills-chips-wrapper-resume:empty::after { color: var(--wds-ink-3); }

/* ── Select Skills modal ── */
html[data-theme="dark"] body.li-app .skills-modal { background: var(--wds-surface); }
html[data-theme="dark"] body.li-app .skills-modal-header {
    background: var(--wds-surface-2);
    border-color: var(--wds-line);
}
html[data-theme="dark"] body.li-app .skills-modal-header h6 { color: var(--wds-ink); }
html[data-theme="dark"] body.li-app .skills-modal-close { color: var(--wds-ink-2); }
html[data-theme="dark"] body.li-app .skills-modal-search-input {
    background: var(--wds-surface-2);
    border-color: var(--wds-line-mid);
    color: var(--wds-ink);
}
html[data-theme="dark"] body.li-app .skills-modal-search-input::placeholder { color: var(--wds-ink-3); }
html[data-theme="dark"] body.li-app .skills-modal-search-icon { color: var(--wds-ink-3); }
html[data-theme="dark"] body.li-app .skills-category-tabs {
    background: var(--wds-surface-2);
    border-color: var(--wds-line);
}
html[data-theme="dark"] body.li-app .skills-cat-tab {
    background: var(--wds-surface-3);
    border-color: var(--wds-line-mid);
    color: var(--wds-ink-2);
}
html[data-theme="dark"] body.li-app .skills-cat-tab:hover {
    background: var(--wds-surface-2);
    border-color: var(--wds-blue);
    color: var(--wds-blue);
}
/* The active tab keeps a DEEP blue fill with white text, the same
   exception section 3 documents: --wds-blue is a LIGHT blue on dark, and
   this pill ships white labels. */
html[data-theme="dark"] body.li-app .skills-cat-tab.active {
    background: #0a65cc;
    border-color: #0a65cc;
    color: #fff;
}
html[data-theme="dark"] body.li-app .skills-category-header {
    background: var(--wds-surface-2);
    color: var(--wds-ink-2);
}
html[data-theme="dark"] body.li-app .skills-category-count {
    background: var(--wds-surface-3);
    color: var(--wds-ink-2);
}
html[data-theme="dark"] body.li-app .skill-option { color: var(--wds-ink); }
html[data-theme="dark"] body.li-app .skill-option:hover {
    background: var(--wds-surface-2);
    color: var(--wds-blue);
}

/* ── The resume builder's Skills dropdown (resume-builder.blade.php) ──
   The same picker under -resume names. Its option rows declare #1f2937 on
   the BASE class, and 2b only lists the :hover and .selected states, so on
   a dark card every unselected skill was near-black: the "very dim" list.
   Hover and selected keep 2b's blue, which is !important and wins. */
html[data-theme="dark"] body.li-app .skill-option-resume { color: var(--wds-ink); }
/* The chips a pick turns into carry white text on a gradient that ENDS on
   --wds-blue, a light blue here, so their labels faded out towards 2.1:1.
   A deep pair of their own, like the hero's. */
html[data-theme="dark"] body.li-app .skill-chip-resume {
    background: linear-gradient(135deg, #14538f 0%, #0a65cc 100%);
}
/* 2b repaints .skills-cat-tab at !important for every state, which also
   wiped the active tab's fill: in both this dropdown and the settings modal
   the selected category looked exactly like the rest. Restored here one
   class heavier, with the deep blue and white label documented above
   (5.61:1). */
html[data-theme="dark"] body.li-app .skills-cat-tab.active,
html[data-theme="dark"] body.li-app .skills-cat-tab.active:hover {
    background-color: #0a65cc !important;
    border-color: #0a65cc !important;
    color: #fff !important;
}
html[data-theme="dark"] body.li-app .skills-modal-footer {
    background: var(--wds-surface-2);
    border-color: var(--wds-line);
    color: var(--wds-ink-2);
}

/* Three buttons on /candidate/settings that section 3's contract missed.
   The rule there is: on dark, --wds-blue and --wds-green become LIGHT, so a
   filled control needs a DARK label. These three kept white (or blue-on-blue)
   and measured 1.91-2.13 against their own fill. */

/* Inline style="... color: white" on the element, so this needs !important
   to reach it at all. */
html[data-theme="dark"] body.li-app #linkedinImportSubmitBtn { color: #08121c !important; }

/* .btn-success fills with the lightened --wds-green and keeps Bootstrap's
   white label. */
html[data-theme="dark"] body.li-app .btn-success,
html[data-theme="dark"] body.li-app .btn-success:hover,
html[data-theme="dark"] body.li-app .btn-success:focus,
html[data-theme="dark"] body.li-app .btn-success i { color: #08121c !important; }

/* Blue text on a blue TINT: the tint lightens to near-white on dark, so the
   fill and the ink converge. Give it the surface treatment the other
   secondary controls get and keep the blue ink readable on it. */
html[data-theme="dark"] body.li-app .add-custom-skill-btn,
html[data-theme="dark"] body.li-app .add-custom-skill-btn-resume {
    background: var(--wds-surface-3);
    border-color: var(--wds-line-mid);
    color: var(--wds-blue);
}
html[data-theme="dark"] body.li-app .add-custom-skill-btn:hover,
html[data-theme="dark"] body.li-app .add-custom-skill-btn-resume:hover {
    background: var(--wds-surface-2);
    border-color: var(--wds-blue);
}

/* The muted-ink sweep above lists .cs-tab-btn, and its !important also lands
   on .cs-tab-btn.active — whose fill stays the DEEP blue gradient the light
   theme uses. Grey ink on that fill measured 2.17, so the selected settings
   tab was the hardest label on the page to read. White, as the light theme
   already intends for it. */
html[data-theme="dark"] body.li-app .cs-tab-btn.active,
html[data-theme="dark"] body.li-app .cs-tab-btn.active i,
html[data-theme="dark"] body.li-app .cs-tab-btn.danger.active,
html[data-theme="dark"] body.li-app .cs-tab-btn.danger.active i {
    color: #fff !important;
}


/* =====================================================================
   DATE PICKER (flatpickr) — every date field on the site

   frontend/partials/styles.blade.php carries an inline flatpickr theme
   that hard-codes a light palette with !important on every declaration:
   `.flatpickr-calendar { background: #ffffff !important }`, white months
   and weekdays, and `color: #1f2937 !important` on the header and the
   days. Nothing had ever answered it for dark mode, so the calendar came
   up unreadable in three ways at once:

     the box stayed white while inheriting colour #e6e9ed, so the month
     name and the year were near-white on white — invisible;
     .flatpickr-monthDropdown-months and .numInput.cur-year are native
     controls, so `color-scheme: dark` on the root painted them #22282e —
     two black boxes sitting in that white header;
     only the day grid stayed legible, which is why the calendar looked
     half-broken rather than plainly wrong.

   Overridden here by name rather than by editing that inline block, the
   way the rest of this file answers the other hard-coded light slabs — a
   page's own CSS must not end up carrying two palettes. !important is
   required throughout: every declaration being answered has it.

   The calendar is appended to document.body, outside whatever card opened
   it, so these rules reach it wherever it opens: the resume builder,
   onboarding, career details, candidate settings, the experience tab, and
   post/edit job. scripts-optimized.blade.php converts every date input on
   the frontend to flatpickr, so this is the only place the dark calendar
   has to be described.

   --wds-blue is a LIGHT blue here, so a filled day takes a dark label —
   the same trade section 3 makes for every other filled blue.
   ===================================================================== */

html[data-theme="dark"] body.li-app .flatpickr-calendar {
    background: var(--wds-surface) !important;
    color: var(--wds-ink) !important;
    border-color: var(--wds-line) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 4px 10px rgba(0, 0, 0, .35) !important;
}

/* The pointer that ties the calendar to its field. */
html[data-theme="dark"] body.li-app .flatpickr-calendar.arrowTop::before,
html[data-theme="dark"] body.li-app .flatpickr-calendar.arrowBottom::before {
    border-bottom-color: var(--wds-line) !important;
    border-top-color: var(--wds-line) !important;
}
html[data-theme="dark"] body.li-app .flatpickr-calendar.arrowTop::after,
html[data-theme="dark"] body.li-app .flatpickr-calendar.arrowBottom::after {
    border-bottom-color: var(--wds-surface) !important;
    border-top-color: var(--wds-surface) !important;
}

/* --- header ------------------------------------------------------- */

html[data-theme="dark"] body.li-app .flatpickr-months,
html[data-theme="dark"] body.li-app .flatpickr-month,
html[data-theme="dark"] body.li-app .flatpickr-weekdays,
html[data-theme="dark"] body.li-app .flatpickr-weekdaycontainer {
    background: var(--wds-surface) !important;
}

html[data-theme="dark"] body.li-app .flatpickr-current-month,
html[data-theme="dark"] body.li-app .flatpickr-current-month .flatpickr-monthDropdown-months,
html[data-theme="dark"] body.li-app .flatpickr-current-month .numInputWrapper,
html[data-theme="dark"] body.li-app .flatpickr-current-month input.cur-year {
    color: var(--wds-ink) !important;
}

/* The month picker and the year box are native controls: without an explicit
   background they keep the one `color-scheme: dark` gives them, which reads
   as two black holes punched in the header. */
html[data-theme="dark"] body.li-app .flatpickr-current-month .flatpickr-monthDropdown-months,
html[data-theme="dark"] body.li-app .flatpickr-current-month .numInputWrapper,
html[data-theme="dark"] body.li-app .flatpickr-current-month input.cur-year {
    background: transparent !important;
    border: 0 !important;
}
html[data-theme="dark"] body.li-app .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
html[data-theme="dark"] body.li-app .flatpickr-current-month .numInputWrapper:hover {
    background: var(--wds-surface-2) !important;
}
/* The options render in an OS popup, which takes its colour from here. */
html[data-theme="dark"] body.li-app .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background: var(--wds-surface-2) !important;
    color: var(--wds-ink) !important;
}

html[data-theme="dark"] body.li-app .flatpickr-months .flatpickr-prev-month svg,
html[data-theme="dark"] body.li-app .flatpickr-months .flatpickr-next-month svg {
    fill: var(--wds-ink-2) !important;
}
html[data-theme="dark"] body.li-app .flatpickr-months .flatpickr-prev-month:hover svg,
html[data-theme="dark"] body.li-app .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--wds-blue) !important;
}
html[data-theme="dark"] body.li-app .flatpickr-months .flatpickr-prev-month.flatpickr-disabled svg,
html[data-theme="dark"] body.li-app .flatpickr-months .flatpickr-next-month.flatpickr-disabled svg {
    fill: var(--wds-ink-3) !important;
}

html[data-theme="dark"] body.li-app .numInputWrapper span {
    border-color: var(--wds-line-mid) !important;
}
html[data-theme="dark"] body.li-app .numInputWrapper span:hover {
    background: var(--wds-surface-3) !important;
}
html[data-theme="dark"] body.li-app .numInputWrapper span.arrowUp::after {
    border-bottom-color: var(--wds-ink-2) !important;
}
html[data-theme="dark"] body.li-app .numInputWrapper span.arrowDown::after {
    border-top-color: var(--wds-ink-2) !important;
}

/* --- grid --------------------------------------------------------- */

html[data-theme="dark"] body.li-app span.flatpickr-weekday {
    background: transparent !important;
    color: var(--wds-ink-3) !important;
}

html[data-theme="dark"] body.li-app .flatpickr-innerContainer,
html[data-theme="dark"] body.li-app .flatpickr-rContainer,
html[data-theme="dark"] body.li-app .flatpickr-days,
html[data-theme="dark"] body.li-app .dayContainer {
    background: var(--wds-surface) !important;
}

html[data-theme="dark"] body.li-app .flatpickr-day {
    color: var(--wds-ink) !important;
    border-color: transparent !important;
}
html[data-theme="dark"] body.li-app .flatpickr-day:hover,
html[data-theme="dark"] body.li-app .flatpickr-day:focus {
    background: var(--wds-surface-3) !important;
    border-color: var(--wds-surface-3) !important;
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app .flatpickr-day.today {
    border-color: var(--wds-blue) !important;
}
html[data-theme="dark"] body.li-app .flatpickr-day.today:hover {
    background: var(--wds-blue-tint) !important;
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app .flatpickr-day.selected,
html[data-theme="dark"] body.li-app .flatpickr-day.selected:hover,
html[data-theme="dark"] body.li-app .flatpickr-day.startRange,
html[data-theme="dark"] body.li-app .flatpickr-day.startRange:hover,
html[data-theme="dark"] body.li-app .flatpickr-day.endRange,
html[data-theme="dark"] body.li-app .flatpickr-day.endRange:hover {
    background: var(--wds-blue) !important;
    border-color: var(--wds-blue) !important;
    /* Light blue fill, so the date sitting on it has to be dark. */
    color: #08121c !important;
}
html[data-theme="dark"] body.li-app .flatpickr-day.inRange {
    background: var(--wds-blue-tint) !important;
    border-color: var(--wds-blue-tint) !important;
    box-shadow: -5px 0 0 var(--wds-blue-tint), 5px 0 0 var(--wds-blue-tint) !important;
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app .flatpickr-day.prevMonthDay,
html[data-theme="dark"] body.li-app .flatpickr-day.nextMonthDay {
    color: var(--wds-ink-3) !important;
}
html[data-theme="dark"] body.li-app .flatpickr-day.flatpickr-disabled,
html[data-theme="dark"] body.li-app .flatpickr-day.flatpickr-disabled:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--wds-line-mid) !important;
}

/* --- the field itself --------------------------------------------- */

/* That same inline block pins the bound input to #ffffff, which is a white
   slab in a dark form the moment a date field is readonly. */
html[data-theme="dark"] body.li-app .flatpickr-alt-input[readonly],
html[data-theme="dark"] body.li-app input[data-flatpickr-bound="true"] {
    background-color: var(--wds-surface-2) !important;
    color: var(--wds-ink) !important;
}

/* --- time picker, where a field asks for one ---------------------- */

html[data-theme="dark"] body.li-app .flatpickr-time,
html[data-theme="dark"] body.li-app .flatpickr-time input,
html[data-theme="dark"] body.li-app .flatpickr-time .flatpickr-time-separator,
html[data-theme="dark"] body.li-app .flatpickr-time .flatpickr-am-pm {
    background: var(--wds-surface) !important;
    color: var(--wds-ink) !important;
}
html[data-theme="dark"] body.li-app .flatpickr-time input:hover,
html[data-theme="dark"] body.li-app .flatpickr-time .flatpickr-am-pm:hover {
    background: var(--wds-surface-2) !important;
}
html[data-theme="dark"] body.li-app .flatpickr-time {
    border-top: 1px solid var(--wds-line) !important;
}

/* =====================================================================
   Candidate dashboard (.cd-v2, 15 Oct 2026). Every colour on the page is
   one of these tokens (workdu-ui.css section 18), so this block is the
   whole dark theme for it. Brand turns light blue, so its button text
   turns dark (--cd-brand-ink), as in section 3. No card shadow in dark.
   ===================================================================== */
html[data-theme="dark"] body.li-app .cd-v2 {
    --cd-page: #0D1320;
    --cd-card: #141C2C;
    --cd-card-2: #182234;
    --cd-line: #25314A;
    --cd-text: #E9EEF7;
    --cd-muted: #97A3B9;
    --cd-brand: #8AA8EE;
    --cd-brand-hover: #A6BDF3;
    --cd-brand-ink: #0B1430;
    --cd-brand-tint: #1A2850;
    --cd-green: #4CC98A;
    --cd-green-tint: #123425;
    --cd-amber: #F2B455;
    --cd-amber-tint: #3A2A10;
    --cd-violet: #A693FF;
    --cd-violet-tint: #251F48;
    --cd-red: #F28B82;
    --cd-red-tint: #3D1A18;
    --cd-neutral-tint: #1E293D;
    --cd-switch-off: #5A6784;
    --cd-shadow: none;
    --cd-toast-bg: #26324A;
}

/* =====================================================================
   Job Preferences (.jp-v2, 16 Oct 2026). Every colour on the page is one
   of these tokens (workdu-ui.css section 19). The brand turns light blue,
   so the selected workplace segment and primary button take dark text.
   ===================================================================== */
html[data-theme="dark"] body.li-app .jp-v2 {
    --jp-page: #0D1320;
    --jp-card: #141C2C;
    --jp-card-2: #182234;
    --jp-line: #25314A;
    --jp-input-line: #33425F;
    --jp-text: #E9EEF7;
    --jp-muted: #97A3B9;
    --jp-brand: #8AA8EE;
    --jp-brand-hover: #A6BDF3;
    --jp-brand-ink: #0B1430;
    --jp-brand-tint: #1A2850;
    --jp-ring: rgba(138, 168, 238, .22);
    --jp-green: #4CC98A;
    --jp-red: #F28B82;
    --jp-switch-off: #5A6784;
    --jp-shadow: none;
}
html[data-theme="dark"] body.li-app .jp-v2 .jp-menu { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }

/* Open to Work badge (workdu-ui.css section 20). */
html[data-theme="dark"] body.li-app .otw-badge { background: #123425; color: #4CC98A; }
html[data-theme="dark"] body.li-app .otw-badge__dot { background: #4CC98A; box-shadow: 0 0 0 2px rgba(76, 201, 138, .22); }

/* =====================================================================
   Applied Jobs (.aj-v2, 16 Oct 2026). Every colour on the page is one of
   these tokens (workdu-ui.css section 21). The light brand, green and red
   take dark text when they fill a button.
   ===================================================================== */
html[data-theme="dark"] body.li-app .aj-v2 {
    --aj-page: #0D1320;
    --aj-card: #141C2C;
    --aj-card-2: #182234;
    --aj-line: #25314A;
    --aj-text: #E9EEF7;
    --aj-muted: #97A3B9;
    --aj-brand: #8AA8EE;
    --aj-brand-hover: #A6BDF3;
    --aj-brand-ink: #0B1430;
    --aj-brand-tint: #1A2850;
    --aj-green: #4CC98A;
    --aj-green-tint: #123425;
    --aj-amber: #F2B455;
    --aj-amber-tint: #3A2A10;
    --aj-violet: #A693FF;
    --aj-violet-tint: #251F48;
    --aj-red: #F28B82;
    --aj-red-tint: #3D1A18;
    --aj-grey-tint: #1E293D;
    --aj-shadow: none;
    --aj-toast-bg: #26324A;
}
html[data-theme="dark"] body.li-app .aj-v2 .aj-btn--danger-solid,
html[data-theme="dark"] body.li-app .aj-v2 .aj-btn--success { color: #0B1430 !important; }
html[data-theme="dark"] body.li-app .aj-v2 .aj-dialog { box-shadow: 0 20px 48px rgba(0, 0, 0, .55); }
html[data-theme="dark"] body.li-app .aj-v2 .aj-tab[aria-selected="true"] { box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }

/* =====================================================================
   Candidate Settings (.cst-wrapper, 16 Oct 2026). Every colour on the page
   is one of these tokens (assets/css/candidate-settings.css). The fields
   restate their colours because the generic dark input rule above is
   !important and more specific than the page's own. The light brand and
   red take dark text when they fill a button.
   ===================================================================== */
html[data-theme="dark"] body.li-app .cst-wrapper {
    --cst-page: #0D1320;
    --cst-card: #141C2C;
    --cst-card-2: #182234;
    --cst-line: #25314A;
    --cst-input-line: #33425F;
    --cst-text: #E9EEF7;
    --cst-muted: #97A3B9;
    --cst-brand: #8AA8EE;
    --cst-brand-hover: #A6BDF3;
    --cst-brand-ink: #0B1430;
    --cst-tint: #1A2850;
    --cst-ring: rgba(138, 168, 238, .28);
    --cst-green: #4CC98A;
    --cst-green-tint: #123425;
    --cst-amber: #F2B455;
    --cst-amber-tint: #3A2A10;
    --cst-red: #F28B82;
    --cst-red-tint: #3D1A18;
    --cst-red-line: #5A2A26;
    --cst-toast: #26324A;
    --cst-shadow: none;
    color-scheme: dark;
}
html[data-theme="dark"] body.li-app .cst-wrapper .cst-input,
html[data-theme="dark"] body.li-app .cst-wrapper .cst-select,
html[data-theme="dark"] body.li-app .cst-wrapper .cst-textarea,
html[data-theme="dark"] body.li-app .cst-wrapper .cst-code__box {
    background-color: var(--cst-card) !important;
    border-color: var(--cst-input-line) !important;
    color: var(--cst-text) !important;
}
html[data-theme="dark"] body.li-app .cst-wrapper .cst-input:focus,
html[data-theme="dark"] body.li-app .cst-wrapper .cst-select:focus,
html[data-theme="dark"] body.li-app .cst-wrapper .cst-textarea:focus,
html[data-theme="dark"] body.li-app .cst-wrapper .cst-code__box:focus { border-color: var(--cst-brand) !important; }
html[data-theme="dark"] body.li-app .cst-wrapper .cst-input.is-invalid,
html[data-theme="dark"] body.li-app .cst-wrapper .cst-select.is-invalid,
html[data-theme="dark"] body.li-app .cst-wrapper .cst-textarea.is-invalid,
html[data-theme="dark"] body.li-app .cst-wrapper .cst-code.is-invalid .cst-code__box { border-color: var(--cst-red) !important; }
html[data-theme="dark"] body.li-app .cst-wrapper .cst-input:disabled { background-color: var(--cst-card-2) !important; color: var(--cst-muted) !important; }
html[data-theme="dark"] body.li-app .cst-wrapper .cst-tags__input {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--cst-text) !important;
}
html[data-theme="dark"] body.li-app .cst-wrapper .cst-tag__level {
    background-color: var(--cst-card) !important;
    border-color: transparent !important;
    color: var(--cst-text) !important;
}
html[data-theme="dark"] body.li-app .cst-wrapper .cst-select,
html[data-theme="dark"] body.li-app .cst-wrapper .cst-tag__level {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2397A3B9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
html[data-theme="dark"] body.li-app .cst-wrapper .cst-tag__x:hover { background: rgba(138, 168, 238, .18) !important; }
html[data-theme="dark"] body.li-app .cst-wrapper .cst-btn--danger { color: #0B1430 !important; }
html[data-theme="dark"] body.li-app .cst-wrapper .cst-savebar { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
html[data-theme="dark"] body.li-app .cst-wrapper .cst-listbox,
html[data-theme="dark"] body.li-app .cst-wrapper .cst-dlg { box-shadow: 0 20px 48px rgba(0, 0, 0, .55); }
html[data-theme="dark"] body.li-app .cst-wrapper .cst-dlg::backdrop { background: rgba(0, 0, 0, .6); }
html[data-theme="dark"] body.li-app .cst-wrapper .cst-switch__track::after { background: #E9EEF7; }

/* =====================================================================
   Job alerts (.ja-v2, 16 Oct 2026). Every colour on the page is one of
   these tokens (workdu-ui.css section 22). The fields restate theirs
   because the generic dark input rule above is !important and more
   specific than the page's own.
   ===================================================================== */
html[data-theme="dark"] body.li-app .ja-v2 {
    --ja-page: #0D1320;
    --ja-card: #141C2C;
    --ja-card-2: #182234;
    --ja-line: #25314A;
    --ja-input-line: #33425F;
    --ja-text: #E9EEF7;
    --ja-muted: #97A3B9;
    --ja-brand: #8AA8EE;
    --ja-brand-hover: #A6BDF3;
    --ja-brand-ink: #0B1430;
    --ja-tint: #1A2850;
    --ja-ring: rgba(138, 168, 238, .28);
    --ja-green: #4CC98A;
    --ja-off: #3A4864;
    --ja-red: #F28B82;
    --ja-red-tint: #3D1A18;
    --ja-amber: #F2B455;
    --ja-amber-tint: #3A2A10;
    --ja-toast: #26324A;
    color-scheme: dark;
}
html[data-theme="dark"] body.li-app .ja-v2 .ja-input {
    background-color: var(--ja-card) !important;
    border-color: var(--ja-input-line) !important;
    color: var(--ja-text) !important;
}
html[data-theme="dark"] body.li-app .ja-v2 .ja-input:focus { border-color: var(--ja-brand) !important; }
html[data-theme="dark"] body.li-app .ja-v2 .ja-input.is-invalid { border-color: var(--ja-red) !important; }
html[data-theme="dark"] body.li-app .ja-v2 .ja-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2397A3B9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
html[data-theme="dark"] body.li-app .ja-v2 .ja-btn--danger { color: #0B1430 !important; }
html[data-theme="dark"] body.li-app .ja-v2 .ja-switch__knob { background: #E9EEF7; }
html[data-theme="dark"] body.li-app .ja-v2 .ja-dlg,
html[data-theme="dark"] body.li-app .ja-v2 .ja-listbox { box-shadow: 0 20px 48px rgba(0, 0, 0, .55); }
html[data-theme="dark"] body.li-app .ja-v2 .ja-dlg::backdrop { background: rgba(0, 0, 0, .6); }