/* ========================================================================== 
   FER shared Light / Dark theme
   --------------------------------------------------------------------------
   Light is the product default. Dark is user-selected and intentionally uses
   layered navy surfaces instead of blanket black overrides.
   ========================================================================== */

:root {
  --theme-bg: #F5F7FB;
  --theme-bg-alt: #FFFFFF;
  --theme-surface: #FFFFFF;
  --theme-surface-raised: #FFFFFF;
  --theme-surface-soft: #F8FAFC;
  --theme-surface-muted: #EEF3F9;
  --theme-text: #101828;
  --theme-copy: #475467;
  --theme-muted: #7C8AA0;
  --theme-line: #E2E8F2;
  --theme-line-strong: #CFD9E7;
  --theme-input: #FFFFFF;
  --theme-topbar: rgba(255,255,255,.94);
  --theme-shadow-sm: 0 2px 8px rgba(16,24,40,.06);
  --theme-shadow-md: 0 10px 28px rgba(16,24,40,.10);
  --theme-shadow-lg: 0 22px 55px rgba(16,24,40,.16);

  --theme-info-bg: #EEF4FF;
  --theme-info-line: #C8D7FF;
  --theme-info-text: #2854B8;
  --theme-success-bg: #ECFDF3;
  --theme-success-line: #B7E6CC;
  --theme-success-text: #067647;
  --theme-warning-bg: #FFF8E8;
  --theme-warning-line: #EED79F;
  --theme-warning-text: #8A5A00;
  --theme-danger-bg: #FFF1F2;
  --theme-danger-line: #F0C5CB;
  --theme-danger-text: #B42318;
  --theme-teal-bg: #EAF9F7;
  --theme-teal-line: #B9E3DF;
  --theme-teal-text: #08756F;
  --theme-purple-bg: #F3F0FF;
  --theme-purple-line: #D8D0FF;
  --theme-purple-text: #5A4BC6;
}

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

  /* Core canvas and surface hierarchy. */
  --theme-bg: #08111F;
  --theme-bg-alt: #0B1526;
  --theme-surface: #101C2F;
  --theme-surface-raised: #142238;
  --theme-surface-soft: #17263D;
  --theme-surface-muted: #1C2D47;
  --theme-text: #F7FAFF;
  --theme-copy: #B8C5D8;
  --theme-muted: #8FA1B9;
  --theme-line: #263A55;
  --theme-line-strong: #365170;
  --theme-input: #0D192B;
  --theme-topbar: rgba(10,20,35,.92);
  --theme-shadow-sm: 0 2px 10px rgba(0,0,0,.18);
  --theme-shadow-md: 0 14px 34px rgba(0,0,0,.22);
  --theme-shadow-lg: 0 24px 60px rgba(0,0,0,.30);

  /* Semantic surfaces keep their meaning in dark mode. */
  --theme-info-bg: #13264A;
  --theme-info-line: #294A83;
  --theme-info-text: #AFC8FF;
  --theme-success-bg: #10291F;
  --theme-success-line: #24533D;
  --theme-success-text: #7EE2AE;
  --theme-warning-bg: #2A2313;
  --theme-warning-line: #5A4720;
  --theme-warning-text: #F4D27C;
  --theme-danger-bg: #311A20;
  --theme-danger-line: #62303A;
  --theme-danger-text: #FFADB7;
  --theme-teal-bg: #102A2B;
  --theme-teal-line: #245355;
  --theme-teal-text: #73E2DE;
  --theme-purple-bg: #241E43;
  --theme-purple-line: #4E427E;
  --theme-purple-text: #C8BAFF;

  /* Existing shared aliases used across the legacy/project styles. */
  --ink-900: var(--theme-text);
  --ink-600: var(--theme-copy);
  --ink-400: var(--theme-muted);
  --bg-soft: var(--theme-bg);
  --line-200: var(--theme-line);
  --card: var(--theme-surface);
  --bg: var(--theme-bg);
  --line: var(--theme-line);

  --platform-bg: var(--theme-bg);
  --platform-line: var(--theme-line);
  --platform-text: var(--theme-text);
  --platform-muted: var(--theme-copy);
  --platform-card: var(--theme-surface);

  --admin-bg: var(--theme-bg);
  --admin-panel: var(--theme-surface);
  --admin-ink: var(--theme-text);
  --admin-muted: var(--theme-copy);
  --admin-line: var(--theme-line);
  --admin-shadow: var(--theme-shadow-md);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: var(--theme-bg);
  color: var(--theme-text);
}

:root[data-theme="dark"] ::selection {
  background: rgba(64, 112, 255, .38);
  color: #fff;
}

:root[data-theme="dark"] * {
  scrollbar-color: #365170 #0B1526;
}

/* ========================================================================== 
   Theme toggle
   ========================================================================== */
.fer-theme-toggle {
  display: inline-flex;
  min-width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 0 11px;
  border: 1px solid var(--theme-line);
  border-radius: 11px;
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow-sm);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.fer-theme-toggle:hover {
  transform: translateY(-1px);
  border-color: #6489EF;
  background: var(--theme-surface-raised);
  box-shadow: 0 10px 22px rgba(23,83,255,.14);
}
.fer-theme-toggle:active { transform: translateY(0) scale(.98); }
.fer-theme-toggle:focus-visible { outline: 3px solid rgba(64,112,255,.28); outline-offset: 2px; }
.fer-theme-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fer-theme-toggle-floating { position: fixed; z-index: 1800; top: 18px; right: 18px; }

/* Marketing/public nav is dark in both themes, so the toggle stays glassy. */
.fer-homepage .nav-actions .fer-theme-toggle,
body.fer-public-page .nav-actions .fer-theme-toggle {
  border-color: rgba(255,255,255,.17);
  background: rgba(255,255,255,.075);
  color: #F8FBFF;
  box-shadow: none;
  backdrop-filter: blur(12px);
}
.fer-homepage .nav-actions .fer-theme-toggle:hover,
body.fer-public-page .nav-actions .fer-theme-toggle:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.30);
}

/* ========================================================================== 
   Homepage + public feature marketing pages
   ========================================================================== */
:root[data-theme="dark"] .fer-homepage {
  --fer-ink: var(--theme-text);
  --fer-copy: var(--theme-copy);
  --fer-line: var(--theme-line);
  --fer-soft: var(--theme-bg);
  --fer-white: var(--theme-surface);
  background: var(--theme-bg);
  color: var(--theme-text);
}

/* Keep the dark hero / navbar language intact; only convert light content. */
:root[data-theme="dark"] .fer-homepage :is(
  .journey-section,
  .capability-section,
  .how-section,
  .pricing-section,
  .faq-section,
  .launch-section,
  .feature-section,
  .feature-journey-section,
  .feature-story-section
) {
  background-color: var(--theme-bg);
  border-color: var(--theme-line);
}

:root[data-theme="dark"] .fer-homepage :is(
  .trust-band,
  .thirty-second-strip,
  .pricing-support-strip,
  .journey-card,
  .capability-card,
  .pricing-card,
  .workflow-card,
  .choice-card,
  .trust-card,
  .faq-item,
  .industry-grid a,
  .story-row,
  .journey-step,
  .showcase-visual,
  .feature-visual,
  .visual-top,
  .visual-list,
  .visual-ai,
  .visual-pipeline,
  .visual-chat,
  .visual-route,
  .visual-docs
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text);
  box-shadow: var(--theme-shadow-sm);
}

:root[data-theme="dark"] .fer-homepage :is(
  .platform-window-head,
  .window-nav,
  .workflow-board article,
  .operations-row > div,
  .mini-pipeline span,
  .attendance-visual span,
  .capability-tags span,
  .location-feature-points span,
  .mock-window-head,
  .mock-window-body,
  .mock-row,
  .hero-start-panel,
  .hero-start-content,
  .hero-start-tabs
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text);
}

:root[data-theme="dark"] .fer-homepage :is(
  .feature-section-heading h2,
  .journey-heading h2,
  .showcase-copy h2,
  .story-row h3,
  .journey-step h3,
  .journey-card h2,
  .journey-card h3,
  .capability-card h3,
  .pricing-card h3,
  .faq-item h3
) { color: var(--theme-text); }

:root[data-theme="dark"] .fer-homepage :is(
  .feature-section-heading > p:last-child,
  .journey-heading > p,
  .showcase-lead,
  .story-intro > p:last-child,
  .story-row p,
  .journey-step p,
  .journey-card p,
  .capability-card p,
  .pricing-card p,
  .pricing-card li,
  .faq-item p
) { color: var(--theme-copy); }

