/* ══════════════════════════════════════════════════════════════
   GLOBAL THEME TOKENS — Light (default) & Dark
   Toggle: document.documentElement.setAttribute('data-theme','dark')
   Loaded panel-wide from layouts/header.blade.php.
══════════════════════════════════════════════════════════════ */
/* University logo swap: light logo shows by default, dark logo shows only
   when a dark_logo has been uploaded and dark mode is active. */
.site-logo-dark {
    display: none;
}

[data-theme="dark"] .site-logo-light {
    display: none;
}

[data-theme="dark"] .site-logo-dark {
    display: inline-block;
}

:root {
    /* Design tokens already referenced (via var(...,fallback)) across the admin panel */
    --Schemes-Background: #FEF7FF;
    --Schemes-Surface-Variant: #E8E0EB;
    --Schemes-On-Surface: #1D1A24;
    --Schemes-On-Surface-Variant: #4A454E;
    --Schemes-Outline-Variant: #CCC4CF;
    --Schemes-Primary: #6E29E4;
    --Schemes-Secondary: #006491;
    --Schemes-Secondary-Container: #019CDF;
    --Schemes-Inverse-Primary: #D1BCFF;
    --surfaces-surface-tint-14: #722EE724;
    --surfaces-surface-tint-5: #722EE70D;
    --State-Layers-Primary-Container-Opacity-10: #884BFE1A;
    --State-Layers-Primary-Container-Opacity-25: #884BFE40;
    --State-Layers-Secondary-Container-Opacity-25: #019CDF40;
    --State-Layers-On-Surface-Opacity-50: #1D1A2480;
    --State-Layers-On-Surface-Variant-Opacity-50: #4A454E80;

    /* add_customer / customer.css tokens */
    --purple: #7c3aed;
    --purple-light: #ede9fe;
    --purple-mid: #a78bfa;
    --text: #374151;
    --muted: #6b7280;
    --border: #e5e7eb;
    --red: #dc3545;
    --surface: #ffffff;
    --surface-alt: #fafbff;
    --surface-2: #f5f3ff;
}

[data-theme="dark"] {
    /* Palette re-sampled directly from the App Pro reference screenshot.
       Previous pass leaned the neutrals purple (R and B channels close
       together, e.g. background #100c17, surface #1a1425) — the reference
       is unambiguously navy (B channel well above R: page background
       samples at rgb(13,23,37)/rgb(18,28,43), sidebar at rgb(9,19,34)).
       Same elevation-hierarchy structure as before (background darkest,
       surface lighter/"lifted", surface-alt/surface-2 lighter again for
       hover/selected states) — only the hue shifts from purple-black to
       navy-black. Accent purple (--Schemes-Primary / --purple / --purple-mid),
       secondary cyan, and the semantic status colors (--ep-green/-amber/
       -orange/-red/-blue etc. further down the file) are unchanged — they
       already matched the screenshot. */
    --Schemes-Background: #0B1220;
    --Schemes-Surface-Variant: #141F30;
    --Schemes-On-Surface: #E7ECF3;
    --Schemes-On-Surface-Variant: #ffffff;
    --Schemes-Outline-Variant: #2A3750;
    --Schemes-Primary: #9D6FF0;
    --Schemes-Secondary: #29B6F6;
    --Schemes-Secondary-Container: #29B6F6;
    --Schemes-Inverse-Primary: #4A2E85;
    --surfaces-surface-tint-14: #9D6FF033;
    --surfaces-surface-tint-5: #9D6FF014;
    --State-Layers-Primary-Container-Opacity-10: #9D6FF01A;
    /* Table headers on the older singleinterview.css-style pages read this
       token directly for their background (not --ag-header-background-color)
       — at the old 25% alpha it composited into an overly bold, saturated
       purple bar against the now-lighter row background. Toned down. */
    --State-Layers-Primary-Container-Opacity-25: #9D6FF026;
    --State-Layers-Secondary-Container-Opacity-25: #29B6F626;
    --State-Layers-On-Surface-Opacity-50: #ffffff;
    --State-Layers-On-Surface-Variant-Opacity-50: #ffffff;

    --purple: #a78bfa;
    --purple-light: #16203A;
    --purple-mid: #8b5cf6;
    --text: #e5eaf2;
    --muted: #C3CBDC;
    --border: #263047;
    --red: #f87171;
    --surface: #121C2B;
    --surface-alt: #17233A;
    --surface-2: #1E2C46;

    /* Result-status badges built server-side in ApplicationProcessing.php
       (final_recommendation: red/green/yellow cases) read these vars
       directly — never defined anywhere before, so the browser was always
       falling back to the light-mode fallback hex baked into each var(). */
    --Extras-On-Fail-Container: #fff;
    --Extras-Fail-Container: #b2333f;
    --Extras-Fail-Container---50: rgba(178, 47, 60, .3);
    --Extras-On-Success-Container: #fff;
    --Extras-Success-Container: #4a8a53;
    --Extras-Success-Container---50: rgba(55, 167, 69, .3);
    --Extras-On-Warning-Container: #fff;
    --Extras-Warning-Container: #cc8a3d;
    --Extras-Warning-Container---50: rgba(212, 136, 51, .3);
}

/* Same badges' "orange"/"blue"/"lightgreen" cases skip CSS vars entirely and
   hardcode hex directly in the inline style, so they need a direct override
   (orange and lightgreen share an identical, apparently copy-pasted, style
   string). */
[data-theme="dark"] .kt-badge--info[style*="#3DB5F9"] {
    color: #fff !important;
    background: rgba(61, 181, 249, .3) !important;
}
[data-theme="dark"] .kt-badge--info[style*="#0d6eac"] {
    color: #fff !important;
    background: rgba(13, 110, 172, .3) !important;
}

/* "View" action button (.result-btn, ApplicationProcessing.php:216) — a
   Metronic "label" button, borderless by design; against the dark row it
   just blends in as a slightly-lighter blob with no definition. */
[data-theme="dark"] .result-btn.btn-label-primary {
    border: 1px solid var(--purple);
}
[data-theme="dark"] .result-btn.btn-label-danger {
    border: 1px solid var(--red);
}

/* Processing/Result/Final Recommendation status pills (create-application-
   process.blade.php's statusBadge() helper) — pale light-mode backgrounds
   with matching mid-tone text, never touched for dark mode. */
[data-theme="dark"] .badge-pill-green { background: rgba(55, 167, 69, .3); color: #fff; }
[data-theme="dark"] .badge-pill-blue { background: rgba(13, 110, 172, .3); color: #fff; }
[data-theme="dark"] .badge-pill-orange { background: rgba(212, 136, 51, .3); color: #fff; }
[data-theme="dark"] .badge-pill-gray { background: var(--surface-2); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   SHARED STATUS/RESULT PILL SHAPE
   Every page that renders a status/result/fraud label (Doc Pro, Screen Pro,
   interview lists, applicant lists, etc.) previously defined its own pill
   with a different padding/radius/font/width — ~20 slightly different
   shapes across the panel. This is the ONE shared shape; per-status color
   stays owned by each page's own modifier class (.badge-pill-green,
   .status-badge.completed, .doc-pill--green, etc.) — add "status-pill"
   alongside the existing color class rather than replacing it. min-width
   (not a fixed width) so short labels (e.g. "Completed") still align in a
   column, but long ones (e.g. "Issue Unconditional Offer" in the AI Result
   column) grow to fit instead of being clipped by text-overflow:ellipsis. */
.status-pill {
    display: inline-block;
    min-width: 130px;
    padding: 7px 14px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════
   LIGHT / DARK TOGGLE SWITCH (topbar)
══════════════════════════════════════════════════════════════ */
/* .kt-header__topbar-item (shared with the notification/user items) forces
   align-items: stretch from its parent .kt-header__topbar. A fixed-height flex
   child (the switch) under a stretch parent doesn't get centered by that —
   per the flexbox spec it falls back to flex-start (top) once its own size is
   definite, which is what was still pushing it high after the align-self
   attempt. Absolute-centering sidesteps the stretch/flex-start ambiguity
   entirely: whatever height this item's box ends up with, the switch centers
   inside it regardless. */
.theme-toggle-item { position: relative; min-width: 66px; padding: 0 10px; }
.theme-toggle-item .theme-switch {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}
.theme-switch { position: relative; display: inline-block; width: 46px; height: 26px; cursor: pointer; flex-shrink: 0; }
.theme-switch input { display: none; }
.theme-switch .theme-slider {
    position: absolute; inset: 0; border-radius: 26px;
    background: var(--Schemes-Outline-Variant);
    border: 1.5px solid var(--Schemes-On-Surface-Variant);
    transition: background .3s, border-color .3s;
}
.theme-switch .theme-slider::before {
    content: "\2600\FE0F";
    position: absolute; width: 20px; height: 20px; left: 2px; top: 50%;
    transform: translateY(-50%);
    background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    transition: transform .3s, content .1s;
}
.theme-switch input:checked + .theme-slider { background: var(--Schemes-Primary); border-color: var(--Schemes-Primary); }
.theme-switch input:checked + .theme-slider::before { content: "\1F319"; transform: translateY(-50%) translateX(20px); }

/* ══════════════════════════════════════════════════════════════
   SHARED CHROME — explicit dark overrides for hardcoded colors
   (most of the header/sidebar/body already read var(--Schemes-*),
   so redefining the tokens above is enough for those elements)
══════════════════════════════════════════════════════════════ */
/* !important on background: several pages (this file's own <style> block
   plus at least one other so far) set body { background-color: <light> }
   directly with no !important — same specificity as the plain body rule in
   header.blade.php, so whichever loads later wins, and a page's own local
   style always loads after the shared header. This makes it unconditional. */
[data-theme="dark"] body { background: var(--Schemes-Background) !important; color: var(--Schemes-On-Surface); }

/* Bootstrap's base .form-control (color:#495057, background:#fff, border:#e2e5ec)
   is what every plain text/select/date/time input on every page inherits unless
   a page overrides it locally — this is the single biggest panel-wide gap, since
   most pages never touch .form-control themselves. */
[data-theme="dark"] .form-control {
    background-color: var(--surface-alt) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .form-control:focus {
    background-color: var(--surface) !important;
    border-color: var(--purple) !important;
}
[data-theme="dark"] .form-control::placeholder { color: var(--muted); }
/* select.form-control's own background/color covers the CLOSED box, but the
   <option> list (opened dropdown) doesn't automatically inherit it in every
   browser — set explicitly so native <select> dropdowns (Gender, Course
   Type, etc.) aren't left rendering white. */
[data-theme="dark"] select.form-control option {
    background-color: var(--surface-alt);
    color: var(--text);
}
/* add_student.blade.php defines its own select.form-control option[/:not()]
   rules with !important (color:#333333/#a0a0a0) — beats the plain rule
   above since it loads later in the document; needs matching !important
   plus the [data-theme="dark"] prefix for higher specificity to win. */
[data-theme="dark"] select.form-control option:not([value=""]) {
    color: #fff !important;
}
[data-theme="dark"] select.form-control option[value=""] {
    color: var(--muted) !important;
}
/* Attachment/paperclip icon (Attach.png, add_student.blade.php's per-document
   upload rows) — a dark flat icon meant for a white row, invisible on dark. */
[data-theme="dark"] img.triggerUpload {
    filter: brightness(0) invert(1);
}

/* Native <input type="date">/type="time"/type="datetime-local"> calendar
   glyph (Test Date, Test Registration Date, etc.) — a separate browser-drawn
   pseudo-element with its own dark-gray default, invisible on a dark field.
   The popup that opens on click is native OS/browser chrome, outside CSS's
   reach — only this in-field icon can be recolored. */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) !important;
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
    background-color: var(--surface-2) !important;
    color: var(--muted) !important;
}

/* "Custom searchable dropdown" component (used on create-single-interview.blade.php
   and 15 other views) — a hand-rolled combobox, not a .form-control, so it needs
   its own override. */
[data-theme="dark"] .dropdown-input-wrap {
    background: var(--surface-alt);
    border-color: var(--border);
}
[data-theme="dark"] .dropdown-input-wrap:focus-within { border-color: var(--purple); }
/* !important because some of these inputs (e.g. #countrySearch on
   application_process_result.blade.php) carry a literal
   style="background-color: rgb(255, 255, 255)" set at runtime — an inline
   style beats any plain external rule regardless of selector specificity,
   so only !important can still win here. */
[data-theme="dark"] .dropdown-input {
    background: var(--surface-alt) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .dropdown-input::placeholder { color: var(--muted); }
[data-theme="dark"] .dropdown-arrow { color: var(--muted); }
[data-theme="dark"] .dropdown-panel {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 4px 8px rgba(0,0,0,.4);
}
[data-theme="dark"] .dropdown-list li { color: var(--text); }
[data-theme="dark"] .dropdown-list li:hover,
[data-theme="dark"] .dropdown-list li.active {
    background: var(--surface-2);
    color: var(--purple);
}

[data-theme="dark"] .kt-nav__link { color: var(--Schemes-On-Surface-Variant); }
/* header.blade.php's own inline <style> block (loaded after this stylesheet's
   <link>) defines its own unscoped .kt-nav__link:hover { background:#f8f9fa }
   — identical specificity, so being later in the document let it win the tie
   and show a plain light-gray hover row (e.g. "Edit Profile"). !important
   forces this rule to win regardless of source order. */
[data-theme="dark"] .kt-nav__link:hover,
[data-theme="dark"] .kt-nav__link:focus,
[data-theme="dark"] .kt-nav__link:focus-visible,
[data-theme="dark"] .kt-nav__link--toggle:focus,
[data-theme="dark"] .kt-nav__link--toggle:focus-visible {
    background-color: var(--surfaces-surface-tint-14) !important;
    color: var(--Schemes-Primary) !important;
    outline: none !important;
}
[data-theme="dark"] .kt-nav__submenu { background-color: var(--Schemes-Surface-Variant); }
/* Metronic's own .kt-nav__link-text rule (style.bundle.css) targets 4 classes
   deep and beats the plain .kt-nav__link color rule above on specificity, so
   the text span inside each nav link (e.g. dropdown menu items) needs its own
   override rather than inheriting from .kt-nav__link. */
[data-theme="dark"] .kt-nav .kt-nav__item > .kt-nav__link .kt-nav__link-text {
    color: var(--Schemes-On-Surface-Variant) !important;
}
/* .kt-nav__link:hover (above) changes the link's own color, but this span's
   color rule has no :hover/:focus variant of its own — since it's the more
   specific rule, clicking a toggle item (e.g. "Org Setup", which stays
   focused after the JS click handler expands its submenu) changed the row
   background but the label text itself never visually responded, leaving
   light text on a still-white-ish row. */
[data-theme="dark"] .kt-nav .kt-nav__item > .kt-nav__link:hover .kt-nav__link-text,
[data-theme="dark"] .kt-nav .kt-nav__item > .kt-nav__link:focus .kt-nav__link-text {
    color: var(--Schemes-Primary) !important;
}
/* Metronic's own hover/active rule for .kt-nav__link-icon
   (.kt-nav__item:hover/.active > .kt-nav__link .kt-nav__link-icon) is even
   more specific (extra :hover + two :not() clauses) than the .kt-nav__link-
   text fix above, and hardcodes a light-mode dark purple (#310075) with no
   !important of its own — so hovering/activating a row (e.g. "View Profile")
   left the icon on that hardcoded color instead of following dark mode. */
[data-theme="dark"] .kt-nav .kt-nav__item.active > .kt-nav__link .kt-nav__link-icon,
[data-theme="dark"] .kt-nav .kt-nav__item:hover > .kt-nav__link .kt-nav__link-icon,
[data-theme="dark"] .kt-nav .kt-nav__item > .kt-nav__link:focus .kt-nav__link-icon {
    color: var(--Schemes-Primary) !important;
}

/* Topbar icon (the grid/dashboard-menu trigger) — it's an <img>, not the <i>
   glyph Metronic's own dark color rule expects, so that rule never applies to
   it. The source PNG is a dark icon meant for the light topbar; recolor white
   like the other icons, and give its hover circle a visible dark-mode tint
   instead of Metronic's near-black default (#212029, invisible on a dark bar). */
[data-theme="dark"] .kt-header__topbar .kt-header__topbar-item .kt-header__topbar-icon img {
    filter: brightness(0) invert(1);
}
[data-theme="dark"] .kt-header__topbar .kt-header__topbar-item:hover .kt-header__topbar-icon,
[data-theme="dark"] .kt-header__topbar .kt-header__topbar-item.show .kt-header__topbar-icon {
    background-color: var(--surface-2);
}

[data-theme="dark"] #kt-header_topbar .kt-header__topbar-welcome,
[data-theme="dark"] #kt-header_topbar .kt-header__topbar-username {
    color: var(--Schemes-On-Surface) !important;
}

[data-theme="dark"] .kt-portlet,
[data-theme="dark"] .card,
[data-theme="dark"] .dropdown-menu {
    /* interview_response.blade.php (and likely other pages) define their own
       local, unscoped .card { background: rgba(255,255,255,1); } in a page
       <style> block loaded after this stylesheet — identical specificity,
       so without !important the later same-specificity rule silently won
       the tie and left cards like #ai-summary-card plain white. */
    background: var(--surface) !important;
    color: var(--Schemes-On-Surface) !important;
    border-color: transparent;
    /* A flat black shadow reads as murky once the surface itself is this
       light — a faint purple-tinted glow instead reads as "lifted" and
       ties back into the accent color rather than looking like a smudge. */
    box-shadow: 0 4px 18px rgba(0,0,0,.28), 0 1px 3px rgba(157,111,240,.12);
}
/* Every dropdown-menu panel-wide (topbar user menu, notification menu,
   filter dropdowns, etc.) wants a visible border, unlike .kt-portlet/.card
   which stay borderless by design. style.bundle.css's base .dropdown-menu
   rule sets `border: 0 !important` — that's the full shorthand, zeroing out
   the WIDTH, not just supplying a default color. Overriding border-color
   alone (as before) did nothing, since a colored border at 0 width is still
   invisible; needs the width set explicitly too. */
[data-theme="dark"] .dropdown-menu {
    border: 1px solid var(--border) !important;
}
/* "Sign Out" button (.btn-label-brand) is hardcoded to a mismatched cyan-
   blue (#009cdf), not the app's purple accent. */
[data-theme="dark"] .btn-label-brand {
    background-color: var(--purple) !important;
    color: #fff !important;
}
[data-theme="dark"] .kt-nav__separator { border-bottom-color: var(--border); }
/* Nav link icons (flaticon2-calendar-3/browser-2/mail on View/Edit Profile,
   Change Password) — still the light-mode medium-gray (#a2a5b9), never
   brightened to match the rest of the dropdown's text. */
[data-theme="dark"] .kt-nav .kt-nav__item > .kt-nav__link .kt-nav__link-icon {
    color: var(--muted);
}
[data-theme="dark"] .kt-label-font-color-2 { color: var(--muted); }

/* ══════════════════════════════════════════════════════════════
   OCR TESTER (ocr-tester.blade.php) — upload card, drop zone, file strip,
   and the full split-view results page (confidence table, legend chips,
   page nav), all entirely light-mode-only before this.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .upload-card,
[data-theme="dark"] #results-card {
    background: var(--surface);
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
[data-theme="dark"] .upload-card__head h3 { color: var(--text); }

[data-theme="dark"] #drop-zone {
    border-color: var(--border);
    background: var(--surface-alt);
}
[data-theme="dark"] #drop-zone.drag-over { border-color: var(--purple-mid); background: var(--surface-2); }
[data-theme="dark"] #drop-zone.has-file  { border-color: var(--purple-mid); background: var(--surface-2); }
[data-theme="dark"] .dz-icon { background: var(--surface-2); }
[data-theme="dark"] .dz-icon i { color: var(--purple-mid); }
[data-theme="dark"] .dz-title { color: var(--text); }
[data-theme="dark"] .dz-sub { color: var(--muted); }
[data-theme="dark"] .dz-browse { color: var(--purple-mid); }

[data-theme="dark"] #file-strip {
    background: var(--surface-2);
    border-color: var(--purple);
}
[data-theme="dark"] .file-strip__icon {
    background: var(--surface);
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
[data-theme="dark"] .file-strip__icon i { color: var(--purple-mid); }
[data-theme="dark"] .file-strip__name { color: var(--text); }
[data-theme="dark"] .file-strip__meta { color: var(--muted); }
[data-theme="dark"] .file-strip__remove { color: var(--muted); }

[data-theme="dark"] #processing-overlay { background: rgba(11, 11, 18, .85); }
[data-theme="dark"] .ocr-spinner { border-color: var(--surface-2); border-top-color: var(--purple-mid); }
[data-theme="dark"] .processing-label { color: var(--text); }

[data-theme="dark"] .results-card__head { border-bottom-color: var(--border); }
[data-theme="dark"] .results-card__head h3 { color: var(--text); }
[data-theme="dark"] .badge-pages { background: var(--surface-2); color: var(--purple-mid); }

[data-theme="dark"] .stats-bar { background: var(--surface-alt); border-bottom-color: var(--border); }
[data-theme="dark"] .stat-cell { border-right-color: var(--border); }
[data-theme="dark"] .stat-lbl { color: var(--muted); }
[data-theme="dark"] .stat-val,
[data-theme="dark"] .stat-val--neutral { color: var(--text); }

[data-theme="dark"] .dist-bar { background: var(--surface-2); }
[data-theme="dark"] .dist-legend-item { color: var(--muted); }
[data-theme="dark"] .legend-chip--high { background: rgba(16, 185, 129, .2); color: #6ee7b7; }
[data-theme="dark"] .legend-chip--mid  { background: rgba(255, 152, 0, .2); color: #ffc98a; }
[data-theme="dark"] .legend-chip--low  { background: rgba(220, 53, 69, .2); color: #ff9aa6; }

[data-theme="dark"] #page-nav { background: var(--surface-alt); border-bottom-color: var(--border); }
[data-theme="dark"] #page-nav span { color: var(--muted); }
[data-theme="dark"] .page-btn { background: var(--surface); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .page-btn:hover { background: var(--surface-2); border-color: var(--purple-mid); color: var(--purple-mid); }

[data-theme="dark"] .split-pane--left { border-right-color: var(--border); }
[data-theme="dark"] .split-pane__head {
    background: var(--surface-alt);
    border-bottom-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .split-pane__head i { color: var(--muted); }

/* .ocr-text-block/.conf-table hold real extracted document text — kept
   readable on a dark panel, same treatment as other "real content" blocks
   elsewhere in the app rather than left fully untouched. */
[data-theme="dark"] .ocr-text-block {
    background: var(--surface-alt);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .section-title { color: var(--muted); }
[data-theme="dark"] .conf-table-wrap { border-color: var(--border); }
[data-theme="dark"] .conf-table thead th { background: var(--surface-2); color: var(--purple-mid); }
[data-theme="dark"] .conf-table tbody td { color: var(--text); border-bottom-color: var(--border); }
[data-theme="dark"] .conf-table tbody tr:hover td { background: var(--surface-alt); }
[data-theme="dark"] .conf-table tbody tr.row-highlighted td { background: rgba(255, 152, 0, .15); }
[data-theme="dark"] .conf-pill--high { background: rgba(16, 185, 129, .2); color: #6ee7b7; }
[data-theme="dark"] .conf-pill--mid  { background: rgba(255, 152, 0, .2); color: #ffc98a; }
[data-theme="dark"] .conf-pill--low  { background: rgba(220, 53, 69, .2); color: #ff9aa6; }

[data-theme="dark"] .state-box p { color: var(--muted); }

/* ══════════════════════════════════════════════════════════════
   INTERVIEW TESTER (interview-tester.blade.php) — step indicator, form
   card, mic/recording states, result card, follow-up card, and session
   history panel, all entirely light-mode-only before this.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .itw-step { color: var(--muted); }
[data-theme="dark"] .itw-step.active { color: var(--purple-mid); }
[data-theme="dark"] .itw-step__num { border-color: var(--border); background: var(--surface); color: var(--text); }
[data-theme="dark"] .itw-step.active .itw-step__num { border-color: var(--purple-mid); background: var(--surface-2); color: var(--purple-mid); }
[data-theme="dark"] .itw-step.done .itw-step__num { border-color: #4a8a53; background: rgba(55,167,69,.2); color: #8ee6a6; }
[data-theme="dark"] .itw-step__line { background: var(--border); }

[data-theme="dark"] .itw-card { background: var(--surface); box-shadow: 0 2px 12px rgba(0,0,0,.3); }
[data-theme="dark"] .itw-label { color: var(--text); }
[data-theme="dark"] .itw-label .itw-hint { color: var(--muted); }

[data-theme="dark"] .itw-select,
[data-theme="dark"] .itw-textarea {
    background: var(--surface-alt);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .itw-select:disabled { background: var(--surface-2); color: var(--muted); }
[data-theme="dark"] .itw-select:focus,
[data-theme="dark"] .itw-textarea:focus { border-color: var(--purple-mid); }
[data-theme="dark"] .itw-sel-arrow { color: var(--muted); }
[data-theme="dark"] .itw-textarea::placeholder { color: var(--muted); }
[data-theme="dark"] .itw-textarea:disabled { background: var(--surface-2); }
[data-theme="dark"] .itw-word-count { color: var(--muted); }

[data-theme="dark"] .itw-expected { background: var(--surface-2); border-color: var(--purple); color: var(--text); }
[data-theme="dark"] .itw-expected__label { color: var(--purple-mid); }
[data-theme="dark"] .itw-expected__edit-btn { background: var(--surface-2); border-color: var(--purple); color: var(--purple-mid); }
[data-theme="dark"] .itw-expected__edit-btn:hover { background: var(--purple); color: #fff; }
[data-theme="dark"] .itw-expected__edit-area { background: var(--surface-alt); border-color: var(--purple); color: var(--text); }

[data-theme="dark"] .itw-mic-btn { background: var(--surface-2); border-color: var(--purple); color: var(--purple-mid); }
[data-theme="dark"] .itw-mic-btn:hover { background: var(--purple); color: #fff; }
[data-theme="dark"] .itw-mic-btn.recording { background: rgba(220,53,69,.2); border-color: #dc3545; color: #ff9aa6; }
[data-theme="dark"] .itw-interim {
    background: rgba(212,136,51,.15);
    border-color: #cc8a3d;
    color: #ffc98a;
}
[data-theme="dark"] .itw-interim__label { color: #ffc98a; }

[data-theme="dark"] .itw-divider { background: var(--border); }
[data-theme="dark"] .itw-kbd-hint { color: var(--muted); }
[data-theme="dark"] .itw-kbd-hint kbd { background: var(--surface-2); border-color: var(--border); color: var(--muted); }

[data-theme="dark"] .itw-error {
    background: rgba(220,53,69,.15);
    border-color: #dc3545;
    color: #ff9aa6;
}

[data-theme="dark"] .itw-result { background: var(--surface); box-shadow: 0 2px 12px rgba(0,0,0,.3); }
[data-theme="dark"] .itw-field__label { color: var(--muted); }
[data-theme="dark"] .itw-field__value { background: var(--surface-alt); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .itw-field__value.hl-green  { border-color: #4a8a53; background: rgba(55,167,69,.15); color: #8ee6a6; }
[data-theme="dark"] .itw-field__value.hl-yellow { border-color: #cc8a3d; background: rgba(212,136,51,.15); color: #ffc98a; }
[data-theme="dark"] .itw-field__value.hl-blue   { border-color: #5aa9d6; background: rgba(59,130,246,.15); color: #93c5fd; }
[data-theme="dark"] .itw-field__value.hl-red    { border-color: #dc3545; background: rgba(220,53,69,.15); color: #ff9aa6; }

[data-theme="dark"] .itw-star.empty { color: var(--border); }
[data-theme="dark"] .itw-score-num { color: var(--text); }
[data-theme="dark"] .itw-score-denom { color: var(--muted); }
[data-theme="dark"] .itw-suggestions li { color: var(--text); }

[data-theme="dark"] .itw-success-banner { background: rgba(55,167,69,.15); border-color: #4a8a53; }
[data-theme="dark"] .itw-success-icon { background: rgba(55,167,69,.3); color: #8ee6a6; }
[data-theme="dark"] .itw-success-text { color: var(--text); }
[data-theme="dark"] .itw-success-text strong { color: #8ee6a6; }

[data-theme="dark"] .itw-followup { background: var(--surface); border-color: var(--purple); }
[data-theme="dark"] .itw-followup__question { background: rgba(59,130,246,.15); border-color: #5aa9d6; color: #93c5fd; }

[data-theme="dark"] .itw-reset-btn { background: var(--surface); border-color: var(--border); color: var(--muted); }
[data-theme="dark"] .itw-reset-btn:hover { border-color: var(--purple-mid); color: var(--purple-mid); }

[data-theme="dark"] .itw-session-panel { background: var(--surface); border-color: var(--border); box-shadow: 0 2px 12px rgba(0,0,0,.3); }
[data-theme="dark"] .itw-session-empty { color: var(--muted); }
[data-theme="dark"] .itw-session-item { border-color: var(--border); }
[data-theme="dark"] .itw-session-item-header { background: var(--surface-alt); border-bottom-color: var(--border); }
[data-theme="dark"] .itw-session-q-num,
[data-theme="dark"] .itw-session-time { color: var(--muted); }
[data-theme="dark"] .itw-session-type-badge.eligibility { background: var(--surface-2); color: var(--purple-mid); }
[data-theme="dark"] .itw-session-type-badge.mock { background: rgba(212,136,51,.2); color: #ffc98a; }
[data-theme="dark"] .itw-session-result-badge.ask_follow_up { background: rgba(212,136,51,.2); color: #ffc98a; }
[data-theme="dark"] .itw-session-result-badge.move_to_next_question { background: rgba(55,167,69,.2); color: #8ee6a6; }
[data-theme="dark"] .itw-session-result-badge.give_feedback { background: rgba(59,130,246,.2); color: #93c5fd; }
[data-theme="dark"] .itw-session-result-badge.handle_non_answer { background: rgba(220,53,69,.2); color: #ff9aa6; }
[data-theme="dark"] .itw-session-field-label { color: var(--muted); }
[data-theme="dark"] .itw-session-field-value { color: var(--text); }
[data-theme="dark"] .itw-session-field-value.answer-text { color: var(--text); }

/* Bootstrap gives .card-header/.card-footer their own light background (#f7f8fa)
   that doesn't inherit from .card — left unfixed this makes any heading placed in
   there (e.g. page titles written with a plain <h3>, no color set) unreadable,
   since text color comes from the dark body/.card color while the box stays light. */
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
    background: var(--surface-alt);
    color: var(--Schemes-On-Surface);
    border-color: var(--Schemes-Outline-Variant);
}

[data-theme="dark"] .kt-footer {
    background: var(--Schemes-Surface-Variant);
    color: var(--Schemes-On-Surface-Variant);
}

/* Sidebar menu item labels — Metronic's light skin hardcodes a dark-gray label
   color meant for a light aside background; once the aside goes dark that color
   is low-contrast, so give inactive/non-hovered labels an explicit light color. */
[data-theme="dark"] #kt_aside .kt-menu__link-text,
[data-theme="dark"] #kt_aside .kt-menu__link-icon {
    color: var(--Schemes-On-Surface-Variant);
}
/* Default (non-active/non-hover) sidebar icons are dark PNG/SVGs meant for the
   light aside background — invisible once the aside goes dark. brightness(0)
   forces any source color to black, invert(1) then flips that to white; simpler
   than the active-state purple recipe below since white has no hue to solve for.
   The more specific --active/:hover rules further down still win over this one. */
[data-theme="dark"] #kt_aside .sidebarlogo {
    filter: brightness(0) invert(1);
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD CARDS (dashboard_edu.blade.php / dashboard_new.blade.php
   share these class names) — each page hardcodes its own light card
   styling in a local <style> block, so recolor by class here instead
   of touching every view.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .stat-card:not(.active-stat) { background: var(--surface); }
[data-theme="dark"] .stat-card .stat-value,
[data-theme="dark"] .stat-card .stat-title { color: var(--text); }
[data-theme="dark"] .stat-card .icon-container { background: var(--surface-2); }
/* Inactive-card icons are dark PNGs meant for the original light-lavender circle;
   on the new dark circle they're invisible, so recolor to white like the sidebar
   icons. The active (gradient) card keeps its white circle + original dark icon
   untouched — already high-contrast, don't flip it to white-on-white. */
[data-theme="dark"] .stat-card:not(.active-stat) img {
    filter: brightness(0) invert(1);
}

[data-theme="dark"] .donut-card,
[data-theme="dark"] .chart-box { background: var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
[data-theme="dark"] .donut-center { color: var(--text); }
[data-theme="dark"] .floating-badge { background: var(--surface-2); color: var(--text); }
[data-theme="dark"] .legend-item,
[data-theme="dark"] .legend-wrapper { color: var(--text); }

[data-theme="dark"] .card-subtitle { color: var(--text); border-bottom-color: var(--border); }
[data-theme="dark"] .dashboard-card { background-color: var(--surface-2); }
[data-theme="dark"] .dashboard-card .card-header { color: var(--text); }

[data-theme="dark"] .university-select,
[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--surface-alt) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text) !important;
}

[data-theme="dark"] table.table,
[data-theme="dark"] .dataTable {
    color: var(--Schemes-On-Surface);
}

[data-theme="dark"] a.kt-link { color: var(--Schemes-Secondary-Container); }

/* Bootstrap's .btn-secondary (e.g. the "Back" pill on copy_customer.blade.php)
   is a hardcoded light lavender button — recolor for dark mode. */
[data-theme="dark"] .btn-secondary {
    color: var(--text);
    background-color: var(--surface-2);
    border-color: var(--border);
}
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-secondary:focus,
[data-theme="dark"] .btn-secondary.focus {
    color: var(--text);
    background-color: var(--surface-alt);
    border-color: var(--purple-mid);
}

/* #filter-toggle-btn (ag-Grid filter bar — common_ag_grid.css uses .has-filter/
   .open, singleinterview.css uses .filters-applied for the same "applied" state)
   base/hover/active already read var(--Schemes-Secondary, ...) so they'd pick up
   dark mode on their own, but the "applied" variants bypass the token entirely
   with a literal #1D1A24/#006491, so they need an explicit override here. The
   button also carries Bootstrap's .btn-outline-secondary classes, whose own
   :hover/:focus fill it with a light #e1e1ef — background:transparent below
   neutralizes that regardless of which state Bootstrap thinks it's in. */
[data-theme="dark"] #filter-toggle-btn {
    background: transparent !important;
    border-color: var(--Schemes-Secondary) !important;
    color: var(--Schemes-Secondary) !important;
    box-shadow: none !important;
}
[data-theme="dark"] #filter-toggle-btn:hover,
[data-theme="dark"] #filter-toggle-btn.active,
[data-theme="dark"] #filter-toggle-btn.has-filter,
[data-theme="dark"] #filter-toggle-btn.open,
[data-theme="dark"] #filter-toggle-btn.filters-applied,
[data-theme="dark"] #filter-toggle-btn.open.has-filter {
    background: var(--State-Layers-Secondary-Container-Opacity-25) !important;
    border-color: var(--Schemes-Secondary) !important;
    color: var(--Schemes-Secondary) !important;
}
/* The funnel icon inside the button is a plain <img src="filter.svg">, not
   text/an inline SVG — the border/text color fix above never touched it. A
   dark icon on what's now a dark button reads as "not showing" even though
   it's really just invisible. Recolored to match the button's own cyan. */
[data-theme="dark"] #filter-toggle-btn img[src*="filter.svg"] {
    filter: brightness(0) saturate(100%) invert(57%) sepia(54%) saturate(668%) hue-rotate(159deg) brightness(97%) contrast(100%);
}

/* Segment tab bars above list tables ("Applicants / Results" etc.) — the inactive
   tab color is hardcoded inline per-page (color:#6c7293), so match on the literal
   value; the active tab's purple (#6e29e4) already reads fine on a dark background. */
[data-theme="dark"] .kt-subheader .kt-subheader__main .kt-subheader__title { color: var(--text) !important; }

/* ══════════════════════════════════════════════════════════════
   TOOLS DASHBOARD (tools-dashboard.blade.php) — "Available Tools" cards
   were plain white with no theme awareness at all.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .tools-section-label { color: var(--muted); }
[data-theme="dark"] .tool-card {
    background: var(--surface);
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
[data-theme="dark"] .tool-card:hover {
    border-color: var(--purple);
    box-shadow: 0 6px 24px rgba(157,111,240,.25);
}
[data-theme="dark"] .tool-card__icon-wrap { background: var(--surface-2); }
[data-theme="dark"] .tool-card:hover .tool-card__icon-wrap { background: var(--purple); }
[data-theme="dark"] .tool-card__icon-wrap i { color: var(--purple-mid); }
[data-theme="dark"] .tool-card__title { color: var(--text); }
[data-theme="dark"] .tool-card:hover .tool-card__title { color: var(--purple-mid); }
[data-theme="dark"] .tool-card__desc { color: var(--muted); }
[data-theme="dark"] .tool-card__footer { border-top-color: var(--border); }
[data-theme="dark"] .tool-card:hover .tool-card__footer { border-color: var(--purple); }
[data-theme="dark"] .tool-card__status { color: #4ade80; }
[data-theme="dark"] .tool-card__status-dot { background: #4ade80; }
[data-theme="dark"] .tool-card__arrow { color: var(--muted); }
[data-theme="dark"] .tool-card:hover .tool-card__arrow { color: var(--purple-mid); }

[data-theme="dark"] .kt-subheader-tabs a[style*="#6c7293"] {
    color: var(--Schemes-On-Surface-Variant) !important;
}

/* Same tab bar, newer class-based variant used on interview pages
   (interview_Result.blade.php, interview_view_details.blade.php, the Manual/
   interview views, etc.) — .active already reads var(--Schemes-Primary) so it
   picks up dark mode on its own; only the inactive/hover grays are hardcoded. */
[data-theme="dark"] .subheader-tab-link:not(.active) { color: var(--Schemes-On-Surface-Variant); }
[data-theme="dark"] .subheader-tab-link:hover:not(.active) { color: var(--Schemes-Primary); }

/* Sidebar active/hover state — label color and icon tint are both pinned to the
   light-mode purple (#6E29E4) via `!important`. Recolor to the lighter dark-mode
   purple (--Schemes-Primary: #9D6FF0) for both; the icon is a black PNG/SVG
   recolored with an invert/sepia/hue-rotate filter, so it needs its own recipe
   (derived by solving for the same target hex, not just swapped by hand). */
[data-theme="dark"] #kt_aside .kt-menu__item--active > .kt-menu__link .kt-menu__link-text,
[data-theme="dark"] #kt_aside .kt-menu__item:hover > .kt-menu__link .kt-menu__link-text {
    color: var(--Schemes-Primary) !important;
}
[data-theme="dark"] #kt_aside .kt-menu__item--active .sidebarlogo,
[data-theme="dark"] #kt_aside .kt-menu__item:hover .sidebarlogo {
    filter: brightness(0) saturate(100%) invert(46%) sepia(52%) saturate(686%) hue-rotate(220deg) brightness(100%) contrast(89%) !important;
}