/* Pricing gets layered surfaces rather than one flat dark block. */
:root[data-theme="dark"] .fer-homepage .pricing-section {
  background:
    radial-gradient(circle at 12% 0%, rgba(23,83,255,.10), transparent 28%),
    radial-gradient(circle at 88% 6%, rgba(10,140,133,.07), transparent 26%),
    linear-gradient(180deg, #0B1526 0%, #08111F 100%) !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-card {
  background: linear-gradient(155deg, #142238 0%, #101C2F 100%) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}
:root[data-theme="dark"] .fer-homepage .pricing-card:hover {
  border-color: #496A9B !important;
  box-shadow: 0 20px 44px rgba(0,0,0,.24);
}
:root[data-theme="dark"] .fer-homepage .pricing-support-strip {
  background: #0D192B !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-support-strip .support-item + .support-item {
  border-color: var(--theme-line) !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-support-strip :is(strong,b) { color: #E7EEFA; }
:root[data-theme="dark"] .fer-homepage .pricing-support-strip :is(span,p,small) { color: var(--theme-copy); }

/* Neutral controls in marketing panels. */
:root[data-theme="dark"] .fer-homepage :is(.field-control, .hero-start-tabs button:not(.active)) {
  border-color: var(--theme-line) !important;
  background: var(--theme-input) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .fer-homepage :is(input,select,textarea) {
  color: var(--theme-text);
}
:root[data-theme="dark"] .fer-homepage :is(input,textarea)::placeholder { color: #7F91AA; }

/* Keep primary / inverse CTA text readable instead of inheriting generic text. */
:root[data-theme="dark"] .fer-homepage :is(
  .nav-cta,
  .hero-primary,
  .feature-btn.primary,
  .plan-button-primary,
  .plan-button,
  .journey-card .btn,
  .feature-cta .feature-btn
) { color: #fff !important; }

/* Feature detail visual accents stay dimensional. */
:root[data-theme="dark"] .feature-detail-page .feature-section:nth-of-type(even) {
  background: var(--theme-bg-alt);
}
:root[data-theme="dark"] .feature-detail-page .showcase-visual,
:root[data-theme="dark"] .feature-detail-page .feature-visual {
  background:
    radial-gradient(circle at 80% 10%, rgba(23,83,255,.10), transparent 36%),
    var(--theme-surface) !important;
}

:root[data-theme="dark"] .fer-homepage .home-footer {
  background: #050E1B;
  border-color: #1F314A;
  color: #D5E0EF;
}

/* ========================================================================== 
   Public pages (jobs, candidates, employer, auth, legal, contact, checkout)
   ========================================================================== */
:root[data-theme="dark"] body.fer-public-page {
  --public-ink: var(--theme-text);
  --public-copy: var(--theme-copy);
  --public-line: var(--theme-line);
  --public-soft: var(--theme-bg);
  --public-white: var(--theme-surface);
  --public-cyan-soft: var(--theme-teal-bg);
  background: var(--theme-bg);
  color: var(--theme-text);
}

/* The navy top band is already the strongest part of these pages; preserve it. */
:root[data-theme="dark"] body.fer-public-page::before {
  background:
    radial-gradient(circle at 84% 20%, rgba(36,120,255,.24), transparent 30rem),
    linear-gradient(125deg, #030D1B 0%, #06172D 50%, #0A2A52 100%);
}

:root[data-theme="dark"] body.fer-public-page :is(
  .public-results-surface,
  .candidate-directory-card,
  .directory-loading-card,
  .candidate-detail-panel,
  .candidate-public-hero,
  .job-list-card,
  .recent-job-card,
  .employer-hero-card,
  .ai-job-card,
  .job-post-form,
  .side-card,
  .auth-shell,
  .register-shell,
  .auth-form-wrap,
  .register-form-wrap,
  .policy-card,
  .policy-toc,
  .content-card,
  .public-content-card,
  .public-info-card,
  .contact-card,
  .checkout-form,
  .checkout-summary,
  .checkout-success,
  .checkout-heading
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text);
  box-shadow: var(--theme-shadow-sm);
}

:root[data-theme="dark"] body.fer-public-page :is(
  .candidate-search-bar,
  .jobs-toolbar,
  .public-product-preview,
  .preview-step-list > div,
  .candidate-subscription-gate,
  .candidate-guest-gate
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text);
}

:root[data-theme="dark"] body.fer-public-page :is(h1,h2,h3,h4,strong,label) { color: var(--theme-text); }
:root[data-theme="dark"] body.fer-public-page :is(
  p, small, .muted, .field-hint, .candidate-meta, .job-meta, .auth-helper,
  .contact-card-heading > p:last-child, .contact-privacy-note
) { color: var(--theme-copy); }

:root[data-theme="dark"] body.fer-public-page :is(input,select,textarea) {
  border-color: var(--theme-line) !important;
  background: var(--theme-input) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] body.fer-public-page :is(input,textarea)::placeholder { color: #7F91AA; }
:root[data-theme="dark"] body.fer-public-page select option { background: #101C2F; color: #F7FAFF; }

:root[data-theme="dark"] body.fer-public-page :is(.btn.secondary,.btn.ghost) {
  border-color: var(--theme-line-strong) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] body.fer-public-page :is(.btn.secondary,.btn.ghost):hover {
  border-color: #4E6F9C !important;
  background: var(--theme-surface-muted) !important;
}

/* Candidate/job cards need an internal hierarchy, not a single flat block. */
:root[data-theme="dark"] body.fer-public-page :is(
  .candidate-directory-card,
  .job-list-card,
  .recent-job-card
) :is(.candidate-stats > div, .job-meta-panel, .card-meta-box) {
  background: var(--theme-surface-soft) !important;
  border-color: var(--theme-line) !important;
}

/* Auth pages: dark form side, richer navy visual side. */
:root[data-theme="dark"] body.fer-public-page :is(.auth-visual,.register-visual) {
  background:
    radial-gradient(circle at 20% 12%, rgba(23,83,255,.20), transparent 34%),
    linear-gradient(145deg, #07152A 0%, #0A2548 100%) !important;
}

/* Legal/contact pages keep readable article surfaces. */
:root[data-theme="dark"] body.fer-public-page.legal-page :is(.policy-card,.policy-toc),
:root[data-theme="dark"] body.fer-public-page.contact-page .contact-card {
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

:root[data-theme="dark"] body.fer-public-page .home-footer {
  background: #050E1B;
  border-color: #1F314A;
  color: #D5E0EF;
}

/* ========================================================================== 
   Shared platform shell (Candidate / Employer / shared workspace)
   ========================================================================== */
:root[data-theme="dark"] body.platform-page,
:root[data-theme="dark"] body[data-platform-role] {
  background: var(--theme-bg);
  color: var(--theme-text);
}

/* Sidebar is already a dark branded component; only deepen the edge. */
:root[data-theme="dark"] .platform-sidebar {
  background:
    radial-gradient(circle at 10% 0%, rgba(74,112,229,.18), transparent 34%),
    linear-gradient(180deg, #07172F 0%, #040D1D 100%);
  box-shadow: 12px 0 34px rgba(0,0,0,.16);
}

:root[data-theme="dark"] .platform-topbar {
  border-color: var(--theme-line);
  background: var(--theme-topbar);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
:root[data-theme="dark"] .platform-topbar-copy h1 { color: var(--theme-text); }
:root[data-theme="dark"] .platform-topbar-copy p { color: var(--theme-muted); }

:root[data-theme="dark"] :is(
  .platform-user-button,
  .platform-user-menu,
  .notification-button,
  .notification-dropdown,
  .platform-menu-toggle
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow-sm);
}

/* Existing style.css uses !important on the notification SVG. Override it here. */
:root[data-theme="dark"] .platform-topbar .notification-button svg {
  stroke: #C7D4E8 !important;
}
:root[data-theme="dark"] .platform-topbar .notification-button:hover svg,
:root[data-theme="dark"] .platform-topbar .notification-center.open .notification-button svg {
  stroke: #83A6FF !important;
}
:root[data-theme="dark"] .notification-badge { border-color: var(--theme-surface-raised); }
:root[data-theme="dark"] :is(.notification-dropdown-head,.notification-item) { border-color: var(--theme-line) !important; }
:root[data-theme="dark"] .notification-item:hover { background: var(--theme-surface-soft) !important; }

:root[data-theme="dark"] body[data-platform-role] :is(
  .platform-page-heading,
  .dashboard-panel,
  .dashboard-kpis article,
  .candidate-kpi-grid article,
  .platform-card,
  .platform-table-wrap,
  .platform-plan,
  .candidate-work-card,
  .candidate-assignment-card,
  .application-card,
  .job-card,
  .billing-card,
  .attendance-card,
  .assignment-card,
  .form-card,
  .settings-card,
  .empty-state,
  .candidate-offer-card,
  .accepted-talent-list > article,
  .profile-completion-panel,
  .freelancer-profile-card,
  .profile-steps-panel
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text);
  box-shadow: var(--theme-shadow-sm);
}

:root[data-theme="dark"] body[data-platform-role] :is(
  .platform-module-grid a,
  .next-action-list li,
  .candidate-next-actions a,
  .candidate-work-facts > span,
  .job-performance-metrics span,
  .selected-work-time-grid > span,
  .work-session-time-grid > span,
  .evidence-placeholder
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-text);
}

:root[data-theme="dark"] body[data-platform-role] :is(h1,h2,h3,h4,strong,b,label,th) { color: var(--theme-text); }
:root[data-theme="dark"] body[data-platform-role] :is(p,small,td,.field-hint,.muted,.assignment-card-date) { color: var(--theme-copy); }

:root[data-theme="dark"] body[data-platform-role] :is(input,select,textarea,.search-input) {
  border-color: var(--theme-line) !important;
  background: var(--theme-input) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] body[data-platform-role] :is(input,textarea)::placeholder { color: #7F91AA; }
:root[data-theme="dark"] body[data-platform-role] select option { background: #101C2F; color: #F7FAFF; }

:root[data-theme="dark"] body[data-platform-role] :is(.btn.secondary,.secondary-button,.table-action) {
  border-color: var(--theme-line-strong) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
}

/* Tables: separate header, rows and hover state. */
:root[data-theme="dark"] body[data-platform-role] :is(table, .table) {
  color: var(--theme-copy);
}
:root[data-theme="dark"] body[data-platform-role] :is(thead, th) {
  background: var(--theme-surface-soft) !important;
  border-color: var(--theme-line) !important;
}
:root[data-theme="dark"] body[data-platform-role] :is(td,tr) { border-color: var(--theme-line) !important; }
:root[data-theme="dark"] body[data-platform-role] tbody tr:hover { background: rgba(255,255,255,.025); }

/* Standalone dashboards loaded before platform shell enhancement. */
:root[data-theme="dark"] body.candidate-dashboard-page,
:root[data-theme="dark"] body.employer-dashboard-page,
:root[data-theme="dark"] body.fer-candidate-workspace-page,
:root[data-theme="dark"] body.fer-ops-dashboard-page {
  background:
    radial-gradient(circle at 8% 0%, rgba(23,83,255,.08), transparent 28%),
    var(--theme-bg) !important;
  color: var(--theme-text);
}
:root[data-theme="dark"] :is(.candidate-dashboard-page,.employer-dashboard-page) :is(
  .dashboard-panel,
  .dashboard-kpis article,
  .candidate-kpi-grid article,
  .fer-ops-mini-card,
  .profile-snapshot-panel,
  .candidate-ai-tools-panel,
  .fer-assignment-panel,
  .fer-shift-panel,
  .highlighted-work-panel,
  .refined-candidate-assignment,
  .candidate-demo-job-list article,
  .candidate-demo-application-list article,
  .job-performance-row,
  .attendance-summary-list article,
  .attendance-feed-list article
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow-sm) !important;
}
:root[data-theme="dark"] :is(.candidate-dashboard-page,.employer-dashboard-page) :is(h1,h2,h3,h4,strong,b,label) { color: var(--theme-text) !important; }
:root[data-theme="dark"] :is(.candidate-dashboard-page,.employer-dashboard-page) :is(p,small,.assignment-card-date) { color: var(--theme-copy) !important; }
:root[data-theme="dark"] .employer-dashboard-page .job-performance-metrics span { background: var(--theme-surface-soft) !important; color: var(--theme-copy) !important; }

/* ========================================================================== 
   Recruiter workspace
   ========================================================================== */
:root[data-theme="dark"] body.recruiter-page,
:root[data-theme="dark"] .recruiter-main {
  --ink: var(--theme-text);
  --muted: var(--theme-copy);
  --line: var(--theme-line);
  --surface: var(--theme-surface);
  --page: var(--theme-bg);
  background: var(--theme-bg);
  color: var(--theme-text);
}
:root[data-theme="dark"] .recruiter-sidebar {
  background: linear-gradient(180deg, #06152B 0%, #040D1D 100%);
  border-color: #1E3048;
}
:root[data-theme="dark"] .recruiter-topbar {
  border-color: var(--theme-line);
  background: var(--theme-topbar);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

:root[data-theme="dark"] :is(
  .refresh-button,
  .mobile-menu-button,
  .recruiter-account-dropdown,
  .secondary-button,
  .panel,
  .stat-grid article,
  .candidate-card,
  .crm-client-card,
  .recruiter-timesheet-card,
  .recruiter-timesheet-evidence,
  .timesheet-actions,
  .timesheet-actions button,
  .timesheet-actions a
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow-sm);
}
:root[data-theme="dark"] .recruiter-account:hover,
:root[data-theme="dark"] .recruiter-account[aria-expanded="true"] {
  background: var(--theme-surface-raised) !important;
  border-color: var(--theme-line) !important;
}
:root[data-theme="dark"] :is(
  .crm-note-preview,
  .recruiter-timesheet-head,
  .recruiter-timesheet-metrics span,
  .recruiter-timesheet-review,
  .timesheet-evidence-point,
  .recruiter-timesheet-footer
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] .recruiter-timesheet-review blockquote {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .recruiter-main :is(input,select,textarea,.stage-select) {
  border-color: var(--theme-line) !important;
  background: var(--theme-input) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .recruiter-main :is(input,textarea)::placeholder { color: #7F91AA; }
:root[data-theme="dark"] .recruiter-main select option { background: #101C2F; color: #F7FAFF; }
:root[data-theme="dark"] .recruiter-main :is(h1,h2,h3,h4,strong,label,th) { color: var(--theme-text); }
:root[data-theme="dark"] .recruiter-main :is(p,small,td,.cell-title small) { color: var(--theme-copy); }

/* ========================================================================== 
   Attendance, assignments, documents, applications and shared operational UI
   ========================================================================== */
:root[data-theme="dark"] :is(
  .candidate-attendance-page .candidate-attendance-panel,
  .candidate-attendance-page .candidate-attendance-history-panel,
  .candidate-attendance-page .work-session-history-card,
  .candidate-attendance-page .attendance-history-row,
  .candidate-attendance-page .attendance-history-card,
  .employer-attendance-page .attendance-summary-grid .fer-ops-mini-card,
  .employer-attendance-page .attendance-records-panel,
  .employer-attendance-page .employer-assignment-record,
  .attendance-review-panel,
  .admin-review-card,
  .assignment-recruiter-context,
  .document-status-card,
  .document-panel,
  .document-upload-action,
  .document-save-bar,
  .document-check-item,
  .selected-job-card,
  .application-form-card,
  .candidate-application-card,
  .candidate-invitation-card
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow-sm);
}

:root[data-theme="dark"] :is(
  .candidate-attendance-page .attendance-history-date,
  .candidate-attendance-page .attendance-history-card-head,
  .candidate-attendance-page .attendance-history-metrics > span,
  .employer-attendance-page .employer-assignment-record-footer,
  .admin-review-card > footer,
  .application-proposal-meta span,
  .candidate-cover-letter,
  .profile-context div,
  .share-code-box,
  .assignment-context-grid > div
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-copy) !important;
}

:root[data-theme="dark"] :is(
  .candidate-review-response-dialog,
  .hours-dispute-dialog,
  .admin-hours-dialog
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow-lg);
}

:root[data-theme="dark"] :is(
  .candidate-review-response-dialog textarea,
  .candidate-review-response-dialog input[type=file],
  .hours-dispute-dialog select,
  .hours-dispute-dialog textarea,
  .admin-hours-dialog select,
  .admin-hours-dialog textarea,
  .share-code-box input,
  .assignment-context-grid input[readonly]
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-input) !important;
  color: var(--theme-text) !important;
}

/* Documents / applications neutral content text. */
:root[data-theme="dark"] :is(.document-workspace,.application-page,.attendance-review-layout) :is(h1,h2,h3,h4,strong,label) { color: var(--theme-text) !important; }
:root[data-theme="dark"] :is(.document-workspace,.application-page,.attendance-review-layout) :is(p,small) { color: var(--theme-copy); }

/* ========================================================================== 
   Semantic status colours
   ========================================================================== */
:root[data-theme="dark"] :is(
  .status-pill.reviewing,
  .status-badge.scheduled,
  .status-badge.running,
  .offer-state.pending,
  .timesheet-state.pending,
  .timesheet-state.client_pending,
  .hours-approval-badge.is-pending,
  .hours-approval-badge.is-information,
  .pay-status.pending_approval,
  .pay-status.response_submitted,
  .run-pending,
  .run-profile-missing,
  .invoice-status.part_paid,
  .invoice-settings-warning,
  .config-alert,
  .run-warning,
  .pay-blocker
) {
  border-color: var(--theme-warning-line) !important;
  background: var(--theme-warning-bg) !important;
  color: var(--theme-warning-text) !important;
}

:root[data-theme="dark"] :is(
  .status-pill.rejected,
  .timesheet-state.needs_review,
  .hours-approval-badge.is-disputed,
  .hours-approval-badge.is-final_review,
  .invoice-status.overdue,
  .invoice-message.error,
  .config-card.config-invalid,
  .run-refresh-note.error,
  .application-alert.error,
  .candidate-review-response-dialog .error,
  .document-save-bar #documentsSaveMessage.is-error
) {
  border-color: var(--theme-danger-line) !important;
  background: var(--theme-danger-bg) !important;
  color: var(--theme-danger-text) !important;
}

:root[data-theme="dark"] :is(
  .status-pill.confirmed,
  .status-pill.completed,
  .document-state.complete,
  .document-check-item span.verified,
  .pay-status.approved,
  .pay-status.ready,
  .run-profile-ready,
  .run-calculated,
  .invoice-status.paid,
  .referral-status.success
) {
  border-color: var(--theme-success-line) !important;
  background: var(--theme-success-bg) !important;
  color: var(--theme-success-text) !important;
}

:root[data-theme="dark"] :is(
  .table-action.primary,
  .candidate-invite-button,
  .source-badge.invited,
  .timesheet-state.candidate_response,
  .recruiter-timesheet-review .candidate-response,
  .workspace-message,
  .document-count-pill,
  .document-upload-icon,
  .pay-status.in-pay-run,
  .invoice-status.sent,
  .application-status.shortlisted
) {
  border-color: var(--theme-info-line) !important;
  background: var(--theme-info-bg) !important;
  color: var(--theme-info-text) !important;
}

/* ========================================================================== 
   Payroll / invoices / payslips
   ========================================================================== */
:root[data-theme="dark"] {
  --pr-ink: var(--theme-text);
  --pr-muted: var(--theme-copy);
  --pr-line: var(--theme-line);
  --pr-soft: var(--theme-bg);
  --pr-white: var(--theme-surface);
}

:root[data-theme="dark"] :is(.pay-page,.payroll-admin-page,.payroll-admin-page .pay-shell) {
  background: var(--theme-bg) !important;
  color: var(--theme-text);
}

:root[data-theme="dark"] :is(
  .pay-scope,
  .pay-stat,
  .pay-action,
  .pay-panel,
  .pay-timesheet-card,
  .pay-priority-flow article,
  .pay-fixed-note,
  .pay-run-card,
  .pay-pagination,
  .invoice-scope,
  .invoice-stat,
  .invoice-panel,
  .invoice-card,
  .invoice-detail-card,
  .invoice-payment-row,
  .payslip-card,
  .payslip-money-grid section,
  .config-card,
  .run-summary article
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow-sm);
}

:root[data-theme="dark"] :is(
  .pay-time-row div,
  .pay-run-metrics > div,
  .pay-run-lines > div,
  .pay-note,
  .pay-rate-priority,
  .invoice-meta,
  .invoice-payment-panel,
  .invoice-footer,
  .invoice-internal-grid div,
  .payslip-money-grid,
  .payslip-footer,
  .config-cost-review,
  .config-section-note
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-copy) !important;
}

:root[data-theme="dark"] :is(
  .pay-form input,.pay-form select,.pay-form textarea,.pay-inline input,.pay-inline select,
  .invoice-form input,.invoice-form select,.invoice-form textarea,
  .config-grid input,.config-grid select,
  .run-worker-payment-form input,.run-worker-payment-form select,.run-worker-payment-form textarea
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-input) !important;
  color: var(--theme-text) !important;
}

:root[data-theme="dark"] :is(.pay-table th,.invoice-table th,.run-table th) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-muted) !important;
}
:root[data-theme="dark"] :is(.pay-table td,.invoice-table td,.run-table td) {
  border-color: var(--theme-line) !important;
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] :is(.pay-table td strong,.invoice-table td strong,.run-table td strong) { color: var(--theme-text) !important; }

/* Invoice document itself stays readable but is not forced paper-white. */
:root[data-theme="dark"] .invoice-document-head,
:root[data-theme="dark"] .invoice-parties section,
:root[data-theme="dark"] .invoice-totals-box {
  border-color: var(--theme-line) !important;
  color: var(--theme-text);
}

/* ========================================================================== 
   CV Builder: controls dark, printable CV preview intentionally remains paper white
   ========================================================================== */
:root[data-theme="dark"] .cv-control-card,
:root[data-theme="dark"] .cv-template-option,
:root[data-theme="dark"] .cv-preview-toolbar {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow-sm);
}
:root[data-theme="dark"] .cv-repeat-item,
:root[data-theme="dark"] .cv-section-toggles label {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .cv-control-card :is(input:not([type="color"]),textarea,select) {
  border-color: var(--theme-line) !important;
  background: var(--theme-input) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .cv-preview-shell {
  border-color: var(--theme-line) !important;
  background: #091322 !important;
}
:root[data-theme="dark"] .cv-preview-viewport { background: #091322; }

/* Printable document must preserve the selected template exactly.
   Do not push dark-theme text tokens into the A4 paper. */
:root[data-theme="dark"] .cv-paper {
  background: #FFFFFF !important;
  color: #202B3B;
  box-shadow: 0 18px 48px rgba(0,0,0,.34);
  color-scheme: light;
}

/* ========================================================================== 
   Messaging / video / AI widget
   ========================================================================== */
:root[data-theme="dark"] :is(
  .messages-card,
  .conversation-panel,
  .chat-panel,
  .message-bubble,
  .chat-composer,
  .incoming-call-card,
  .global-call-toast
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] :is(.conversation-search,.chat-composer textarea,.chat-composer input) {
  border-color: var(--theme-line) !important;
  background: var(--theme-input) !important;
  color: var(--theme-text) !important;
}

:root[data-theme="dark"] .fer-ai-chat-panel,
:root[data-theme="dark"] .fer-ai-chat-message.is-assistant,
:root[data-theme="dark"] .fer-ai-chat-message.assistant .fer-ai-chat-bubble,
:root[data-theme="dark"] .fer-ai-chat-composer,
:root[data-theme="dark"] .fer-ai-chat-footer,
:root[data-theme="dark"] .fer-ai-chat-action,
:root[data-theme="dark"] .fer-ai-chat-quick button {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .fer-ai-chat-panel :is(p,small,label) { color: var(--theme-copy) !important; }
:root[data-theme="dark"] .fer-ai-chat-input {
  border-color: var(--theme-line) !important;
  background: var(--theme-input) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .fer-ai-chat-message.error .fer-ai-chat-bubble {
  border-color: var(--theme-danger-line) !important;
  background: var(--theme-danger-bg) !important;
  color: var(--theme-danger-text) !important;
}

/* ========================================================================== 
   Employer/admin legacy shells and disputes
   ========================================================================== */
:root[data-theme="dark"] .admin-page {
  background: var(--theme-bg);
  color: var(--theme-text);
}
:root[data-theme="dark"] .admin-topbar {
  border-color: var(--theme-line);
  background: var(--theme-topbar);
}
:root[data-theme="dark"] :is(.admin-status,.admin-panel,.admin-stat-grid article,.admin-legal-footer) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .admin-page :is(input,select,textarea) {
  border-color: var(--theme-line) !important;
  background: var(--theme-input) !important;
  color: var(--theme-text) !important;
}

/* ========================================================================== 
   Mobile and accessibility
   ========================================================================== */
@media (max-width: 820px) {
  .fer-theme-toggle { width: 40px; min-width: 40px; padding: 0; }
  .fer-theme-toggle-label { display: none; }
  .fer-homepage .nav-actions .fer-theme-toggle,
  body.fer-public-page .nav-actions .fer-theme-toggle { order: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fer-theme-toggle { transition: none; }
}

/* ========================================================================== 
   Dark-mode coverage for legacy feature modules
   These selectors only convert neutral/light surfaces. Semantic colours remain
   tinted and readable rather than being flattened into one surface.
   ========================================================================== */

/* Shared legacy/public neutral surfaces from style.css. */
:root[data-theme="dark"] :is(
  .candidate-directory-page,
  .candidate-public-view-page,
  .checkout-page,
  .messages-page,
  .register-page,
  .home-page
) { background-color: var(--theme-bg) !important; color: var(--theme-text); }

:root[data-theme="dark"] :is(
  .candidate-directory-hero,
  .candidate-public-hero,
  .jobs-hero,
  .employer-hero
) {
  border-color: var(--theme-line) !important;
  background:
    radial-gradient(circle at 86% 14%, rgba(23,83,255,.12), transparent 34%),
    linear-gradient(145deg, #111E33 0%, #0D192B 100%) !important;
  color: var(--theme-text) !important;
}

:root[data-theme="dark"] :is(
  .candidate-card-facts > span,
  .candidate-skill-row span,
  .selected-job-meta span,
  .application-proposal-meta span,
  .candidate-invitation-meta span,
  .subscription-gate-benefits span,
  .preview-search,
  .quick-flow span,
  .journey-steps li > span,
  .document-visual span
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-copy) !important;
}

:root[data-theme="dark"] :is(
  .candidate-pagination a,
  .candidate-dialog-card,
  .checkout-fields input,
  .checkout-fields select,
  .checkout-card-field input,
  .checkout-card-field > div,
  .register-card input,
  .register-card select,
  .user-dropdown,
  .preview-topbar,
  .preview-sidebar,
  .preview-stats > div,
  .chart-card,
  .pipeline-card,
  .feature-card,
  .home-price-card,
  textarea
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}

:root[data-theme="dark"] :is(.user-dropdown a:hover,.user-logout-button:hover) {
  background: var(--theme-surface-soft) !important;
  color: var(--theme-text) !important;
}

:root[data-theme="dark"] .checkout-plan-switch { background: var(--theme-surface-soft) !important; }
:root[data-theme="dark"] .checkout-plan-switch a.active { background: var(--theme-surface-raised) !important; color: var(--theme-text) !important; }
:root[data-theme="dark"] .checkout-demo-notice {
  border-color: var(--theme-warning-line) !important;
  background: var(--theme-warning-bg) !important;
  color: var(--theme-warning-text) !important;
}

/* Public preview widgets and candidate/job result internals. */
:root[data-theme="dark"] :is(.preview-feature-card,.talent-preview-profile) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-copy) !important;
}

/* Homepage smaller neutral elements not handled by the main theme section. */
:root[data-theme="dark"] .fer-homepage .skip-link {
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow-md);
}
:root[data-theme="dark"] .fer-homepage .plan-button-secondary {
  border-color: var(--theme-line-strong) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .fer-homepage .fer-hero::after { opacity: .32; }

/* Contact. */
:root[data-theme="dark"] .contact-benefits article {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .contact-form-grid :is(input,select,textarea) {
  border-color: var(--theme-line) !important;
  background: var(--theme-input) !important;
  color: var(--theme-text) !important;
}

/* Referral workspace. */
:root[data-theme="dark"] :is(.referral-link-card,.referral-stat-grid article,.referral-reward-grid div,.referral-table-wrap,.referral-empty) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .referral-link-row input {
  border-color: var(--theme-line) !important;
  background: var(--theme-input) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .referral-table th { background: var(--theme-surface-soft) !important; color: var(--theme-muted) !important; }
:root[data-theme="dark"] .referral-table td { border-color: var(--theme-line) !important; color: var(--theme-copy) !important; }

/* Billing offer cards. */
:root[data-theme="dark"] .billing-offers-wrap {
  border-color: var(--theme-line) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(23,83,255,.10), transparent 32%),
    var(--theme-surface) !important;
}
:root[data-theme="dark"] .billing-offer-card {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .billing-offer-card.selected { border-color: #5278D6 !important; box-shadow: 0 0 0 2px rgba(82,120,214,.14); }
:root[data-theme="dark"] .billing-offer-code { background: var(--theme-surface-soft) !important; color: var(--theme-text) !important; }

/* Hiring pipeline. */
:root[data-theme="dark"] :is(
  .pipeline-access-gate,
  .pipeline-action-menu summary,
  .pipeline-action-menu > div,
  .pipeline-proposal-summary article,
  .pipeline-cover-letter p
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .pipeline-action-menu[open] summary,
:root[data-theme="dark"] .pipeline-action-menu :is(button,a):hover,
:root[data-theme="dark"] .pipeline-action-menu :is(button,a):focus-visible {
  background: var(--theme-surface-soft) !important;
}
:root[data-theme="dark"] .pipeline-dialog-head button { background: var(--theme-surface-soft) !important; color: var(--theme-text) !important; }

/* Job application. */
:root[data-theme="dark"] :is(
  .charge-input,
  .duration-input,
  .cover-letter-field textarea,
  .application-file-field,
  .candidate-cover-letter-panel,
  .candidate-invitation-message
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-input) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .application-file-field:hover { background: var(--theme-surface-soft) !important; }
:root[data-theme="dark"] .candidate-application-notice { background: var(--theme-surface-soft) !important; color: var(--theme-copy) !important; }
:root[data-theme="dark"] .invitation-status {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] .invitation-status.declined {
  border-color: var(--theme-danger-line) !important;
  background: var(--theme-danger-bg) !important;
  color: var(--theme-danger-text) !important;
}
:root[data-theme="dark"] .invitation-verification-note {
  border-color: var(--theme-warning-line) !important;
  background: var(--theme-warning-bg) !important;
  color: var(--theme-warning-text) !important;
}

/* Job publisher / recruiter-client context. */
:root[data-theme="dark"] .recruiter-client-context {
  border-color: var(--theme-line) !important;
  background:
    radial-gradient(circle at 0 0, rgba(23,83,255,.10), transparent 34%),
    var(--theme-surface) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] :is(.client-context-control select,.job-toggle-button) {
  border-color: var(--theme-line) !important;
  background: var(--theme-input) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .job-status-pill.paused {
  border-color: var(--theme-danger-line) !important;
  background: var(--theme-danger-bg) !important;
  color: var(--theme-danger-text) !important;
}

/* Platform module internals. */
:root[data-theme="dark"] :is(
  .platform-data-table th,
  .platform-note,
  .candidate-work-instructions,
  .evidence-thumb
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] .platform-data-table tbody tr:hover { background: rgba(255,255,255,.025) !important; }
:root[data-theme="dark"] .table-time-pair .is-live small {
  background: var(--theme-warning-bg) !important;
  color: var(--theme-warning-text) !important;
}
:root[data-theme="dark"] :is(.candidate-hours-approval,.employer-hours-approval-card) {
  border-color: var(--theme-warning-line) !important;
  background: var(--theme-warning-bg) !important;
  color: var(--theme-warning-text) !important;
}
:root[data-theme="dark"] :is(.candidate-hours-approval.is-approved,.employer-hours-approval-card.is-approved) {
  border-color: var(--theme-success-line) !important;
  background: var(--theme-success-bg) !important;
  color: var(--theme-success-text) !important;
}

/* Recruiter module internals. */
:root[data-theme="dark"] .recruiter-brand img,
:root[data-theme="dark"] .platform-brand img,
:root[data-theme="dark"] .pay-brand img {
  background: #fff !important;
}
:root[data-theme="dark"] .recruiter-main :is(.table-tools input,.table-tools select,.workspace-form input,.workspace-form select,.workspace-form textarea,.offer-dialog textarea,.offer-dialog select,.invite-dialog select) {
  border-color: var(--theme-line) !important;
  background: var(--theme-input) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] :is(.candidate-tags span,.client-mini,.crm-client-metrics span,.timesheet-evidence-empty,.timesheet-evidence-file,.recruiter-timesheet-controls) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] .crm-migration-alert {
  border-color: var(--theme-warning-line) !important;
  background: var(--theme-warning-bg) !important;
  color: var(--theme-warning-text) !important;
}
:root[data-theme="dark"] .timesheet-feature-note {
  border-color: var(--theme-info-line) !important;
  background: linear-gradient(135deg,#14264A,#101C2F) !important;
  color: var(--theme-info-text) !important;
}
:root[data-theme="dark"] .timesheet-feature-note > span.is-missing {
  background: var(--theme-warning-bg) !important;
  color: var(--theme-warning-text) !important;
}

/* Attendance/dispute details. */
:root[data-theme="dark"] :is(
  .review-principle-strip span,
  .review-evidence-links a,
  .review-evidence-links span,
  .review-loading,
  .review-empty,
  .review-error,
  .admin-hours-summary,
  .review-candidate-response,
  .candidate-review-request-summary,
  .hours-dispute-summary
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] .review-count {
  border-color: var(--theme-danger-line) !important;
  background: var(--theme-danger-bg) !important;
  color: var(--theme-danger-text) !important;
}
:root[data-theme="dark"] :is(.admin-hours-close,.candidate-review-response-close,.hours-dispute-close,.hours-dispute-btn) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] :is(.review-actions [data-request-info],.hours-review-note.is-adjusted,.hours-review-note.is-response) {
  border-color: var(--theme-info-line) !important;
  background: var(--theme-info-bg) !important;
  color: var(--theme-info-text) !important;
}

/* Payslips. */
:root[data-theme="dark"] .payslip-card-head {
  border-color: var(--theme-line) !important;
  background: linear-gradient(135deg,#142238,#10202F) !important;
}
:root[data-theme="dark"] .payslip-card-actions button {
  border-color: var(--theme-teal-line) !important;
  background: var(--theme-teal-bg) !important;
  color: var(--theme-teal-text) !important;
}
:root[data-theme="dark"] .payslip-pension-info,
:root[data-theme="dark"] .payslip-lines-head {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-copy) !important;
}

/* Worker payroll profile. */
:root[data-theme="dark"] .worker-statutory-box {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] :is(.worker-statutory-head > span,.worker-profile-state.incomplete) {
  border-color: var(--theme-warning-line) !important;
  background: var(--theme-warning-bg) !important;
  color: var(--theme-warning-text) !important;
}

/* Invoice internals. */
:root[data-theme="dark"] :is(.invoice-secondary,.invoice-link-btn,.invoice-pager button) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .invoice-danger {
  border-color: var(--theme-danger-line) !important;
  background: var(--theme-danger-bg) !important;
  color: var(--theme-danger-text) !important;
}
:root[data-theme="dark"] :is(.invoice-note,.invoice-summary-bar > div,.invoice-card-metrics div,.invoice-lines-doc th,.invoice-lines-doc .invoice-internal-col) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-copy) !important;
}

/* Payroll calculation/config/run detail internals. */
:root[data-theme="dark"] :is(.worker-opening-box,.run-calc-summary,.config-section-note) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] :is(.worker-opening-save,.run-refresh-profile,.run-pay-export,.config-rule) {
  border-color: var(--theme-teal-line) !important;
  background: var(--theme-teal-bg) !important;
  color: var(--theme-teal-text) !important;
}
:root[data-theme="dark"] .run-next,
:root[data-theme="dark"] .run-calculation-actions {
  border-color: var(--theme-teal-line) !important;
  background: linear-gradient(135deg,#102A2B,#101C2F) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] :is(.run-reset-calculation,.run-profile-missing,.pay-run-stage) {
  border-color: var(--theme-warning-line) !important;
  background: var(--theme-warning-bg) !important;
  color: var(--theme-warning-text) !important;
}
:root[data-theme="dark"] :is(.run-delete-draft,.config-retire) {
  border-color: var(--theme-danger-line) !important;
  background: var(--theme-danger-bg) !important;
  color: var(--theme-danger-text) !important;
}
:root[data-theme="dark"] :is(.run-payslips-link,.config-edit-draft) {
  border-color: var(--theme-info-line) !important;
  background: var(--theme-info-bg) !important;
  color: var(--theme-info-text) !important;
}
:root[data-theme="dark"] .run-approval-record {
  border-color: var(--theme-success-line) !important;
  background: var(--theme-success-bg) !important;
  color: var(--theme-success-text) !important;
}
:root[data-theme="dark"] .run-worker-payment-record div {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-copy) !important;
}

/* CV Builder remaining controls (paper preview stays white). */
:root[data-theme="dark"] :is(.cv-collapse,.cv-link-icon) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .cv-remove-item {
  background: var(--theme-danger-bg) !important;
  color: var(--theme-danger-text) !important;
}
:root[data-theme="dark"] .cv-color-label input { background: var(--theme-surface) !important; border-color: var(--theme-line) !important; }

/* Messages: incoming is neutral dark, outgoing stays FER blue. */
:root[data-theme="dark"] .messages-page { background: var(--theme-bg) !important; }
:root[data-theme="dark"] .chat-thread {
  background:
    radial-gradient(circle at 85% 0%, rgba(23,83,255,.06), transparent 30%),
    #0B1526 !important;
}
:root[data-theme="dark"] .conversation-item:hover { background: var(--theme-surface-soft) !important; }
:root[data-theme="dark"] .message-row.outgoing .message-bubble {
  border-color: #1753FF !important;
  background: #1753FF !important;
  color: #fff !important;
}
:root[data-theme="dark"] .message-row.outgoing .message-bubble p { color: #fff !important; }
:root[data-theme="dark"] .message-row.outgoing .message-bubble time { color: rgba(255,255,255,.72) !important; }
:root[data-theme="dark"] .message-live-badge {
  background: var(--theme-success-bg) !important;
  color: var(--theme-success-text) !important;
}

/* Video call chrome. */
:root[data-theme="dark"] .chat-call-button,
:root[data-theme="dark"] .call-decline-button {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .call-history-row.missed {
  border-color: var(--theme-danger-line) !important;
  background: var(--theme-danger-bg) !important;
}
:root[data-theme="dark"] .call-history-row.missed .call-history-icon {
  background: #49232A !important;
  color: var(--theme-danger-text) !important;
}


/* ========================================================================== 
   Public job share + protected recruiter timesheet
   ========================================================================== */
:root[data-theme="dark"] body.job-share-page {
  background: var(--theme-bg) !important;
  color: var(--theme-text);
}
:root[data-theme="dark"] body.job-share-page :is(.job-share-main,.job-share-summary,.job-share-content,.job-share-empty) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow-sm);
}
:root[data-theme="dark"] body.job-share-page :is(.job-share-social a,.job-share-social button,.job-share-apply-card) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] body.job-share-page :is(h1,h2,h3,strong) { color: var(--theme-text) !important; }
:root[data-theme="dark"] body.job-share-page :is(p,small,li) { color: var(--theme-copy); }

:root[data-theme="dark"] .share-shell {
  color: var(--theme-text);
}
:root[data-theme="dark"] body:has(.share-shell) {
  background:
    radial-gradient(circle at 10% 0%, rgba(23,83,255,.08), transparent 30%),
    var(--theme-bg) !important;
  color: var(--theme-text);
}
:root[data-theme="dark"] body:has(.share-shell) :is(
  .share-card,
  .share-resubmission,
  .candidate-resubmission-message
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow-sm);
}
:root[data-theme="dark"] body:has(.share-shell) :is(
  .share-details span,
  .recruiter-note,
  .history-item,
  .client-evidence-grid article
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] body:has(.share-shell) :is(
  .share-lock input,
  .share-review textarea
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-input) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] body:has(.share-shell) .share-evidence-heading button,
:root[data-theme="dark"] body:has(.share-shell) :is(.resubmission-image-link,.resubmission-file-link) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] body:has(.share-shell) :is(h1,h2,h3,strong,label) { color: var(--theme-text) !important; }
:root[data-theme="dark"] body:has(.share-shell) :is(p,small) { color: var(--theme-copy); }

/* Final visual QA refinements discovered from rendered page checks. */

/* Auth / register cards must actually switch to dark, not remain paper white. */
:root[data-theme="dark"] body.fer-public-page :is(.auth-card,.register-card) {
  border-color: var(--theme-line) !important;
  background: linear-gradient(155deg, #142238 0%, #101C2F 100%) !important;
  color: var(--theme-text) !important;
  box-shadow: 0 22px 50px rgba(0,0,0,.24) !important;
}
:root[data-theme="dark"] body.fer-public-page :is(.register-heading h2,.register-heading h3,.field-group label,.terms-check span) {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] body.fer-public-page :is(.register-heading p,.secure-note,.auth-action-row,.auth-back-link,.auth-divider) {
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] body.fer-public-page .auth-divider::before,
:root[data-theme="dark"] body.fer-public-page .auth-divider::after {
  background: var(--theme-line) !important;
}
:root[data-theme="dark"] body.fer-public-page .auth-create-link {
  border-color: var(--theme-info-line) !important;
  background: var(--theme-info-bg) !important;
  color: var(--theme-info-text) !important;
}
:root[data-theme="dark"] body.fer-public-page .auth-create-link:hover {
  border-color: #5476B8 !important;
  background: #172E57 !important;
}

/* Employer/public hero preview internals should follow the dark surface hierarchy. */
:root[data-theme="dark"] body.fer-public-page :is(.employer-stat-grid div,.employer-mini-pipeline div) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] body.fer-public-page .employer-stat-grid strong { color: var(--theme-text) !important; }
:root[data-theme="dark"] body.fer-public-page .employer-stat-grid span { color: var(--theme-copy) !important; }
:root[data-theme="dark"] body.fer-public-page .employer-lock-card {
  border-color: var(--theme-line-strong) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] body.fer-public-page :is(.pipeline-steps span,.quality-box) {
  border-color: var(--theme-teal-line) !important;
  background: var(--theme-teal-bg) !important;
  color: var(--theme-teal-text) !important;
}

/* Standalone candidate/employer dashboards use a static public nav. */
:root[data-theme="dark"] :is(.candidate-dashboard-page,.employer-dashboard-page) .nav {
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(4,18,37,.94) !important;
  color: #E6EEFA !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(16px);
}
:root[data-theme="dark"] :is(.candidate-dashboard-page,.employer-dashboard-page) .nav :is(a,.nav-login,.brand) {
  color: #D6E1F1 !important;
}
:root[data-theme="dark"] :is(.candidate-dashboard-page,.employer-dashboard-page) .nav .nav-cta {
  background: #1753FF !important;
  color: #fff !important;
}
:root[data-theme="dark"] :is(.candidate-dashboard-page,.employer-dashboard-page) .nav .brand-mark {
  background: #fff !important;
}
:root[data-theme="dark"] :is(.candidate-dashboard-page,.employer-dashboard-page) :is(.empty-state,.directory-loading-card) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-copy) !important;
}


/* ========================================================================== 
   Dark theme visual polish — 2026-09-09
   Requested fixes: public hero continuity, pricing readability, and icon tone.
   ========================================================================== */

:root[data-theme="dark"] {
  --theme-icon-bg: #172A45;
  --theme-icon-bg-strong: #1C3455;
  --theme-icon-line: #2F4B6D;
  --theme-icon-text: #FFFFFF;
}

/* Jobs, Hiring Staff and Employer Hub should read as one continuous hero band,
   not as a dark card placed inside the navy page background. */
:root[data-theme="dark"] body.fer-public-page.jobs-page .jobs-hero,
:root[data-theme="dark"] body.fer-public-page.candidate-directory-page .candidate-directory-hero,
:root[data-theme="dark"] body.fer-public-page.employer-page .employer-hero {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Homepage / Recruitment Hub decorative icon language: dark tile + white icon. */
:root[data-theme="dark"] .fer-homepage :is(
  .tab-icon,
  .op-icon,
  .capability-icon,
  .candidate-device-icon,
  .plan-icon,
  .choice-icon,
  .pricing-note-icon
),
:root[data-theme="dark"] .fer-homepage .industry-grid a > span {
  border-color: var(--theme-icon-line) !important;
  background: var(--theme-icon-bg) !important;
  color: var(--theme-icon-text) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .fer-homepage :is(
  .tab-icon,
  .op-icon,
  .capability-icon,
  .candidate-device-icon,
  .plan-icon,
  .choice-icon,
  .pricing-note-icon
) svg,
:root[data-theme="dark"] .fer-homepage .industry-grid a > span svg {
  color: inherit !important;
  stroke: currentColor !important;
}

/* Remove the bright decorative corner discs on industry cards. */
:root[data-theme="dark"] .fer-homepage .industry-grid a::before {
  background: #18304E !important;
  opacity: .82;
}

/* Public preview numbers and common neutral icon holders follow the same rule. */
:root[data-theme="dark"] body.fer-public-page .preview-step-list > div > b,
:root[data-theme="dark"] body.fer-public-page :is(
  .field-icon,
  .guest-gate-icon,
  .subscription-gate-icon,
  .role-icon,
  .candidate-offer-icon,
  .chat-empty-icon,
  .pipeline-gate-icon
),
:root[data-theme="dark"] :is(
  .feature-icon.blue,
  .feature-icon.purple,
  .feature-icon.green,
  .stat-icon.blue,
  .stat-icon.purple,
  .stat-icon.green,
  .tracking-consent-icon,
  .ops-icon
) {
  border-color: var(--theme-icon-line) !important;
  background: var(--theme-icon-bg) !important;
  color: var(--theme-icon-text) !important;
  box-shadow: none !important;
}

/* Pricing billing control should not become a white pill in dark mode. */
:root[data-theme="dark"] .fer-homepage .pricing-billing-toggle {
  border-color: var(--theme-line-strong) !important;
  background: var(--theme-surface-raised) !important;
  box-shadow: var(--theme-shadow-sm) !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-billing-toggle button {
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-billing-toggle button:hover:not(.active) {
  background: var(--theme-surface-soft) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-billing-toggle button.active {
  background: linear-gradient(135deg, #1753FF, #0B4CFF) !important;
  color: #fff !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-saving-note {
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-saving-note strong {
  color: #8FB4FF !important;
}

/* Pricing cards: keep all prices and supporting copy readable on navy surfaces. */
:root[data-theme="dark"] .fer-homepage .pricing-card :is(.plan-name-row h3, .plan-price strong) {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-card :is(
  .plan-price span,
  .annual-price-note,
  .plan-summary,
  .plan-audience
) {
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-card .plan-features li {
  color: #D9E4F2 !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-card .plan-features li::before {
  color: #6FA3FF !important;
}

/* The pricing information note becomes part of the dark design instead of a
   bright white interruption between pricing and the next section. */
:root[data-theme="dark"] .fer-homepage .pricing-note {
  border-color: var(--theme-line) !important;
  background: linear-gradient(135deg, #101D30 0%, #12223A 100%) !important;
  color: var(--theme-copy) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.18) !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-note-item {
  border-color: var(--theme-line) !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-note-item strong {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-note-item small {
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-note-offer {
  border: 1px solid #29476F !important;
  background: #152A48 !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-note-offer strong {
  color: #91B5FF !important;
}

/* Slightly softer icon hover treatment; no white flash when cards move. */
:root[data-theme="dark"] .fer-homepage .industry-grid a:hover > span,
:root[data-theme="dark"] .fer-homepage :is(.capability-card,.journey-card):hover :is(.capability-icon,.choice-icon) {
  border-color: #41648E !important;
  background: var(--theme-icon-bg-strong) !important;
}

/* ========================================================================== 
   Dark theme contrast QA — 2026-09-10
   Targeted fixes after live review: pricing hierarchy + public job controls.
   ========================================================================== */

/* Pricing: headings and billing helper text must use the dark palette, never
   retain light-theme navy/grey text. */
:root[data-theme="dark"] .fer-homepage .pricing-heading h2 {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-heading > p:last-child {
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-heading .section-kicker {
  color: #6EA2FF !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-saving-note {
  border-color: var(--theme-line-strong) !important;
  background: #142238 !important;
  color: #C4D1E2 !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-saving-note strong {
  color: #8FB4FF !important;
}

/* Pricing cards: force every price / period / annual line / summary to an
   explicit readable dark-mode colour.  This also covers Candidate and
   Enterprise, whose price text is styled differently from Professional. */
:root[data-theme="dark"] .fer-homepage .pricing-card .plan-name-row h3,
:root[data-theme="dark"] .fer-homepage .pricing-card .plan-price > strong,
:root[data-theme="dark"] .fer-homepage .pricing-card .plan-price > strong[data-plan-price] {
  color: #F7FAFF !important;
  -webkit-text-fill-color: #F7FAFF !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-card .plan-price > span,
:root[data-theme="dark"] .fer-homepage .pricing-card .annual-price-note,
:root[data-theme="dark"] .fer-homepage .pricing-card .plan-summary,
:root[data-theme="dark"] .fer-homepage .pricing-card .plan-audience {
  color: #B8C5D8 !important;
  -webkit-text-fill-color: #B8C5D8 !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-card .plan-features li {
  color: #D9E4F2 !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-card :is(.plan-status-chip,.plan-saving-chip) {
  border-color: #315078 !important;
  background: #172A45 !important;
  color: #AFC8FF !important;
  -webkit-text-fill-color: #AFC8FF !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-card.professional-plan :is(.plan-name-row h3,.plan-price > strong) {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
:root[data-theme="dark"] .fer-homepage .pricing-card.professional-plan :is(.plan-summary,.annual-price-note,.plan-price > span,.plan-audience) {
  color: #C6D4E6 !important;
  -webkit-text-fill-color: #C6D4E6 !important;
}

/* Pricing support strip: remain a dark information panel in dark mode. */
:root[data-theme="dark"] .fer-homepage .pricing-note,
:root[data-theme="dark"] .fer-homepage p.pricing-note {
  border-color: #29415F !important;
  background: linear-gradient(135deg, #101D30 0%, #12243C 100%) !important;
  color: #B8C5D8 !important;
}
:root[data-theme="dark"] .fer-homepage p.pricing-note strong {
  color: #8FB4FF !important;
}

/* Find Jobs: details, metadata pills and share control should not stay white
   when the card itself is dark. */
:root[data-theme="dark"] body.fer-public-page.jobs-page .job-more-details {
  border-color: var(--theme-line) !important;
  background: #142238 !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] body.fer-public-page.jobs-page .job-more-details summary {
  color: #8FB4FF !important;
}
:root[data-theme="dark"] body.fer-public-page.jobs-page .job-more-details[open] {
  background: #101C2F !important;
}
:root[data-theme="dark"] body.fer-public-page.jobs-page .job-full-description,
:root[data-theme="dark"] body.fer-public-page.jobs-page .job-more-details h3 {
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] body.fer-public-page.jobs-page .job-more-details h3 {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] body.fer-public-page.jobs-page .job-meta span,
:root[data-theme="dark"] body.fer-public-page.jobs-page .job-tags span {
  border-color: #315078 !important;
  background: #172A45 !important;
  color: #C7D5E7 !important;
}
:root[data-theme="dark"] body.fer-public-page.jobs-page .job-share-toggle {
  border-color: #315078 !important;
  background: #142238 !important;
  color: #AFC8FF !important;
}
:root[data-theme="dark"] body.fer-public-page.jobs-page .job-share-toggle:hover,
:root[data-theme="dark"] body.fer-public-page.jobs-page .job-share-toggle[aria-expanded="true"] {
  border-color: #4977C8 !important;
  background: #1753FF !important;
  color: #FFFFFF !important;
}
:root[data-theme="dark"] body.fer-public-page.jobs-page .job-share-menu {
  border-color: var(--theme-line) !important;
  background: #142238 !important;
  box-shadow: var(--theme-shadow-md) !important;
}
:root[data-theme="dark"] body.fer-public-page.jobs-page .job-share-menu :is(a,button) {
  color: #D9E4F2 !important;
}
:root[data-theme="dark"] body.fer-public-page.jobs-page .job-share-menu :is(a,button):hover {
  background: #1C2D47 !important;
  color: #8FB4FF !important;
}
:root[data-theme="dark"] body.fer-public-page.jobs-page .job-list-footer {
  border-color: var(--theme-line) !important;
}

/* ========================================================================== 
   Workspace + Admin dark-mode QA — 2026-09-10
   Targeted live-review fixes. These rules are intentionally scoped to dark
   mode so the approved light-mode design remains unchanged.
   ========================================================================== */

/* Shared platform topbar: keep controls as real siblings with stable spacing. */
.platform-topbar-actions {
  flex-wrap: nowrap;
}
.platform-topbar-actions > .fer-theme-toggle {
  position: static !important;
  z-index: auto !important;
  margin: 0 !important;
  flex: 0 0 auto;
}
.platform-topbar-actions > .platform-user {
  min-width: 0;
  flex: 0 1 auto;
}
@media (min-width: 821px) {
  .platform-topbar-actions > .fer-theme-toggle {
    min-width: 76px;
  }
}

/* A page heading is hierarchy, not a card. The earlier generic dark rule
   accidentally boxed Hiring Pipeline / Published Jobs / Assignment / etc. */
:root[data-theme="dark"] body[data-platform-role] .platform-page-heading {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Employer overview: the workforce KPI row and module icons must use the same
   layered dark surfaces as the rest of the dashboard. */
:root[data-theme="dark"] .employer-overview-page .assignment-summary-grid .fer-ops-mini-card {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow-sm) !important;
}
:root[data-theme="dark"] .employer-overview-page .assignment-summary-grid .fer-ops-mini-card :is(strong,b) {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .employer-overview-page .assignment-summary-grid .fer-ops-mini-card small {
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] body[data-platform-role] .platform-module-grid .module-icon,
:root[data-theme="dark"] body[data-platform-role] .fer-ops-mini-card .ops-icon {
  border: 1px solid #315078 !important;
  background: #183152 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

/* Published Jobs: remove the light form slabs that remained inside the dark
   workspace. Inputs already use the shared dark input token. */
:root[data-theme="dark"] body[data-platform-active="jobs"] :is(
  .published-job-builder .ai-job-card,
  .published-job-builder .job-post-form,
  .recently-published-panel,
  .recently-published-panel .recent-job-card,
  .job-preview-panel,
  .job-preview-content
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow-sm) !important;
}
:root[data-theme="dark"] body[data-platform-active="jobs"] .published-job-builder .form-section-title {
  border-color: var(--theme-line) !important;
}
:root[data-theme="dark"] body[data-platform-active="jobs"] .published-job-builder :is(.section-label,.form-section-title span) {
  color: var(--theme-muted) !important;
}
:root[data-theme="dark"] body[data-platform-active="jobs"] .published-job-builder .quality-box {
  border-color: var(--theme-info-line) !important;
  background: var(--theme-info-bg) !important;
  color: var(--theme-info-text) !important;
}

/* Hiring Pipeline: dark tabs/pills and readable shortlist controls. */
:root[data-theme="dark"] body[data-platform-active="pipeline"] .ai-pill {
  border: 1px solid #315078 !important;
  background: #183152 !important;
  color: #AFC8FF !important;
}
:root[data-theme="dark"] body[data-platform-active="pipeline"] .applicant-tabs {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
}
:root[data-theme="dark"] body[data-platform-active="pipeline"] .applicant-tabs button {
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] body[data-platform-active="pipeline"] .applicant-tabs button.active {
  background: #1D3558 !important;
  color: #AFC8FF !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] body[data-platform-active="pipeline"] .shortlist-meter {
  border-color: #233C61 !important;
  border-top-color: #4F7DFF !important;
}
:root[data-theme="dark"] body[data-platform-active="pipeline"] .shortlist-meter :is(span,small) {
  color: var(--theme-text) !important;
}

/* Create Assignment: candidate payment must be a dark secondary panel, not a
   light card inside a dark form. */
:root[data-theme="dark"] body[data-platform-active="assignment"] .assignment-payment-box {
  border-color: var(--theme-line) !important;
  background: linear-gradient(135deg, #111F34, #132640) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] body[data-platform-active="assignment"] .assignment-payment-heading > div > span {
  color: #72D8D4 !important;
}
:root[data-theme="dark"] body[data-platform-active="assignment"] .assignment-payment-heading :is(strong,small,#assignmentPayContextText) {
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] body[data-platform-active="assignment"] .assignment-payment-heading strong {
  color: var(--theme-text) !important;
}

/* Attendance & Work: keep the record header, worked-time chip, action and
   footer inside the same dark surface hierarchy. */
:root[data-theme="dark"] .employer-attendance-page .employer-assignment-record {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  box-shadow: var(--theme-shadow-sm) !important;
}
:root[data-theme="dark"] .employer-attendance-page .employer-assignment-record-head {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-raised) !important;
}
:root[data-theme="dark"] .employer-attendance-page .employer-assignment-record-title :is(strong,small) {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .employer-attendance-page .employer-assignment-record-title small,
:root[data-theme="dark"] .employer-attendance-page :is(.assignment-record-label,.assignment-record-muted,.assignment-record-pair small,.assignment-record-worked small,.assignment-record-gps small) {
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] .employer-attendance-page .assignment-record-pair strong,
:root[data-theme="dark"] .employer-attendance-page .assignment-record-gps strong {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .employer-attendance-page .assignment-record-block + .assignment-record-block,
:root[data-theme="dark"] .employer-attendance-page .employer-assignment-record-footer {
  border-color: var(--theme-line) !important;
}
:root[data-theme="dark"] .employer-attendance-page .employer-assignment-record-footer {
  background: #0E1A2C !important;
}
:root[data-theme="dark"] .employer-attendance-page .assignment-record-worked,
:root[data-theme="dark"] .employer-attendance-page .assignment-record-action {
  border-color: #315078 !important;
  background: #172A45 !important;
  color: #AFC8FF !important;
}
:root[data-theme="dark"] .employer-attendance-page .hours-approval-badge.is-approved {
  border-color: var(--theme-success-line) !important;
  background: var(--theme-success-bg) !important;
  color: var(--theme-success-text) !important;
}
:root[data-theme="dark"] .employer-attendance-page .hours-approval-badge.is-pending,
:root[data-theme="dark"] .employer-attendance-page .hours-approval-badge.is-information {
  border-color: var(--theme-warning-line) !important;
  background: var(--theme-warning-bg) !important;
  color: var(--theme-warning-text) !important;
}
:root[data-theme="dark"] .employer-attendance-page .hours-approval-badge:is(.is-disputed,.is-final_review) {
  border-color: var(--theme-danger-line) !important;
  background: var(--theme-danger-bg) !important;
  color: var(--theme-danger-text) !important;
}

/* Messages: the selected conversation must remain dark; the empty-thread title
   and header text must not keep their light-mode navy. */
:root[data-theme="dark"] .conversation-item.active {
  background: #1A3152 !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .conversation-item:hover {
  background: var(--theme-surface-soft) !important;
}
:root[data-theme="dark"] .conversation-item.active :is(strong,small,time) {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .chat-header,
:root[data-theme="dark"] .chat-composer {
  border-color: var(--theme-line) !important;
}
:root[data-theme="dark"] .chat-header strong,
:root[data-theme="dark"] .thread-start span,
:root[data-theme="dark"] .conversation-panel-head h1,
:root[data-theme="dark"] .conversation-empty strong {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .thread-start p,
:root[data-theme="dark"] .chat-header div span,
:root[data-theme="dark"] .conversation-copy small,
:root[data-theme="dark"] .conversation-copy time {
  color: var(--theme-copy) !important;
}

/* Billing: current subscription details stay within the dark system. */
:root[data-theme="dark"] body[data-platform-active="billing"] :is(
  .billing-current-card,
  .billing-credit-card
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow-sm) !important;
}
:root[data-theme="dark"] body[data-platform-active="billing"] .billing-current-card.has-paid-plan {
  border-color: #315078 !important;
  background: linear-gradient(135deg, #111F34 0%, #142640 100%) !important;
}
:root[data-theme="dark"] body[data-platform-active="billing"] .billing-current-label,
:root[data-theme="dark"] body[data-platform-active="billing"] .billing-credit-label {
  border: 1px solid #315078 !important;
  background: #183152 !important;
  color: #AFC8FF !important;
}
:root[data-theme="dark"] body[data-platform-active="billing"] .billing-current-copy :is(h3,p),
:root[data-theme="dark"] body[data-platform-active="billing"] .billing-credit-card :is(h3,p) {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] body[data-platform-active="billing"] .billing-current-copy p,
:root[data-theme="dark"] body[data-platform-active="billing"] .billing-credit-card p {
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] body[data-platform-active="billing"] .billing-current-details > div,
:root[data-theme="dark"] body[data-platform-active="billing"] .billing-credit-stats > div {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
}
:root[data-theme="dark"] body[data-platform-active="billing"] .billing-current-details :is(span,strong),
:root[data-theme="dark"] body[data-platform-active="billing"] .billing-credit-stats :is(span,strong) {
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] body[data-platform-active="billing"] .billing-current-details strong,
:root[data-theme="dark"] body[data-platform-active="billing"] .billing-credit-stats strong {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] body[data-platform-active="billing"] .billing-cancel-btn {
  border-color: var(--theme-danger-line) !important;
  background: var(--theme-danger-bg) !important;
  color: var(--theme-danger-text) !important;
}

/* =======================================================================
   Admin tools
   Every real Admin page now loads this shared theme file. Keep the bespoke
   admin navigation but convert its content, dialogs, forms and tables.
   ======================================================================= */
:root[data-theme="dark"] body.admin-page,
:root[data-theme="dark"] body[data-platform-active^="admin-"] {
  background: var(--theme-bg) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .admin-main,
:root[data-theme="dark"] .admin-content,
:root[data-theme="dark"] .refpromo-admin,
:root[data-theme="dark"] .attendance-review-layout,
:root[data-theme="dark"] .payroll-admin-page .pay-shell {
  background: var(--theme-bg) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .admin-topbar {
  border-color: var(--theme-line) !important;
  background: var(--theme-topbar) !important;
}
:root[data-theme="dark"] .admin-topbar :is(h1,p) { color: var(--theme-text) !important; }
:root[data-theme="dark"] .admin-topbar p { color: var(--theme-copy) !important; }
:root[data-theme="dark"] :is(
  .admin-panel,
  .admin-stat-grid article,
  .admin-legal-footer,
  .admin-dialog-card,
  .application-review-card,
  .candidate-detail-body section,
  .candidate-detail-grid article,
  .refpromo-stats article,
  .refpromo-panel,
  .refpromo-create-card,
  .attendance-review-panel,
  .admin-review-card,
  .admin-hours-dialog,
  .admin-hours-summary
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow-sm) !important;
}
:root[data-theme="dark"] :is(
  .admin-page,
  .refpromo-admin,
  .attendance-review-layout,
  .payroll-admin-page
) :is(h1,h2,h3,h4,strong,label,th) {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] :is(
  .admin-page,
  .refpromo-admin,
  .attendance-review-layout,
  .payroll-admin-page
) :is(p,small,td,.admin-muted,.admin-loading,.admin-empty) {
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] :is(
  .admin-page,
  .refpromo-admin,
  .attendance-review-layout,
  .payroll-admin-page
) :is(input,select,textarea,.admin-filter-select) {
  border-color: var(--theme-line) !important;
  background: var(--theme-input) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .admin-page :is(.admin-table th,.admin-table thead th),
:root[data-theme="dark"] .refpromo-table th {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-muted) !important;
}
:root[data-theme="dark"] .admin-page :is(.admin-table td,.admin-table tr),
:root[data-theme="dark"] .refpromo-table td {
  border-color: var(--theme-line) !important;
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] .admin-page :is(.admin-search,.admin-pagination button,.admin-filter-select,.review-application-button,.application-review-close,.admin-menu-button),
:root[data-theme="dark"] .refpromo-admin :is(.refpromo-actions button,.refpromo-pagination button) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .candidate-detail-card,
:root[data-theme="dark"] .candidate-detail-grid.related,
:root[data-theme="dark"] .application-review-meta article,
:root[data-theme="dark"] .application-review-letter p {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] .admin-notice {
  border-color: var(--theme-success-line) !important;
  background: var(--theme-success-bg) !important;
  color: var(--theme-success-text) !important;
}
:root[data-theme="dark"] .admin-notice.warning {
  border-color: var(--theme-warning-line) !important;
  background: var(--theme-warning-bg) !important;
  color: var(--theme-warning-text) !important;
}
:root[data-theme="dark"] .admin-notice.error {
  border-color: var(--theme-danger-line) !important;
  background: var(--theme-danger-bg) !important;
  color: var(--theme-danger-text) !important;
}

/* Dark admin icon holders: white glyphs on dark blue, matching the workspace. */
:root[data-theme="dark"] .admin-page :is(.stat-icon,.recent-user-avatar,.table-avatar),
:root[data-theme="dark"] .refpromo-admin .refpromo-stats article::before {
  border-color: #315078 !important;
  background: #183152 !important;
  color: #FFFFFF !important;
}

/* Final small dark-mode consistency pass for pills used in workspace screens. */
:root[data-theme="dark"] body[data-platform-role] .ai-pill {
  border: 1px solid #315078 !important;
  background: #183152 !important;
  color: #AFC8FF !important;
}
:root[data-theme="dark"] body[data-platform-active="billing"] .status-pill.reviewing,
:root[data-theme="dark"] body[data-platform-active="billing"] .status-pill.active,
:root[data-theme="dark"] body[data-platform-active="billing"] #billingAccessBadge {
  border-color: var(--theme-info-line) !important;
  background: var(--theme-info-bg) !important;
  color: var(--theme-info-text) !important;
}
:root[data-theme="dark"] .refpromo-suspicious {
  background: var(--theme-warning-bg) !important;
}

/* ========================================================================== 
   Workspace dark-mode final polish — 2026-09-10
   Fixes verified from live screenshots: topbar control order, attendance
   record surfaces/chips, and payroll source-of-truth notice.
   ========================================================================== */

/* Platform topbar: theme switch must sit BEFORE notifications, then account.
   Explicit flex order avoids DOM-order differences and prevents overlap. */
.platform-topbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}
.platform-topbar-actions > .fer-theme-toggle {
  order: 1 !important;
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  min-width: 74px !important;
  height: 42px !important;
  flex: 0 0 auto !important;
}
.platform-topbar-actions > [data-platform-notifications] {
  order: 2 !important;
  position: relative;
  flex: 0 0 auto !important;
}
.platform-topbar-actions > .platform-user {
  order: 3 !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
}
@media (max-width: 980px) {
  .platform-topbar-actions { gap: 7px !important; }
  .platform-topbar-actions > .fer-theme-toggle {
    min-width: 42px !important;
    width: 42px !important;
    padding-inline: 0 !important;
  }
  .platform-topbar-actions > .fer-theme-toggle .fer-theme-toggle-label { display: none !important; }
  .platform-user-copy small { display: none; }
}

/* Attendance records: remove every remaining light-mode slab/chip. The
   data-platform selector is deliberate so admin-capable employer sessions
   receive the same treatment. */
:root[data-theme="dark"] body[data-platform-active="attendance"] .employer-assignment-record {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] body[data-platform-active="attendance"] .employer-assignment-record-head {
  border-bottom-color: var(--theme-line) !important;
  background: #142238 !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] body[data-platform-active="attendance"] .employer-assignment-record-title strong {
  color: #F7FAFF !important;
}
:root[data-theme="dark"] body[data-platform-active="attendance"] .employer-assignment-record-title small,
:root[data-theme="dark"] body[data-platform-active="attendance"] .assignment-record-label,
:root[data-theme="dark"] body[data-platform-active="attendance"] .assignment-record-pair small,
:root[data-theme="dark"] body[data-platform-active="attendance"] .assignment-record-worked small,
:root[data-theme="dark"] body[data-platform-active="attendance"] .assignment-record-muted {
  color: #9FB0C8 !important;
}
:root[data-theme="dark"] body[data-platform-active="attendance"] .assignment-record-pair strong,
:root[data-theme="dark"] body[data-platform-active="attendance"] .assignment-record-worked strong,
:root[data-theme="dark"] body[data-platform-active="attendance"] .hours-approved-note {
  color: #F4F8FF !important;
}
:root[data-theme="dark"] body[data-platform-active="attendance"] .assignment-record-worked,
:root[data-theme="dark"] body[data-platform-active="attendance"] .assignment-record-action,
:root[data-theme="dark"] body[data-platform-active="attendance"] .evidence-placeholder {
  border: 1px solid #315078 !important;
  background: #172A45 !important;
  color: #D9E7FF !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] body[data-platform-active="attendance"] .status-pill.hired {
  border-color: var(--theme-success-line) !important;
  background: var(--theme-success-bg) !important;
  color: var(--theme-success-text) !important;
}
:root[data-theme="dark"] body[data-platform-active="attendance"] .status-pill.interview {
  border-color: var(--theme-info-line) !important;
  background: var(--theme-info-bg) !important;
  color: var(--theme-info-text) !important;
}
:root[data-theme="dark"] body[data-platform-active="attendance"] .status-pill.expired {
  border-color: var(--theme-line-strong) !important;
  background: #1A2638 !important;
  color: #AEBFD4 !important;
}

/* Payroll source-of-truth notice: preserve success meaning without a glaring
   white/mint slab in dark mode. Applies to admin and recruiter payroll pages. */
:root[data-theme="dark"] .pay-source-truth {
  border-color: #28513F !important;
  background: #10261F !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] .pay-source-truth .pay-source-icon {
  background: #0B7A58 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 1px rgba(126,226,174,.12) !important;
}
:root[data-theme="dark"] .pay-source-truth strong {
  color: #8BE8B8 !important;
}
:root[data-theme="dark"] .pay-source-truth p,
:root[data-theme="dark"] .pay-source-truth p b {
  color: #B9C9D8 !important;
}


/* ========================================================================== 
   Candidate dark-mode QA + topbar order — 2026-09-10
   ========================================================================== */

/* Shared workspace topbar: Theme -> Notifications -> User. Keep controls in
   normal flex flow so the theme control can never sit on top of the profile. */
.platform-topbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-width: 0;
}
.platform-topbar-actions > .fer-theme-toggle {
  order: 1 !important;
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  min-width: 76px !important;
  margin: 0 !important;
}
.platform-topbar-actions > :is(.notification-center,[data-platform-notifications]) {
  order: 2 !important;
  position: relative;
  flex: 0 0 auto !important;
}
.platform-topbar-actions > .platform-user {
  order: 3 !important;
  position: relative;
  min-width: 0;
  flex: 0 1 auto !important;
}
.platform-topbar-actions .platform-user-button { max-width: 240px; }
.platform-topbar-actions .platform-user-copy { min-width: 0; }
@media (max-width: 1260px) {
  .platform-topbar-actions > .fer-theme-toggle {
    width: 42px !important;
    min-width: 42px !important;
    padding-inline: 0 !important;
  }
  .platform-topbar-actions > .fer-theme-toggle .fer-theme-toggle-label { display: none !important; }
  .platform-topbar-actions .platform-user-button { max-width: 190px; }
}
@media (max-width: 820px) {
  .platform-topbar-actions { gap: 7px !important; }
  .platform-topbar-actions .platform-user-copy { display: none !important; }
  .platform-topbar-actions .platform-user-button { width: 44px; padding: 4px !important; }
}

/* Candidate: Find Jobs. Dynamic job cards were still using light-mode slabs. */
:root[data-theme="dark"] body[data-platform-role="candidate"][data-platform-active="jobs"] .job-list-card {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow-sm) !important;
}
:root[data-theme="dark"] body[data-platform-role="candidate"][data-platform-active="jobs"] .job-list-card :is(h2,h3,strong) {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] body[data-platform-role="candidate"][data-platform-active="jobs"] .job-list-card :is(p,small) {
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] body[data-platform-role="candidate"][data-platform-active="jobs"] .job-more-details {
  border-color: #315078 !important;
  background: #101F34 !important;
}
:root[data-theme="dark"] body[data-platform-role="candidate"][data-platform-active="jobs"] .job-more-details > summary {
  color: #AFC8FF !important;
}
:root[data-theme="dark"] body[data-platform-role="candidate"][data-platform-active="jobs"] .job-more-details[open] > summary {
  border-bottom: 1px solid var(--theme-line);
}
:root[data-theme="dark"] body[data-platform-role="candidate"][data-platform-active="jobs"] .job-full-description {
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] body[data-platform-role="candidate"][data-platform-active="jobs"] .job-meta.large > span {
  border: 1px solid #315078 !important;
  background: #172A45 !important;
  color: #D9E6F5 !important;
}
:root[data-theme="dark"] body[data-platform-role="candidate"][data-platform-active="jobs"] .job-list-footer {
  border-color: var(--theme-line) !important;
}
:root[data-theme="dark"] body[data-platform-role="candidate"][data-platform-active="jobs"] .job-share-toggle {
  border-color: #315078 !important;
  background: #172A45 !important;
  color: #AFC8FF !important;
}
:root[data-theme="dark"] body[data-platform-role="candidate"][data-platform-active="jobs"] .job-apply-locked small {
  color: var(--theme-muted) !important;
}

/* Candidate: Attendance history. Preserve semantic status differences without
   keeping white pills/cards in the dark workspace. */
:root[data-theme="dark"] .candidate-attendance-page .attendance-history-filters button {
  border-color: #315078 !important;
  background: #14253D !important;
  color: #D4E0EF !important;
}
:root[data-theme="dark"] .candidate-attendance-page .attendance-history-filters button:hover {
  border-color: #4F73A6 !important;
  background: #1A3152 !important;
}
:root[data-theme="dark"] .candidate-attendance-page .attendance-history-filters button.active {
  border-color: #4F7DFF !important;
  background: #2459E0 !important;
  color: #FFFFFF !important;
}
:root[data-theme="dark"] .candidate-attendance-page .attendance-history-card {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
}
:root[data-theme="dark"] .candidate-attendance-page .attendance-history-card-head {
  border-color: var(--theme-line) !important;
  background: #182A45 !important;
}
:root[data-theme="dark"] .candidate-attendance-page .attendance-history-card-head span:not(.hours-approval-badge) {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .candidate-attendance-page .attendance-history-card-head small {
  color: #8FB4FF !important;
}
:root[data-theme="dark"] .candidate-attendance-page .attendance-history-card .attendance-history-title strong {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .candidate-attendance-page .attendance-history-card .attendance-history-title small {
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] .candidate-attendance-page .attendance-history-metrics > span {
  border-color: var(--theme-line) !important;
  background: #162840 !important;
}
:root[data-theme="dark"] .candidate-attendance-page .attendance-history-metrics small {
  color: var(--theme-muted) !important;
}
:root[data-theme="dark"] .candidate-attendance-page .attendance-history-metrics strong {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .candidate-attendance-page .attendance-history-metrics .attendance-history-duration {
  border-color: #315078 !important;
  background: #193354 !important;
}
:root[data-theme="dark"] .candidate-attendance-page .attendance-history-metrics .attendance-history-duration strong {
  color: #AFC8FF !important;
}
:root[data-theme="dark"] .candidate-attendance-page .attendance-history-review.is-approved {
  border: 1px solid var(--theme-success-line) !important;
  background: var(--theme-success-bg) !important;
  color: var(--theme-success-text) !important;
}
:root[data-theme="dark"] .candidate-attendance-page .attendance-history-review.is-pending,
:root[data-theme="dark"] .candidate-attendance-page .attendance-history-review.is-information {
  border: 1px solid var(--theme-warning-line) !important;
  background: var(--theme-warning-bg) !important;
  color: var(--theme-warning-text) !important;
}
:root[data-theme="dark"] .candidate-attendance-page .attendance-history-review:is(.is-disputed,.is-final_review) {
  border: 1px solid var(--theme-danger-line) !important;
  background: var(--theme-danger-bg) !important;
  color: var(--theme-danger-text) !important;
}
:root[data-theme="dark"] .candidate-attendance-page .attendance-history-review:is(.is-running,.is-response) {
  border: 1px solid var(--theme-info-line) !important;
  background: var(--theme-info-bg) !important;
  color: var(--theme-info-text) !important;
}
:root[data-theme="dark"] .candidate-attendance-page .hours-approval-badge.is-approved {
  border-color: var(--theme-success-line) !important;
  background: #12382F !important;
  color: #86E7C6 !important;
}
:root[data-theme="dark"] .candidate-attendance-page .hours-approval-badge:is(.is-pending,.is-information) {
  border-color: var(--theme-warning-line) !important;
  background: #3A2A14 !important;
  color: #FFD58A !important;
}
:root[data-theme="dark"] .candidate-attendance-page .hours-approval-badge:is(.is-disputed,.is-final_review) {
  border-color: var(--theme-danger-line) !important;
  background: #3B1E26 !important;
  color: #FFB1BA !important;
}
:root[data-theme="dark"] .candidate-attendance-page .hours-approval-badge:is(.is-running,.is-response) {
  border-color: var(--theme-info-line) !important;
  background: #16345A !important;
  color: #AFC8FF !important;
}

/* Candidate profile: the profile is an application surface in dark mode, not
   a white public brochure card. */
:root[data-theme="dark"] body.candidate-profile-page :is(
  .profile-view-hero,
  .profile-display-card,
  .profile-side-card,
  .profile-section-editor,
  .profile-overview-card,
  .profile-rate-card,
  .profile-readiness-card,
  .candidate-review-empty,
  .profile-photo-upload-box,
  .view-profile-save-bar,
  .profile-save-bar
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow-sm) !important;
}
:root[data-theme="dark"] body.candidate-profile-page :is(
  .profile-view-hero,
  .profile-display-card,
  .profile-side-card,
  .profile-section-editor,
  .profile-overview-card,
  .profile-rate-card,
  .profile-readiness-card
) :is(h1,h2,h3,h4,strong,b,label) {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] body.candidate-profile-page :is(
  .profile-view-hero,
  .profile-display-card,
  .profile-side-card,
  .profile-section-editor,
  .profile-overview-card,
  .profile-rate-card,
  .profile-readiness-card
) :is(p,small,span:not(.profile-verification-badge):not(.profile-chip)) {
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] body.candidate-profile-page :is(.profile-chip,.profile-verification-badge,.small-percentage) {
  border-color: #315078 !important;
  background: #172A45 !important;
  color: #BFD2FF !important;
}
:root[data-theme="dark"] body.candidate-profile-page :is(.profile-detail-row,.profile-meta-list > div,.structured-card-list > article,.structured-card-list > div) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
}
:root[data-theme="dark"] body.candidate-profile-page :is(input,textarea,select) {
  border-color: var(--theme-line) !important;
  background: var(--theme-input) !important;
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] body.candidate-profile-page .profile-edit-icon {
  border-color: #315078 !important;
  background: #172A45 !important;
  color: #AFC8FF !important;
}

/* CV Builder: editor uses the dark product system, while the printable A4
   preview remains a true paper document and keeps each template's own colors. */
:root[data-theme="dark"] body[data-platform-active="cv-builder"] .cv-control-heading span,
:root[data-theme="dark"] body[data-platform-active="cv-builder"] .cv-control-card label small,
:root[data-theme="dark"] body[data-platform-active="cv-builder"] .cv-preview-toolbar span,
:root[data-theme="dark"] body[data-platform-active="cv-builder"] .cv-link-help {
  color: var(--theme-muted) !important;
}
:root[data-theme="dark"] body[data-platform-active="cv-builder"] .cv-control-heading strong,
:root[data-theme="dark"] body[data-platform-active="cv-builder"] .cv-control-card label,
:root[data-theme="dark"] body[data-platform-active="cv-builder"] .cv-repeat-head strong,
:root[data-theme="dark"] body[data-platform-active="cv-builder"] .cv-preview-toolbar strong {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] body[data-platform-active="cv-builder"] .cv-template-option.active {
  border-color: #5E87FF !important;
  background: #1A3152 !important;
  box-shadow: 0 0 0 2px rgba(79,125,255,.16) !important;
}
:root[data-theme="dark"] body[data-platform-active="cv-builder"] .cv-template-option strong {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] body[data-platform-active="cv-builder"] .cv-template-option span {
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] body[data-platform-active="cv-builder"] :is(.cv-collapse,.cv-add-item) {
  border: 1px solid #315078 !important;
  background: #172A45 !important;
  color: #AFC8FF !important;
}
:root[data-theme="dark"] body[data-platform-active="cv-builder"] .cv-repeater-empty {
  border-color: #315078 !important;
  background: #101F34 !important;
  color: var(--theme-muted) !important;
}

/* The selected CV template owns all colors inside the paper. Explicitly
   restore its print palette after the product-level dark theme. */
:root[data-theme="dark"] .cv-template-ats-professional .cv-paper { color: #172033 !important; }
:root[data-theme="dark"] .cv-template-ats-professional .cv-head h1 { color: #142235 !important; }
:root[data-theme="dark"] .cv-template-ats-professional .cv-role { color: #4D5F72 !important; }
:root[data-theme="dark"] .cv-template-ats-professional .cv-contact { color: #64748B !important; }
:root[data-theme="dark"] .cv-template-ats-professional .cv-section h2 { color: var(--cv-accent) !important; }
:root[data-theme="dark"] .cv-template-ats-professional .cv-entry-head strong { color: #172033 !important; }
:root[data-theme="dark"] .cv-template-ats-professional .cv-tag { border-color: #E3E8EF !important; background: #F8FAFC !important; color: #39465A !important; }

:root[data-theme="dark"] .cv-template-clean-minimal .cv-paper { color: #242424 !important; }
:root[data-theme="dark"] .cv-template-clean-minimal .cv-head h1 { color: #1F2937 !important; }
:root[data-theme="dark"] .cv-template-clean-minimal .cv-head .cv-role { color: var(--cv-accent) !important; }
:root[data-theme="dark"] .cv-template-clean-minimal .cv-contact { color: #667085 !important; }
:root[data-theme="dark"] .cv-template-clean-minimal .cv-section h2 { color: #344054 !important; }
:root[data-theme="dark"] .cv-template-clean-minimal .cv-tag { border-color: #E0E5EC !important; background: transparent !important; color: #39465A !important; }

:root[data-theme="dark"] .cv-template-modern-sidebar .cv-paper { color: #1A2333 !important; }
:root[data-theme="dark"] .cv-template-modern-sidebar .cv-head { color: #FFFFFF !important; background: var(--cv-accent) !important; }
:root[data-theme="dark"] .cv-template-modern-sidebar .cv-head h1 { color: #FFFFFF !important; }
:root[data-theme="dark"] .cv-template-modern-sidebar .cv-head .cv-role { color: rgba(255,255,255,.92) !important; }
:root[data-theme="dark"] .cv-template-modern-sidebar .cv-contact,
:root[data-theme="dark"] .cv-template-modern-sidebar .cv-contact a { color: rgba(255,255,255,.88) !important; }
:root[data-theme="dark"] .cv-template-modern-sidebar .cv-main { color: #1A2333 !important; background: #FFFFFF !important; }
:root[data-theme="dark"] .cv-template-modern-sidebar .cv-side { color: #1A2333 !important; background: #F4F7FA !important; border-color: #E8EDF3 !important; }
:root[data-theme="dark"] .cv-template-modern-sidebar .cv-section h2 { color: var(--cv-accent) !important; }
:root[data-theme="dark"] .cv-template-modern-sidebar .cv-side .cv-tag { background: transparent !important; color: #4B5B6F !important; }
:root[data-theme="dark"] .cv-template-modern-sidebar .cv-link-icon { background: rgba(255,255,255,.72) !important; color: var(--cv-accent) !important; }

/* ========================================================================== 
   FER dark theme root QA — 2026-09-10
   Fixes shared topbar placement, candidate profile chips/save feedback and
   invoice typography/surfaces without changing light mode or business logic.
   ========================================================================== */

/* Workspace topbars: the JS now relocates the toggle into the real shell.
   These rules make the intended order deterministic on every role. */
.platform-topbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}
.platform-topbar-actions > .fer-theme-toggle {
  order: 1 !important;
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  z-index: auto !important;
}
.platform-topbar-actions > :is(.notification-center,[data-platform-notifications]) {
  order: 2 !important;
  position: relative !important;
  flex: 0 0 auto !important;
}
.platform-topbar-actions > .platform-user {
  order: 3 !important;
  position: relative !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  z-index: 1;
}
.platform-topbar-actions .fer-theme-toggle-floating {
  position: static !important;
  inset: auto !important;
}
.platform-topbar-actions .platform-user-button {
  max-width: min(250px, 28vw) !important;
}
.platform-topbar-actions .platform-user-copy {
  min-width: 0 !important;
}
@media (max-width: 1180px) {
  .platform-topbar-actions > .fer-theme-toggle {
    width: 42px !important;
    min-width: 42px !important;
    padding-inline: 0 !important;
  }
  .platform-topbar-actions > .fer-theme-toggle .fer-theme-toggle-label { display: none !important; }
  .platform-topbar-actions .platform-user-button { max-width: 180px !important; }
}
@media (max-width: 820px) {
  .platform-topbar-actions { gap: 7px !important; }
  .platform-topbar-actions .platform-user-copy { display: none !important; }
  .platform-topbar-actions .platform-user-button { width: 44px !important; max-width: 44px !important; padding: 4px !important; }
}

/* Candidate profile: remove the remaining light pills and save toast. */
:root[data-theme="dark"] body.candidate-profile-page :is(
  .profile-hero-tags span,
  .freelancer-status-row span,
  .freelancer-skill-list span,
  .profile-chip,
  .profile-verification-badge,
  .small-percentage
) {
  border: 1px solid #315078 !important;
  background: #172A45 !important;
  color: #D8E5F6 !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] body.candidate-profile-page .freelancer-skill-list.muted span {
  border-color: #2C4668 !important;
  background: #142238 !important;
  color: #AFC0D6 !important;
}
:root[data-theme="dark"] body.candidate-profile-page .profile-save-bar.view-profile-save-bar .form-message {
  border: 1px solid #315078 !important;
  background: #172A45 !important;
  color: #D8E5F6 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
}

/* Invoice UI: make every operational invoice surface and text level readable.
   This intentionally applies to admin, recruiter and employer invoice pages. */
:root[data-theme="dark"] :is(.invoice-head h1,.invoice-head h2,.invoice-panel-head h3,.invoice-stat strong,.invoice-card h3) {
  color: #F4F8FF !important;
}
:root[data-theme="dark"] :is(.invoice-head p,.invoice-stat span,.invoice-card header small,.invoice-note,.invoice-internal-note) {
  color: #AFC0D6 !important;
}
:root[data-theme="dark"] :is(.invoice-head .eyebrow,.invoice-panel-head small) {
  color: #64D8D0 !important;
}
:root[data-theme="dark"] .invoice-scope,
:root[data-theme="dark"] .invoice-count {
  border-color: #315078 !important;
  background: #172A45 !important;
  color: #C7D5E8 !important;
}
:root[data-theme="dark"] :is(
  .invoice-summary-bar > div,
  .invoice-card-metrics div,
  .invoice-note,
  .invoice-document-head,
  .invoice-parties section,
  .invoice-meta,
  .invoice-totals-box,
  .invoice-payment-panel,
  .invoice-payment-row,
  .invoice-footer
) {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-soft) !important;
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] .invoice-internal {
  border-color: #5A4528 !important;
  background: #2B2116 !important;
  color: #E7C998 !important;
}
:root[data-theme="dark"] .invoice-internal-grid div {
  background: #352719 !important;
  color: #E7C998 !important;
}
:root[data-theme="dark"] :is(
  .invoice-summary-bar small,
  .invoice-card-metrics small,
  .invoice-meta small,
  .invoice-parties small,
  .invoice-internal-grid small,
  .invoice-footer
) {
  color: #93A6BE !important;
}
:root[data-theme="dark"] :is(
  .invoice-summary-bar strong,
  .invoice-card-metrics strong,
  .invoice-meta strong,
  .invoice-parties strong,
  .invoice-totals-box strong,
  .invoice-internal-grid strong,
  .invoice-document-head h2,
  .invoice-lines-doc td strong
) {
  color: #F4F8FF !important;
}
:root[data-theme="dark"] :is(.invoice-document-head p,.invoice-parties p,.invoice-totals-box div,.invoice-payment-row) {
  color: #B5C5D8 !important;
}
:root[data-theme="dark"] .invoice-lines-doc th {
  border-color: var(--theme-line) !important;
  background: #172A45 !important;
  color: #A9BAD0 !important;
}
:root[data-theme="dark"] .invoice-lines-doc td {
  border-color: var(--theme-line) !important;
  color: #C8D5E5 !important;
}
:root[data-theme="dark"] .invoice-form label { color: #D8E5F6 !important; }
:root[data-theme="dark"] :is(.invoice-ready,.invoice-status.paid) { color: #8BE8B8 !important; }
:root[data-theme="dark"] :is(.invoice-blocked,.invoice-negative,.invoice-status.overdue) { color: #FFB1BA !important; }
:root[data-theme="dark"] .invoice-status.draft {
  background: #1A2638 !important;
  color: #B8C6D8 !important;
}
:root[data-theme="dark"] .invoice-status.sent {
  background: #16345A !important;
  color: #AFC8FF !important;
}
:root[data-theme="dark"] .invoice-status.part_paid {
  background: #3A2A14 !important;
  color: #FFD58A !important;
}
:root[data-theme="dark"] .invoice-status.paid {
  background: #12382F !important;
}
:root[data-theme="dark"] .invoice-status.overdue {
  background: #3B1E26 !important;
}

/* Keep printed/exported invoices paper-like even when the app is in dark mode. */
@media print {
  :root[data-theme="dark"] :is(
    .invoice-detail-card,
    .invoice-document-head,
    .invoice-parties section,
    .invoice-meta,
    .invoice-totals-box,
    .invoice-lines-doc,
    .invoice-footer
  ) {
    background: #FFFFFF !important;
    color: #173650 !important;
    border-color: #E2E8F0 !important;
    box-shadow: none !important;
  }
  :root[data-theme="dark"] :is(
    .invoice-document-head h2,
    .invoice-parties strong,
    .invoice-meta strong,
    .invoice-totals-box strong,
    .invoice-lines-doc td strong
  ) { color: #173650 !important; }
  :root[data-theme="dark"] :is(
    .invoice-document-head p,
    .invoice-parties p,
    .invoice-meta small,
    .invoice-lines-doc td,
    .invoice-footer
  ) { color: #60748A !important; }
}


/* ================================================================
   Dashboard topbar + recruiter overview final consistency — 2026-09-10
   Explicit theme slots remove race-condition overlap on every workspace.
   ================================================================ */
.fer-theme-slot {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.fer-theme-slot > .fer-theme-toggle {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  flex: 0 0 auto;
}

/* Shared Candidate / Employer / Admin platform shell: same right-side order
   as the approved Recruiter topbar — Theme, Notification, Profile. */
.platform-topbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}
.platform-topbar-actions > .fer-theme-slot { order: 0; }
.platform-topbar-actions > :is(.notification-center,[data-platform-notifications]) { order: 1; flex: 0 0 auto; }
.platform-topbar-actions > .platform-user { order: 2; min-width: 0; flex: 0 1 auto; }
.platform-topbar-actions .platform-user-button {
  min-width: 0 !important;
  max-width: 230px !important;
}
.platform-topbar-actions .platform-user-copy {
  min-width: 0 !important;
  max-width: 150px;
}
.platform-topbar-actions .platform-user-copy :is(strong,small) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .platform-topbar-actions .platform-user-button { max-width: 185px !important; }
  .platform-topbar-actions .platform-user-copy { max-width: 112px; }
}
@media (max-width: 860px) {
  .platform-topbar-actions { gap: 7px !important; }
  .platform-topbar-actions .fer-theme-toggle-label { display: none !important; }
  .platform-topbar-actions .fer-theme-toggle { width: 42px !important; padding-inline: 0 !important; }
  .platform-topbar-actions .platform-user-copy { display: none !important; }
  .platform-topbar-actions .platform-user-button { width: 44px !important; max-width: 44px !important; padding: 4px !important; }
}

/* Recruiter keeps the approved visual order: Theme, Refresh, Profile. */
.recruiter-topbar .topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0;
}
.recruiter-topbar .topbar-actions > .fer-theme-slot { order: 0; }
.recruiter-topbar .topbar-actions > .refresh-button { order: 1; flex: 0 0 auto; }
.recruiter-topbar .topbar-actions > .recruiter-account-menu { order: 2; min-width: 0; }
.recruiter-topbar .recruiter-account { min-width: 0; max-width: 235px; }
.recruiter-topbar .recruiter-account .account-copy { min-width: 0; max-width: 150px; }
.recruiter-topbar .recruiter-account .account-copy :is(strong,small) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme="dark"] .recruiter-topbar .recruiter-account {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .recruiter-topbar .recruiter-account strong {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .recruiter-topbar .recruiter-account small,
:root[data-theme="dark"] .recruiter-topbar .account-chevron {
  color: var(--theme-copy) !important;
}

/* Recruiter overview: candidate snapshot cards must be real dark surfaces,
   never the light-mode white cards shown in QA screenshots. */
:root[data-theme="dark"] .recruiter-main .candidate-mini {
  background: var(--theme-surface-raised) !important;
  border-color: var(--theme-line) !important;
  color: var(--theme-text) !important;
  box-shadow: var(--theme-shadow-sm) !important;
}
:root[data-theme="dark"] .recruiter-main .candidate-mini strong {
  color: var(--theme-text) !important;
}
:root[data-theme="dark"] .recruiter-main .candidate-mini p,
:root[data-theme="dark"] .recruiter-main .candidate-mini small {
  color: var(--theme-copy) !important;
}

/* Recruiter compact badges/statuses: avoid white pills in dark mode. */
:root[data-theme="dark"] .recruiter-main :is(.metric-badge,.status-badge) {
  background: var(--theme-surface-soft) !important;
  border: 1px solid var(--theme-line) !important;
  color: var(--theme-copy) !important;
}
:root[data-theme="dark"] .recruiter-main .status-badge:is(.active,.accepted,.verified,.hired) {
  background: var(--theme-success-bg) !important;
  border-color: var(--theme-success-line) !important;
  color: var(--theme-success-text) !important;
}
:root[data-theme="dark"] .recruiter-main .status-badge:is(.shortlisted,.interview,.pending,.reviewing) {
  background: var(--theme-info-bg) !important;
  border-color: var(--theme-info-line) !important;
  color: var(--theme-info-text) !important;
}
:root[data-theme="dark"] .recruiter-main .status-badge:is(.rejected,.paused,.cancelled) {
  background: var(--theme-danger-bg) !important;
  border-color: var(--theme-danger-line) !important;
  color: var(--theme-danger-text) !important;
}
:root[data-theme="dark"] .recruiter-main .status-badge:is(.scheduled,.running) {
  background: var(--theme-warning-bg) !important;
  border-color: var(--theme-warning-line) !important;
  color: var(--theme-warning-text) !important;
}

/* Dedicated legacy Admin overview topbar uses the same explicit slot. */
.admin-topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
}
.admin-topbar-actions > .fer-theme-slot { flex: 0 0 auto; }
@media (max-width: 760px) {
  .admin-topbar-actions { gap: 7px; }
  .admin-topbar-actions .fer-theme-toggle-label { display: none !important; }
  .admin-topbar-actions .fer-theme-toggle { width: 42px !important; padding-inline: 0 !important; }
}