/* ══════════════════════════════════════════════════════════════
   AG-GRID BASELINE — panel-wide, so every grid gets the same dark
   styling regardless of which page-specific CSS it loads (some pages
   load common_ag_grid.css, others load ag-theme-alpine.css straight
   from a CDN with their own inline overrides).
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .ag-theme-alpine {
    --ag-background-color: var(--surface);
    --ag-foreground-color: var(--text);
    --ag-header-background-color: var(--surface-2);
    --ag-header-foreground-color: var(--purple);
    --ag-odd-row-background-color: var(--surface-alt);
    --ag-row-hover-color: var(--surface-2);
    --ag-selected-row-background-color: var(--surfaces-surface-tint-14);
    --ag-border-color: var(--border);
    --ag-row-border-color: var(--border);
    --ag-secondary-foreground-color: var(--muted);
    --ag-data-color: var(--text);
    --ag-disabled-foreground-color: var(--muted);
    --ag-input-border-color: var(--border);
    --ag-input-background-color: var(--surface-alt);
    --ag-checkbox-background-color: var(--surface-alt);
    --ag-checkbox-unchecked-color: var(--muted);
    --ag-checkbox-checked-color: var(--purple);
}
/* Row hover/selection isn't a background on the row itself — ag-Grid paints it
   as a separate ::before overlay reading --ag-row-hover-color /
   --ag-selected-row-background-color, so redefining those tokens above should
   be enough on its own. Also target the overlay directly with !important as a
   belt-and-suspenders in case a page's own CSS sets the row background with
   !important too (common_ag_grid.css does, for .ag-row-odd/.ag-row-even) —
   !important always wins over a plain declaration regardless of which token it
   reads, so without this the correctly-dark hover color could still lose. */
[data-theme="dark"] .ag-theme-alpine .ag-row-hover:not(.ag-full-width-row)::before,
[data-theme="dark"] .ag-theme-alpine .ag-row-hover.ag-full-width-row.ag-row-group::before {
    background-color: var(--surface-2) !important;
}
[data-theme="dark"] .ag-theme-alpine .ag-row-selected::before {
    background-color: var(--surfaces-surface-tint-14) !important;
}
/* process.css (Doc Pro Applicants/Results, interview_view_details,
   interview_Result) hardcodes .ag-row:hover with a literal hex + !important
   instead of reading --ag-row-hover-color, so it wins over the ::before
   overlay fix above and shows a near-white row on hover regardless of
   theme. Needs its own direct override. */
[data-theme="dark"] .ag-theme-alpine .ag-row:hover {
    background-color: var(--surface-2) !important;
}

/* ══════════════════════════════════════════════════════════════
   APPLICANT / STUDENT VIEW DETAILS (student_view_details.blade.php)
══════════════════════════════════════════════════════════════ */
/* "Applicant Details" header — Metronic's own portlet title color (#48465b) */
/* This has been under-specified this whole time: Metronic's own rule is
   .kt-portlet .kt-portlet__head .kt-portlet__head-label .kt-portlet__head-title
   (4 classes deep, color:#48465b), which outranks a plain
   [data-theme="dark"] .kt-portlet__head-title (2 classes deep) — the more
   specific original always won regardless of this override, which is why
   page titles like "Edit Applicant" kept reading as a barely-visible dark
   color no matter what this file said. Matching the full selector chain
   (plus !important, since this is worth never losing again) fixes it. */
[data-theme="dark"] .kt-portlet .kt-portlet__head .kt-portlet__head-label .kt-portlet__head-title,
[data-theme="dark"] .kt-portlet__head-title {
    color: var(--text) !important;
}
[data-theme="dark"] .kt-portlet__head { border-bottom-color: var(--border); }
[data-theme="dark"] .kt-portlet .kt-portlet__foot { border-top-color: var(--border); }

/* ══════════════════════════════════════════════════════════════
   FLATPICKR DATE PICKER (add_student.blade.php's Date of Birth field, and
   any other page using it) — loaded from a CDN, entirely light-mode by
   default, never themed before.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .flatpickr-calendar {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.35) !important;
}
[data-theme="dark"] .flatpickr-calendar.arrowTop:before,
[data-theme="dark"] .flatpickr-calendar.arrowTop:after {
    border-bottom-color: var(--surface) !important;
}
[data-theme="dark"] .flatpickr-months .flatpickr-month {
    background: var(--surface) !important;
    color: var(--text) !important;
    fill: var(--text) !important;
}
[data-theme="dark"] .flatpickr-current-month,
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-theme="dark"] .flatpickr-current-month .numInputWrapper {
    background: var(--surface) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .flatpickr-monthDropdown-months option {
    background: var(--surface) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .flatpickr-current-month input.cur-year {
    background: var(--surface) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .flatpickr-prev-month svg,
[data-theme="dark"] .flatpickr-next-month svg {
    fill: var(--text) !important;
}
[data-theme="dark"] .flatpickr-prev-month:hover svg,
[data-theme="dark"] .flatpickr-next-month:hover svg {
    fill: var(--purple) !important;
}
[data-theme="dark"] .flatpickr-innerContainer,
[data-theme="dark"] .flatpickr-rContainer,
[data-theme="dark"] .flatpickr-days,
[data-theme="dark"] .dayContainer {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .flatpickr-weekdays {
    background: var(--surface) !important;
}
[data-theme="dark"] span.flatpickr-weekday {
    background: var(--surface) !important;
    color: var(--muted) !important;
}
[data-theme="dark"] .flatpickr-day {
    color: var(--text) !important;
    background: var(--surface) !important;
}
[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-theme="dark"] .flatpickr-day.flatpickr-disabled:hover,
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: var(--border) !important;
}
[data-theme="dark"] .flatpickr-day:hover,
[data-theme="dark"] .flatpickr-day:focus {
    background: var(--surface-2) !important;
    border-color: var(--surface-2) !important;
}
[data-theme="dark"] .flatpickr-day.today {
    border-color: var(--purple) !important;
}
[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.selected:hover {
    background: var(--purple) !important;
    border-color: var(--purple) !important;
    color: #fff !important;
}
[data-theme="dark"] .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--text) !important;
}
[data-theme="dark"] .numInputWrapper span.arrowDown:after {
    border-top-color: var(--text) !important;
}
[data-theme="dark"] .numInputWrapper:hover {
    background: var(--surface-2) !important;
}

/* Document category tabs (Identity / Academic / ...) — inactive tab is a
   hardcoded mid-gray pill with white text; active keeps its purple gradient,
   already readable on dark as-is. */
[data-theme="dark"] .nav-tabs .nav-item .nav-link {
    background-color: var(--surface-2);
    color: var(--text);
}

/* Document list rows — Bootstrap's .list-group-item, used broadly panel-wide. */
[data-theme="dark"] .list-group-item {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

/* "APPLICANT" / "Course Details" / "Academics" info cards */
[data-theme="dark"] .section-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .section-card-header { background: var(--surface-2); border-bottom-color: var(--border); }
[data-theme="dark"] .section-card-header h6 { color: var(--purple); }
[data-theme="dark"] .field-row { border-bottom-color: var(--border); }
[data-theme="dark"] .field-label { color: var(--muted); }
[data-theme="dark"] .field-value { color: var(--text); }
[data-theme="dark"] .field-value.empty { color: var(--muted); }

/* Qualification cards (Academics / Standardized Tests sections) */
[data-theme="dark"] .qual-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .qual-card-header { background: var(--surface-2); border-bottom-color: var(--border); }
[data-theme="dark"] .qual-card.qual-earlier .qual-card-header { background: var(--surface-alt); border-bottom-color: var(--border); }
[data-theme="dark"] .qual-card-title { color: var(--purple); }
[data-theme="dark"] .qual-earlier .qual-card-title { color: var(--muted); }
[data-theme="dark"] .qual-tag { background: var(--surface-alt); }
[data-theme="dark"] .qual-latest .qual-tag { color: var(--purple); }
[data-theme="dark"] .qual-earlier .qual-tag { color: var(--muted); }

/* Uploaded-files sub-list & "N files" toggle chip */
[data-theme="dark"] .uploaded-files-list.expanded { border-top-color: var(--border); }
[data-theme="dark"] .file-item { color: var(--muted); }
[data-theme="dark"] .file-item:hover { background-color: var(--surface-2); }
[data-theme="dark"] .files-toggle-btn { background: var(--surface-2); border-color: var(--border); color: var(--purple); }
[data-theme="dark"] .files-toggle-btn:hover { background: var(--surface-alt); }

[data-theme="dark"] .no-data-placeholder { color: var(--muted); }

/* ══════════════════════════════════════════════════════════════
   SCHEDULE-INTERVIEW PAGES (create-single-interview.blade.php /
   singleinterview.css — Cred Pro, Screen Pro, etc. all share this)
══════════════════════════════════════════════════════════════ */
/* singleinterview.css's own .ag-row-odd reads --surfaces-surface-tint-5, a
   token meant as a subtle ~8%-opacity wash over a light background — on dark
   it's still only 8% opacity, so whatever it's compositing against barely
   shows through as a tint and the row stays effectively whatever was behind
   it. Override with a solid color instead of trusting that composite. */
[data-theme="dark"] .ag-theme-alpine .ag-row-odd { background: var(--surface-alt) !important; }
[data-theme="dark"] .ag-theme-alpine .ag-row.row-disabled { background-color: rgba(248,113,113,.12) !important; }

/* Calendar/clock icon button next to date & time fields — Bootstrap's
   .input-group-text (background:#f7f8fa, border:#e2e5ec), used wherever a
   date/time picker appears panel-wide. */
[data-theme="dark"] .input-group-text {
    background-color: var(--surface-alt);
    border-color: var(--border);
    color: var(--muted);
}

/* ══════════════════════════════════════════════════════════════
   ADD APPLICANT / ADD STUDENT FORM (add_student.blade.php)
   Mostly covered already by the global .form-control, .nav-tabs,
   .list-group-item, .files-toggle-btn, .file-item rules above (same
   class names, reused here) — these are the classes unique to this
   page that aren't.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .card-header-default { background-color: var(--surface-alt) !important; }
[data-theme="dark"] #uploadBtn { background-color: var(--surface-2); color: var(--text); }
/* Generic page-local heading style also used (with a different hardcoded
   color) outside customer.css, which already has its own dark rule for it. */
/* Matches --purple (used by "LATEST QUALIFICATION" and the rest of the
   accent palette) rather than --Schemes-Secondary (cyan) — the two headings
   sit right next to each other in the Add Applicant accordion and looked
   inconsistent with different colors. */
[data-theme="dark"] .section-heading { color: var(--purple); }

/* ══════════════════════════════════════════════════════════════
   TABLE ROW ACTION ICONS — unified to #8ACEFF across every icon system
   used for list-row actions (view/edit/copy/delete), per request. This
   overrides the previous per-action colors (purple/blue/red) uniformly;
   note delete no longer reads as "danger red" as a result.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .btn-act.edit,
[data-theme="dark"] .btn-act.copy,
[data-theme="dark"] .btn-act.del {
    color: #8ACEFF;
    border-color: #8ACEFF;
}
[data-theme="dark"] .btn-act.edit:hover,
[data-theme="dark"] .btn-act.copy:hover,
[data-theme="dark"] .btn-act.del:hover {
    background: rgba(138, 206, 255, .18);
}

/* .act-btn (customers-list.blade.php and similar simple list pages) */
[data-theme="dark"] .act-btn { color: #8ACEFF !important; }
[data-theme="dark"] .act-btn:hover { color: #b8e2ff !important; opacity: 1; }

/* .action-btn (application_process_result.blade.php view icon) — circular
   button with a light-purple fill (#f3eeff) that hasn't been dark-themed at
   all yet, on top of needing the color unification. */
[data-theme="dark"] .action-btn { background: var(--surface-2); color: #8ACEFF; }
[data-theme="dark"] .action-btn:hover { background: rgba(138, 206, 255, .18); color: #b8e2ff; }

/* Applicant-detail topbar ("Back to results" / "Viewing: <name>") — its
   background is a hardcoded #884BFE40 (25%-alpha purple) meant to read as a
   pale lavender tint against a white card. Composited against the dark theme's
   near-black page background instead, that same alpha produces a much more
   saturated, neon-looking purple bar — needs !important to beat the inline
   style. */
[data-theme="dark"] #applicant-detail-view > div:first-child {
    /* background: var(--surface-alt) !important; */
    border-bottom-color: var(--border) !important;
}
[data-theme="dark"] #applicant-detail-title { color: var(--purple-mid) !important; }

/* Qualification rows on the Add Applicant form (add_student.blade.php) are
   built entirely in JS with inline style="..." (background:#faf9ff, and the
   heading span's color:#6c5b9e) — inline styles beat plain CSS rules, so
   these need !important to win. */
[data-theme="dark"] .qualification-row {
    background: var(--surface-alt) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .qualification-row > div:first-child > span {
    color: var(--purple) !important;
}
[data-theme="dark"] .remove-qual-btn {
    color: #ff8a65 !important;
    border-color: #ff8a65 !important;
}

/* Applicants list ("students-list.blade.php") Action column — this HTML comes
   from Students.php (the model), built as plain <a><img></a> tags with no
   class to hook into. eye.png/edit.png/trash-2.png are flat single-color
   icons, so brightness(0) first (strip whatever color they already have)
   then recolor to #8ACEFF works cleanly. creator.png (the "360°" badge) is
   NOT flat — it's a circle with internal contrast (light ring + darker
   "360" mark) — brightness(0) flattens *both* to black before recoloring,
   so the whole badge came out as one solid blob with the "360" illegible.
   It gets a non-destructive brighten/contrast boost instead, no recolor. */
[data-theme="dark"] .ag-cell img[src*="eye.png"],
[data-theme="dark"] .ag-cell img[src*="edit.png"],
[data-theme="dark"] .ag-cell img[src*="trash-2.png"] {
    filter: brightness(0) saturate(100%) invert(67%) sepia(66%) saturate(238%) hue-rotate(162deg) brightness(100%) contrast(100%);
}
/* invert(1) alone (previous fix) correctly removed the white circle but left
   it plain black with a plain-white "360" mark, no color. A plain hue-rotate
   can't tint it blue on its own — pure black/white are fixed points under
   saturate/sepia/hue-rotate (zero saturation = nothing to rotate). Using a
   *partial* invert first means neither region lands on a true 0/255 extreme,
   so both can pick up color — the (now darker) former-white circle picks up
   more saturation and reads as blue, while the (now brighter) former-dark
   mark stays a light, near-white cyan. */
[data-theme="dark"] .ag-cell img[src*="creator.png"] {
    filter: invert(0.7) sepia(1) saturate(7) hue-rotate(175deg) brightness(1.1) contrast(1.05);
}

/* Metronic's .accordion-outline variant (the Add Applicant accordion) puts
   its border on .card-title/.card-body directly, not on .card itself (Metronic
   already sets .card { border: 0 } for this variant) — so the earlier .card
   border fix never touched it. Expanded-state border is light lavender
   (#c3cdff), collapsed is near-white (#efeff0); both need to go. The expand
   chevron is a color baked into a ::after pseudo-element, not an <img>/<i> —
   expanded-state color (#310075, dark purple) is essentially invisible on a
   dark card, collapsed-state (#efeff0, near-white) already reads fine as-is. */
[data-theme="dark"] .accordion.accordion-outline .card .card-header .card-title,
[data-theme="dark"] .accordion.accordion-outline .card .card-header .card-title.collapsed {
    border-color: transparent !important;
}
[data-theme="dark"] .accordion.accordion-outline .card .card-body-wrapper > .card-body {
    border-color: transparent !important;
    color: var(--text);
}
[data-theme="dark"] .accordion.accordion-outline .card .card-header .card-title:after {
    color: var(--purple) !important;
}
[data-theme="dark"] .accordion.accordion-outline .card .card-header .card-title.collapsed:after {
    color: var(--muted) !important;
}

/* This is the chevron actually rendered on screen next to each accordion
   heading (add_student.blade.php, interview_response.blade.php) — a plain
   dark PNG, separate from the CSS ::after arrow above. */
[data-theme="dark"] img[src*="chevrons-down.png"] {
    filter: brightness(0) invert(1);
}

/* Interview-schedule table row-select checkboxes are Metronic's own
   .kt-checkbox--brand component (a bordered <span> + ::after tick over a
   hidden native input), not ag-Grid's checkbox system fixed earlier — a
   third, separate checkbox implementation. Unchecked border (#c7c7c7) still
   reads on dark, but checked state (border + tick) is #310075, a dark purple
   that's essentially invisible once you actually check the box. */
[data-theme="dark"] .kt-checkbox > span { border-color: var(--muted); }
[data-theme="dark"] .kt-checkbox > span:after { border-color: var(--purple); }
[data-theme="dark"] .kt-checkbox > input:checked ~ span,
[data-theme="dark"] .kt-checkbox.kt-checkbox--bold > input:checked ~ span {
    border-color: var(--purple);
}
[data-theme="dark"] .kt-checkbox.kt-checkbox--brand > span { border-color: var(--muted); }
[data-theme="dark"] .kt-checkbox.kt-checkbox--brand > span:after { border-color: var(--purple); }
[data-theme="dark"] .kt-checkbox.kt-checkbox--brand > input:checked ~ span,
[data-theme="dark"] .kt-checkbox.kt-checkbox--brand.kt-checkbox--bold > input:checked ~ span {
    border-color: var(--purple);
}

/* ══════════════════════════════════════════════════════════════
   INTERVIEW RESULT DETAILS (interview_response.blade.php)
   This page also loads a full standalone bootstrap.min.css (Bootstrap 5,
   after theme-mode.css in the document) whose own body/.card background
   variables fight the dark theme — rather than chase that cascade fight
   rule by rule, pin the actual page containers directly with !important.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] #kt_content,
[data-theme="dark"] .container-fluid {
    background: var(--Schemes-Background) !important;
}

/* Bootstrap's .bg-light utility (#f8f9fa, !important) is what's behind the
   near-invisible "AI SUMMARY" header — it forces a light background while
   the header's own text color rule already correctly went light for dark
   mode, so both text and background end up light at once. */
[data-theme="dark"] .bg-light { background-color: var(--surface-alt) !important; }

/* Applicant header card — name/course value are a hardcoded dark navy
   (#1a2332) meant for the card's light lavender tint; the tint itself is
   already token-driven (--State-Layers-Primary-Container-Opacity-10) and
   correctly goes dark, so the text needs to follow. */
[data-theme="dark"] #applicant-header-card .ahc-name,
[data-theme="dark"] #applicant-header-card .ahc-course-value {
    color: var(--text) !important;
}
/* The card's own background already reads var(--State-Layers-Primary-
   Container-Opacity-10), which does correctly go dark — !important here
   just removes any doubt given the file's other !important-needing local
   overrides found on this same page. The avatar circle (#d8c9f7 bg / #b39ddb
   border / #5e35b1 text) was never touched at all. */
[data-theme="dark"] #applicant-header-card { background: var(--State-Layers-Primary-Container-Opacity-10) !important; }
[data-theme="dark"] #applicant-header-card .ahc-avatar {
    background: var(--surface-2) !important;
    border-color: var(--purple) !important;
    color: var(--purple-mid) !important;
}
[data-theme="dark"] #applicant-header-card .ahc-meta { color: var(--muted); }

/* AI Final Recommendation / Overall Score / Fraud Status card titles — these
   cards' backgrounds are now forced to a uniform dark surface further below
   (they used to keep their PHP-computed light pastel background, which is
   why this was rgba(0,0,0,.6) — dark text for a light card; now that the
   card itself is dark, the title needs to be light instead). */
[data-theme="dark"] #final-recommendation-card-title,
[data-theme="dark"] #overall-score-card-title,
[data-theme="dark"] #overall-scre-card-title,
[data-theme="dark"] #fraud-status-card-title {
    color: var(--muted) !important;
}

/* Technical/criteria score cards (Financials, Communication skills, ...) */
[data-theme="dark"] .tk-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .tk-card-header { background: var(--surface); }
[data-theme="dark"] .tk-card-header:hover { background: var(--surface-2); }
[data-theme="dark"] .tk-chevron { color: var(--muted); }
[data-theme="dark"] .tk-card-body { background: var(--surface-alt); color: var(--muted); border-top-color: var(--border); }

/* Proctoring cards (Room Monitoring, Window Switch, Lip Sync, Eye Tracking) */
[data-theme="dark"] .monitoring-check-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .monitoring-title { color: var(--text); }
[data-theme="dark"] .monitoring-description { color: var(--muted); }

/* The 3 status cards (Final Recommendation / Overall Score / Fraud Status) are
   styled two ways at once: an ID rule reading design tokens, AND an inline
   style="background-color:...;border:...;" computed by PHP per status
   (Approve/Reject/Manual Review/Fraud) — inline wins, and those PHP colors are
   light pastels with no dark-mode awareness, which is why they render as a
   muddy/inconsistent patch against the dark page regardless of status. Force
   a single uniform dark card background with !important to beat the inline
   style; the value text (e.g. "Fraud", "4.30/5") already gets its color from
   a *different* inline style that's already a legible saturated color, so it
   still conveys status correctly without the mismatched background. */
[data-theme="dark"] #final-recommendation-card,
[data-theme="dark"] #overall-score-card,
[data-theme="dark"] #fraud-status-card {
    background: var(--surface) !important;
    border-color: transparent !important;
}

/* Communication Additional Information panel */
[data-theme="dark"] #communication-info { border-color: transparent !important; }
[data-theme="dark"] .progress-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .progress-card .progress-title { color: var(--text) !important; }
[data-theme="dark"] .progress-card .progress-subtitle { color: var(--muted) !important; }
/* The ring is a conic-gradient with a solid-color circle punched out of the
   middle (::before) to fake a donut shape — that punch color was white,
   which reads as a bright dot sitting on the now-dark card. */
[data-theme="dark"] .progress-circle::before { background: var(--surface); }
[data-theme="dark"] .progress-circle span { color: var(--text); }

/* ══════════════════════════════════════════════════════════════
   interview_Result.blade.php — the "Back to Results" list page. It
   doesn't navigate away for the detail view; it AJAX-fetches
   interview_response.blade.php and injects its #kt_content markup into
   this wrapper, so the wrapper's own hardcoded light background (the
   white gap between the purple "Back to Results" bar and the injected
   content) is a separate bug from anything in interview_response.blade.php.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] #interview-detail-content { background: var(--Schemes-Background) !important; }

/* Same #884BFE40-on-dark-background bug as application_process_result.blade.php's
   #applicant-detail-view topbar, on this page's equivalent wrapper. */
[data-theme="dark"] #interview-detail-view > div:first-child {
    background: var(--surface-alt) !important;
    border-bottom-color: var(--border) !important;
}

/* .btn-outline-brand ("Final Recommendation History" / "Final Recommendation"
   buttons) is a global Bootstrap-brand class still hardcoded to light-mode
   cyan-blue (#009cdf) — never dark-themed, so it stands out against the
   purple palette everywhere it's used. "Final Recommendation" is the primary
   action (data-target="#exampleModalCenter"); give it a solid fill so it
   reads as the primary button next to History's outline, same pattern used
   on the App Pro results page. */
[data-theme="dark"] .btn-outline-brand {
    color: var(--purple-mid) !important;
    border-color: var(--purple-mid) !important;
    background: transparent !important;
}
[data-theme="dark"] .btn-outline-brand:hover {
    color: #fff !important;
    background: var(--purple-mid) !important;
    border-color: var(--purple-mid) !important;
}
[data-theme="dark"] .btn-outline-brand[data-target="#exampleModalCenter"] {
    color: #fff !important;
    background: var(--purple-mid) !important;
    border-color: var(--purple-mid) !important;
}
[data-theme="dark"] .btn-outline-brand[data-target="#exampleModalCenter"]:hover {
    background: var(--purple) !important;
    border-color: var(--purple) !important;
}

/* "Final Recommendation" popup — Evaluation Step / Evaluation Criteria rows.
   Textareas and score inputs in here all carry class="form-control" too, so
   the global .form-control rule already covers those; this is everything
   else in the modal that doesn't. */
[data-theme="dark"] #exampleModalCenter .modal-content { background: var(--surface); }
[data-theme="dark"] #exampleModalCenter .modal-header {
    background: var(--surface);
    border-bottom-color: var(--border);
}
[data-theme="dark"] #exampleModalCenter .modal-title { color: var(--text); }
[data-theme="dark"] #exampleModalCenter .modal-body { background: var(--surface-alt); }

[data-theme="dark"] .criteria-header-name,
[data-theme="dark"] .criteria-header-desc,
[data-theme="dark"] .criteria-header-score {
    color: var(--muted);
}
[data-theme="dark"] .criteria-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .criteria-name { color: var(--text); }

[data-theme="dark"] .final-rec-block { background: var(--purple-light); border-color: var(--purple-mid); }
[data-theme="dark"] .final-rec-block .criteria-name { color: var(--purple); }
[data-theme="dark"] #final_score { color: var(--purple) !important; border-color: var(--purple-mid) !important; }

[data-theme="dark"] .fraud-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .fraud-card label { color: var(--text); }

[data-theme="dark"] .modal-sticky-footer {
    background: var(--surface);
    border-top-color: var(--border);
}

/* ══════════════════════════════════════════════════════════════
   ELIGIBILITY CRITERIA — URL/PDF extraction panel (criteria.blade.php)
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .extraction-panel { background: var(--surface-alt); border-color: var(--border); }
[data-theme="dark"] .url-row input[type="url"] {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .pdf-upload-zone { background: var(--surface); border-color: var(--purple-mid); }
[data-theme="dark"] .pdf-upload-zone:hover,
[data-theme="dark"] .pdf-upload-zone.drag-over { background: var(--surface-2); }
[data-theme="dark"] .pdf-upload-zone .puz-label { color: var(--muted); }
[data-theme="dark"] .pdf-upload-zone .puz-hint { color: var(--muted); }
[data-theme="dark"] .pdf-selected-file { background: rgba(45,106,45,.25); border-color: #2d6a2d; color: #8fd98f; }
[data-theme="dark"] .btn-discover {
    background: transparent;
    color: var(--purple);
    border-color: var(--purple);
}
[data-theme="dark"] .btn-discover:hover { background: var(--purple-light); }
[data-theme="dark"] .btn-copy-all-countries { background: transparent; color: var(--purple); border-color: var(--purple); }
[data-theme="dark"] .btn-copy-all-countries:hover { background: var(--purple-light); }

/* Criteria preview modal (#cpm-body) — the extracted HTML dumped in here
   carries hardcoded light-mode inline colors (headings/th) from the
   extraction service, so they need !important to win over the inline style. */
[data-theme="dark"] #cpm-body h1,
[data-theme="dark"] #cpm-body h2,
[data-theme="dark"] #cpm-body h3,
[data-theme="dark"] #cpm-body h4,
[data-theme="dark"] #cpm-body h5,
[data-theme="dark"] #cpm-body h6 { color: var(--purple) !important; }
[data-theme="dark"] #cpm-body table th {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] #cpm-body table td { border-color: var(--border) !important; color: var(--text); }

/* ══════════════════════════════════════════════════════════════
   360 STUDENT VIEW (student_360_view.blade.php) — entirely
   light-mode-only page-local CSS, ~970 lines, no shared component
   classes to inherit from.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .card,
[data-theme="dark"] .content-section,
[data-theme="dark"] .sp-accordion {
    background-color: var(--surface);
}
[data-theme="dark"] .doc-button { background: var(--surface); border-color: var(--border); color: var(--purple); }
[data-theme="dark"] .profile-info h1 { color: var(--text); }
[data-theme="dark"] .profile-info p,
[data-theme="dark"] .card-content p,
[data-theme="dark"] .content-section p,
[data-theme="dark"] .sidebar-item,
[data-theme="dark"] .tab,
[data-theme="dark"] .sp-chevron,
[data-theme="dark"] .sp-username,
[data-theme="dark"] .sp-stat-label {
    color: var(--muted);
}
[data-theme="dark"] .card-header { background-color: var(--surface); border-bottom-color: var(--border); }
[data-theme="dark"] .card-header h3,
[data-theme="dark"] .tab:hover,
[data-theme="dark"] .sidebar-item:hover,
[data-theme="dark"] .sp-accordion-header-left,
[data-theme="dark"] .sp-stat-value,
[data-theme="dark"] .sp-section-title,
[data-theme="dark"] .sp-summary-table td,
[data-theme="dark"] .sp-dim-table tbody td,
[data-theme="dark"] .sp-dim-table tbody td:first-child {
    color: var(--text);
}
[data-theme="dark"] .card-header .status { background-color: rgba(40,167,69,.3); color: #8ee6a6; }
[data-theme="dark"] .tabs { border-bottom-color: var(--border); }
[data-theme="dark"] .sidebar { background-color: var(--surface-alt); border-bottom-color: var(--border); }
[data-theme="dark"] .sidebar-item.active { background-color: var(--surface-2); color: var(--purple); }
[data-theme="dark"] .sidebar-item:hover { background-color: var(--surface-2); }
[data-theme="dark"] .status-table-custom td { background: var(--surface-alt); }
[data-theme="dark"] .bg-light-primary { background-color: var(--purple-light) !important; }
[data-theme="dark"] .bg-light-warning { background-color: rgba(255,193,7,.15) !important; }
[data-theme="dark"] .progress-ring-circle-bg { stroke: var(--border); }
/* .byusername / .ReviewNeeded use a low-opacity tint + dark text — same bug
   pattern as the AI Result badges: on a dark page the tint barely shows and
   the dark text disappears into it. */
[data-theme="dark"] .byusername { color: #d4c7ea; }
[data-theme="dark"] .ReviewNeeded { color: #ffdd8a; }
[data-theme="dark"] .sp-summary-table thead tr { background: var(--surface-2); }
[data-theme="dark"] .sp-summary-table th { color: var(--muted); border-bottom-color: var(--border); }
[data-theme="dark"] .sp-summary-table tbody tr { border-bottom-color: var(--border); }
[data-theme="dark"] .sp-summary-table tbody tr:hover,
[data-theme="dark"] .sp-accordion-header:hover {
    background: var(--surface-2);
}
[data-theme="dark"] .sp-accordion-body { border-top-color: var(--border); }
[data-theme="dark"] .sp-dim-table tbody tr { border-bottom-color: var(--border); }
[data-theme="dark"] .sp-dim-table tbody td { background: var(--surface); }
[data-theme="dark"] .sp-dim-table tbody td:first-child { background-color: var(--purple-light); }
[data-theme="dark"] .sp-section-header { border-bottom-color: var(--border); }

/* Document cards (Identity/Academic/Language/Financial Self/Financials
   Sponsors/SOP And Intention/Experience/Other tabs) — one shared
   @foreach loop renders every doc card with inline style="background:
   #fff; ..." (no class), so nothing here turned dark; the text color
   *did* already flip (see .content-section p above), producing light
   text on a white card. Matched via attribute-selector since there's no
   class to hook into. */
[data-theme="dark"] .content-section [style*="box-shadow: 0 1px 4px rgba(0,0,0,0.06)"] {
    background: var(--surface) !important;
}
/* Document label ("Passport" etc.) + Summary tab section titles share
   this exact inline color. */
[data-theme="dark"] [style*="color: #1976D2"] { color: var(--purple-mid) !important; }

/* Social Profiles data-quality/risk-level pills — pastel bg + dark text
   tuned for a light page; unreadable/muddy on a dark card otherwise. */
[data-theme="dark"] .sp-badge-full,
[data-theme="dark"] .sp-badge-low { background: var(--Extras-Success-Container---50); color: #8ee6a6; }
[data-theme="dark"] .sp-badge-partial,
[data-theme="dark"] .sp-badge-medium { background: var(--Extras-Warning-Container---50); color: #ffdd8a; }
[data-theme="dark"] .sp-badge-limited,
[data-theme="dark"] .sp-badge-high { background: var(--Extras-Fail-Container---50); color: #ff9a9a; }
[data-theme="dark"] .sp-stat-card {
    background-color: rgba(167, 139, 250, 0.08);
    border-color: var(--purple-mid);
}

/* ══════════════════════════════════════════════════════════════
   APP PRO RESULT DETAIL (procenz_result_view_details.blade.php)
   Its own complete --ep-* token system, defined once at :root — same
   pattern as --Schemes-*, just never wired up for dark before. Most of
   the page (banner, applicant card, uploaded-files card, doc badges,
   status chips) reads these directly, so this alone covers most of it.

   !important is required on every one of these: the page's own <style>
   block *also* defines an unconditional `:root { --ep-*: <light value> }`,
   loaded after theme-mode.css (its <link> sits inside the header include,
   which this page's own inline <style> follows). `:root` and
   `[data-theme="dark"]` have identical specificity, so without !important
   the later, unconditional rule wins regardless of theme — these values
   would never even apply. */
[data-theme="dark"] {
    --ep-bg: var(--Schemes-Background) !important;
    --ep-surface: var(--surface) !important;
    --ep-surface-alt: var(--surface-alt) !important;
    --ep-border: var(--border) !important;
    --ep-border-light: var(--surface-2) !important;
    --ep-text: var(--text) !important;
    --ep-text-sec: var(--Schemes-On-Surface-Variant) !important;
    --ep-text-muted: var(--muted) !important;
    --ep-brand: var(--purple) !important;
    --ep-brand-dk: var(--purple-mid) !important;
    --ep-green: #8ee6a6 !important;
    --ep-green-bg: rgba(55, 167, 73, .2) !important;
    --ep-green-border: #4a8a53 !important;
    --ep-amber: #ffc98a !important;
    --ep-amber-bg: rgba(212, 136, 51, .28) !important;
    --ep-amber-border: #cc8a3d !important;
    --ep-orange: #ffa94d !important;
    --ep-orange-bg: rgba(230, 126, 34, .2) !important;
    --ep-orange-border: #cc8a3d !important;
    --ep-red: #ff8a95 !important;
    --ep-red-bg: rgba(178, 47, 60, .25) !important;
    --ep-red-border: #b2333f !important;
    --ep-blue: #7cc9fb !important;
    --ep-blue-bg: rgba(98, 192, 250, .2) !important;
    --ep-blue-border: #5aa9d6 !important;
    --ep-na: var(--muted) !important;
    --ep-na-bg: var(--surface-alt) !important;
    --ep-na-border: var(--border) !important;
}
/* The handful of spots that use a literal hex text color instead of the
   matching --ep-* token (so they don't follow the redefinition above) —
   these pair with a *-bg token that's now dark, so a literal dark-on-dark
   text color needs its own override. */
[data-theme="dark"] #eval-root .rec-banner.green h2 { color: #8ee6a6; }
[data-theme="dark"] #eval-root .rec-banner.orange h2 { color: #ffa94d; }
[data-theme="dark"] #eval-root .rec-banner.pending h2,
[data-theme="dark"] #eval-root .rec-banner.yellow h2,
[data-theme="dark"] #eval-root .ev-avatar.pending-av,
[data-theme="dark"] #eval-root .ev-avatar.yellow-av,
[data-theme="dark"] #eval-root .ev-eval-status.pending,
[data-theme="dark"] #eval-root .ev-action-card .ev-action-title,
[data-theme="dark"] #eval-root .ev-verdict-card .vc-status.pending,
[data-theme="dark"] #eval-root .ev-verdict-card .vc-status.yellow,
[data-theme="dark"] #eval-root .ep-score-badge.score-yellow,
[data-theme="dark"] #eval-root .ev-doc-mismatch-note {
    color: #ffc98a;
}
[data-theme="dark"] #eval-root .rec-banner.blue h2,
[data-theme="dark"] #eval-root .ev-eval-status.manual-review,
[data-theme="dark"] #eval-root .ev-eng-chip .sc-val.manual-review,
[data-theme="dark"] #eval-root .ev-verdict-card .vc-status.blue,
[data-theme="dark"] #eval-root .ev-doc-badge.manual-review,
[data-theme="dark"] #eval-root .ep-score-badge.score-blue {
    color: #7cc9fb;
}
/* Eligibility compliance table chips (Green/Orange/Red/Grey read var(--ep-*)
   already and adapt on their own; "Blue" is hardcoded inline via PHP since
   var(--ep-blue) is a lighter accent tone meant for icon fills, not legible
   as text on --ep-blue-bg — needs !important to beat the inline style. */
[data-theme="dark"] #eval-root .ep-status-chip-blue { color: #7cc9fb !important; }

/* Action-card callouts (amber/red/green variants) inside eval rows — these
   use their own literal pastel backgrounds instead of the --ep-*-bg tokens. */
[data-theme="dark"] #eval-root .ev-action-card { background: rgba(212, 136, 51, .15); border-color: #cc8a3d; }
[data-theme="dark"] #eval-root .ev-action-card.red-action { background: rgba(178, 47, 60, .18); border-color: #b2333f; }
[data-theme="dark"] #eval-root .ev-action-card.green-action { background: rgba(55, 167, 73, .15); border-color: #4a8a53; }

/* Subtle 14%-black border, imperceptible against a dark page. */
[data-theme="dark"] .applicant-info-section { border-color: var(--border); }

/* Final Recommendation modal footer's Cancel button, and the document-list
   hover states — the latter are declared with !important several times over
   (base rule + two ":has()" refinements), so the override needs matching
   !important + equal-or-higher specificity to actually win. */
[data-theme="dark"] #finalRecommendationModal .modal-footer .btn-cancel { background: var(--surface-alt); }
/* Re-evaluate modal's Cancel button sets border/color as inline style=""
   (border:1px solid #019CDF; color:#002F47 — near-black navy), which no
   stylesheet rule can beat without !important. The unscoped .btn-cancel
   dark rule elsewhere in this file only patches background (it was written
   for a different page), leaving this near-black text invisible against
   its own near-black dark-mode background. */
[data-theme="dark"] #reEvalModal .btn-cancel {
    color: #bfe7fb !important;
    border-color: #019CDF !important;
}
[data-theme="dark"] .uploaded-files-list.expanded { border-top-color: var(--border); }
[data-theme="dark"] .file-item { color: var(--muted); }
[data-theme="dark"] .list-group-item:hover,
[data-theme="dark"] .file-item:hover,
[data-theme="dark"] .list-group-item:has(.file-item) .file-item:hover {
    background-color: var(--surface-2) !important;
}
/* Document preview overlay (#docPreviewOverlay) — the modal-box/header
   wrapper divs have no class here (inline style="" only), matched via
   attribute-selector on a unique substring, same technique as the criteria
   preview modal fix elsewhere in this file. The close button is already a
   solid red/white pair and reads fine as-is, so it's left alone. */
[data-theme="dark"] [style*="box-shadow:0 20px 60px rgba(0,0,0,.4)"] {
    background: var(--surface) !important;
}
[data-theme="dark"] [style*="border-bottom:1px solid #eef0f5;background:#f9fafc"] {
    background: var(--surface-alt) !important;
    border-bottom-color: var(--border) !important;
}
[data-theme="dark"] #docPreviewTitle { color: var(--text) !important; }
[data-theme="dark"] .dpv-search-cluster {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .dpv-search-input { color: var(--text) !important; }
[data-theme="dark"] .dpv-search-input::placeholder { color: var(--muted) !important; }
[data-theme="dark"] .dpv-search-counter {
    color: var(--muted) !important;
    border-left-color: var(--border) !important;
}

/* Generic Bootstrap .modal-content/.modal-header/.modal-footer — fixed for
   specific modal IDs on individual pages earlier in this pass, but the app
   has many one-off ad-hoc modals; a plain rule (not scoped to any one page)
   catches the ones not touched yet, e.g. "Final Recommendation History". */
[data-theme="dark"] .modal-content { background-color: var(--surface) !important; color: var(--text) !important; }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    background-color: var(--surface-alt) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .modal-title { color: var(--text) !important; }

/* Document-preview overlay toolbar (search cluster) — the PDF/image canvas
   itself stays white intentionally (it's rendering the actual document
   page), only the surrounding chrome needs to go dark. */
[data-theme="dark"] .dpv-search-cluster { background: var(--surface-alt) !important; border-color: var(--border) !important; }
[data-theme="dark"] .dpv-search-icon { color: var(--muted) !important; }
[data-theme="dark"] .dpv-search-input { color: var(--text) !important; }
[data-theme="dark"] .dpv-search-input::placeholder { color: var(--muted) !important; }
[data-theme="dark"] .dpv-search-counter { color: var(--muted) !important; border-left-color: var(--border) !important; }
[data-theme="dark"] .dpv-search-nav-btn { color: var(--purple, #9D6FF0) !important; }
[data-theme="dark"] .dpv-search-nav-btn:hover { background: var(--purple-light) !important; }
[data-theme="dark"] .dpv-search-nav-btn:disabled { color: var(--muted) !important; }
[data-theme="dark"] .dpv-modal-box { background: var(--surface) !important; }
[data-theme="dark"] .dpv-modal-header { background: var(--surface-alt) !important; border-bottom-color: var(--border) !important; }
[data-theme="dark"] #docPreviewTitle { color: var(--text) !important; }
[data-theme="dark"] .dpv-close-btn { background: var(--surface-alt) !important; border-color: var(--border) !important; color: var(--text) !important; }
[data-theme="dark"] .dpv-close-btn:hover { background: rgba(255,80,80,0.15) !important; border-color: #ff5050 !important; color: #ff5050 !important; }

/* Global default `a { color: #212529 }` (near-black) — a direct match on the
   element always beats an inherited color, however light, so any plain link
   with no color of its own (e.g. document-name links in an uploaded-files
   list) stays dark-on-dark regardless of what its container's text color is
   set to. Low specificity on purpose — anything more specific (menu links,
   .sp-profile-url, etc.) still wins over this base default as normal. */
[data-theme="dark"] a { color: var(--text); }

/* The site's own scrollbar-track/thumb customization is commented out in
   style.bundle.css, so scrollbars use the browser default — a light gray
   track that shows up as a stray white strip along any scrollable edge. */
[data-theme="dark"] ::-webkit-scrollbar-track { background-color: var(--Schemes-Background); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: var(--border); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }

/* .act-btn's delete icon is an <i class="fas fa-trash-alt"> child, and a more
   specific rule (a .fas.fa-trash-alt, element+2 classes) directly targets
   that child element — beats a plain .act-btn class rule on specificity
   (element-in-selector outranks a same-count class match), so the color
   fix on .act-btn never reached this particular icon. */
[data-theme="dark"] a .fas.fa-trash-alt { color: #8ACEFF !important; }

/* ══════════════════════════════════════════════════════════════
   CUSTOMER LISTING — search bar / country filter toolbar
   (customers-list.blade.php via common_ag_grid.css). Custom-built
   component, not .form-control, so the global input fix never reached it.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .customers-toolbar { border-bottom-color: var(--border); }
[data-theme="dark"] .cust-search-wrap .s-icon,
[data-theme="dark"] .country-filter-wrap .cf-icon,
[data-theme="dark"] .cust-search-clear,
[data-theme="dark"] .cf-clear-btn {
    color: var(--muted);
}
[data-theme="dark"] .cust-search-input,
[data-theme="dark"] .country-filter-select {
    background-color: var(--surface-alt);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .cust-search-input::placeholder { color: var(--muted); }
[data-theme="dark"] .country-filter-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239aa1b1'/%3E%3C/svg%3E");
}
[data-theme="dark"] .country-filter-select.has-value {
    background-color: var(--purple-light);
    color: var(--purple);
    border-color: var(--purple);
}
[data-theme="dark"] .tb-icon-btn {
    background: var(--surface-alt);
    border-color: var(--border);
    color: var(--muted);
}

/* ══════════════════════════════════════════════════════════════
   360 STUDENT VIEW — pass 2. The Strengths/Key Risk/AI Review/Social
   Status content panels are PHP-rendered with inline style="" on nearly
   every element, which no class-based rule can reach without !important.
══════════════════════════════════════════════════════════════ */
/* "No Results" placeholders — 6 near-identical instances, none with a
   class, so matched by their distinctive literal inline style instead. */
[data-theme="dark"] [style*="text-align:center; color:#000; padding:2em 0"],
[data-theme="dark"] [style*="text-align:center;color:#000;padding:3em 0"] {
    color: var(--muted) !important;
}
/* Social-profile summary table's username/id cells set color inline,
   which beats the plain (non-!important) .sp-summary-table td rule above. */
[data-theme="dark"] .sp-summary-table td[style*="color"] { color: var(--text) !important; }

/* "Add Note" / "All Notes" modals — both are a fixed dark-overlay wrapper
   around a plain white inner box, identified only by their outer id. */
[data-theme="dark"] #addNoteModal > div,
[data-theme="dark"] #allNotesModal > div {
    background: var(--surface) !important;
    color: var(--text);
}
[data-theme="dark"] #noteInput { background: var(--surface-alt); border-color: var(--border); color: var(--text); }

/* Filters dropdown panel — at least 4 pages (students-list, create-single-
   interview, interview_view_details, interview_Result) each build this same
   panel independently in JS with a literal `background:white` inline style,
   which beats the earlier CSS-class-based fix in common_ag_grid.css (that
   one has no !important, so it only ever won on pages with no inline style
   of their own). !important here beats the inline style regardless of which
   page built it. The "Intake Year"/"Country"/etc. labels have no color of
   their own — they were already inheriting the correct light dark-mode text
   color, just invisible against the white panel; fixing the background is
   enough to make them read correctly too. */
[data-theme="dark"] #filter-dropdown {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

/* ══════════════════════════════════════════════════════════════
   DOC PRO — yet another, third variant of the "Filters" UI, this time
   with its own class names (.filter-btn/.filter-dropdown-menu) instead of
   the #filter-toggle-btn/#filter-dropdown pattern fixed above. This app
   has at least three independent copy-pasted implementations of the same
   filter-button-plus-dropdown component; each needed its own fix.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .filter-btn {
    background: var(--surface-alt);
    border-color: var(--border);
    color: var(--Schemes-Secondary);
}
[data-theme="dark"] .filter-btn:hover { background: var(--surface-2); }
/* .filter-icon is a CSS mask (not an <img>), so its visible color is just
   background-color — no filter-recolor math needed here. */
[data-theme="dark"] .filter-btn .filter-icon { background-color: var(--Schemes-Secondary); }
[data-theme="dark"] .filter-dropdown-menu { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .filter-group label { color: var(--text); }

/* Doc Pro's "Pending" status badge — this page hardcodes color:black on top
   of Metronic's .kt-badge--outline.kt-badge--success/--warning (which
   default to a visible colored text, #1dc9b7/#ffb822), specifically to make
   the outline badge read as a colored-border/dark-text pill. On the dark
   row that black text became invisible; restore legible colored text using
   the same hue as each variant's own border. */
[data-theme="dark"] .kt-badge.kt-badge--outline.kt-badge--success { color: #71b957 !important; }
[data-theme="dark"] .kt-badge.kt-badge--outline.kt-badge--warning { color: #ffc403 !important; }

/* ══════════════════════════════════════════════════════════════
   TIME PICKER (mdtimepicker) — a fully self-contained widget (JS + CSS
   both bundled inline in create-single-interview.blade.php), so none of
   the earlier global fixes could reach it. The blue "12:00 AM" header
   (.mdtp__time_holder) is already an intentional solid accent color and
   stays as-is; only the white clock face needs to go dark.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .mdtp__wrapper { background-color: var(--surface); }
[data-theme="dark"] .mdtp__clock_holder { background-color: var(--surface); }
[data-theme="dark"] .mdtp__clock_holder .mdtp__clock { background-color: var(--surface-2); }
[data-theme="dark"] .mdtp__clock .mdtp__digit span { color: var(--text); }
[data-theme="dark"] .mdtp__am,
[data-theme="dark"] .mdtp__pm {
    background: var(--surface-alt);
    color: var(--text);
    border-color: var(--border);
}

/* ══════════════════════════════════════════════════════════════
   DATE PICKER (bootstrap-datepicker) — styled in style.bundle.css, loaded
   panel-wide, but was never touched since it renders as a dynamically
   appended popup rather than a page element visible until clicked.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .datepicker,
[data-theme="dark"] .datepicker-dropdown {
    background: var(--surface);
    border-color: var(--border);
}
[data-theme="dark"] .datepicker thead th,
[data-theme="dark"] .datepicker thead th.prev,
[data-theme="dark"] .datepicker thead th.datepicker-switch,
[data-theme="dark"] .datepicker thead th.next,
[data-theme="dark"] .datepicker thead th.prev i,
[data-theme="dark"] .datepicker thead th.datepicker-switch i,
[data-theme="dark"] .datepicker thead th.next i,
[data-theme="dark"] .datepicker thead th.dow,
[data-theme="dark"] .datepicker tbody tr > td.day {
    color: var(--text);
}
[data-theme="dark"] .datepicker thead th.prev:hover,
[data-theme="dark"] .datepicker thead th.datepicker-switch:hover,
[data-theme="dark"] .datepicker thead th.next:hover,
[data-theme="dark"] .datepicker tbody tr > td.day:hover {
    background: var(--surface-2) !important;
    color: var(--text);
}
[data-theme="dark"] .datepicker tbody tr > td.day.old,
[data-theme="dark"] .datepicker tbody tr > td.day.new {
    color: var(--muted);
}
[data-theme="dark"] .datepicker tbody tr > td.day.range { background: var(--surface-alt); }
[data-theme="dark"] .datepicker.datepicker-inline { border-color: var(--border); }

/* The previous .datepicker/.datepicker-dropdown fix above targeted the wrong
   library — this field is actually initialized with jQuery UI's datepicker
   ($('#end_date').datepicker('option', ...) is jQuery UI's API, not Bootstrap-
   datepicker's), styled by jquery-ui.css loaded from a CDN in the footer.
   That ships its own unrelated .ui-datepicker-* classes and light theme,
   which nothing so far has touched. Keeping the earlier .datepicker fix too,
   in case some other page genuinely uses Bootstrap's version. */
[data-theme="dark"] .ui-datepicker,
[data-theme="dark"] .ui-widget-content {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .ui-datepicker-header,
[data-theme="dark"] .ui-widget-header {
    background: var(--surface-alt) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .ui-datepicker-title { color: var(--text) !important; }
[data-theme="dark"] .ui-datepicker-calendar th { color: var(--muted); }
[data-theme="dark"] .ui-datepicker-calendar td a.ui-state-default {
    background: var(--surface-alt) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .ui-datepicker-calendar td a.ui-state-default:hover {
    background: var(--surface-2) !important;
}
[data-theme="dark"] .ui-datepicker-calendar .ui-state-highlight {
    background: var(--purple-light) !important;
    color: var(--purple) !important;
}
[data-theme="dark"] .ui-datepicker-calendar .ui-state-active {
    background: var(--purple) !important;
    color: #fff !important;
}
[data-theme="dark"] .ui-datepicker-prev span,
[data-theme="dark"] .ui-datepicker-next span {
    filter: brightness(0) invert(1);
}

/* ══════════════════════════════════════════════════════════════
   SETTINGS (gear) DROPDOWN — polish pass. Background/text already read
   correctly via the earlier .dropdown-menu/.kt-nav__link fixes; this adds
   the shadow/hierarchy/icon-color refinement that was still missing.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] #dashboard-dropdown-menu {
    box-shadow: 0 12px 32px rgba(0,0,0,.35), 0 2px 8px rgba(157,111,240,.12) !important;
    border: 1px solid var(--border) !important;
}
/* The little pointer triangle at the top of the box was still a hardcoded
   white wedge — invisible as a "pointer" once the box itself went dark. */
[data-theme="dark"] #dashboard-dropdown-menu:before {
    border-bottom-color: var(--surface) !important;
}
/* "Org Setup" (the first, non-clickable parent row) — just a divider +
   bold weight to read as a section label, no background tint (a
   permanently-tinted row reads too much like a stuck :hover state). */
[data-theme="dark"] #dashboard-dropdown-menu .kt-nav > li.kt-nav__item:first-child > a {
    /* border-bottom: 1px solid var(--border); */
    font-weight: 600;
}
/* Icon images (gear/document icons) are dynamic per-item PNGs, same
   .sidebarlogo class as the main sidebar — the earlier fix for that class
   was scoped to #kt_aside only, so it never reached this dropdown. */
[data-theme="dark"] #dashboard-dropdown-menu .sidebarlogo {
    filter: brightness(0) saturate(100%) invert(67%) sepia(66%) saturate(238%) hue-rotate(162deg) brightness(100%) contrast(100%);
}

/* ══════════════════════════════════════════════════════════════
   NOTIFICATION BELL DROPDOWN (header.blade.php #notif-dropdown-menu).
   Every color here was hardcoded light-purple/white in the page's own
   <style> block (header.blade.php ~1678-1780), so the generic
   .dropdown-menu dark fix only reached the panel's outer background —
   the header strip, item text/icons and hover/unread tints stayed light.
   Item markup (.notif-item, .notif-item-icon, etc.) is built client-side
   by renderNotifList() but reuses these exact same class names. */
[data-theme="dark"] #notif-dropdown-menu {
    box-shadow: 0 12px 32px rgba(0,0,0,.35), 0 2px 8px rgba(157,111,240,.12) !important;
    border: 1px solid var(--border) !important;
}
[data-theme="dark"] .notif-dropdown-header {
    background: var(--purple-light) !important;
    border-bottom: 1px solid var(--border) !important;
}
[data-theme="dark"] .notif-dropdown-title { color: var(--text) !important; }
[data-theme="dark"] .notif-mark-all { color: var(--purple) !important; }
[data-theme="dark"] .notif-mark-all:hover { background: var(--surface-2) !important; }
[data-theme="dark"] .notif-empty { color: var(--muted) !important; }
[data-theme="dark"] .notif-item { border-bottom: 1px solid var(--border) !important; }
[data-theme="dark"] .notif-item:hover { background: var(--surface-2) !important; }
[data-theme="dark"] .notif-item--unread { background: var(--purple-light) !important; }
[data-theme="dark"] .notif-item--unread:hover { background: var(--surface-2) !important; }
[data-theme="dark"] .notif-item-icon { background: var(--purple-light) !important; color: var(--purple) !important; }
[data-theme="dark"] .notif-item-message { color: var(--text) !important; }
[data-theme="dark"] .notif-item-time { color: var(--muted) !important; }
[data-theme="dark"] .notif-item-dot { background: var(--purple) !important; }

/* Users list (users-list.blade.php) Action column — Users.php (the model)
   builds this HTML with a class literally named "icon-black" (color:#000)
   for the edit/view icons, invisible on a dark row. */
[data-theme="dark"] .icon-black { color: #8ACEFF !important; }

/* ══════════════════════════════════════════════════════════════
   EMAIL TEMPLATES (template_list.blade.php). Section headings ("Select
   Template", "Available Variables", "Email Preview") have no color of
   their own — they inherit the dark-mode body text correctly already,
   they just had no contrast against the light .panel background they
   sit on; fixing that background alone resolves them too. The actual
   email preview content (#preview-content's innerHTML, e.g. the yellow
   "Preview Information" banner) is left untouched on purpose — that's
   the literal template content a real recipient will see in their own
   inbox, not app chrome, so it should stay however the template author
   designed it regardless of admin panel theme.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .panel { background: var(--surface-alt); }
[data-theme="dark"] .variable-box { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] #preview-content { border-color: var(--border); }

/* "Instructions" and "Insert Variable" both use Bootstrap's plain
   .btn-outline-secondary, whose default text/border (#e1e1ef, a muted pale
   lavender) has technically-fine but washed-out-looking contrast on a dark
   panel — not the same bug as elsewhere, just not a good look. Recolored to
   the same cyan accent used for #filter-toggle-btn for a clearer, more
   legible outline button. */
[data-theme="dark"] .btn-outline-secondary {
    color: var(--Schemes-Secondary);
    border-color: var(--Schemes-Secondary);
    background: transparent;
}
[data-theme="dark"] .btn-outline-secondary:hover {
    background: var(--State-Layers-Secondary-Container-Opacity-25);
    color: var(--Schemes-Secondary);
    border-color: var(--Schemes-Secondary);
}

/* ══════════════════════════════════════════════════════════════
   PLAIN BOOTSTRAP TABLES + DATATABLES — first real appearance of this
   pattern (question-bank.blade.php, question-list.blade.php); everything
   up to now was ag-Grid. This is a site-wide component (style.bundle.css /
   datatables.bundle.css), not scoped to one page, so it's a broad fix.
══════════════════════════════════════════════════════════════ */
/* Metronic hardcodes a solid vivid purple (#884CFF) + white text for every
   plain <table> header, in both themes by design — toned down to match the
   more subdued header treatment already used on the ag-Grid tables instead
   of leaving it clashing at full brightness next to everything else. */
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table thead td {
    background-color: var(--surface-2) !important;
    color: var(--purple) !important;
}
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    border-top-color: var(--border);
}
[data-theme="dark"] .table-bordered,
[data-theme="dark"] .table-bordered th,
[data-theme="dark"] .table-bordered td {
    border-color: var(--border);
}
/* master_student_document_list.blade.php ("Doc Pro" → Results) defines its
   own #documentTable thead th rule reading --State-Layers-Primary-Container-
   Opacity-25 as a translucent purple wash — an ID selector, so it outranks
   the .table thead th flat dark-panel fix above regardless of !important.
   Match it to the same flat treatment used everywhere else (ag-Grid headers,
   plain .table headers) instead of a separate purple-tinted look. */
[data-theme="dark"] #documentTable thead th,
[data-theme="dark"] #documentTable thead {
    background: var(--surface-2) !important;
    color: var(--purple) !important;
}
/* Status / Fraud Indicators pills (.doc-pill) — same green/amber tokens as
   the "AI Result" column's dark map, so both read consistently in dark mode. */
[data-theme="dark"] .doc-pill--green {
    background: rgba(40, 167, 69, .35);
    color: #fff;
    border: 1px solid #28a745;
}
[data-theme="dark"] .doc-pill--amber {
    background: rgba(212, 136, 51, .35);
    color: #fff;
    border: 1px solid #cc8a3d;
}
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--surface-alt); }
[data-theme="dark"] .table-hover tbody tr:hover {
    color: var(--text);
    background-color: var(--surface-2);
}
/* DataTables auto-generates its "Show N entries" / "Search:" controls as
   plain native <select>/<input> with no .form-control class, so the global
   form-control fix never reached them. */
[data-theme="dark"] div.dataTables_wrapper div.dataTables_length select,
[data-theme="dark"] div.dataTables_wrapper div.dataTables_filter input {
    background-color: var(--surface-alt);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] div.dataTables_wrapper div.dataTables_length label,
[data-theme="dark"] div.dataTables_wrapper div.dataTables_filter label,
[data-theme="dark"] div.dataTables_wrapper div.dataTables_info {
    color: var(--muted);
}
[data-theme="dark"] .page-link {
    background-color: var(--surface-alt);
    border-color: var(--border);
    color: var(--purple);
}
[data-theme="dark"] .page-link:hover { background-color: var(--surface-2); }
[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--purple);
    border-color: var(--purple);
    color: #fff;
}
[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--surface-alt);
    color: var(--muted);
}

/* Add Role permissions table — section-header rows ("Screen Pro", "Doc Pro",
   etc.) are hardcoded to a light gray with !important; combined with the
   already-light dark-mode text color that's white-on-white, which is why
   these rows looked blank instead of just wrong-colored. */
[data-theme="dark"] .parent-menu-row { background-color: var(--surface-2) !important; }
[data-theme="dark"] .parent-menu-row td { color: var(--text); }

/* ══════════════════════════════════════════════════════════════
   CONSUMPTION REPORT (consumption_report.blade.php)
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .tabs-card-container,
[data-theme="dark"] .tab-content-wrapper {
    background-color: var(--surface);
}
[data-theme="dark"] .custom-doc-tabs .nav-link { color: var(--muted); }
[data-theme="dark"] .custom-doc-tabs .nav-link:hover {
    background-color: var(--surface-2);
    color: var(--purple);
}
[data-theme="dark"] .summary-card { background-color: var(--surface-alt); }
[data-theme="dark"] .summary-card h6 { color: var(--muted); }
[data-theme="dark"] .summary-card h4 { color: var(--text); }

/* The actual white "Detailed App Pro" panel is Bootstrap's .bg-white
   utility (background-color:#fff !important) — .tab-content-wrapper from
   the earlier fix turned out to be dead CSS never applied to any element
   in this file. .bg-white is generic enough it may reach other pages too,
   which is fine — it should never mean "white" once dark mode is active. */
[data-theme="dark"] .bg-white { background-color: var(--surface) !important; }
/* Calendar.png date-picker icon — a dark icon, same fix pattern as the
   other PNG icons throughout the app. */
[data-theme="dark"] .calendar-icon { filter: brightness(0) invert(1); opacity: .8; }

/* Generic .switch/.slider toggle — customer.css has its own dark fix for
   this same class pair, but that only reaches pages that load customer.css.
   setting.blade.php (and likely others) defines its own local, unstyled
   copy with different default colors (#ccc off / #28a745 on), which needs
   its own panel-wide fix since it's not the same stylesheet. */
[data-theme="dark"] .slider { background-color: var(--border); }
[data-theme="dark"] .slider:before { background-color: #fff; }

/* Settings page tabs ("Interview Setting" / "Mail Configuration") — the
   LineAwesome icon (<i class="la la-cog">) had no color of its own, so both
   active and inactive tabs rendered it identically instead of the icon
   following the same active/inactive distinction as its own label text. */
[data-theme="dark"] .nav-tabs .nav-link i { color: var(--muted); }
[data-theme="dark"] .nav-tabs .nav-link.active i { color: var(--purple); }

/* ══════════════════════════════════════════════════════════════
   DOC PRO — Document detail / OCR analysis view
   (master_student_document_tabwise.blade.php). Every card here — the
   document selector dropdown, AI Summary box, Document Details card, and
   the three confidence/tool/suspicious-region boxes — was hardcoded
   #fff/light-pastel with zero theme awareness, none of it token-driven.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .doc-dropdown-trigger {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .doc-dropdown-trigger .trigger-value { color: var(--text); }
[data-theme="dark"] .doc-dropdown-menu {
    background: var(--surface);
    border-color: var(--border);
}
[data-theme="dark"] .doc-dropdown-item {
    color: var(--text);
    border-bottom-color: var(--border);
}
[data-theme="dark"] .doc-dropdown-item:hover,
[data-theme="dark"] .doc-dropdown-item.selected {
    background: var(--surface-2);
}
[data-theme="dark"] .doc-dropdown-item .item-type { color: var(--muted); }

[data-theme="dark"] .ai-summary-box {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .ai-summary-box .ai-summary-label { color: var(--purple-mid); }

[data-theme="dark"] .doc-details-card {
    background: var(--surface);
    border-color: var(--border);
}
[data-theme="dark"] .doc-details-header {
    background: var(--surface-alt);
    border-bottom-color: var(--border);
    color: var(--purple-mid);
}
[data-theme="dark"] .doc-details-cell { border-bottom-color: var(--border); }
[data-theme="dark"] .doc-details-cell:nth-child(odd) { border-right-color: var(--border); }
[data-theme="dark"] #doc-details-label { color: var(--muted); }
[data-theme="dark"] #doc-details-label-value,
[data-theme="dark"] .doc-details-cell .cell-value {
    color: var(--text);
}
/* Document Name / Name on Document / File Size / Document Status row
   dividers are inline style="border-bottom/border-left:1px solid #f0ecfa" —
   substring hook + !important to beat the inline style. */
[data-theme="dark"] .doc-details-card [style*="f0ecfa"] {
    border-bottom-color: var(--border) !important;
    border-left-color: var(--border) !important;
}

[data-theme="dark"] .status-badge.clean { background: rgba(55, 167, 73, .2); color: #8ee6a6; }
[data-theme="dark"] .status-badge.fraud { background: rgba(178, 47, 60, .25); color: #ff8a95; }
[data-theme="dark"] .status-badge.unknown { background: var(--surface-2); color: var(--muted); }

/* Authenticity Confidence / Tool Detection / Suspicious Regions cards —
   pastel background + hardcoded dark value text (color:#1a2332 inline),
   unreadable once the card itself goes dark. */
[data-theme="dark"] .confidence-high { background: rgba(41, 182, 246, .15); }
[data-theme="dark"] .confidence-medium { background: rgba(219, 170, 22, .15); }
[data-theme="dark"] .confidence-low { background: rgba(234, 67, 53, .18); }
[data-theme="dark"] .confidence-title { color: var(--muted); }
[data-theme="dark"] .confidence-box [style*="color:#1a2332"] { color: var(--text) !important; }

/* "Key Findings" / "Structured Analysis" accordion — base state already
   adapts (background:none, text color already var-driven), but :hover sets
   a hardcoded near-white (#faf8ff) that was never touched — the white bar
   only appears while the row is actually hovered. */
[data-theme="dark"] .doc-accordion-item { border-top-color: var(--border); }
[data-theme="dark"] .doc-accordion-trigger:hover { background: var(--surface-2); }
[data-theme="dark"] .doc-accordion-body { color: var(--text); }

/* "Parameters" checklist card (two-column pass/fail table) — .info-card
   plus its column-wrapper/row inline borders (#e8e0fa / #f5f3fb) were
   never touched. Check/X icon colors stay as-is; green/red already read
   fine against a dark card. */
[data-theme="dark"] .info-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .info-card [style*="e8e0fa"] { border-color: var(--border) !important; }
[data-theme="dark"] .info-card [style*="f5f3fb"] { border-bottom-color: var(--border) !important; }
[data-theme="dark"] #table-display-name { color: var(--text); border-right-color: var(--border); }

/* PDF viewer wrapper — the 10px white frame surrounding the toolbar +
   certificate image is this container's own background, distinct from the
   document image itself (left untouched, same as email/PDF content
   elsewhere in the app — it's real document content, not app chrome). */
[data-theme="dark"] #pdf_viewer { background: var(--surface); border-color: var(--border); }

/* .pdf-container is a fixed 930px-tall wrapper around the <canvas> the
   certificate is drawn into — the canvas itself is shorter than that, so
   the container's own white background shows through as empty space
   around/below the document. The canvas pixel content (the actual scanned
   certificate) is untouched. */
[data-theme="dark"] .pdf-container { background: var(--surface); }

/* ══════════════════════════════════════════════════════════════
   UNIFIED PRIMARY BUTTON GRADIENT
   Reference: App Pro Results page ("Back to results" / "Final
   Recommendation"). Every one of these classes was a flat, page-specific
   purple (or, for .btn-brand's hover, an inconsistent blue) — unified to
   the same diagonal violet gradient app-wide so every primary action
   button reads as the same component instead of each page's own color.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .btn-brand,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] #eval-root .ev-btn-primary,
[data-theme="dark"] #applicant-detail-back,
[data-theme="dark"] #detail-back-btn,
[data-theme="dark"] .btn-outline-brand[data-target="#exampleModalCenter"],
[data-theme="dark"] .btn-structure-analysis {
    background: linear-gradient(135deg, #9D6FF0 0%, #6E29E4 100%) !important;
    border-color: #6E29E4 !important;
    color: #fff !important;
}
[data-theme="dark"] .btn-brand:hover,
[data-theme="dark"] .btn-brand:focus,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus,
[data-theme="dark"] #eval-root .ev-btn-primary:hover,
[data-theme="dark"] #applicant-detail-back:hover,
[data-theme="dark"] #detail-back-btn:hover,
[data-theme="dark"] .btn-outline-brand[data-target="#exampleModalCenter"]:hover,
[data-theme="dark"] .btn-structure-analysis:hover {
    background: linear-gradient(135deg, #b28cf5 0%, #7c3aed 100%) !important;
    border-color: #7c3aed !important;
}

/* "Final Recommendation History" AG Grid (#frh-grid, interview_response.
   blade.php) — table column headers intentionally left as-is (purple text
   on the purple-tinted header background); only the row-hover flash is
   fixed here. */
[data-theme="dark"] #frh-grid.ag-theme-alpine .ag-row:hover {
    background: var(--surface-2) !important;
}
/* Modal's own title heading — was inheriting plain var(--text) from the
   generic .modal-content rule; given its own purple accent instead, same
   family as other section-header titles elsewhere (.doc-details-header,
   .ai-summary-label). */
[data-theme="dark"] #finalRecommendationHistoryTitle { color: #ffff; }

/* Lip Sync / Eye Tracking progress bars (interview_response.blade.php) —
   .progress-bar-container is the track BEHIND the colored fill, hardcoded
   #f0f0f0. At low fill percentages (e.g. Eye Tracking at 0%) most or all of
   that light-gray track shows through unobscured, reading as a bright white
   bar against the dark card. */
[data-theme="dark"] .progress-bar-container { background-color: var(--surface-2); }

/* interview_response.blade.php's small utility icons (header-info-bar's
   calendar/clock, applicant meta's flag/passport/email/phone, and the
   monitoring cards' icons) all share the exact same hardcoded fill
   (#4A454E, the light-mode on-surface-variant color) — a dark charcoal
   line icon meant to sit on a light background, effectively invisible
   against the dark theme. */
[data-theme="dark"] img[src*="calender_light.svg"],
[data-theme="dark"] img[src*="clock_icon.svg"],
[data-theme="dark"] img[src*="flag.svg"],
[data-theme="dark"] img[src*="flight.svg"],
[data-theme="dark"] img[src*="email.svg"],
[data-theme="dark"] img[src*="call-icon.svg"],
[data-theme="dark"] img[src*="room-monitoring.svg"],
[data-theme="dark"] img[src*="window_switch.svg"],
[data-theme="dark"] img[src*="lip_sync.svg"],
[data-theme="dark"] img[src*="Eye.svg"] {
    filter: brightness(0) invert(1);
}

/* "Filter Period" date-range trigger (dashboard_edu.blade.php /
   students-list.blade.php) — inline style="background-color:white" on the
   trigger card. */
[data-theme="dark"] .daterange-btn [style*="background-color: white"] {
    background-color: var(--surface) !important;
}
[data-theme="dark"] .daterange-btn .kt-font-bold { color: var(--text); }
[data-theme="dark"] .daterange-btn .kt-opacity-7 { color: var(--muted); }

/* The actual calendar popup itself — jQuery daterangepicker plugin
   (base styles in plugins.bundle.css, color overrides in style.bundle.css),
   entirely light-mode-only with no theme awareness. */
[data-theme="dark"] .daterangepicker {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .daterangepicker:after { border-bottom-color: var(--surface) !important; }
[data-theme="dark"] .daterangepicker:before { border-bottom-color: var(--border) !important; }
[data-theme="dark"] .daterangepicker .ranges li { color: var(--muted); }
[data-theme="dark"] .daterangepicker .ranges li:hover,
[data-theme="dark"] .daterangepicker .ranges li.active {
    background-color: var(--surface-2);
    color: var(--purple-mid);
}
[data-theme="dark"] .daterangepicker.show-calendar .ranges { border-right-color: var(--border); }
[data-theme="dark"] .daterangepicker .drp-buttons { border-top-color: var(--border); }
[data-theme="dark"] .daterangepicker .drp-calendar th,
[data-theme="dark"] .daterangepicker .drp-calendar td {
    color: var(--text);
}
[data-theme="dark"] .daterangepicker .drp-calendar th.month { color: var(--muted); }
[data-theme="dark"] .daterangepicker .drp-calendar td.available.off { color: var(--border); }
[data-theme="dark"] .daterangepicker .drp-calendar td.in-range.available:not(.active):not(.off):not(.today) {
    background-color: var(--surface-2);
    color: var(--text);
}
[data-theme="dark"] .daterangepicker select {
    background: var(--surface-alt) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
/* .calendar-table (the month-grid box itself, from plugins.bundle.css) has
   its own explicit white background separate from .daterangepicker's outer
   background — missed by the fix above. */
[data-theme="dark"] .daterangepicker .calendar-table {
    background-color: var(--surface) !important;
    border-color: var(--surface) !important;
}
/* Prev/next chevrons are drawn via a black CSS border (rotated 45deg), not
   a font icon or fill color — invisible once the grid behind them goes dark. */
[data-theme="dark"] .daterangepicker .calendar-table .next span,
[data-theme="dark"] .daterangepicker .calendar-table .prev span {
    border-color: var(--text);
}
[data-theme="dark"] .daterangepicker .cancelBtn {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
/* Adjacent-month "off" days (e.g. 29/30 June showing inside July's grid)
   are plugins.bundle.css's own base rule — an explicit white box, separate
   from the .available.off color-only tweak in style.bundle.css. */
[data-theme="dark"] .daterangepicker td.off,
[data-theme="dark"] .daterangepicker td.off.in-range,
[data-theme="dark"] .daterangepicker td.off.start-date,
[data-theme="dark"] .daterangepicker td.off.end-date {
    background-color: var(--surface) !important;
    color: var(--border) !important;
}
/* Scoped to exclude .in-range/.active/.today — otherwise hovering any day
   inside an already-selected range stripped its purple highlight and
   replaced it with plain gray, making the range look broken mid-hover. */
[data-theme="dark"] .daterangepicker td.available:hover:not(.in-range):not(.active):not(.today),
[data-theme="dark"] .daterangepicker th.available:hover {
    background-color: var(--surface-2) !important;
}
/* Trigger's Bootstrap focus-visible ring inherits the theme's purple
   accent as its shadow color — harmless on a white card, but glaring
   against the dark trigger background. */
[data-theme="dark"] .daterange-btn:focus,
[data-theme="dark"] .daterange-btn:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}
[data-theme="dark"] .daterangepicker td.week,
[data-theme="dark"] .daterangepicker th.week {
    color: var(--muted);
}



/* ══════════════════════════════════════════════════════════════
   ADMISSION FORM DETAILS (admission-form-details.blade.php)
   Every section card, banner, and field label was hardcoded white/light
   with zero theme awareness.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .adm-section { background: var(--surface); }
[data-theme="dark"] .adm-section h4 { color: var(--text); border-bottom-color: var(--border); }
[data-theme="dark"] .adm-label { color: var(--muted); }
[data-theme="dark"] .adm-value { color: var(--text); }
[data-theme="dark"] .adm-value.muted { color: var(--muted); }
[data-theme="dark"] .adm-block {
    background: var(--surface-alt);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .adm-doc-row { background: var(--surface-alt); border-color: var(--border); }
[data-theme="dark"] .adm-doc-name { color: var(--text); }
[data-theme="dark"] .adm-doc-actions a { color: #8ACEFF; }
[data-theme="dark"] .adm-banner.warn {
    background: rgba(212, 136, 51, .18);
    border-color: #cc8a3d;
    color: #ffc98a;
}
[data-theme="dark"] .adm-banner.ok {
    background: rgba(55, 167, 73, .18);
    border-color: #4a8a53;
    color: #8ee6a6;
}
[data-theme="dark"] .adm-empty { color: var(--muted); }

/* Custom dark-mode loader (layouts/dark-loader.blade.php, included right
   after the plain Spinner.gif <img> in every #custom-loader block panel-
   wide) — swap which one is visible based on theme. #custom-loader's own
   display:block/none (toggled by each page's existing JS) still gates
   overall visibility; this only decides which child renders once shown. */
[data-theme="dark"] #custom-loader img[src*="Spinner.gif"] { display: none !important; }
[data-theme="dark"] #custom-loader .dark-loader-block { display: flex !important; }
/* #custom-loader's own full-screen backdrop (header.blade.php) is a
   translucent WHITE overlay (rgba(255,255,255,.8)) meant to dim a light
   page while it loads — washes the whole dark-mode UI out to gray instead. */
[data-theme="dark"] #custom-loader { background-color: transparent !important; }

/* Student 360 View header card — "Last Updated" date and the bio-summary
   text (or "No Results Available" fallback) are inline color:#00000091 /
   color:#444, both near-black and meant for a white card; nearly invisible
   once the card itself goes dark. */
[data-theme="dark"] [style*="color: #00000091"] {
    color: var(--muted) !important;
}
[data-theme="dark"] [style*="color: #444"] { color: var(--text) !important; }
[data-theme="dark"] #icon_Calendar { background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] #kt_daterangepicker_1_modal #dateRangeDisplay {
    color: var(--text) !important;
}
[data-theme="dark"] #kt_daterangepicker_1_modal .kt-font-bold {
    color: var(--text) !important;
}
[data-theme="dark"] .nav-tabs.nav-tabs-line.nav.nav-tabs .nav-link,
[data-theme="dark"] .nav-tabs.nav-tabs-line a.nav-link {
    background-color: transparent;
    color: var(--muted) !important;
}
/* ══════════════════════════════════════════════════════════════
   SELECT2 DROPDOWN POPUP — the open results panel + search field.
   Separate from .select2-selection--single (the closed trigger,
   already themed above) — Select2 renders the open dropdown as its
   own floating element appended near <body>, so it needs its own fix.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .select2-dropdown,
[data-theme="dark"] .select2-container--default .select2-dropdown,
[data-theme="dark"] .select2-container--open .select2-dropdown {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .select2-results,
[data-theme="dark"] .select2-results__options {
    background-color: var(--surface) !important;
}
[data-theme="dark"] .select2-search--dropdown .select2-search__field,
[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--surface-alt) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .select2-results__option,
[data-theme="dark"] .select2-container--default .select2-results__option {
    background-color: var(--surface) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .select2-results__option--highlighted[aria-selected] {
    background-color: var(--purple) !important;
    color: #fff !important;
}
[data-theme="dark"] .select2-results__option[aria-selected="true"] {
    background-color: var(--surface-2) !important;
    color: var(--purple) !important;
}
[data-theme="dark"] .select2-container--default .select2-results > .select2-results__options {
    scrollbar-color: var(--border) var(--surface);
}
/* "No results found" message */
[data-theme="dark"] .select2-results__message {
    color: var(--muted) !important;
}
/* ══════════════════════════════════════════════════════════════
   SELECT2 MULTI-SELECT — the closed trigger box + chips, e.g. the
   "Users with Two-Step Verification enabled" picker. Uses its own
   markup/classes distinct from .select2-selection--single above.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--surface-alt) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--purple) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--text) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--muted) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--text) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    background-color: transparent !important;
    color: var(--text) !important;
}

[data-theme="dark"] i.fas.fa-file-alt[style*="#5d78ff"] {
    color: #8ACEFF !important;
}
[data-theme="dark"] .icon-360 {
    width: 25px !important;
    height: 25px !important;
    filter: invert(0.7) sepia(1) saturate(7) hue-rotate(175deg) brightness(1.1) contrast(1.05);
}

/* ══════════════════════════════════════════════════════════════
   VECTOR LOG DASHBOARD (vector_log.blade.php / vectorlog.css)
   Has its own complete --vl-* token system defined once, unconditionally,
   at :root (same pattern as --ep-*/--Schemes-* elsewhere) — redefining
   these here covers most of the page (wrapper bg, borders, muted/primary
   text, select/button base colors) in one shot. Everything below that is
   still hardcoded literal pastel hex (stat cards, badges, status pills,
   score pills, table header, activity section) needs its own overrides
   since it never reads the --vl-* tokens at all.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --vl-bg: var(--Schemes-Background) !important;
    --vl-purple: var(--purple-mid) !important;
    --vl-purple-light: var(--surface-2) !important;
    --vl-white: var(--surface) !important;
    --vl-text: var(--text) !important;
    --vl-muted: var(--muted) !important;
    --vl-border: var(--border) !important;
    --vl-green: #4ade80 !important;
    --vl-red: #f87171 !important;
}

[data-theme="dark"] .vl-topbar { background: var(--surface); border-bottom-color: var(--border); }
[data-theme="dark"] .vl-period-select { background: var(--surface-alt); color: var(--text); border-color: var(--border); }

/* Stat cards — exact pastel Figma colors, literal hex, no vars. !important
   since these visually kept rendering as the original bright light-mode
   pastels despite this rule already having higher selector specificity. */
[data-theme="dark"] .vl-stat-card.total     { background: rgba(55, 167, 69, .15) !important; border-color: #4a8a53 !important; }
[data-theme="dark"] .vl-stat-card.interview { background: rgba(13, 110, 172, .15) !important; border-color: #5aa9d6 !important; }
[data-theme="dark"] .vl-stat-card.backend   { background: rgba(20, 184, 166, .15) !important; border-color: #2dd4bf !important; }
[data-theme="dark"] .vl-stat-card.errors    { background: rgba(220, 53, 69, .15) !important; border-color: #dc3545 !important; }
[data-theme="dark"] .vl-stat-card.total     .vl-stat-value { color: #8ee6a6 !important; }
[data-theme="dark"] .vl-stat-card.interview .vl-stat-value { color: #7cc9fb !important; }
[data-theme="dark"] .vl-stat-card.backend   .vl-stat-value { color: #5eead4 !important; }
[data-theme="dark"] .vl-stat-card.errors    .vl-stat-value { color: #ff9aa6 !important; }
[data-theme="dark"] .vl-wrapper {  background: var(--surface) !important; }
[data-theme="dark"] .vl-stat-change.up { color: #4ade80; }
[data-theme="dark"] .vl-stat-label {  color: #fff !important; }
[data-theme="dark"] .vl-index-label {  color: #fff !important; }

[data-theme="dark"] .vl-chart-card { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] #vl-donut-center { color: var(--text) !important; }

[data-theme="dark"] .vl-logs-section { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .vl-logs-title { color: var(--text) !important; }
[data-theme="dark"] .vl-logs-header { background: var(--surface) !important; }
[data-theme="dark"] .vl-search-wrap input { background: var(--surface-alt) !important; color: var(--text) !important; border-color: var(--border) !important; }
[data-theme="dark"] .vl-search-wrap input:focus { background: var(--surface) !important; }
[data-theme="dark"] .vl-select { background: var(--surface-alt) !important; color: var(--text) !important; border-color: var(--border) !important; }
[data-theme="dark"] .vl-icon-btn { background: var(--surface-alt) !important; color: var(--muted) !important; border-color: var(--border) !important; }
[data-theme="dark"] .vl-icon-btn:hover { background: var(--surface-2) !important; color: var(--purple-mid) !important; border-color: var(--purple-mid) !important; }

[data-theme="dark"] .vl-tabs { background: var(--surface) !important; border-bottom-color: var(--border) !important; }
[data-theme="dark"] .vl-tab { color: var(--muted) !important; }
[data-theme="dark"] .vl-tab:hover,
[data-theme="dark"] .vl-tab.active { color: var(--purple-mid) !important; border-bottom-color: var(--purple-mid) !important; }

/* Table header — hardcoded violet #EDE9FE, not var-based */
[data-theme="dark"] .vl-table thead tr,
[data-theme="dark"] .vl-table thead th {
    background: rgba(157, 111, 240, .18) !important;
    color: #d0b8ff !important;
    border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .vl-table tbody tr {
    background: var(--surface) !important;
    border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .vl-table tbody tr:hover { background: var(--surface-alt) !important; }
[data-theme="dark"] .vl-table tbody td { color: var(--text) !important; }

/* Event-type badges */
[data-theme="dark"] .vl-badge.check_answer          { background: rgba(16, 185, 129, .25) !important; color: #6ee7b7 !important; }
[data-theme="dark"] .vl-badge.submit_interview       { background: rgba(6, 182, 212, .25) !important; color: #67e8f9 !important; }
[data-theme="dark"] .vl-badge.error                  { background: rgba(220, 53, 69, .25) !important; color: #ff9aa6 !important; }
[data-theme="dark"] .vl-badge.passport_processed     { background: rgba(59, 130, 246, .25) !important; color: #93c5fd !important; }
[data-theme="dark"] .vl-badge.admission_documents    { background: rgba(234, 179, 8, .25) !important; color: #fde68a !important; }
[data-theme="dark"] .vl-badge.overall_360_summary    { background: rgba(157, 111, 240, .25) !important; color: #d8b4fe !important; }
[data-theme="dark"] .vl-badge.re_evaluation          { background: rgba(236, 72, 153, .25) !important; color: #f9a8d4 !important; }
[data-theme="dark"] .vl-badge.certificate_processing { background: rgba(16, 185, 129, .25) !important; color: #6ee7b7 !important; }
[data-theme="dark"] .vl-badge.combined_documents     { background: rgba(157, 111, 240, .25) !important; color: #c4b5fd !important; }
[data-theme="dark"] .vl-badge.default                { background: var(--surface-2) !important; color: var(--muted) !important; }

/* Status pills */
[data-theme="dark"] .vl-status.completed  { background: rgba(16, 185, 129, .25) !important; color: #6ee7b7 !important; }
[data-theme="dark"] .vl-status.pending    { background: rgba(234, 179, 8, .25) !important; color: #fde68a !important; }
[data-theme="dark"] .vl-status.processing { background: rgba(6, 182, 212, .25) !important; color: #67e8f9 !important; }
[data-theme="dark"] .vl-status.error      { background: rgba(220, 53, 69, .25) !important; color: #ff9aa6 !important; }
[data-theme="dark"] .vl-status.transcript { background: rgba(6, 182, 212, .25) !important; color: #67e8f9 !important; }
[data-theme="dark"] .vl-status.started    { background: rgba(59, 130, 246, .25) !important; color: #93c5fd !important; }
[data-theme="dark"] .vl-intent { color: var(--text) !important; }

/* Score pills */
[data-theme="dark"] .vl-score.high { background: rgba(59, 130, 246, .25) !important; color: #93c5fd !important; }
[data-theme="dark"] .vl-score.mid  { background: rgba(234, 179, 8, .25) !important; color: #fde68a !important; }
[data-theme="dark"] .vl-score.low  { background: rgba(220, 53, 69, .25) !important; color: #ff9aa6 !important; }
[data-theme="dark"] .vl-score.none { color: var(--muted) !important; }

/* Pagination */
[data-theme="dark"] .vl-pagination { background: var(--surface-alt) !important; border-top-color: var(--border) !important; }
[data-theme="dark"] .vl-page-range,
[data-theme="dark"] .vl-rows-label,
[data-theme="dark"] .vl-page-arrow,
[data-theme="dark"] .vl-page-ellipsis { color: var(--muted) !important; }
[data-theme="dark"] .vl-page-btn { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }

/* Event detail panel */
[data-theme="dark"] .vl-detail-panel { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .vl-detail-header {
    background: rgba(157, 111, 240, .18) !important;
    border-bottom-color: var(--border) !important;
    color: #d0b8ff !important;
}
[data-theme="dark"] .vl-detail-copy-btn { border-color: var(--border) !important; color: var(--purple-mid) !important; }
[data-theme="dark"] .vl-detail-copy-btn:hover { background: var(--surface-2) !important; border-color: var(--purple-mid) !important; }
[data-theme="dark"] .vl-detail-header-close { color: var(--purple-mid) !important; }
[data-theme="dark"] .vl-detail-meta { border-bottom-color: var(--border) !important; }
[data-theme="dark"] .vl-detail-meta-item { border-right-color: var(--border) !important; }
[data-theme="dark"] .vl-detail-meta-label { color: var(--muted) !important; }
[data-theme="dark"] .vl-detail-meta-value { color: var(--text) !important; }
[data-theme="dark"] .vl-detail-field-label { color: var(--muted) !important; }
[data-theme="dark"] .vl-detail-field-value { color: var(--text) !important; }
[data-theme="dark"] .vl-vector-key { background: var(--surface-2) !important; color: var(--text) !important; }

/* Recent Activity (re-declared with its own purple-tinted hex a second
   time later in vectorlog.css — same overrides apply either way). Title/
   sub/time text set explicitly with !important rather than relying on the
   var(--vl-text)/var(--vl-muted) cascade from the root redefinition above,
   since that wasn't resolving visibly for this section. */
[data-theme="dark"] .vl-activity-section { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .vl-activity-header {
    background: rgba(157, 111, 240, .18) !important;
    border-bottom-color: var(--border) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .vl-activity-item {
    background: var(--surface) !important;
    border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .vl-activity-item:hover { background: var(--surface-alt) !important; }
[data-theme="dark"] .vl-activity-title { color: var(--text) !important; }
[data-theme="dark"] .vl-activity-sub,
[data-theme="dark"] .vl-activity-time { color: var(--muted) !important; }

/* Full-screen loader overlay — translucent white meant for a light page */
[data-theme="dark"] #vl-loader { background: rgba(11, 11, 18, .85); }

[data-theme="dark"] .kt-user-card__position{
    color:white !important;
}

/* ══════════════════════════════════════════════════════════════
   INTERVIEW RESPONSE V2 (interview_response_v2.blade.php) — the redesigned
   evaluation page served instead of interview_response.blade.php when the
   admin_theme cookie is "dark" (see InterviewResultController). Has its own
   complete --ir-* token system defined once, unconditionally, at :root —
   same pattern as --vl-*/--ep-* elsewhere: redefining the tokens here with
   !important covers most of the page (text, borders, surfaces, status
   colors) in one shot, since almost everything reads them via var().
   Values reuse the same dark palette already established for the rest of
   the app (--text/--muted/--border/--surface/--Schemes-Background) so this
   page matches visually instead of having its own competing dark theme.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --ir-primary:        #9D6FF0 !important;
    --ir-primary-dark:   #7c3aed !important;
    --ir-primary-light:  #a78bfa !important;
    --ir-primary-50:     rgba(157,111,240,.08) !important;
    --ir-primary-100:    rgba(157,111,240,.15) !important;
    --ir-primary-soft:   rgba(157,111,240,.12) !important;
    --ir-primary-border: #5a4a7a !important;

    --ir-success:        #4ade80 !important;
    --ir-success-ink:    #8ee6a6 !important;
    --ir-success-bg:     rgba(55,167,69,.15) !important;
    --ir-success-border: #4a8a53 !important;

    --ir-warning:        #ffc98a !important;
    --ir-warning-ink:    #ffc98a !important;
    --ir-warning-bg:     rgba(212,136,51,.15) !important;
    --ir-warning-border: #cc8a3d !important;

    --ir-danger:         #ff9aa6 !important;
    --ir-danger-ink:     #ff9aa6 !important;
    --ir-danger-bg:      rgba(220,53,69,.15) !important;
    --ir-danger-border:  #dc3545 !important;

    --ir-ink:            #e5eaf2 !important;
    --ir-ink-soft:       #C3CBDC !important;
    --ir-ink-faint:      #8a8a9a !important;
    --ir-border:         #263047 !important;
    --ir-border-soft:    #1E2C46 !important;
    --ir-surface:        #121C2B !important;
    --ir-bg:             #0B1220 !important;
}

/* Spots that bypass the --ir-* tokens with literal hex, found while reading
   through the page's own <style> block. */
[data-theme="dark"] .btn-cancel { background: var(--ir-surface) !important; }
[data-theme="dark"] .btn-cancel:hover { background: var(--ir-border-soft) !important; }
/* Donut/ring track color + the white "punch hole" center — same pattern as
   the original interview_response.blade.php's .progress-circle fix. */
[data-theme="dark"] .progress-circle { background: conic-gradient(var(--ir-border-soft) 0deg, var(--ir-border-soft) var(--progress), transparent var(--progress)) !important; }
[data-theme="dark"] .progress-circle::before { background: var(--ir-surface) !important; }
[data-theme="dark"] .progress-green { background: conic-gradient(var(--ir-success) 0deg, var(--ir-success) var(--progress), var(--ir-border-soft) var(--progress)) !important; }
[data-theme="dark"] .progress-yellow { background: conic-gradient(var(--ir-warning) 0deg, var(--ir-warning) var(--progress), var(--ir-border-soft) var(--progress)) !important; }
[data-theme="dark"] .progress-red { background: conic-gradient(var(--ir-danger) 0deg, var(--ir-danger) var(--progress), var(--ir-border-soft) var(--progress)) !important; }

/* interview_response_v2.blade.php — remaining spots that bypass the --ir-*
   tokens with literal hex/rgba, found by reading the full page style block.
   Most of the page (cards, badges, monitoring icons, tk-score pills etc.)
   already reads --ir-success-bg/--ir-warning-bg/--ir-danger-bg/etc. via
   var(--token, fallback) and picked up the root redefinition above
   automatically — these are only the spots hardcoded outside that system. */
[data-theme="dark"] .dot { background-color: var(--ir-border) !important; }
[data-theme="dark"] .view-btn { background: rgba(255,255,255,.12) !important; color: var(--ir-ink) !important; }
[data-theme="dark"] .ir-integrity-summary-icon { background: rgba(255,255,255,.08) !important; }
[data-theme="dark"] #applicant-header-card {
    background: linear-gradient(120deg, var(--ir-primary-50) 0%, var(--ir-surface) 60%, var(--ir-surface) 100%) !important;
}
[data-theme="dark"] #applicant-header-card .ahc-avatar { border-color: var(--ir-surface) !important; }
[data-theme="dark"] #applicant-header-card .ahc-meta span { background: rgba(255,255,255,.06) !important; }
[data-theme="dark"] #ai-summary-card {
    background: linear-gradient(180deg, var(--ir-surface) 0%, var(--ir-border-soft) 100%) !important;
}
[data-theme="dark"] .tk-card-body { background: var(--ir-border-soft) !important; }
[data-theme="dark"] .progress-bar-container { background-color: var(--ir-border) !important; }
[data-theme="dark"] .ir-qa-answer { background: var(--ir-border-soft) !important; }
[data-theme="dark"] #frh-grid.ag-theme-alpine .ag-row-odd { background: var(--ir-border-soft) !important; }
[data-theme="dark"] .frh-changed { background-color: rgba(74, 222, 128, .3) !important; color: var(--ir-ink) !important; }

/* Evaluation modal (Final Recommendation / Fraud Status) — a second <style>
   block further down the same file, with its own separate set of hardcoded
   whites. */
[data-theme="dark"] .criteria-card { background: var(--ir-surface) !important; }
[data-theme="dark"] .criteria-card textarea.form-control,
[data-theme="dark"] .criteria-card textarea.form-control:focus,
[data-theme="dark"] .criteria-score-input,
[data-theme="dark"] .criteria-score-input:focus,
[data-theme="dark"] .fraud-card select#fraud_status,
[data-theme="dark"] #final_score {
    background: var(--ir-border-soft) !important;
    color: var(--ir-ink) !important;
}
[data-theme="dark"] .final-rec-block {
    background: linear-gradient(135deg, var(--ir-primary-50), var(--ir-border-soft)) !important;
}
[data-theme="dark"] .final-rec-block textarea.form-control { background: var(--ir-border-soft) !important; }
[data-theme="dark"] .fraud-card { background: var(--ir-surface) !important; }
[data-theme="dark"] .modal-sticky-footer { background: var(--ir-surface) !important; }

/* Video popup (watch answer recording) */
[data-theme="dark"] .video-popup-content { background: var(--ir-surface) !important; }
[data-theme="dark"] .video-popup-close { background: var(--ir-border-soft) !important; color: var(--ir-ink) !important; }
[data-theme="dark"] .video-popup-close:hover { background: var(--ir-border) !important; }

/* Q&A score badge + eye-tracking/lip-sync indicators — inline PHP-computed
   styles (score-badge-qa class + two unclassed spans further down), all
   drawing from the same 3 recurring light pastel combos. Matched by the
   distinctive background hex rather than full property strings, since the
   two code paths format the inline style differently (with/without spaces
   after the colon). Scoped under .ir-qa-body/.score-badge-qa so this
   doesn't reach unrelated #f8f9fa usage elsewhere in the app. */
[data-theme="dark"] .score-badge-qa[style*="#e8f5e9"],
[data-theme="dark"] .ir-qa-body span[style*="#e8f5e9"] {
    background-color: rgba(55, 167, 69, .2) !important;
    color: #8ee6a6 !important;
    border-color: #4a8a53 !important;
}
[data-theme="dark"] .score-badge-qa[style*="#fff8e1"],
[data-theme="dark"] .ir-qa-body span[style*="#fff8e1"] {
    background-color: rgba(212, 136, 51, .2) !important;
    color: #ffc98a !important;
    border-color: #cc8a3d !important;
}
[data-theme="dark"] .score-badge-qa[style*="#fce4ec"],
[data-theme="dark"] .ir-qa-body span[style*="#fce4ec"] {
    background-color: rgba(220, 53, 69, .2) !important;
    color: #ff9aa6 !important;
    border-color: #dc3545 !important;
}
[data-theme="dark"] .ir-qa-body span[style*="#f8f9fa"] {
    background-color: var(--ir-border-soft) !important;
    color: var(--ir-ink-faint) !important;
    border-color: var(--ir-border) !important;
}

/* #header-info-bar reads background: var(--ir-ink) — in light mode --ir-ink
   is a dark ink color, so this pill is intentionally dark-on-light-page.
   --ir-ink is redefined to a light text color for dark mode (needed for its
   ~100 other uses as text color throughout this page), which would flip
   this one background usage to light too; pin it back to a dark surface
   explicitly instead. */
[data-theme="dark"] #header-info-bar { background: var(--ir-border-soft) !important; }
[data-theme="dark"] #kt_subheader_wrapper{
    background:  var(--ir-surface) !important;

}
/* TinyMCE (Eligibility Criteria / Evaluation Steps rich-text editors, etc.)
   — the editor iframe's own document/body is untouched here on purpose
   (typed content should stay normal black-on-white like any document), only
   the surrounding chrome (menu bar, toolbar, status bar, borders) goes dark. */
[data-theme="dark"] .tox-tinymce { border-color: var(--border) !important; }
[data-theme="dark"] .tox .tox-editor-header,
[data-theme="dark"] .tox .tox-menubar,
[data-theme="dark"] .tox .tox-toolbar,
[data-theme="dark"] .tox .tox-toolbar__primary,
[data-theme="dark"] .tox .tox-toolbar-overlord,
[data-theme="dark"] .tox .tox-statusbar {
    background-color: var(--surface-alt) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .tox .tox-mbtn,
[data-theme="dark"] .tox .tox-tbtn,
[data-theme="dark"] .tox .tox-statusbar a,
[data-theme="dark"] .tox .tox-statusbar__path-item,
[data-theme="dark"] .tox .tox-statusbar__wordcount {
    color: var(--text) !important;
}
[data-theme="dark"] .tox .tox-mbtn__select-label,
[data-theme="dark"] .tox .tox-tbtn__select-label {
    color: var(--text) !important;
}
[data-theme="dark"] .tox .tox-mbtn svg,
[data-theme="dark"] .tox .tox-tbtn svg {
    fill: var(--text) !important;
}
[data-theme="dark"] .tox .tox-mbtn:hover,
[data-theme="dark"] .tox .tox-tbtn:hover,
[data-theme="dark"] .tox .tox-mbtn--active,
[data-theme="dark"] .tox .tox-tbtn--enabled {
    background-color: var(--surface-2) !important;
}
[data-theme="dark"] .tox .tox-toolbar__group {
    border-color: var(--border) !important;
}
[data-theme="dark"] .tox .tox-menu,
[data-theme="dark"] .tox .tox-collection__group {
    background-color: var(--surface-alt) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .tox .tox-collection__item {
    color: var(--text) !important;
}
[data-theme="dark"] .tox .tox-collection__item--active,
[data-theme="dark"] .tox .tox-collection__item:hover {
    background-color: var(--surface-2) !important;
}
[data-theme="dark"] .tox .tox-collection__item-label,
[data-theme="dark"] .tox .tox-collection__item-icon svg {
    color: var(--text) !important;
    fill: var(--text) !important;
}

/* The raw <textarea> TinyMCE targets (e.g. #kt-tinymce-criteria) is briefly
   visible with its plain white browser-default styling and unprocessed HTML
   text while TinyMCE is still loading/initializing and hasn't swapped it for
   its iframe editor yet — style it dark too so that flash doesn't happen. */
[data-theme="dark"] textarea[id^="kt-tinymce"],
[data-theme="dark"] textarea[id^="kt-ckeditor"] {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* Email Template editor (#kt-tinymce) only — its content area is meant to go
   fully dark (see the matching #kt-tinymce id check in header.blade.php's
   applyTinyMCEDarkMode), unlike the Eligibility Criteria / Evaluation Steps
   editors above, which keep white "paper" content on purpose. The iframe
   element itself (TinyMCE always names it "{editorId}_ifr") carries its own
   white background from the skin CSS in this parent document, separate from
   the dark background the JS injects into the iframe's own body — both are
   needed or a white edge/flash shows through before the JS body override
   applies. */
[data-theme="dark"] #kt-tinymce_ifr {
    background: var(--surface) !important;
}

/* AI Prompts tab toolbar (Search prompts / All Products filter) — the
   select's colors are inline styles in add_customer.blade.php, so they need
   !important to be overridden here. */
[data-theme="dark"] .prompts-toolbar input[type=search],
[data-theme="dark"] #promptProductFilter {
    background: var(--surface-alt) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
[data-theme="dark"] .prompts-toolbar input[type=search]::placeholder {
    color: var(--muted) !important;
}
[data-theme="dark"] .prompts-toolbar input[type=search]:focus {
    border-color: var(--purple) !important;
}

[data-theme="dark"] .stat-card .kt-portlet {
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════════
   STUDENT EXCEL EXPORTER (export_student.blade.php) — the page's own
   <style> block hardcodes light-mode colors (#fff card, #f7f8fa toolbar,
   #74788d muted text) that aren't covered by the global .kt-portlet /
   .form-control rules above, since they're page-local classes.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .importer-toolbar {
    background: var(--surface-alt) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .importer-subtitle,
[data-theme="dark"] .step-card__desc {
    color: var(--muted) !important;
}
[data-theme="dark"] .step-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .step-card__title {
    color: var(--text) !important;
}
/* Image upload progress indicator (TinyMCE image uploads) — its own
   <style> block hardcodes #555 text and a #ccc spinner ring; duplicated
   identically in evaluationcriteria.blade.php, template_list.blade.php
   and criteria.blade.php. */
[data-theme="dark"] .upload-progress {
    color: var(--muted) !important;
}
[data-theme="dark"] .upload-spinner {
    border-color: var(--border) !important;
    border-top-color: #2563eb !important;
}

/* [data-theme="dark"]  .ag-cell-value span{
    color:#fff !important;
} */

/* ══════════════════════════════════════════════════════════════
   MOCK INTERVIEW HISTORY (mock_interview_history.blade.php) — the whole
   page (summary cards, comparison table, tab strip, attempt panels, score
   cards) is styled via a page-local <style> block hardcoded to light-mode
   colors (#fff cards/panels, #f8f9fa tabs, #3f4047/#6c757d/#9099a3 text),
   never scoped to [data-theme="dark"] at all.
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .mih-card {
    background: var(--surface);
    border-color: var(--border);
}
[data-theme="dark"] .mih-card .mih-val { color: var(--text); }
[data-theme="dark"] .mih-card .mih-label { color: var(--muted); }
/* Up/down/same summary card variants — same green/red/neutral tokens used
   elsewhere for delta indicators (.itw-step.done, .itw-mic-btn.recording). */
[data-theme="dark"] .mih-card.card-up {
    background: rgba(74, 138, 83, .15);
    border-color: #4a8a53;
}
[data-theme="dark"] .mih-card.card-down {
    background: rgba(220, 53, 69, .15);
    border-color: #dc3545;
}
[data-theme="dark"] .mih-card.card-same {
    background: var(--surface-2);
    border-color: var(--border);
}
[data-theme="dark"] .val-up,
[data-theme="dark"] .delta-up { color: #8ee6a6 !important; }
[data-theme="dark"] .val-down,
[data-theme="dark"] .delta-down { color: #ff9aa6 !important; }
[data-theme="dark"] .val-same,
[data-theme="dark"] .delta-same { color: var(--muted) !important; }

[data-theme="dark"] .section-title { color: var(--text); }

/* Tab strip — inactive tabs and scroll arrows only; .mih-tab.active and
   .mih-tabs-scroll's border already use the brand lavender/purple pair,
   which reads fine unchanged on a dark background. */
[data-theme="dark"] .mih-tab {
    background: var(--surface-2);
    color: var(--muted);
    border-color: var(--border);
}
[data-theme="dark"] .mih-tab:hover {
    background: var(--surfaces-surface-tint-14);
    color: var(--purple);
}
[data-theme="dark"] .mih-scroll-btn {
    background: var(--surface);
    border-color: var(--border);
    color: var(--purple);
}
[data-theme="dark"] .mih-scroll-btn:hover { background: var(--surface-2); }

/* Attempt detail panel — border stays the brand lavender, only the fill
   needs to flip. */
[data-theme="dark"] .mih-panel { background: var(--surface); }
[data-theme="dark"] .mih-panel-header { border-bottom-color: var(--border); }
[data-theme="dark"] .mih-meta-item { color: var(--muted); }
[data-theme="dark"] .mih-meta-item strong { color: var(--text); }

[data-theme="dark"] .mih-score-card {
    background: var(--surface-2);
    border-color: var(--border);
}
[data-theme="dark"] .mih-score-card .sc-val { color: var(--text); }
[data-theme="dark"] .mih-score-card .sc-lbl { color: var(--muted); }

/* "Previous vs Latest Attempt" comparison table — its header row already
   goes dark via the plain .table thead th fix further up, but the body
   cells stayed solid white. Root cause is Bootstrap 5's own table core CSS
   (bootstrap.min.css, loaded on this page): .table's --bs-table-bg
   defaults to --bs-body-bg (white), and cells are actually painted via an
   `inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type,
   var(--bs-table-accent-bg)))` box-shadow rather than a plain
   background-color, so the earlier .table-bordered/.table background fixes
   (aimed at Bootstrap 4's plain background-color model) never touched it.
   Neutralize the box-shadow and force the background directly. */
[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: var(--surface) !important;
    box-shadow: none !important;
    color: var(--text) !important;
}