:root {
  --bg-main: #02040b;
  --bg-surface: rgba(15, 23, 42, 0.78);
  --bg-surface-hover: rgba(30, 41, 59, 0.95);
  --bg-surface-solid: #0f172a;
  --border-color: rgba(148, 163, 184, 0.12);
  --border-highlight: rgba(165, 243, 252, 0.3);
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --primary-color: #22d3ee;
  --accent-color: #a78bfa;
  --success-color: #22c55e;
  --warning-color: #f59e0b;
  --danger-color: #f43f5e;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-glass: 0 8px 32px -4px rgba(0, 0, 0, 0.4);
}

/* ===== PREMIUM TYPOGRAPHY SYSTEM ===== */

body,
input,
select,
button,
textarea,
table {
  font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  font-feature-settings: "ss01" 1, "cv01" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* major headings */
.header-logo h1,
.job-title,
.vacancy-modal-title,
.filters-header h2 {
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  letter-spacing: -0.03em;
}

/* top navigation */
.top-nav a {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* KPI titles and values */
.kpi-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  letter-spacing: 0.06em;
}

.kpi-value {
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* table headers */
.data-table th,
.sort-btn {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* table content */
.data-table td,
.table-subtext,
.detail-value,
.job-org,
.results-count,
.filter-chip,
.quick-pill,
.meta-pill,
.badge,
.card-action-btn,
.table-link-btn {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
}

/* make titles feel more premium */
.job-title {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.vacancy-modal-title {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

/* body details */
.detail-label,
.highlight-label,
.modal-field-label,
.modal-section-title {
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* table body readability */
.data-table td {
  font-weight: 500;
}

.data-table td strong {
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* status badge and pills */
.badge,
.meta-pill,
.quick-pill,
.filter-chip {
  font-weight: 700;
}

[data-theme="light"] {
  --bg-main: #f6f8fc;
  --bg-surface: rgba(255, 255, 255, 0.86);
  --bg-surface-hover: rgba(255, 255, 255, 0.98);
  --bg-surface-solid: #ffffff;
  --border-color: rgba(15, 23, 42, 0.10);
  --border-highlight: rgba(34, 211, 238, 0.22);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --primary-color: #0ea5e9;
  --accent-color: #8b5cf6;
  --success-color: #16a34a;
  --warning-color: #d97706;
  --danger-color: #e11d48;
  --shadow-glass: 0 10px 32px -8px rgba(15, 23, 42, 0.14);
}

/* Reading / scroll progress bar — fixed at the very top, brand gradient that
   swaps automatically with the theme (uses the themed --primary/--accent vars). */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 2000;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  transition: width .1s linear;
  pointer-events: none;
  will-change: width;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { transition: none; }
}

/* RESET */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100%;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-main);
  color: var(--text-primary);
  overflow-x: hidden;
}

/* =========================
   TOP NAVIGATION BAR
   ========================= */
.top-nav {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 10px 0 16px 0;
  flex-wrap: wrap;
}

.top-nav a {
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

/* hover effect */
.top-nav a:hover {
  color: var(--primary-color);
  background: rgba(34, 211, 238, 0.08);
}

/* active page (optional later) */
.top-nav a.active {
  color: var(--primary-color);
  background: rgba(34, 211, 238, 0.12);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.2);
}

/* BACKGROUND BLOBS */
.bg-shapes {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: float 28s infinite alternate ease-in-out;
}

.shape-1 {
  width: 720px;
  height: 720px;
  background: rgba(34, 211, 238, 0.28);
  top: -120px;
  left: -120px;
}

.shape-2 {
  width: 580px;
  height: 580px;
  background: rgba(167, 139, 250, 0.22);
  bottom: -80px;
  right: -140px;
  animation-delay: -9s;
}

.shape-3 {
  width: 460px;
  height: 460px;
  background: rgba(34, 197, 94, 0.18);
  top: 42%;
  left: 42%;
  animation-delay: -17s;
}

@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(70px, 50px) scale(1.12); }
}

/* BEGIN hero-wave — full-bleed WebGL wave background (see hero-wave.js) */
.bg-wave {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;            /* over the blurred blobs, still inside .bg-shapes (z-index:-1) */
  pointer-events: none;
  display: block;
}
/* soften the blobs so the two background layers don't fight */
.bg-shapes .shape { opacity: 0.6; }
/* perf budget: no WebGL on phones (mirrors .shape being disabled <=768px) */
@media (max-width: 768px) {
  .bg-wave { display: none; }
}
/* END hero-wave */

/* LAYOUT */
.app-container {
  max-width: 1600px;
  margin: auto;
  padding: 1rem 2rem;
}

/* HEADER */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--border-color);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-logo i {
  color: var(--primary-color);
}

.header-logo h1 {
  font-family: "Unbounded", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.gradient-text {
  background: linear-gradient(to right, #FF6B6B, #6B66FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;

  /* Remove or comment out the line below to keep your HTML casing */
  /* text-transform: lowercase; */
}

/* "All" superscript on the home hero — lively cursive script sitting
   above the main "Deputation Vacancies" baseline. Great Vibes is the
   more decorative / lively cousin of Sacramento, with deeper swash
   tails and a more hand-drawn feel. Sized + padded so the swash never
   clips at the top edge of its own line-box. */
.header-all {
  font-family: "Great Vibes", "Snell Roundhand", "Apple Chancery", cursive;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.6;
  vertical-align: baseline;
  margin: 0 0.35em 0 0;
  padding-top: 0.9em;
  background: linear-gradient(135deg, #FF6B6B 0%, #a78bfa 50%, #f0abfc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  transform: translateY(-0.25em) rotate(-4deg);
  letter-spacing: 0.02em;
  /* Give the swash tail room so it never clips the parent .app-header
     bottom-border or the surrounding KPI strip below. */
  overflow: visible;
}
@media (max-width: 768px) {
  .header-all { font-size: 1.3rem; }
}

/* HEADER BUTTONS */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Desktop: centered hero title, matched to Contact & Community.
   Mobile keeps the compact left-aligned header (index uses legacy CSS;
   my-deputation keeps its <=640px column header below). */
@media (min-width: 769px) {
  .app-header {
    position: relative;
    display: block;
    text-align: center;
    padding: 1.5rem 0; /* equal top/bottom → title vertically centred in the band */
  }
  .header-logo {
    justify-content: center;
  }
  .header-logo i,
  .header-logo svg {
    display: none; /* Contact hero has no leading icon */
  }
  .header-logo h1 {
    font-family: "Unbounded", "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
  }
  .header-actions {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
}

.icon-btn {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary);
}

.icon-btn.active {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.12);
}

.fav-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #f43f5e;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  transition: all 0.2s ease;
}

/* MAIN GRID */
.main-layout {
  display: grid;
  /* minmax(0, 1fr) lets the dashboard column shrink below the table's
     intrinsic min-width (1100px) on laptop widths; the table itself
     scrolls horizontally inside its .table-wrapper instead of overflowing
     the page. */
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
  align-items: start;
}

/* SIDEBAR */
.filters-sidebar {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  position: sticky;
  top: 1rem;
}

.filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.filters-header h2 {
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.text-btn {
  background: transparent;
  border: none;
  color: var(--primary-color);
  font-weight: 600;
  cursor: pointer;
}

.filter-group {
  margin-bottom: 1.2rem;
}

.filter-group label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============== Multi-select widget ============== */
.ms { position: relative; }
.ms-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.85rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font: inherit; font-size: 0.95rem; cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease;
}
.ms-trigger:hover { border-color: var(--border-highlight); }
.ms-trigger[aria-expanded="true"], .ms-trigger--active {
  border-color: var(--primary-color);
  background: var(--bg-surface-hover);
}
.ms-trigger-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-trigger--active .ms-trigger-label { color: var(--primary-color); font-weight: 600; }
.ms-caret { width: 16px; height: 16px; color: var(--text-secondary); transition: transform 180ms ease; flex: none; }
.ms-trigger[aria-expanded="true"] .ms-caret { transform: rotate(180deg); }

/* The HTML `hidden` attribute is overridden by `display: flex` below —
   restore it so the panel stays hidden until the trigger opens it. */
.ms-panel[hidden] { display: none !important; }

.ms-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  z-index: 50;
  background: rgba(2, 4, 11, 0.96);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 50px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(34, 211, 238, 0.05);
  padding: 0.6rem;
  max-height: min(60vh, 420px); display: flex; flex-direction: column;
  backdrop-filter: blur(18px);
  animation: ms-pop 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ms-pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ms-panel-head { display: flex; gap: 0.5rem; align-items: center; padding: 0.05rem 0.1rem 0.45rem; }
.ms-search-wrap { position: relative; flex: 1; }
.ms-search-icon {
  position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-secondary); pointer-events: none;
}
.ms-search {
  width: 100%;
  padding: 0.55rem 0.7rem 0.55rem 2.1rem;
  background: rgba(2, 4, 11, 0.55);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  font: inherit; font-size: 0.9rem;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.ms-search:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12); }

.ms-close {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--border-color);
  border-radius: 10px; cursor: pointer; color: var(--text-secondary);
  transition: all 140ms ease;
}
.ms-close:hover { color: var(--text-primary); border-color: var(--border-highlight); background: rgba(148, 163, 184, 0.06); }
.ms-close svg { width: 14px; height: 14px; }

.ms-hint {
  margin: 0 0.15rem 0.45rem;
  font-size: 0.74rem; color: var(--text-muted);
  letter-spacing: 0.01em;
}

.ms-list {
  list-style: none; padding: 0.1rem; margin: 0;
  overflow: auto; flex: 1; min-height: 0;
  scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}
.ms-list::-webkit-scrollbar { width: 8px; }
.ms-list::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.25); border-radius: 4px; }

.ms-list li { margin: 0; padding: 0; }

/* The glowing pill toggle */
.ms-opt {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  margin: 3px 1px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  font: inherit; font-size: 0.92rem; font-weight: 500;
  text-align: left; width: 100%;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 240ms ease, transform 140ms ease;
  position: relative;
}
.ms-opt:hover {
  background: rgba(34, 211, 238, 0.06);
  color: var(--text-primary);
  border-color: rgba(34, 211, 238, 0.18);
}
.ms-opt .ms-opt-check {
  width: 18px; height: 18px; flex: none;
  display: grid; place-items: center;
  border-radius: 6px;
  border: 1.5px solid var(--border-color);
  color: var(--bg-surface-solid);
  transition: all 200ms ease;
}
.ms-opt .ms-opt-check svg { width: 12px; height: 12px; opacity: 0; transform: scale(0.6); transition: 200ms ease; }
.ms-opt .ms-opt-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Single-select (Pay Level): name + a little gap + gradient "(N vacancies)" */
.ss-panel { padding: 0.3rem; max-height: 340px; display: flex; flex-direction: column; z-index: 90; }
.ss-list { max-height: 332px; }
.ss-opt { gap: 0.5rem; }
.ss-opt-name { white-space: nowrap; }
.ss-opt-count {
  font-weight: 700;
  background: linear-gradient(90deg, #FF6B6B, #6B66FF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ms-trigger-label .ss-opt-count { margin-left: 8px; }
.ms-trigger--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* While any filter dropdown is open, lift the whole (sticky) sidebar above the
   page content and the fixed visitor counter so the panel paints OVER them
   instead of behind. JS adds .ms-elevated on open, removes it on close. */
.filters-sidebar.ms-elevated { z-index: 200; }
/* Generic "open upward" state (set by JS when there's no room below). */
.ms-panel.ms-open-up { top: auto; bottom: calc(100% + 6px); }

/* Location (multi-select, bottom of the sidebar): open a wider panel that
   spreads rightward over the content in 2 columns so it shows more at once. */
@media (min-width: 769px) {
  #filterLocationPanel {
    right: auto;
    width: min(640px, 56vw);
    z-index: 95;
  }
  #filterLocationList {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2px 10px;
    align-content: start;
  }
  /* let long location labels truncate inside their column instead of forcing it wider */
  #filterLocationList .ms-opt { min-width: 0; }
  #filterLocationList .ms-opt-label { min-width: 0; }
}

/* Selected = glow */
.ms-opt.is-selected {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(167, 139, 250, 0.10));
  border-color: rgba(34, 211, 238, 0.55);
  color: var(--text-primary);
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.3), 0 0 22px rgba(34, 211, 238, 0.18) inset, 0 4px 14px rgba(34, 211, 238, 0.12);
}
.ms-opt.is-selected:hover {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.26), rgba(167, 139, 250, 0.14));
  transform: translateX(2px);
}
.ms-opt.is-selected .ms-opt-check {
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  border-color: transparent;
  color: #02040b;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.55);
}
.ms-opt.is-selected .ms-opt-check svg { opacity: 1; transform: scale(1); }

.ms-empty { padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.9rem; }

.ms-panel-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.55rem 0.15rem 0.05rem;
  border-top: 1px solid var(--border-color);
  margin-top: 0.4rem;
}
.ms-count {
  font-size: 0.78rem; color: var(--text-secondary);
  font-feature-settings: "tnum" 1;
}
.ms-count[data-active="true"] { color: var(--primary-color); font-weight: 600; }
.ms-foot-actions { display: flex; gap: 0.4rem; }
.ms-action {
  padding: 0.4rem 0.85rem;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-secondary);
  font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: all 140ms ease;
}
.ms-action:hover { color: var(--primary-color); border-color: var(--border-highlight); }
.ms-action--primary {
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  border-color: transparent;
  color: #02040b;
}
.ms-action--primary:hover { filter: brightness(1.05); color: #02040b; }

@media (prefers-reduced-motion: reduce) {
  .ms-panel { animation: none; }
  .ms-opt.is-selected:hover { transform: none; }
}

/* ---- Multi-select: light theme ---- */
[data-theme="light"] .ms-trigger {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.14);
  color: #0f172a;
}
[data-theme="light"] .ms-trigger:hover { border-color: rgba(34, 211, 238, 0.6); }
[data-theme="light"] .ms-trigger[aria-expanded="true"],
[data-theme="light"] .ms-trigger--active {
  background: #f8fafc;
  border-color: #0891b2;
}
[data-theme="light"] .ms-trigger--active .ms-trigger-label { color: #0891b2; }
[data-theme="light"] .ms-caret { color: #475569; }

[data-theme="light"] .ms-panel {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 18px 50px -10px rgba(15, 23, 42, 0.22),
              0 0 0 1px rgba(8, 145, 178, 0.06);
}
[data-theme="light"] .ms-search {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.14);
  color: #0f172a;
}
[data-theme="light"] .ms-search:focus {
  border-color: #0891b2;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12);
}
[data-theme="light"] .ms-search-icon { color: #64748b; }
[data-theme="light"] .ms-close {
  border-color: rgba(15, 23, 42, 0.14);
  color: #475569;
}
[data-theme="light"] .ms-close:hover {
  color: #0f172a; background: rgba(15, 23, 42, 0.04);
}
[data-theme="light"] .ms-hint { color: #64748b; }

[data-theme="light"] .ms-opt {
  color: #475569;
}
[data-theme="light"] .ms-opt:hover {
  background: rgba(8, 145, 178, 0.06);
  color: #0f172a;
  border-color: rgba(8, 145, 178, 0.22);
}
[data-theme="light"] .ms-opt .ms-opt-check {
  border-color: rgba(15, 23, 42, 0.22);
  color: transparent;
}
[data-theme="light"] .ms-opt.is-selected {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.12), rgba(124, 58, 237, 0.06));
  border-color: #0891b2;
  color: #0f172a;
  box-shadow: 0 0 0 1px rgba(8, 145, 178, 0.2),
              0 4px 14px rgba(8, 145, 178, 0.1);
}
[data-theme="light"] .ms-opt.is-selected:hover {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.2), rgba(124, 58, 237, 0.1));
}
[data-theme="light"] .ms-opt.is-selected .ms-opt-check {
  background: linear-gradient(135deg, #0891b2, #7c3aed);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(8, 145, 178, 0.4);
}
[data-theme="light"] .ms-empty { color: #94a3b8; }
[data-theme="light"] .ms-panel-foot { border-top-color: rgba(15, 23, 42, 0.1); }
[data-theme="light"] .ms-count { color: #64748b; }
[data-theme="light"] .ms-count[data-active="true"] { color: #0891b2; }
[data-theme="light"] .ms-action {
  border-color: rgba(15, 23, 42, 0.14);
  color: #475569;
}
[data-theme="light"] .ms-action:hover {
  color: #0891b2; border-color: #0891b2;
}
[data-theme="light"] .ms-action--primary {
  background: linear-gradient(135deg, #0891b2, #7c3aed);
  color: #ffffff;
}

/* ---- Home toast: light theme ---- */
[data-theme="light"] .home-toast {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(8, 145, 178, 0.45);
  color: #0f172a;
  box-shadow: 0 18px 50px -10px rgba(15, 23, 42, 0.25),
              0 0 0 1px rgba(8, 145, 178, 0.08),
              0 0 24px rgba(8, 145, 178, 0.1);
}
[data-theme="light"] .home-toast-msg strong,
[data-theme="light"] .home-toast-msg a { color: #0891b2; }
[data-theme="light"] .home-toast-close { color: #64748b; }
[data-theme="light"] .home-toast-close:hover { color: #0f172a; background: rgba(15, 23, 42, 0.05); }

/* ============== Home page toast (autoselect notice) ============== */
.home-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 28px);
  z-index: 250;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0.95rem 0.7rem 0.85rem;
  background: linear-gradient(135deg, rgba(2, 4, 11, 0.96), rgba(15, 23, 42, 0.96));
  border: 1px solid rgba(34, 211, 238, 0.4);
  border-radius: 14px;
  color: var(--text-primary);
  font-size: 0.9rem;
  box-shadow: 0 18px 50px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(34, 211, 238, 0.08), 0 0 32px rgba(34, 211, 238, 0.15);
  opacity: 0; pointer-events: none;
  transition: opacity 240ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  max-width: min(440px, calc(100vw - 32px));
  backdrop-filter: blur(14px);
}
.home-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.home-toast-icon {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: #02040b; border-radius: 8px;
}
.home-toast-icon svg { width: 16px; height: 16px; }
.home-toast-msg { flex: 1; line-height: 1.45; }
.home-toast-msg strong { color: var(--primary-color); font-weight: 700; }
.home-toast-msg a { color: var(--primary-color); text-decoration: none; border-bottom: 1px dashed rgba(34, 211, 238, 0.45); }
.home-toast-msg a:hover { border-bottom-style: solid; }
.home-toast-close {
  flex: none; width: 26px; height: 26px;
  background: transparent; border: 1px solid transparent;
  color: var(--text-secondary); font-size: 1.2rem; line-height: 1;
  border-radius: 8px; cursor: pointer;
  transition: all 140ms ease;
}
.home-toast-close:hover { color: var(--text-primary); background: rgba(148, 163, 184, 0.1); }
@media (prefers-reduced-motion: reduce) {
  .home-toast { transition: opacity 240ms ease; }
}

.input-icon {
  position: relative;
}

.input-icon i,
.input-icon .icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.input-icon input {
  padding-left: 2.8rem;
}

/* Overlay placeholder (native ::placeholder can't take a gradient). "Search by"
   stays solid (theme-aware); only the cycling word gets the brand gradient. JS
   writes the text here, matches the input's font, and hides it once you type. */
.input-icon .search-ph {
  position: absolute;
  left: 2.8rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  max-width: calc(100% - 3.4rem);
  font-weight: 600;
  color: var(--text-secondary);   /* "Search by " — dark in light theme, light in dark */
}
.input-icon .search-ph .search-ph-word {
  font-weight: 700;
  background: linear-gradient(90deg, #FF6B6B, #6B66FF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* INPUTS */
input,
select {
  width: 100%;
  padding: 0.6rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-surface-solid);
  color: var(--text-primary);
  outline: none;
}

input:focus,
select:focus {
  border-color: var(--primary-color);
}

select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* KPI CARDS */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.kpi-card {
  position: relative;
  background: linear-gradient(145deg, var(--bg-surface), rgba(15, 23, 42, 0.4));
  padding: 2rem 1.6rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.38rem;
  text-align: center;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-glass);
  overflow: hidden;
}

.kpi-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 18%;
  width: 64%;
  height: 2px;
  opacity: 0.35;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
}

.kpi-cyan {
  color: var(--primary-color);
}

.kpi-green {
  color: var(--success-color);
}

.kpi-red {
  color: var(--danger-color);
}

.kpi-purple {
  color: var(--accent-color);
}

.kpi-cyan:hover {
  transform: translateY(-6px);
  border-color: rgba(34, 211, 238, 0.35);
  box-shadow:
    0 0 0 1px rgba(165, 243, 252, 0.15),
    0 0 28px rgba(34, 211, 238, 0.22),
    0 8px 32px -4px rgba(0, 0, 0, 0.5);
}

.kpi-green:hover {
  transform: translateY(-6px);
  border-color: rgba(34, 197, 94, 0.35);
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.12),
    0 0 28px rgba(34, 197, 94, 0.18),
    0 8px 32px -4px rgba(0, 0, 0, 0.5);
}

.kpi-red:hover {
  transform: translateY(-6px);
  border-color: rgba(244, 63, 94, 0.35);
  box-shadow:
    0 0 0 1px rgba(244, 63, 94, 0.12),
    0 0 28px rgba(244, 63, 94, 0.18),
    0 8px 32px -4px rgba(0, 0, 0, 0.5);
}

.kpi-purple:hover {
  transform: translateY(-6px);
  border-color: rgba(167, 139, 250, 0.35);
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.12),
    0 0 28px rgba(167, 139, 250, 0.18),
    0 8px 32px -4px rgba(0, 0, 0, 0.5);
}

.kpi-icon {
  margin-bottom: 0.45rem;
  display: flex;
  justify-content: center;
  color: inherit;
}

.kpi-icon svg {
  width: 26px;
  height: 26px;
  color: inherit;
  filter: drop-shadow(0 0 8px currentColor);
  opacity: 0.95;
  transition: all 0.3s ease;
}

.kpi-card:hover .kpi-icon svg {
  transform: scale(1.14);
  filter: drop-shadow(0 0 12px currentColor);
}

.kpi-title {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.95;
}

.kpi-value {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #e2e8f0 38%,
    #94a3b8 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
  transition: transform 0.28s ease;
}

.kpi-card:hover .kpi-value {
  transform: scale(1.05);
}

.kpi-trend {
  margin-top: 0.15rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.9;
}

.kpi-trend.up {
  color: var(--success-color);
}

.kpi-trend.down {
  color: var(--danger-color);
}

.kpi-trend.flat {
  color: var(--text-muted);
}

@keyframes kpiPulseRed {
  0% { opacity: 0.65; }
  50% { opacity: 1; }
  100% { opacity: 0.65; }
}

.kpi-red .kpi-icon svg,
.kpi-red::after {
  animation: kpiPulseRed 2.2s ease-in-out infinite;
}

/* TOOLBAR */
.top-toolbar {
  margin-bottom: 1rem;
}

.toolbar-line {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: nowrap;
  background: var(--bg-surface);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  min-width: 0;
}

.results-count {
  color: var(--text-secondary);
  white-space: nowrap;
  flex: 0 0 auto;
  font-size: 0.95rem;
  font-weight: 500;
}

.active-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
}

.filter-chip {
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: var(--bg-surface-solid);
  border: 1px solid var(--border-color);
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.quick-filters-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
  align-items: center;
}

.quick-pill {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-solid);
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-primary);
  white-space: nowrap;
}

.quick-pill.active {
  border-color: var(--primary-color);
  color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.10);
}

/* "New" quick filter — a small brand-gradient dot so it reads as "latest additions". */
.quick-pill--new::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B6B, #6B66FF);
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.quick-pill--new.active {
  border-color: transparent;
  color: var(--text-primary);
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.16), rgba(107, 102, 255, 0.16));
  box-shadow: 0 0 0 2px rgba(107, 102, 255, 0.12);
}

.view-toggles {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.view-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-solid);
  cursor: pointer;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.view-btn.active {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.12);
}

/* DATA CONTAINER */
.data-container {
  min-height: 400px;
  -webkit-overflow-scrolling: touch;
}

/* Desktop: let the results column fill the grid row so the table card's bottom
   can reach the (often taller, expanded) filters sidebar instead of stopping short.
   The card grows via flex, but the table keeps its NATURAL row heights at the top —
   any spare height is left as empty space below the rows (not distributed into them).
   When the results are already taller than the sidebar this is a no-op. */
@media (min-width: 769px) {
  .main-layout { align-items: stretch; }
  .filters-sidebar { align-self: start; }
  .dashboard-content { display: flex; flex-direction: column; }
  .data-container { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .view-table .table-wrapper { flex: 1 1 auto; }
}

.view-table .cards-grid {
  display: none;
}

.view-card .table-wrapper {
  display: none;
}

.view-card .cards-grid {
  display: grid;
}

/* TABLE */
.table-wrapper {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  padding: 10px 34px 34px 10px;   /* room for the right + bottom 3D faces and the lift */
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1100px;
}

.data-table th,
.data-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}

.data-table th {
  color: var(--text-secondary);
  font-size: 0.8rem;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.9);
  position: sticky;
  top: 0;
  z-index: 3;
}

.data-table tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.sort-btn {
  width: 100%;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.sort-indicator {
  opacity: 0.75;
  margin-left: 6px;
}

.clickable-row {
  cursor: pointer;
}

.days-left.closing {
  color: var(--danger-color);
  font-weight: 700;
}

.table-link-cell {
  min-width: 120px;
}

.table-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(34, 211, 238, 0.22);
  background: rgba(34, 211, 238, 0.08);
  color: var(--primary-color);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.table-link-btn.apply {
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(34, 197, 94, 0.08);
  color: var(--success-color);
}

.table-subtext {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* CARDS */
.cards-grid {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.25rem;
}

.job-card {
  position: relative;
  background: linear-gradient(165deg, var(--bg-surface), rgba(15, 23, 42, 0.35));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-glass);
}

.job-card:hover {
  border-color: var(--border-highlight);
  transform: translateY(-4px);
  transition: all 0.25s ease;
}

.clickable-card {
  cursor: pointer;
}

.job-card-top {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding-right: 3.25rem;
}

.job-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.8rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  border: 1px solid var(--border-color);
  background: rgba(15, 23, 42, 0.55);
  color: var(--text-secondary);
}

.meta-pill-level {
  color: var(--primary-color);
  border-color: rgba(34, 211, 238, 0.24);
  background: rgba(34, 211, 238, 0.08);
}

.meta-pill-eligibility {
  color: #cbd5e1;
}

.job-title {
  font-size: 1.45rem;
  line-height: 1.2;
  font-weight: 800;
}

.job-org {
  font-size: 0.96rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.job-highlight-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.highlight-box {
  border: 1px solid var(--border-color);
  background: rgba(2, 6, 23, 0.34);
  border-radius: 16px;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.highlight-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}

.highlight-value {
  font-size: 1rem;
  font-weight: 700;
}

.highlight-closing {
  border-color: rgba(244, 63, 94, 0.28);
  background: rgba(244, 63, 94, 0.07);
}

.highlight-expired {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(100, 116, 139, 0.12);
}

.premium-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1rem;
  padding: 1rem 0;
  border-top: 1px dashed var(--border-color);
  border-bottom: 1px dashed var(--border-color);
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.detail-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}

.detail-value {
  color: var(--text-secondary);
  font-size: 0.95rem;
  word-break: break-word;
}

.job-card-footer {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.card-action-btn {
  height: 40px;
  padding: 0 1rem;
  border-radius: 12px;
  border: 1px solid rgba(34, 211, 238, 0.24);
  background: rgba(34, 211, 238, 0.08);
  color: var(--primary-color);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.card-action-btn.secondary {
  border-color: var(--border-color);
  background: rgba(15, 23, 42, 0.5);
  color: var(--text-secondary);
}

.card-action-btn.saved {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.08);
  color: var(--success-color);
}

.apply-btn {
  border-color: rgba(34, 197, 94, 0.28) !important;
  background: rgba(34, 197, 94, 0.08) !important;
  color: var(--success-color) !important;
}

/* BADGES */
.badge {
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.badge-active {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success-color);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-level {
  background: rgba(34, 211, 238, 0.15);
  color: var(--primary-color);
  border: 1px solid rgba(34, 211, 238, 0.3);
}

/* EMPTY STATE */
.empty-state {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--text-secondary);
}

/* PAGINATION */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 1rem;
  padding-top: 1rem;
}

.page-numbers {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.page-btn,
.page-nav-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-solid);
  color: var(--text-primary);
  cursor: pointer;
}

.page-btn.active {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15);
}

/* MODAL */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 4, 11, 0.9);
  backdrop-filter: blur(16px);
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.modal-content {
  width: 92%;
  max-width: 760px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 22px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-glass);
  position: relative;
  padding: 2rem;
  border: 1px solid var(--border-color);
}

.modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: rgba(255,255,255,0.1);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vacancy-modal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vacancy-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-right: 3rem;
}

.vacancy-modal-title {
  font-size: 1.7rem;
  line-height: 1.15;
  font-weight: 800;
}

.vacancy-modal-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
}

.vacancy-modal-org {
  font-size: 0.92rem;
  color: var(--text-muted);
}

.modal-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.modal-deadline-chip {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.2);
  color: var(--primary-color);
}

.modal-deadline-chip.closing {
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.28);
  color: var(--danger-color);
}

.modal-deadline-chip.expired {
  background: rgba(100, 116, 139, 0.12);
  border-color: rgba(100, 116, 139, 0.26);
  color: var(--text-secondary);
}

.modal-section {
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: rgba(2, 6, 23, 0.32);
  padding: 1rem 1.1rem;
}

.modal-section-title {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.8rem;
}

.modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
}

.modal-field-label {
  font-size: 0.76rem;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
  font-weight: 700;
}

.modal-field-value,
.modal-richtext {
  color: var(--text-secondary);
  word-break: break-word;
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* ============== Community issue flags (vacancy modal) ============== */
.card-action-btn.ghost {
  border-color: var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  gap: 0.4rem;
}
.card-action-btn.ghost i { width: 15px; height: 15px; }
.card-action-btn.ghost:hover { color: var(--danger-color, #f43f5e); border-color: color-mix(in srgb, var(--danger-color, #f43f5e) 45%, transparent); }

.flag-section { margin-top: 0.4rem; }
.flag-list { display: flex; flex-direction: column; gap: 0.6rem; }
.flag-status { color: var(--text-muted); font-size: 0.86rem; padding: 0.5rem 0; }
.flag-status.ok { color: var(--success-color); }

.flag-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  background: rgba(15, 23, 42, 0.4);
}
.flag-card-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.flag-tag {
  font-size: 0.78rem; font-weight: 700; color: var(--primary-color);
  background: rgba(34, 211, 238, 0.1); border: 1px solid rgba(34, 211, 238, 0.22);
  padding: 0.18rem 0.55rem; border-radius: 999px;
}
.flag-unverified {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); border: 1px dashed var(--border-color);
  padding: 0.12rem 0.45rem; border-radius: 999px; margin-left: auto;
}
.flag-note { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 0.3rem; }
.flag-suggest { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.4rem; word-break: break-word; }
.flag-suggest span { color: var(--text-muted); font-weight: 600; }
.flag-card-foot { display: flex; }
.flag-endorse-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.82rem; font-weight: 700; cursor: pointer;
  border: 1px solid var(--border-color); border-radius: 999px;
  background: rgba(15, 23, 42, 0.5); color: var(--text-secondary);
  padding: 0.3rem 0.7rem;
}
.flag-endorse-btn i { width: 14px; height: 14px; }
.flag-endorse-btn:hover:not(:disabled) { color: var(--success-color); border-color: rgba(34, 197, 94, 0.4); }
.flag-endorse-btn.done { color: var(--success-color); border-color: rgba(34, 197, 94, 0.4); cursor: default; }

.flag-form-wrap { margin-top: 0.8rem; border-top: 1px solid var(--border-color); padding-top: 0.8rem; }
.flag-form { display: flex; flex-direction: column; gap: 0.6rem; }
.flag-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; color: var(--text-secondary); font-weight: 600; }
.flag-form .flag-opt { color: var(--text-muted); font-weight: 400; }
.flag-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.flag-row label { flex: 1; min-width: 150px; }
.flag-form input, .flag-form select, .flag-form textarea { width: 100%; }
.flag-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.flag-form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.flag-msg { font-size: 0.82rem; text-align: right; }
.flag-msg.err { color: var(--danger-color, #f43f5e); }

.application-mode-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid var(--border-color);
  background: rgba(15, 23, 42, 0.55);
  color: var(--text-secondary);
}

.application-mode-badge.mode-online {
  color: var(--primary-color);
  border-color: rgba(34, 211, 238, 0.28);
  background: rgba(34, 211, 238, 0.08);
}

.application-mode-badge.mode-physical {
  color: var(--warning-color);
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.08);
}

.application-mode-badge.mode-both {
  color: var(--success-color);
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.08);
}

/* Mode of Application spans the full width of the overview grid. */
.modal-grid .modal-field--wide { grid-column: 1 / -1; }

/* Long mode sentences: a readable block box, not a giant bold pill. */
.application-mode-badge.mode-long {
  display: block;
  border-radius: 12px;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.55;
  padding: 0.7rem 0.9rem;
  white-space: normal;
}

.closing-date-text {
  color: var(--danger-color);
  font-weight: 700;
}

/* HEART BUTTONS */
.table-heart-cell {
  width: 64px;
  text-align: center;
}

/* Bookmark / heart column stays pinned to the right edge of the
   horizontally-scrollable .table-wrapper so the heart icon is always
   reachable without scrolling the table. Only active when the table
   is rendered as an actual table (the ≤768 px media query reflows
   rows into stacked cards). */
@media (min-width: 769px) {
  .data-table .save-col {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--bg-surface);
    box-shadow: -10px 0 14px -10px rgba(0, 0, 0, 0.45);
  }
  /* Header cell is already position:sticky;top:0 — keep that and add
     right pinning. Bump z-index so the corner stays above other
     sticky cells. */
  .data-table thead .save-col {
    z-index: 4;
    background: rgba(15, 23, 42, 0.95);
  }
  /* Match the row-hover tint on the sticky cell so it doesn't look
     pasted on. */
  .data-table tbody tr:hover .save-col {
    background: color-mix(in srgb, #ffffff 3%, var(--bg-surface));
  }
  [data-theme="light"] .data-table .save-col {
    box-shadow: -10px 0 14px -10px rgba(0, 0, 0, 0.10);
  }
  [data-theme="light"] .data-table thead .save-col {
    background: rgba(255, 255, 255, 0.96);
  }
  [data-theme="light"] .data-table tbody tr:hover .save-col {
    background: color-mix(in srgb, #0f172a 3%, var(--bg-surface));
  }
}

.premium-card {
  position: relative;
}

.table-heart-btn,
.card-heart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1.5px solid rgba(255, 255, 255, 0.78);
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 6px 16px rgba(0,0,0,0.18);
}

.table-heart-btn {
  width: 36px;
  height: 36px;
}

.card-heart-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  z-index: 5;
}

.table-heart-btn svg,
.card-heart-btn svg {
  width: 18px;
  height: 18px;
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 2.1;
  fill: none;
  transition: transform 0.22s ease, filter 0.22s ease;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
}

.table-heart-btn:hover,
.card-heart-btn:hover {
  transform: translateY(-1px) scale(1.06);
  border-color: rgba(255, 255, 255, 0.95);
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 10px 22px rgba(0,0,0,0.24),
    0 0 0 4px rgba(255,255,255,0.04);
}

.table-heart-btn:hover svg,
.card-heart-btn:hover svg {
  transform: scale(1.06);
}

.table-heart-btn.saved,
.card-heart-btn.saved {
  border-color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 6px 16px rgba(0,0,0,0.18);
}

.table-heart-btn.saved svg,
.card-heart-btn.saved svg {
  filter:
    drop-shadow(0 1px 2px rgba(120, 12, 35, 0.35))
    drop-shadow(0 0 4px rgba(255, 51, 79, 0.22));
}

.table-heart-btn.saved svg path,
.card-heart-btn.saved svg path {
  fill: #ff334f !important;
  stroke: rgba(255,255,255,0.98) !important;
}

@keyframes bookmarkPop {
  0% { transform: scale(1); }
  22% { transform: scale(1.16); }
  42% { transform: scale(0.96); }
  65% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes heartGlowPulse {
  0% {
    filter:
      drop-shadow(0 1px 2px rgba(120, 12, 35, 0.20))
      drop-shadow(0 0 0 rgba(255, 51, 79, 0));
  }
  50% {
    filter:
      drop-shadow(0 1px 3px rgba(120, 12, 35, 0.35))
      drop-shadow(0 0 6px rgba(255, 51, 79, 0.35));
  }
  100% {
    filter:
      drop-shadow(0 1px 2px rgba(120, 12, 35, 0.20))
      drop-shadow(0 0 0 rgba(255, 51, 79, 0));
  }
}

.bookmark-pop {
  animation: bookmarkPop 360ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.table-heart-btn.saved.bookmark-pop svg,
.card-heart-btn.saved.bookmark-pop svg {
  animation: heartGlowPulse 520ms ease-out;
}

/* P3-7 PR 3: when the watchlist transitions from 0 → 1, pulse the header
   favBtn so the user sees the action was registered globally, not just on
   the row they clicked. Respects prefers-reduced-motion via the global
   `prefers-reduced-motion` media query in :root (see below). */
@keyframes favBtnPop {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 51, 79, 0.55);
  }
  40% {
    transform: scale(1.18);
    box-shadow: 0 0 0 10px rgba(255, 51, 79, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 51, 79, 0);
  }
}

#favBtn.fav-btn-pop {
  animation: favBtnPop 520ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

#favBtn.fav-btn-pop svg {
  animation: heartGlowPulse 520ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  #favBtn.fav-btn-pop,
  #favBtn.fav-btn-pop svg {
    animation: none;
  }
}

/* LOADING */
.loading-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.loading-header-skeleton {
  height: 54px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid var(--border-color);
}

.loading-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.loading-kpi-card {
  height: 110px;
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-glass);
}

.loading-table-shell {
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.52);
  border: 1px solid var(--border-color);
  padding: 1rem;
  box-shadow: var(--shadow-glass);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.loading-table-toolbar {
  height: 46px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid var(--border-color);
}

.loading-row {
  height: 60px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.08);
}

.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.06) 35%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.06) 65%,
    rgba(255,255,255,0) 100%
  );
  animation: shimmerSlide 1.4s ease-in-out infinite;
}

@keyframes shimmerSlide {
  100% {
    transform: translateX(100%);
  }
}

/* MOBILE TABLE -> plain side-scroll table (card view is the mobile default) */
@media (max-width: 768px) {
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
  }
  .responsive-table {
    min-width: 900px;
    width: 100%;
  }
}

/* RESPONSIVE */
@media (max-width: 1200px) {
  .toolbar-line {
    flex-wrap: wrap;
  }

  .active-filters {
    flex: 1 1 100%;
    order: 2;
  }

  .quick-filters-bar {
    order: 3;
    width: 100%;
    justify-content: flex-start;
  }

  .view-toggles {
    margin-left: 0;
    order: 4;
  }
}

@media (max-width: 1100px) {
  .main-layout {
    grid-template-columns: 1fr;
  }

  .filters-sidebar {
    position: static;
  }
}

@media (max-width: 900px) {
  .toolbar-line {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "filters filters"
      "results views";
    align-items: start;
    gap: 0.9rem 1rem;
  }

  .active-filters {
    grid-area: filters;
    min-width: 0;
    flex: unset;
  }

  .quick-filters-bar {
    grid-area: filters;
    width: 100%;
    justify-content: flex-start;
    margin-top: 0.35rem;
  }

  .results-count {
    grid-area: results;
    align-self: center;
  }

  .view-toggles {
    grid-area: views;
    margin-left: 0;
    justify-self: end;
    align-self: center;
  }
}

@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .app-container {
    padding: 0.75rem;
  }

  .main-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .filters-sidebar {
    position: static;
    width: 100%;
    padding: 1rem;
    overflow: hidden;
  }

  .dashboard-content {
    min-width: 0;
  }

  .data-container {
    overflow-x: auto;
    overflow-y: visible;
  }

  .premium-details,
  .job-highlight-row,
  .modal-grid {
    grid-template-columns: 1fr;
  }

  .job-card-footer,
  .pagination-bar,
  .modal-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .card-action-btn {
    width: 100%;
  }

  .vacancy-modal-header {
    flex-direction: column;
    padding-right: 0;
  }

  .modal-chip-row {
    justify-content: flex-start;
  }

  .loading-kpi-row {
    grid-template-columns: 1fr;
  }

  .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .job-card {
    padding: 1rem;
  }

  .job-card-top {
    padding-right: 2.8rem;
  }

  .job-title {
    font-size: 1.2rem;
  }

  .toolbar-line {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    align-items: stretch;
  }

  .results-count {
    order: 2;
  }

  .active-filters {
    order: 1;
    width: 100%;
  }

  .quick-filters-bar {
    order: 3;
    width: 100%;
    justify-content: flex-start;
  }

  .view-toggles {
    order: 4;
    margin-left: 0;
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  .app-container {
    padding: 1rem;
  }

  .app-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .toolbar-line {
    padding: 0.9rem 1rem;
  }

  .active-filters,
  .quick-filters-bar {
    width: 100%;
  }

  .modal-content {
    padding: 1.25rem;
  }

  .vacancy-modal-title {
    font-size: 1.45rem;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .header-logo h1 {
    font-size: 1.2rem;
  }
}

/* MOBILE FILTER ACCORDION — PROFESSIONAL VERSION */
.mobile-filter-toggle {
  display: none;
}

@media (max-width: 768px) {
  .mobile-filter-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    margin-bottom: 0.85rem;
    border-radius: 16px;
    border: 1px solid rgba(34, 211, 238, 0.18);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.9));
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-glass);
    transition: all 0.25s ease;
    appearance: none;
    -webkit-appearance: none;
  }

  .mobile-filter-toggle:hover {
    border-color: rgba(34, 211, 238, 0.32);
    box-shadow:
      0 0 0 1px rgba(34, 211, 238, 0.10),
      0 8px 24px rgba(0, 0, 0, 0.35);
  }

  .mobile-filter-toggle-left,
  .mobile-filter-toggle-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
  }

  .mobile-filter-toggle-left svg,
  .mobile-filter-toggle-right svg {
    width: 18px;
    height: 18px;
    color: var(--primary-color);
  }

  .mobile-filter-toggle-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
  }

  .mobile-filter-chevron {
    transition: transform 0.25s ease;
  }

  .filters-sidebar:not(.collapsed) .mobile-filter-chevron {
    transform: rotate(180deg);
  }

  .filters-sidebar.collapsed > :not(.mobile-filter-toggle) {
    display: none !important;
  }
}

/* =========================
   MOBILE CHIP / PILL ROW FIX
   ========================= */
@media (max-width: 768px) {
  .toolbar-line {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "active active"
      "quick quick"
      "results views";
    gap: 0.85rem 1rem;
    align-items: center;
  }

  .active-filters {
    grid-area: active;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .active-filters::-webkit-scrollbar {
    display: none;
  }

  .quick-filters-bar {
    grid-area: quick;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    margin-top: 0;
  }

  .quick-filters-bar::-webkit-scrollbar {
    display: none;
  }

  .filter-chip,
  .quick-pill {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .results-count {
    grid-area: results;
    order: unset;
  }

  .view-toggles {
    grid-area: views;
    order: unset;
    justify-self: end;
    margin-left: 0;
  }
}

/* ===== header watchlist state ===== */
.icon-btn.has-saved {
  border-color: rgba(244, 63, 94, 0.62);
  color: #ffffff;
  background: linear-gradient(180deg, #fb7185 0%, #f43f5e 58%, #e11d48 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -2px 6px rgba(0,0,0,0.18),
    0 10px 18px rgba(244, 63, 94, 0.24),
    0 0 0 4px rgba(244, 63, 94, 0.08);
}

.icon-btn.has-saved i {
  fill: currentColor;
  stroke: rgba(255,255,255,0.96);
}

.icon-btn.has-saved:hover {
  border-color: rgba(251, 113, 133, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -2px 6px rgba(0,0,0,0.18),
    0 12px 22px rgba(244, 63, 94, 0.32),
    0 0 0 4px rgba(244, 63, 94, 0.10);
}

/* watchlist-only mode */
.icon-btn.active-watchlist {
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.10),
    0 0 22px rgba(244, 63, 94, 0.30);
}

/* Watchlist toggle is a BOOKMARK (distinct from the site "like" heart). With no
   bookmarks it's a plain outline; once any vacancy is saved it lights up in the
   brand gradient with a soft 3D pillow. The #favBtn id intentionally overrides the
   legacy red .has-saved rules (incl. the light-theme ones). */
#favBtn.has-saved {
  border-color: transparent !important;
  color: #ffffff !important;
  background: linear-gradient(165deg, var(--primary-color), var(--accent-color)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    inset 0 -3px 7px rgba(0,0,0,0.20),
    0 9px 20px -5px color-mix(in srgb, var(--accent-color) 50%, transparent),
    0 0 0 4px color-mix(in srgb, var(--primary-color) 10%, transparent) !important;
}
#favBtn.has-saved:hover { filter: brightness(1.05); }
#favBtn.has-saved svg,
#favBtn.has-saved svg path { color: #ffffff !important; fill: #ffffff !important; stroke: #ffffff !important; }
#favBtn.has-saved .fav-count {
  background: #ffffff;
  color: var(--accent-color);
}

/* ===== center last 1–2 cards ONLY in card view ===== */
.view-card .cards-grid.premium-cards-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 1.5rem;
}

/* keep cards hidden in table view */
.view-table .cards-grid,
.view-table .premium-cards-grid {
  display: none !important;
}

/* keep table hidden in card view */
.view-card .table-wrapper {
  display: none !important;
}

/* each card keeps same premium width */
.view-card .cards-grid.premium-cards-grid > .job-card,
.view-card .cards-grid.premium-cards-grid > .premium-card {
  flex: 0 1 360px;
  width: min(100%, 420px);
  max-width: 420px;
}

/* tablet */
@media (max-width: 1100px) {
  .view-card .cards-grid.premium-cards-grid {
    gap: 1.25rem;
  }

  .view-card .cards-grid.premium-cards-grid > .job-card,
  .view-card .cards-grid.premium-cards-grid > .premium-card {
    flex: 1 1 calc(50% - 0.75rem);
    width: auto;
    max-width: none;
  }
}

/* mobile */
@media (max-width: 768px) {
  .view-card .cards-grid.premium-cards-grid {
    justify-content: stretch;
    gap: 1rem;
  }

  .view-card .cards-grid.premium-cards-grid > .job-card,
  .view-card .cards-grid.premium-cards-grid > .premium-card {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }
}

/* ===== remove duplicate top nav items safely ===== */
.nav-duplicate {
  display: none !important;
}

/* ===== LIGHT THEME POLISH PATCH ===== */

[data-theme="light"] {
  --bg-main: #eef4fb;
  --bg-surface: rgba(255, 255, 255, 0.88);
  --bg-surface-hover: rgba(255, 255, 255, 0.98);
  --bg-surface-solid: #ffffff;
  --border-color: rgba(15, 23, 42, 0.12);
  --border-highlight: rgba(14, 165, 233, 0.22);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --primary-color: #0284c7;
  --accent-color: #7c3aed;
  --success-color: #16a34a;
  --warning-color: #d97706;
  --danger-color: #dc2626;
  --shadow-glass: 0 10px 28px -10px rgba(15, 23, 42, 0.16);
}

/* overall surfaces */
[data-theme="light"] body {
  color: #0f172a;
}

[data-theme="light"] .filters-sidebar,
[data-theme="light"] .toolbar-line,
[data-theme="light"] .table-wrapper,
[data-theme="light"] .job-card,
[data-theme="light"] .kpi-card,
[data-theme="light"] .modal-content,
[data-theme="light"] .modal-section,
[data-theme="light"] .empty-state {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(15, 23, 42, 0.10);
  box-shadow: 0 10px 28px -10px rgba(15, 23, 42, 0.12);
}

/* top nav */
[data-theme="light"] .top-nav a {
  color: #475569;
}

[data-theme="light"] .top-nav a:hover,
[data-theme="light"] .top-nav a.active {
  color: #0369a1;
  background: rgba(2, 132, 199, 0.08);
}

/* header icons/buttons */
[data-theme="light"] .icon-btn {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(15, 23, 42, 0.10);
  color: #0f172a;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .icon-btn:hover {
  border-color: rgba(2, 132, 199, 0.35);
  box-shadow:
    0 0 0 2px rgba(2, 132, 199, 0.08),
    0 8px 20px rgba(15, 23, 42, 0.10);
}

/* inputs and selects */
[data-theme="light"] input,
[data-theme="light"] select {
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] input::placeholder {
  color: #94a3b8;
}

[data-theme="light"] .input-icon i,
[data-theme="light"] .input-icon .icon {
  color: #64748b;
}

/* KPI cards */
[data-theme="light"] .kpi-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(241,245,249,0.92));
}

[data-theme="light"] .kpi-title {
  color: #64748b;
}

[data-theme="light"] .kpi-value {
  background: none !important;
  -webkit-text-fill-color: initial !important;
  color: #163b66 !important;   /* dark blue shade */
  text-shadow: none !important;
}

[data-theme="light"] .kpi-trend.flat {
  color: #64748b;
}

[data-theme="light"] .kpi-cyan::after,
[data-theme="light"] .kpi-green::after,
[data-theme="light"] .kpi-red::after,
[data-theme="light"] .kpi-purple::after {
  opacity: 0.22;
}

/* toolbar / chips / pills */
[data-theme="light"] .results-count {
  color: #475569;
}

[data-theme="light"] .filter-chip,
[data-theme="light"] .quick-pill,
[data-theme="light"] .meta-pill,
[data-theme="light"] .modal-chip,
[data-theme="light"] .application-mode-badge {
  background: rgba(248, 250, 252, 0.95);
  border-color: rgba(15, 23, 42, 0.10);
  color: #334155;
}

[data-theme="light"] .meta-pill-level,
[data-theme="light"] .badge-level {
  color: #0284c7;
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.18);
}

[data-theme="light"] .quick-pill.active,
[data-theme="light"] .view-btn.active {
  color: #0369a1;
  border-color: rgba(2, 132, 199, 0.35);
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.08);
}

/* table */
[data-theme="light"] .data-table th {
  background: rgba(241, 245, 249, 0.96);
  color: #64748b;
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .data-table td {
  color: #0f172a;
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .data-table tr:hover {
  background: rgba(2, 132, 199, 0.04);
}

[data-theme="light"] .table-subtext {
  color: #64748b;
}

[data-theme="light"] .sort-indicator {
  color: #64748b;
}

/* card body */
[data-theme="light"] .job-title,
[data-theme="light"] .vacancy-modal-title {
  color: #0f172a;
}

[data-theme="light"] .job-org,
[data-theme="light"] .vacancy-modal-subtitle,
[data-theme="light"] .vacancy-modal-org,
[data-theme="light"] .detail-value,
[data-theme="light"] .modal-field-value,
[data-theme="light"] .modal-richtext {
  color: #475569;
}

[data-theme="light"] .detail-label,
[data-theme="light"] .highlight-label,
[data-theme="light"] .modal-field-label,
[data-theme="light"] .modal-section-title {
  color: #64748b;
}

[data-theme="light"] .highlight-box {
  background: rgba(241, 245, 249, 0.92);
  border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .highlight-value {
  color: #0f172a;
}

[data-theme="light"] .highlight-closing {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.16);
}

[data-theme="light"] .highlight-expired {
  background: rgba(100, 116, 139, 0.10);
  border-color: rgba(100, 116, 139, 0.18);
}

/* status and urgency */
[data-theme="light"] .badge-active {
  background: rgba(22, 163, 74, 0.10);
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.18);
}

[data-theme="light"] .days-left.closing,
[data-theme="light"] .closing-date-text,
[data-theme="light"] .modal-deadline-chip.closing {
  color: #dc2626;
}

/* links/buttons */
[data-theme="light"] .card-action-btn,
[data-theme="light"] .table-link-btn {
  border-color: rgba(2, 132, 199, 0.20);
  background: rgba(2, 132, 199, 0.08);
  color: #0369a1;
}

[data-theme="light"] .card-action-btn.secondary {
  border-color: rgba(15, 23, 42, 0.10);
  background: rgba(248, 250, 252, 0.95);
  color: #475569;
}

[data-theme="light"] .card-action-btn.secondary:hover,
[data-theme="light"] .table-link-btn:hover {
  border-color: rgba(2, 132, 199, 0.35);
  background: rgba(2, 132, 199, 0.10);
  color: #075985;
}

[data-theme="light"] .table-link-btn.apply,
[data-theme="light"] .apply-btn {
  border-color: rgba(22, 163, 74, 0.22) !important;
  background: rgba(22, 163, 74, 0.08) !important;
  color: #15803d !important;
}

/* modal cards */
[data-theme="light"] .modal-section,
[data-theme="light"] .modal-info-card,
[data-theme="light"] .modal-field {
  background: rgba(248, 250, 252, 0.86);
}

/* heart buttons in light mode */
[data-theme="light"] .table-heart-btn,
[data-theme="light"] .card-heart-btn {
  border-color: rgba(148, 163, 184, 0.55);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(241,245,249,0.96));
  color: #475569;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 6px 14px rgba(15,23,42,0.08);
}

[data-theme="light"] .table-heart-btn svg,
[data-theme="light"] .card-heart-btn svg {
  stroke: #64748b;
}

[data-theme="light"] .table-heart-btn:hover,
[data-theme="light"] .card-heart-btn:hover {
  border-color: rgba(2, 132, 199, 0.24);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,1));
}

[data-theme="light"] .table-heart-btn.saved,
[data-theme="light"] .card-heart-btn.saved {
  border-color: rgba(244, 63, 94, 0.38);
  background: linear-gradient(180deg, #fb7185 0%, #f43f5e 58%, #e11d48 100%);
  color: #fff;
}

/* pagination */
[data-theme="light"] .page-btn,
[data-theme="light"] .page-nav-btn {
  background: rgba(255,255,255,0.92);
  border-color: rgba(15, 23, 42, 0.10);
  color: #334155;
}

[data-theme="light"] .page-btn.active {
  color: #0369a1;
  border-color: rgba(2, 132, 199, 0.35);
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.08);
}
/* ===== LIGHT THEME KPI + HEADER HEART POLISH ===== */

[data-theme="light"] .kpi-value {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.05em;
  background: linear-gradient(
    180deg,
    #1e4f8f 0%,
    #163b66 48%,
    #0f2f57 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: none !important;
}

/* make header bookmark visibly saved in light mode */
[data-theme="light"] .icon-btn.has-saved {
  border-color: rgba(244, 63, 94, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,245,247,0.96)) !important;
  color: #ff3355 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 8px 18px rgba(15, 23, 42, 0.10),
    0 0 0 4px rgba(244, 63, 94, 0.10) !important;
}

[data-theme="light"] .icon-btn.has-saved svg {
  stroke: #ff3355 !important;
  filter:
    drop-shadow(0 1px 2px rgba(120, 12, 35, 0.18))
    drop-shadow(0 0 4px rgba(255, 51, 79, 0.18));
}

[data-theme="light"] .icon-btn.has-saved svg path {
  fill: #ff3355 !important;
  stroke: rgba(255,255,255,0.98) !important;
}

[data-theme="light"] .icon-btn.has-saved:hover {
  border-color: rgba(244, 63, 94, 0.60) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    0 10px 22px rgba(15, 23, 42, 0.12),
    0 0 0 4px rgba(244, 63, 94, 0.14) !important;
}

/* ===== table column polish ===== */

.data-table .level-col,
.data-table td.level-col {
  min-width: 126px;
  white-space: nowrap;
}

.data-table .days-col,
.data-table td.days-col {
  min-width: 118px;
  white-space: nowrap;
}

.data-table .save-col,
.data-table .table-heart-cell {
  width: 74px;
  min-width: 74px;
  text-align: center;
}

.data-table .save-col-heading {
  text-align: center;
}

.data-table .save-col-heading svg {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  vertical-align: middle;
}

/* keep mobile stacked layout safe */
@media (max-width: 768px) {
  .responsive-table td.level-col,
  .responsive-table td.days-col {
    white-space: normal;
  }
}
/* ===== table column polish ===== */

.data-table .level-col,
.data-table td.level-col {
  min-width: 126px;
  white-space: nowrap;
}

.data-table .days-col,
.data-table td.days-col {
  min-width: 118px;
  white-space: nowrap;
}

.data-table .save-col,
.data-table .table-heart-cell {
  width: 74px;
  min-width: 74px;
  text-align: center;
}

.data-table .save-col-heading {
  text-align: center;
}

.data-table .save-col-heading svg {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  vertical-align: middle;
}

@media (max-width: 768px) {
  .responsive-table td.level-col,
  .responsive-table td.days-col {
    white-space: normal;
  }
}

/* ===== table column tweaks: slimmer Level, wider Ministry, new Org. ===== */
.data-table { min-width: 1100px; }
.data-table .level-col,
.data-table td.level-col {
  min-width: 84px;
}
.data-table .ministry-col,
.data-table td.ministry-col {
  min-width: 168px;
  white-space: normal;
}
/* let the date column shrink (header wraps) so Notification stays on-screen */
.data-table .notification-date-col,
.data-table td.notification-date-col {
  min-width: 104px;
  white-space: normal;
}
.data-table .org-col,
.data-table td.org-col {
  min-width: 60px;
  white-space: nowrap;
  color: var(--text-secondary);
  font-weight: 600;
}
/* Notification button + source badge: equal-width stacked boxes */
.data-table .table-link-cell {
  min-width: 120px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.data-table td.table-link-cell .table-link-btn {
  display: flex;
  width: 108px;
  margin: 0 auto;
  box-sizing: border-box;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  white-space: nowrap;
}
.data-table td.table-link-cell .table-source-line {
  margin-top: 6px;
}
.data-table td.table-link-cell .source-badge {
  display: flex;
  width: 108px;
  margin: 0 auto;
  box-sizing: border-box;
  justify-content: center;
  font-size: 0.6rem;
  letter-spacing: 0;
  padding: 4px 4px;
}

/* ===== LIGHT THEME PREMIUM REFINEMENT ===== */

[data-theme="light"] body {
  background: var(--bg-main);
  color: var(--text-primary);
}

/* surfaces */
[data-theme="light"] .filters-sidebar,
[data-theme="light"] .toolbar-line,
[data-theme="light"] .table-wrapper,
[data-theme="light"] .job-card,
[data-theme="light"] .kpi-card,
[data-theme="light"] .modal-content,
[data-theme="light"] .modal-section,
[data-theme="light"] .empty-state {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(247, 250, 253, 0.92) 100%
  ) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow:
    0 12px 30px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(14px) saturate(130%);
}

/* top nav + header */
[data-theme="light"] .top-nav a {
  color: #475569;
}

[data-theme="light"] .top-nav a:hover,
[data-theme="light"] .top-nav a.active {
  color: #075985;
  background: rgba(2, 132, 199, 0.08);
}

[data-theme="light"] .app-header {
  border-bottom-color: rgba(15, 23, 42, 0.10);
}

/* header buttons */
[data-theme="light"] .icon-btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,250,252,0.96));
  border-color: rgba(15, 23, 42, 0.08);
  color: #0f172a;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

[data-theme="light"] .icon-btn:hover {
  border-color: rgba(2, 132, 199, 0.18);
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.10),
    0 0 0 4px rgba(2, 132, 199, 0.05);
}

/* header bookmark symbol */
[data-theme="light"] .save-col-heading svg {
  color: #475569;
  stroke-width: 2.1;
  opacity: 0.95;
}

/* inputs */
[data-theme="light"] input,
[data-theme="light"] select {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(15, 23, 42, 0.10);
  color: #0f172a;
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.02);
}

[data-theme="light"] input::placeholder {
  color: #94a3b8;
}

/* KPI cards */
[data-theme="light"] .kpi-card {
  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.95) 0%,
    rgba(244,247,251,0.94) 100%
  ) !important;
}

[data-theme="light"] .kpi-title {
  color: #64748b;
}

[data-theme="light"] .kpi-value {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.05em;
  background: linear-gradient(
    180deg,
    #204b86 0%,
    #163b66 46%,
    #0f2f57 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: none !important;
}

[data-theme="light"] .kpi-trend.flat {
  color: #64748b;
}

/* chips / pills / toggles */
[data-theme="light"] .filter-chip,
[data-theme="light"] .quick-pill,
[data-theme="light"] .meta-pill,
[data-theme="light"] .application-mode-badge {
  background: rgba(248, 250, 252, 0.96);
  border-color: rgba(15, 23, 42, 0.08);
  color: #334155;
}

[data-theme="light"] .quick-pill.active,
[data-theme="light"] .view-btn.active {
  color: #0369a1;
  border-color: rgba(2, 132, 199, 0.24);
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.06);
}

[data-theme="light"] .view-btn {
  background: rgba(255,255,255,0.94);
  border-color: rgba(15, 23, 42, 0.08);
  color: #334155;
}

/* table */
[data-theme="light"] .data-table th {
  background: rgba(243, 247, 251, 0.96);
  color: #64748b;
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .data-table td {
  color: #0f172a;
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .data-table tr:hover {
  background: rgba(2, 132, 199, 0.035);
}

[data-theme="light"] .table-subtext,
[data-theme="light"] .detail-value,
[data-theme="light"] .job-org,
[data-theme="light"] .vacancy-modal-subtitle,
[data-theme="light"] .vacancy-modal-org {
  color: #475569 !important;
}

[data-theme="light"] .detail-label,
[data-theme="light"] .highlight-label,
[data-theme="light"] .modal-field-label,
[data-theme="light"] .modal-section-title {
  color: #64748b !important;
}

[data-theme="light"] .highlight-box {
  background: linear-gradient(
    180deg,
    rgba(243, 247, 251, 0.95),
    rgba(230, 236, 243, 0.88)
  ) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .highlight-value,
[data-theme="light"] .job-title,
[data-theme="light"] .vacancy-modal-title {
  color: #0f172a !important;
}

/* buttons */
[data-theme="light"] .table-link-btn,
[data-theme="light"] .card-action-btn.secondary {
  background: rgba(248, 250, 252, 0.96) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  color: #334155 !important;
}

[data-theme="light"] .table-link-btn:hover,
[data-theme="light"] .card-action-btn.secondary:hover {
  background: rgba(240, 249, 255, 0.96) !important;
  border-color: rgba(2, 132, 199, 0.20) !important;
  color: #075985 !important;
}

[data-theme="light"] .table-link-btn.apply,
[data-theme="light"] .apply-btn {
  background: rgba(240, 253, 244, 0.98) !important;
  border-color: rgba(22, 163, 74, 0.18) !important;
  color: #15803d !important;
}

/* keep saved header heart state premium */
[data-theme="light"] .icon-btn.has-saved {
  border-color: rgba(244, 63, 94, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,245,247,0.96)) !important;
  color: #ff3355 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 8px 18px rgba(15, 23, 42, 0.10),
    0 0 0 4px rgba(244, 63, 94, 0.10) !important;
}

[data-theme="light"] .icon-btn.has-saved svg path {
  fill: #ff3355 !important;
  stroke: rgba(255,255,255,0.98) !important;
}

/* ===== LIGHT THEME GRADIENT UPGRADE ===== */

[data-theme="light"] .filters-sidebar {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.92) 0%,
      rgba(240,248,255,0.88) 52%,
      rgba(236,245,252,0.90) 100%
    ) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

[data-theme="light"] .kpi-card {
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.96) 0%,
      rgba(243,248,253,0.94) 48%,
      rgba(238,244,251,0.96) 100%
    ) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

/* slightly different tones for KPI categories */
[data-theme="light"] .kpi-cyan {
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.97) 0%,
      rgba(236,248,253,0.95) 55%,
      rgba(228,244,251,0.98) 100%
    ) !important;
}

[data-theme="light"] .kpi-green {
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.97) 0%,
      rgba(240,252,245,0.94) 55%,
      rgba(232,247,238,0.98) 100%
    ) !important;
}

[data-theme="light"] .kpi-red {
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.97) 0%,
      rgba(254,245,247,0.94) 55%,
      rgba(251,238,241,0.98) 100%
    ) !important;
}

[data-theme="light"] .kpi-purple {
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.97) 0%,
      rgba(247,243,255,0.94) 55%,
      rgba(241,236,252,0.98) 100%
    ) !important;
}

[data-theme="light"] .job-card,
[data-theme="light"] .premium-card {
  background:
    linear-gradient(165deg,
      rgba(255,255,255,0.95) 0%,
      rgba(244,248,252,0.94) 52%,
      rgba(239,245,251,0.97) 100%
    ) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

[data-theme="light"] .job-card:hover,
[data-theme="light"] .premium-card:hover {
  background:
    linear-gradient(165deg,
      rgba(255,255,255,0.98) 0%,
      rgba(242,248,253,0.96) 55%,
      rgba(235,244,251,0.98) 100%
    ) !important;
  border-color: rgba(2, 132, 199, 0.16) !important;
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.10),
    0 0 0 1px rgba(2,132,199,0.05) !important;
}
/* ===== LIGHT THEME TOOLBAR + TABLE WRAPPER GRADIENT ALIGNMENT ===== */

[data-theme="light"] .toolbar-line {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.94) 0%,
      rgba(243,248,253,0.92) 52%,
      rgba(238,244,251,0.95) 100%
    ) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow:
    0 12px 26px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

[data-theme="light"] .table-wrapper {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.95) 0%,
      rgba(244,248,252,0.93) 38%,
      rgba(239,245,251,0.96) 100%
    ) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

/* table header strip slightly stronger for hierarchy */
[data-theme="light"] .data-table th {
  background:
    linear-gradient(180deg,
      rgba(241,246,251,0.98) 0%,
      rgba(234,241,248,0.96) 100%
    ) !important;
  color: #64748b !important;
  border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

/* toolbar internals */
[data-theme="light"] .results-count {
  color: #475569 !important;
}

[data-theme="light"] .filter-chip,
[data-theme="light"] .quick-pill {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.96) 0%,
      rgba(245,248,252,0.96) 100%
    ) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: #334155 !important;
}

[data-theme="light"] .quick-pill:hover,
[data-theme="light"] .filter-chip:hover {
  border-color: rgba(2, 132, 199, 0.16) !important;
  background:
    linear-gradient(180deg,
      rgba(248,252,255,0.98) 0%,
      rgba(240,249,255,0.98) 100%
    ) !important;
}

[data-theme="light"] .quick-pill.active,
[data-theme="light"] .view-btn.active {
  background:
    linear-gradient(180deg,
      rgba(240,249,255,0.98) 0%,
      rgba(230,244,252,0.98) 100%
    ) !important;
  border-color: rgba(2, 132, 199, 0.24) !important;
  color: #0369a1 !important;
  box-shadow:
    0 0 0 2px rgba(2,132,199,0.06),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

/* table rows slightly richer */
[data-theme="light"] .data-table tr:hover {
  background:
    linear-gradient(90deg,
      rgba(2,132,199,0.028) 0%,
      rgba(2,132,199,0.014) 100%
    ) !important;
}

/* pagination aligned too */
[data-theme="light"] .page-btn,
[data-theme="light"] .page-nav-btn {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.96) 0%,
      rgba(245,248,252,0.96) 100%
    ) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: #334155 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

[data-theme="light"] .page-btn:hover,
[data-theme="light"] .page-nav-btn:hover {
  border-color: rgba(2, 132, 199, 0.18) !important;
  background:
    linear-gradient(180deg,
      rgba(248,252,255,0.98) 0%,
      rgba(240,249,255,0.98) 100%
    ) !important;
}

[data-theme="light"] .page-btn.active {
  background:
    linear-gradient(180deg,
      rgba(240,249,255,0.98) 0%,
      rgba(230,244,252,0.98) 100%
    ) !important;
  border-color: rgba(2, 132, 199, 0.24) !important;
  color: #0369a1 !important;
}

/* ===== subtle hover animation polish ===== */

.job-card,
.premium-card {
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease;
  will-change: transform;
}

.job-card:hover,
.premium-card:hover {
  transform: translateY(-6px) scale(1.01);
}

/* table row hover polish */
.data-table tr {
  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.data-table tbody tr:hover {
  transform: translateY(-1px);
}

/* make hover feel smoother in dark mode */
.data-table tbody tr:hover td {
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* light theme row hover refinement */
[data-theme="light"] .data-table tbody tr:hover {
  box-shadow: inset 0 0 0 9999px rgba(2, 132, 199, 0.03);
}

/* dark theme row hover refinement */
[data-theme="dark"] .data-table tbody tr:hover,
html:not([data-theme="light"]) .data-table tbody tr:hover {
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.015);
}


/* ===== LIGHT THEME: FLUORESCENT CYAN + PURPLE ===== */

[data-theme="light"] {
  --bg-main: #f6f7f9;
  --bg-surface: #ffffff;
  --bg-surface-hover: #f4f7fa;
  --bg-surface-solid: #ffffff;
  --border-color: rgba(13, 23, 44, 0.11);
  --border-highlight: rgba(14, 116, 144, 0.40);
  --text-primary: #0c1322;
  --text-secondary: #46556e;
  --text-muted: #6e7d96;
  --primary-color: #0e7490;
  --accent-color: #6d28d9;
  --success-color: #0f9d58;
  --warning-color: #b45309;
  --danger-color: #dc2626;
  --shadow-glass: 0 10px 30px -14px rgba(15, 23, 42, 0.16);
}

[data-theme="light"] body {
  background:
    radial-gradient(1100px 480px at 50% -240px, rgba(14, 116, 144, 0.05), transparent 70%),
    var(--bg-main);
  color: var(--text-primary);
}

/* top nav */
[data-theme="light"] .top-nav a {
  color: #475569;
}
[data-theme="light"] .top-nav a:hover,
[data-theme="light"] .top-nav a.active {
  color: #5b21b6;
  background: rgba(139, 92, 246, 0.10);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.08);
}

/* header + buttons */
[data-theme="light"] .app-header {
  border-bottom-color: rgba(91, 33, 182, 0.10);
}
[data-theme="light"] .icon-btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(245,247,255,0.96));
  border-color: rgba(109, 40, 217, 0.10);
  color: #1f2a44;
  box-shadow:
    0 10px 22px rgba(76, 29, 149, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.96);
}
[data-theme="light"] .icon-btn:hover {
  border-color: rgba(0, 207, 255, 0.28);
  box-shadow:
    0 12px 26px rgba(76, 29, 149, 0.10),
    0 0 0 4px rgba(0, 207, 255, 0.08);
}

/* filters box */
[data-theme="light"] .filters-sidebar {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.88) 0%,
      rgba(238,248,255,0.86) 52%,
      rgba(244,239,255,0.90) 100%
    ) !important;
  border: 1px solid rgba(109, 40, 217, 0.10) !important;
  box-shadow:
    0 16px 34px rgba(76, 29, 149, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

[data-theme="light"] input,
[data-theme="light"] select {
  background: rgba(255,255,255,0.94);
  border-color: rgba(109, 40, 217, 0.10);
  color: var(--text-primary);
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus {
  border-color: rgba(0, 207, 255, 0.45);
  box-shadow: 0 0 0 4px rgba(0, 207, 255, 0.08);
}
[data-theme="light"] input::placeholder {
  color: #94a3b8;
}

/* KPI cards */
[data-theme="light"] .kpi-card {
  border: 1px solid rgba(109, 40, 217, 0.10) !important;
  box-shadow:
    0 14px 30px rgba(76, 29, 149, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

[data-theme="light"] .kpi-cyan {
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.96) 0%,
      rgba(231,250,255,0.94) 56%,
      rgba(223,246,255,0.98) 100%
    ) !important;
}
[data-theme="light"] .kpi-green {
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.96) 0%,
      rgba(238,255,245,0.94) 56%,
      rgba(231,249,239,0.98) 100%
    ) !important;
}
[data-theme="light"] .kpi-red {
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.96) 0%,
      rgba(255,242,248,0.94) 56%,
      rgba(253,234,244,0.98) 100%
    ) !important;
}
[data-theme="light"] .kpi-purple {
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.96) 0%,
      rgba(245,241,255,0.94) 56%,
      rgba(238,233,255,0.98) 100%
    ) !important;
}

[data-theme="light"] .kpi-title {
  color: #64748b;
}

[data-theme="light"] .kpi-value {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.05em;
  background: linear-gradient(
    180deg,
    #1d4ed8 0%,
    #4338ca 45%,
    #6d28d9 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow:
    0 0 12px rgba(59, 130, 246, 0.10),
    0 0 18px rgba(139, 92, 246, 0.08);
}

/* toolbar */
[data-theme="light"] .toolbar-line {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.90) 0%,
      rgba(241,248,255,0.88) 48%,
      rgba(245,241,255,0.92) 100%
    ) !important;
  border: 1px solid rgba(109, 40, 217, 0.10) !important;
  box-shadow:
    0 12px 28px rgba(76, 29, 149, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

[data-theme="light"] .filter-chip,
[data-theme="light"] .quick-pill,
[data-theme="light"] .meta-pill,
[data-theme="light"] .application-mode-badge {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.96) 0%,
      rgba(248,250,255,0.96) 100%
    ) !important;
  border-color: rgba(109, 40, 217, 0.10) !important;
  color: #334155 !important;
}

[data-theme="light"] .quick-pill.active,
[data-theme="light"] .view-btn.active {
  color: #5b21b6 !important;
  background:
    linear-gradient(180deg,
      rgba(236,248,255,0.98) 0%,
      rgba(242,236,255,0.98) 100%
    ) !important;
  border-color: rgba(0, 207, 255, 0.24) !important;
  box-shadow:
    0 0 0 2px rgba(0, 207, 255, 0.06),
    0 0 16px rgba(139, 92, 246, 0.08);
}

/* table wrapper */
[data-theme="light"] .table-wrapper {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.94) 0%,
      rgba(242,248,255,0.92) 38%,
      rgba(245,241,255,0.94) 100%
    ) !important;
  border: 1px solid rgba(109, 40, 217, 0.10) !important;
  box-shadow:
    0 16px 34px rgba(76, 29, 149, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

[data-theme="light"] .data-table th {
  background:
    linear-gradient(180deg,
      rgba(243,249,255,0.98) 0%,
      rgba(240,244,255,0.96) 100%
    ) !important;
  /* P3-10: was #64748b, which measured 4.49:1 at the gradient's top stop and
     4.32:1 at the bottom — the 4.42 recorded during P3-8 is the midpoint of
     that range. Header type is 12.8px/700, i.e. NORMAL text under WCAG (the
     large-text exemption starts at 18.66px bold), so the bar is 4.5 and both
     ends were under it. #556378 measures 5.76 / 5.54 against the same two
     stops while staying a muted grey-blue, so the header still reads as
     secondary to the row content. Verified from computed styles in the
     browser, not modelled — the winning rule is this one, not the teal block
     at :4976, and the background is a gradient rather than a flat fill. */
  color: #556378 !important;
  border-bottom-color: rgba(109, 40, 217, 0.08) !important;
}

[data-theme="light"] .data-table tr:hover {
  background:
    linear-gradient(90deg,
      rgba(0,207,255,0.025) 0%,
      rgba(139,92,246,0.025) 100%
    ) !important;
}

/* cards */
[data-theme="light"] .job-card,
[data-theme="light"] .premium-card {
  background:
    linear-gradient(165deg,
      rgba(255,255,255,0.95) 0%,
      rgba(243,248,255,0.93) 52%,
      rgba(245,240,255,0.95) 100%
    ) !important;
  border: 1px solid rgba(109, 40, 217, 0.10) !important;
  box-shadow:
    0 16px 34px rgba(76, 29, 149, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

[data-theme="light"] .job-card:hover,
[data-theme="light"] .premium-card:hover {
  background:
    linear-gradient(165deg,
      rgba(255,255,255,0.98) 0%,
      rgba(239,249,255,0.96) 52%,
      rgba(243,236,255,0.98) 100%
    ) !important;
  border-color: rgba(0, 207, 255, 0.18) !important;
  box-shadow:
    0 18px 38px rgba(76, 29, 149, 0.12),
    0 0 0 1px rgba(139, 92, 246, 0.05) !important;
}

[data-theme="light"] .job-title,
[data-theme="light"] .vacancy-modal-title {
  color: #111827 !important;
}

[data-theme="light"] .job-org,
[data-theme="light"] .detail-value,
[data-theme="light"] .modal-field-value,
[data-theme="light"] .modal-richtext,
[data-theme="light"] .vacancy-modal-subtitle,
[data-theme="light"] .vacancy-modal-org {
  color: #475569 !important;
}

[data-theme="light"] .highlight-box {
  background:
    linear-gradient(180deg,
      rgba(244,248,253,0.96),
      rgba(232,239,247,0.90)
    ) !important;
  border-color: rgba(109, 40, 217, 0.08) !important;
}

/* links / action buttons */
[data-theme="light"] .table-link-btn,
[data-theme="light"] .card-action-btn.secondary {
  background:
    linear-gradient(180deg,
      rgba(248,252,255,0.98) 0%,
      rgba(242,246,255,0.98) 100%
    ) !important;
  border-color: rgba(109, 40, 217, 0.10) !important;
  color: #334155 !important;
}

[data-theme="light"] .table-link-btn:hover,
[data-theme="light"] .card-action-btn.secondary:hover {
  background:
    linear-gradient(180deg,
      rgba(240,251,255,0.98) 0%,
      rgba(242,236,255,0.98) 100%
    ) !important;
  border-color: rgba(0, 207, 255, 0.20) !important;
  color: #5b21b6 !important;
}

/* ===== table header bookmark state ===== */

.save-col-heading svg {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  vertical-align: middle;
  transition: all 0.22s ease;
}

.save-col-heading.has-saved svg {
  color: #ff3355 !important;
  filter:
    drop-shadow(0 1px 2px rgba(120, 12, 35, 0.25))
    drop-shadow(0 0 6px rgba(255, 51, 79, 0.22));
}

.save-col-heading.has-saved svg path {
  fill: #ff3355 !important;
  stroke: #ff3355 !important;
}

/* light mode keep neutral when none saved */
[data-theme="light"] .save-col-heading:not(.has-saved) svg {
  color: #475569 !important;
}

/* light mode red saved state */
[data-theme="light"] .save-col-heading.has-saved svg {
  color: #ff3355 !important;
}

/* ===== sorted column visual polish ===== */

/* base sorted button */
.sort-btn.active {
  font-weight: 700;
}

.sort-btn.active span:first-child {
  color: var(--text-primary);
}

.sort-btn.active .sort-indicator {
  color: var(--primary-color);
  opacity: 1;
  transform: scale(1.08);
}

/* highlight the sorted header cell */
.data-table th:has(.sort-btn.active) {
  position: sticky;
  top: 0;
  z-index: 4;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.01)
  );
  box-shadow: inset 0 -2px 0 rgba(34, 211, 238, 0.20);
}

/* subtle active strip */
.data-table th:has(.sort-btn.active)::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--primary-color),
    transparent
  );
  opacity: 0.9;
}

/* dark theme */
[data-theme="dark"] .data-table th:has(.sort-btn.active),
html:not([data-theme="light"]) .data-table th:has(.sort-btn.active) {
  background:
    linear-gradient(
      180deg,
      rgba(34, 211, 238, 0.08),
      rgba(167, 139, 250, 0.04)
    ),
    rgba(15, 23, 42, 0.96);
  box-shadow:
    inset 0 -2px 0 rgba(34, 211, 238, 0.26),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

/* light theme */
[data-theme="light"] .data-table th:has(.sort-btn.active) {
  background:
    linear-gradient(
      180deg,
      rgba(0, 207, 255, 0.07),
      rgba(139, 92, 246, 0.05)
    ),
    linear-gradient(
      180deg,
      rgba(243,249,255,0.98) 0%,
      rgba(240,244,255,0.96) 100%
    ) !important;
  box-shadow:
    inset 0 -2px 0 rgba(0, 207, 255, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

[data-theme="light"] .sort-btn.active span:first-child {
  color: #1f2a44;
}

[data-theme="light"] .sort-btn.active .sort-indicator {
  color: #5b21b6;
}

/* hover on active sort */
.sort-btn.active:hover .sort-indicator {
  transform: scale(1.14);
}
/* ===== PREMIUM 3D MODAL UPGRADE ===== */

.modal {
  background:
    radial-gradient(circle at 20% 20%, rgba(34, 211, 238, 0.08), transparent 28%),
    radial-gradient(circle at 80% 80%, rgba(167, 139, 250, 0.10), transparent 24%),
    rgba(2, 4, 11, 0.82);
  backdrop-filter: blur(18px) saturate(120%);
}

.modal-content {
  width: min(94vw, 1080px);
  max-width: 1080px;
  max-height: 94vh;
  padding: 2.2rem 2.3rem 2rem;
  border-radius: 28px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    linear-gradient(165deg, rgba(5, 16, 40, 0.92), rgba(7, 23, 58, 0.88));
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.42),
    0 10px 28px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  overflow-y: auto;
  position: relative;
  animation: modalPop3D 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.modal-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  pointer-events: none;
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, 0.10), transparent 28%),
    radial-gradient(circle at bottom right, rgba(167, 139, 250, 0.10), transparent 24%);
  opacity: 0.85;
}

.modal-content::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.035);
}

@keyframes modalPop3D {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.975);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.vacancy-modal {
  position: relative;
  z-index: 1;
  gap: 1.25rem;
}

.vacancy-modal-header {
  gap: 1.25rem;
  align-items: flex-start;
  padding-right: 4rem;
  margin-bottom: 0.15rem;
}

.vacancy-modal-title {
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  font-size: clamp(2rem, 2.2vw, 2.8rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: #f8fafc;
  text-shadow: 0 8px 22px rgba(0,0,0,0.22);
}

.vacancy-modal-subtitle {
  font-size: 1.08rem;
  color: #a8b4cc;
  margin-top: 0.25rem;
}

.vacancy-modal-org {
  font-size: 1.02rem;
  color: #7f8fad;
}

.modal-chip-row {
  gap: 0.65rem;
  justify-content: flex-end;
  align-items: flex-start;
}

.modal-chip-row .badge,
.modal-chip-row .modal-deadline-chip {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 8px 18px rgba(0,0,0,0.14);
}

.modal-section {
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    linear-gradient(180deg, rgba(5, 18, 44, 0.78), rgba(3, 14, 36, 0.70));
  box-shadow:
    0 14px 26px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.04);
  padding: 1.25rem 1.25rem 1.15rem;
}

.modal-section-title {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: #7f8fad;
  margin-bottom: 0.9rem;
}

.modal-grid {
  gap: 1.1rem 1.4rem;
}

.modal-field-label {
  color: #7f8fad;
  font-size: 0.78rem;
  margin-bottom: 0.35rem;
}

.modal-field-value,
.modal-richtext {
  color: #d6deed;
  font-size: 1.02rem;
  line-height: 1.55;
}

.modal-richtext {
  white-space: normal;
}

.modal-actions {
  gap: 0.9rem;
  margin-top: 0.15rem;
}

.modal-actions .card-action-btn {
  min-height: 46px;
  padding: 0 1.15rem;
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 10px 18px rgba(0,0,0,0.14);
}

.modal-actions .card-action-btn.secondary {
  background: rgba(15, 23, 42, 0.58);
}

.modal-close {
  top: 22px;
  right: 22px;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 24px rgba(0,0,0,0.18);
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.modal-close:hover {
  transform: translateY(-1px) scale(1.03);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 14px 28px rgba(0,0,0,0.22);
}

.modal-close svg {
  width: 24px;
  height: 24px;
}

/* laptop / desktop: give more space */
@media (min-width: 1200px) {
  .modal-content {
    width: min(92vw, 1120px);
    max-width: 1120px;
    padding: 2.35rem 2.5rem 2.15rem;
  }

  .vacancy-modal-title {
    max-width: 720px;
  }
}

/* medium screens */
@media (max-width: 1024px) {
  .modal-content {
    width: min(95vw, 940px);
    max-width: 940px;
    padding: 1.8rem 1.8rem 1.7rem;
  }

  .vacancy-modal-title {
    font-size: clamp(1.7rem, 2vw, 2.25rem);
  }
}

/* mobile safety */
@media (max-width: 640px) {
  .modal-content {
    width: 94vw;
    max-width: none;
    max-height: 94vh;
    padding: 1.25rem;
    border-radius: 22px;
  }

  .modal-content::after {
    inset: 8px;
    border-radius: 16px;
  }

  .vacancy-modal-header {
    padding-right: 0;
  }

  .vacancy-modal-title {
    font-size: 1.6rem;
    line-height: 1.08;
  }

  .modal-close {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    top: 16px;
    right: 16px;
  }
}

/* light theme version of same premium modal */
[data-theme="light"] .modal {
  background:
    radial-gradient(circle at 18% 18%, rgba(0, 207, 255, 0.12), transparent 28%),
    radial-gradient(circle at 82% 82%, rgba(139, 92, 246, 0.14), transparent 24%),
    rgba(230, 238, 248, 0.70);
}

[data-theme="light"] .modal-content {
  background:
    linear-gradient(165deg, rgba(255,255,255,0.96), rgba(243,248,255,0.94));
  border: 1px solid rgba(109, 40, 217, 0.10);
  box-shadow:
    0 28px 70px rgba(76, 29, 149, 0.14),
    0 12px 28px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

[data-theme="light"] .modal-section {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.90), rgba(245,248,253,0.94));
  border-color: rgba(109, 40, 217, 0.10);
  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

[data-theme="light"] .vacancy-modal-title {
  color: #111827;
  text-shadow: none;
}

[data-theme="light"] .modal-field-value,
[data-theme="light"] .modal-richtext {
  color: #334155;
}

[data-theme="light"] .modal-section-title,
[data-theme="light"] .modal-field-label,
[data-theme="light"] .vacancy-modal-org {
  color: #64748b;
}

[data-theme="light"] .vacancy-modal-subtitle {
  color: #475569;
}

[data-theme="light"] .modal-close {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,247,255,0.98));
  border-color: rgba(109, 40, 217, 0.10);
  box-shadow:
    0 10px 20px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.98);
}

/* ===== Days Left pill styling ===== */

.days-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.days-pill-safe {
  color: inherit;                  /* match the row's text (white on hover); yellow border */
  background: transparent;
  border: 1.5px solid #facc15;
}

.days-pill-closing {
  color: var(--danger-color);
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.28);
}

.days-pill-expired {
  color: var(--text-secondary);
  background: rgba(100, 116, 139, 0.12);
  border-color: rgba(100, 116, 139, 0.24);
}

.days-pill-muted {
  color: var(--text-secondary);
  background: rgba(148, 163, 184, 0.10);
  border-color: rgba(148, 163, 184, 0.18);
}

/* table alignment */
.data-table td .days-pill {
  min-width: 104px;
}

/* card view keeps pill compact */
.highlight-value .days-pill {
  min-width: 0;
  width: auto;
  font-size: 1rem;
  padding: 0;
  min-height: auto;
  border: none;
  background: transparent;
}

.highlight-box .days-pill-safe {
  color: var(--success-color);
}

.highlight-box .days-pill-closing {
  color: var(--danger-color);
}

.highlight-box .days-pill-expired,
.highlight-box .days-pill-muted {
  color: var(--text-secondary);
}

/* light theme refinement */
[data-theme="light"] .days-pill-safe {
  color: #166534;                 /* readable dark green */
  background: transparent;
  border: 1.5px solid #eab308;    /* yellow border, no fill */
  font-weight: 800;
}

/* Phase 2 item 9: measured on the real composited card background, #e11d48 was
   4.12 and #64748b was 4.11/4.39 — all under the 4.5 bar for this 0.95rem text.
   Both predate Phase 2, but they are three of the same five bands the
   light-theme twin covers, so correcting them here keeps one scale rather than
   two. Darkened just enough to clear the bar; hue and weight unchanged. */
[data-theme="light"] .days-pill-closing {
  color: #be123c;
  background: rgba(244, 63, 94, 0.10);
  border-color: rgba(244, 63, 94, 0.18);
}

[data-theme="light"] .days-pill-expired,
[data-theme="light"] .days-pill-muted {
  color: #4b5769;
}

/* ===== card Days Left box same premium feel as Status box ===== */

.job-highlight-row .highlight-box:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.job-highlight-row .highlight-box:first-child .highlight-value {
  margin-top: 0.1rem;
}

.job-highlight-row .highlight-box:first-child .days-pill {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* keep tone colors strong inside cards */
.job-highlight-row .highlight-box:first-child .days-pill-safe {
  color: var(--success-color);
}

.job-highlight-row .highlight-box:first-child .days-pill-closing {
  color: var(--danger-color);
}

.job-highlight-row .highlight-box:first-child .days-pill-expired,
.job-highlight-row .highlight-box:first-child .days-pill-muted {
  color: var(--text-secondary);
}

/* dark theme card box tuning */
html:not([data-theme="light"]) .job-highlight-row .highlight-box:first-child {
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(2, 6, 23, 0.34);
}

html:not([data-theme="light"]) .job-highlight-row .highlight-box:first-child:has(.days-pill-closing) {
  border-color: rgba(244, 63, 94, 0.28);
  background: rgba(244, 63, 94, 0.07);
}

html:not([data-theme="light"]) .job-highlight-row .highlight-box:first-child:has(.days-pill-safe) {
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(34, 197, 94, 0.07);
}

html:not([data-theme="light"]) .job-highlight-row .highlight-box:first-child:has(.days-pill-expired),
html:not([data-theme="light"]) .job-highlight-row .highlight-box:first-child:has(.days-pill-muted) {
  border-color: rgba(100, 116, 139, 0.24);
  background: rgba(100, 116, 139, 0.12);
}

/* light theme card box tuning */
[data-theme="light"] .job-highlight-row .highlight-box:first-child {
  border-color: rgba(15, 23, 42, 0.08);
  background: linear-gradient(
    180deg,
    rgba(243, 247, 251, 0.95),
    rgba(230, 236, 243, 0.88)
  ) !important;
}

[data-theme="light"] .job-highlight-row .highlight-box:first-child:has(.days-pill-closing) {
  border-color: rgba(244, 63, 94, 0.18) !important;
  background: linear-gradient(
    180deg,
    rgba(255, 242, 246, 0.96),
    rgba(255, 232, 239, 0.92)
  ) !important;
}

[data-theme="light"] .job-highlight-row .highlight-box:first-child:has(.days-pill-safe) {
  border-color: rgba(22, 163, 74, 0.18) !important;
  background: linear-gradient(
    180deg,
    rgba(240, 253, 244, 0.96),
    rgba(228, 248, 235, 0.92)
  ) !important;
}

[data-theme="light"] .job-highlight-row .highlight-box:first-child:has(.days-pill-expired),
[data-theme="light"] .job-highlight-row .highlight-box:first-child:has(.days-pill-muted) {
  border-color: rgba(100, 116, 139, 0.16) !important;
  background: linear-gradient(
    180deg,
    rgba(248, 250, 252, 0.96),
    rgba(233, 238, 244, 0.92)
  ) !important;
}

/* ===== modal close button click reliability ===== */

.modal-close {
  z-index: 30;
  pointer-events: auto;
}

.modal-close svg,
.modal-close svg * {
  pointer-events: none;
}

/* ===== Notification Date chip ===== */

.notification-date-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, 0.20);
  background: rgba(34, 211, 238, 0.08);
  color: var(--primary-color);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}

[data-theme="light"] .notification-date-chip {
  border-color: rgba(109, 40, 217, 0.10);
  background: linear-gradient(
    180deg,
    rgba(248,252,255,0.98) 0%,
    rgba(242,246,255,0.98) 100%
  );
  color: #334155;
}

.data-table .notification-date-col,
.data-table td.notification-date-col {
  min-width: 150px;
  white-space: nowrap;
}

/* ===== card notification date + footer stability ===== */

.notification-date-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.48rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.42);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  max-width: 100%;
}

.job-card-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.job-card-footer .card-action-btn {
  width: 100%;
  flex: none;
}

/* Source badge: full-width box under the Notification button, smaller font */
.job-card-footer .card-source-badge {
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  font-size: 0.62rem;
  letter-spacing: 0;
}

/* keep notification chip neat in light theme too */
[data-theme="light"] .notification-date-chip {
  border-color: rgba(109, 40, 217, 0.10);
  background: linear-gradient(
    180deg,
    rgba(248,252,255,0.98) 0%,
    rgba(242,246,255,0.98) 100%
  );
  color: #334155;
}

.page-nav-btn {
  min-width: 52px;
}

.kpi-clickable {
  cursor: pointer;
}

.kpi-clickable * {
  cursor: pointer;
}

.kpi-clickable,
.kpi-clickable * {
  cursor: pointer;
}

.kpi-clickable:hover {
  transform: translateY(-6px) scale(1.01);
}

/* ===== premium sidebar credit plaque ===== */

.premium-credit {
  position: relative;
  margin-top: 1.35rem;
  padding: 1rem 1rem 0.95rem;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(167, 139, 250, 0.06));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 10px 24px rgba(0,0,0,0.16);
}

.premium-credit::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  opacity: 0.9;
}

.credit-topline {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.55rem;
}

.credit-mainline {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.credit-name {
  font-family: "Sora", "Plus Jakarta Sans", "Inter", sans-serif;
  font-size: 1.08rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.45rem;
}

.credit-role-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  align-items: center;
}

.credit-role {
  font-size: 0.79rem;
  color: var(--text-secondary);
  font-weight: 700;
  line-height: 1.35;
}

.credit-sep {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

/* dark theme: richer glow */
html:not([data-theme="light"]) .premium-credit {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    linear-gradient(135deg, rgba(34, 211, 238, 0.10), rgba(167, 139, 250, 0.08));
  border-color: rgba(148, 163, 184, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 12px 28px rgba(0,0,0,0.18),
    0 0 0 1px rgba(255,255,255,0.02);
}

/* light theme */
[data-theme="light"] .premium-credit {
  border-color: rgba(109, 40, 217, 0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(247,250,255,0.90)),
    linear-gradient(135deg, rgba(0, 207, 255, 0.08), rgba(139, 92, 246, 0.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 12px 26px rgba(76, 29, 149, 0.08);
}

[data-theme="light"] .credit-topline {
  color: #73819d;
}

[data-theme="light"] .credit-mainline,
[data-theme="light"] .credit-role {
  color: #5a6784;
}

[data-theme="light"] .credit-name {
  color: #1f2a44;
}

/* mobile */
@media (max-width: 768px) {
  .premium-credit {
    padding: 0.9rem 0.9rem 0.85rem;
    border-radius: 16px;
  }

  .credit-name {
    font-size: 1rem;
  }

  .credit-role-wrap {
    gap: 0.24rem;
  }
}

/* ---- Source provenance badge (table "Source" column, cards, modal) ---- */
.source-badge,
.card-source-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--text-secondary);
  background: rgba(120, 150, 200, 0.12);
  border: 1px solid rgba(120, 150, 200, 0.28);
}
.card-source-badge {
  align-self: center;
}
.modal-muted {
  color: var(--text-muted, #8a93a8);
  font-weight: 400;
}

[data-theme="light"] .source-badge,
[data-theme="light"] .card-source-badge {
  color: #475569;
  background: rgba(2, 132, 199, 0.07);
  border-color: rgba(2, 132, 199, 0.18);
}

/* Subheadings inside verbatim rich-text blocks (e.g. Detailed Eligibility) */
.modal-richtext .rich-subhead {
  display: inline-block;
  margin-top: 0.7rem;
  margin-bottom: 0.1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.modal-richtext .rich-subhead:first-child {
  margin-top: 0;
}
/* each broken-out point/sentence on its own line, with breathing room */
.modal-richtext .rich-line { display: block; }
.modal-richtext .rich-line + .rich-line { margin-top: 0.5rem; }
.modal-richtext .rich-point { padding-left: 1.5rem; text-indent: -1.4rem; }
/* sober accent for the key facts (pay level, service years, age, posts) */
.modal-richtext .rich-key { color: #8fb3ff; font-weight: 600; }
[data-theme="light"] .modal-richtext .rich-key { color: #2f57c9; font-weight: 600; }

/* ===== modern, neutral table styling (compact, frosted header) ===== */

/* 1. Uniform compact type across the table (size of the Level column) */
.data-table td {
  font-size: 0.82rem;
}

/* 2. Distinct frosted header, clearly separated from the rows */
.data-table thead th {
  background: rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  text-transform: uppercase;
  letter-spacing: 0.045em;
}
[data-theme="light"] .data-table thead th {
  background: rgba(15, 23, 42, 0.045);
  border-bottom-color: rgba(15, 23, 42, 0.14);
}

/* 3. Neutral, low-contrast alternating rows + hairline dividers + clean hover.
   (Neutral palette keeps it modern; colour is reserved for the status pills.) */
.data-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.025);
}
.data-table tbody td {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}
.data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.07);
}
[data-theme="light"] .data-table tbody tr:nth-child(even) {
  background: rgba(15, 23, 42, 0.028);
}
[data-theme="light"] .data-table tbody td {
  border-bottom-color: rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .data-table tbody tr:hover {
  background: rgba(2, 132, 199, 0.07);
}

/* ===== ROW DESIGN (Design 1: 3D plank rows, CodePen-style lift + colour change) ===== */
.data-table {
  border-collapse: separate;
  border-spacing: 0 12px;   /* no column gaps -> row is one plank; gap leaves room for the 3D edge */
}
.data-table tr {
  transition: transform 0.28s ease, filter 0.28s ease;
}
/* Header = one teal glossy plank with a 3D bottom edge */
.data-table thead th {
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.30), rgba(14, 116, 144, 0.20));
  color: #eafdff;
  border: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
              0 4px 0 rgba(125, 232, 255, 0.25),
              0 8px 12px -4px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.data-table thead th:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.data-table thead th:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

/* ===========================================================================
   TABLE ROW 3D PLANK HOVER  (scoped to .data-container.view-table)
   - rest: flat tile with a whisper of internal left/right shading
   - hover (anywhere EXCEPT the Notification/Bookmark cells): row lifts up-left,
     top face takes the brand colour (4-cycle), a flat bottom face (box-shadow)
     + a clip-path RIGHT face fade in. clip-path (not skew) keeps the side face
     aligned to the corner with no hanging triangle.
   =========================================================================== */
.data-table tbody tr {
  --depth: 14px;
  transform-origin: left center;
  transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}
.data-table tbody td {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
  border: none;
  box-shadow: none;                 /* no internal cell shading */
  transition: background 0.48s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}
.data-table tbody tr td:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.data-table tbody tr td:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.data-table tbody tr:nth-child(even) td {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
}
/* keep cell content (text, buttons, the bookmark heart) above the 3D side faces */
.data-table tbody td > * { position: relative; z-index: 1; }

/* BOTTOM face — ONE continuous band. Middle cells are plain rectangles (slightly
   overlapped via left/right: -1px so there are no seams); only the FIRST cell
   angles its left edge and the LAST cell angles its right edge. This fixes the
   "broken per-column shadow" — the base now reads as a single plank. */
.data-table tbody td::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: calc(-1 * var(--depth));
  height: var(--depth);
  background: var(--bottom-face, #5fd4ef);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}
.data-table tbody td:first-child::before {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--depth) 100%);   /* angled left end */
}
.data-table tbody td:last-child::before {
  right: calc(-1 * var(--depth));
  /* fill the full extended width so the light bottom face reaches the corner and
     meets the dark right side face (no background notch at the bottom-right). */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
/* RIGHT side face (last cell only) — solid darker side-face colour (no filter,
   so the per-row --side-face renders true). */
.data-table tbody td:last-child::after {
  content: "";
  position: absolute;
  top: 0;
  right: calc(-1 * var(--depth));
  width: var(--depth);
  height: calc(100% + var(--depth));
  background: var(--side-face, #07576f);
  clip-path: polygon(0 0, 100% var(--depth), 100% 100%, 0 calc(100% - var(--depth)));
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Bookmarked rows: persistent glowing side edge (rest state only) */
.data-table tbody tr.row-bookmarked td {
  box-shadow: 0 4px 0 rgba(125, 232, 255, 0.85),
              0 4px 16px rgba(34, 211, 238, 0.55),
              0 2px 4px rgba(0, 0, 0, 0.25);
}

/* HOVER — gated with :not(:has(... :hover)) so hovering the Notification (9) or
   Bookmark (10) cell does NOT lift/recolour the row (only that control reacts).
   Scoped under .data-container.view-table for specificity (beats the zebra rule). */
.data-container.view-table .data-table tbody tr:hover:not(:has(td:nth-child(9):hover, td:nth-child(10):hover)) {
  transform: translate(-8px, -8px) skewX(-2.2deg);   /* tilt the whole plank (text included) */
  transform-origin: left center;
  filter: drop-shadow(20px 20px 18px rgba(15, 23, 42, 0.26));
  z-index: 6;
  /* ONE continuous top-face gradient across the WHOLE row (painted on the <tr>,
     not per cell) — lighter top + left (Post Name), darker bottom + right (Bookmark). */
  /* !important so it beats the light-theme "fluorescent" tr:hover rule (which is
     itself !important) — otherwise light mode washes the row out to near-white. */
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0.24) 100%),
    linear-gradient(180deg, var(--row-top, #19b4ec), var(--row-bottom, #0a90c4)) !important;
  border-radius: 14px 0 0 0;   /* rounded top-left, square elsewhere (plank) */
  box-shadow: none;   /* kill the theme-specific inset tint (blue in light / white in dark)
                         so the hovered plank looks IDENTICAL in both themes */
}
/* cells become transparent so the single row-wide gradient shows through with no
   per-column seams; subtle text-shadow keeps white text crisp on the lighter left. */
.data-container.view-table .data-table tbody tr:hover:not(:has(td:nth-child(9):hover, td:nth-child(10):hover)) td {
  background: transparent;
  color: var(--row-text, #ffffff);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
  box-shadow: none;
}
/* on hover the plank's right edge goes square so the side face connects flush;
   top-left stays rounded, bottom-left squared (angled bottom face takes over). */
.data-container.view-table .data-table tbody tr:hover:not(:has(td:nth-child(9):hover, td:nth-child(10):hover)) td:first-child {
  border-bottom-left-radius: 0; border-top-left-radius: 14px;
}
.data-container.view-table .data-table tbody tr:hover:not(:has(td:nth-child(9):hover, td:nth-child(10):hover)) td:last-child {
  border-bottom-right-radius: 0; border-top-right-radius: 0;
}
/* fade in the angled bottom face + the right side face */
.data-container.view-table .data-table tbody tr:hover:not(:has(td:nth-child(9):hover, td:nth-child(10):hover)) td::before,
.data-container.view-table .data-table tbody tr:hover:not(:has(td:nth-child(9):hover, td:nth-child(10):hover)) td:last-child::after {
  opacity: 1;
}
.data-container.view-table .data-table tbody tr:hover:not(:has(td:nth-child(9):hover, td:nth-child(10):hover)) td strong,
.data-container.view-table .data-table tbody tr:hover:not(:has(td:nth-child(9):hover, td:nth-child(10):hover)) td .table-subtext {
  color: #ffffff;
}

/* Days Left on hover: >15 (safe) -> white to match the plank text; <=15 (closing)
   -> BOLD RED, except on the RED (10n+3) and PINK (10n+4) planks where red is
   invisible -> white bold. */
.data-container.view-table .data-table tbody tr:hover:not(:has(td:nth-child(9):hover, td:nth-child(10):hover)) .days-pill-safe {
  color: #ffffff !important;
}
/* Phase 2 item 9: critical and soon join this group. Without them, a critical
   row's dark red would sit on a saturated colour plank and vanish — the planks
   cycle through red (10n+3) and pink (10n+4) where red-on-red is invisible.
   critical rides with closing (same family, louder); soon goes light amber,
   which reads on every plank in the cycle. */
.data-container.view-table .data-table tbody tr:hover:not(:has(td:nth-child(9):hover, td:nth-child(10):hover)) .days-pill-closing,
.data-container.view-table .data-table tbody tr:hover:not(:has(td:nth-child(9):hover, td:nth-child(10):hover)) .days-pill-critical {
  color: #ff2b2b !important;
  font-weight: 800 !important;
}
.data-container.view-table .data-table tbody tr:hover:not(:has(td:nth-child(9):hover, td:nth-child(10):hover)) .days-pill-soon {
  color: #fde68a !important;
  font-weight: 700 !important;
}
.data-container.view-table .data-table tbody tr:nth-child(10n + 3):hover:not(:has(td:nth-child(9):hover, td:nth-child(10):hover)) .days-pill-closing,
.data-container.view-table .data-table tbody tr:nth-child(10n + 4):hover:not(:has(td:nth-child(9):hover, td:nth-child(10):hover)) .days-pill-closing,
.data-container.view-table .data-table tbody tr:nth-child(10n + 3):hover:not(:has(td:nth-child(9):hover, td:nth-child(10):hover)) .days-pill-critical,
.data-container.view-table .data-table tbody tr:nth-child(10n + 4):hover:not(:has(td:nth-child(9):hover, td:nth-child(10):hover)) .days-pill-critical {
  color: #ffffff !important;
}
.data-table tbody tr:hover:not(:has(td:nth-child(9):hover, td:nth-child(10):hover)) .source-badge {
  color: #ffffff; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.45);
}

/* Per-row colour cycle (10 styles = the original 4 + 6 new). Each sets:
   --row-top / --row-bottom = top-face gradient stops (light top -> dark bottom)
   --row-text               = readable text colour on that plank
   --bottom-face            = the lit bottom base edge
   --side-face              = the darker right side edge
   Defined per theme so each looks premium in dark vs light. 10 rows pass before
   the cycle repeats, so adjacent rows are always a different colour. */

/* ----- DARK ----- original 4 ----- */
[data-theme="dark"] .data-table tbody tr:nth-child(10n + 1) { --row-top: #19b4ec; --row-bottom: #0a90c4; --row-text: #fff; --bottom-face: #62cdf2; --side-face: #075b78; }
[data-theme="dark"] .data-table tbody tr:nth-child(10n + 2) { --row-top: #3b5998; --row-bottom: #2c4677; --row-text: #fff; --bottom-face: #6f8bc4; --side-face: #1f3357; }
[data-theme="dark"] .data-table tbody tr:nth-child(10n + 3) { --row-top: #dd4b39; --row-bottom: #b83a2b; --row-text: #fff; --bottom-face: #f0856f; --side-face: #8a2a1d; }
[data-theme="dark"] .data-table tbody tr:nth-child(10n + 4) { --row-top: #e4405f; --row-bottom: #c52647; --row-text: #fff; --bottom-face: #f0859a; --side-face: #8f1733; }
/* ----- DARK ----- 6 new ----- */
[data-theme="dark"] .data-table tbody tr:nth-child(10n + 5) { --row-top: #19c6ee; --row-bottom: #0786b0; --row-text: #fff; --bottom-face: #5fd4ef; --side-face: #07576f; }
[data-theme="dark"] .data-table tbody tr:nth-child(10n + 6) { --row-top: #6366f1; --row-bottom: #3730a3; --row-text: #fff; --bottom-face: #818cf8; --side-face: #272075; }
[data-theme="dark"] .data-table tbody tr:nth-child(10n + 7) { --row-top: #14b8a6; --row-bottom: #0f766e; --row-text: #fff; --bottom-face: #5eead4; --side-face: #0b4f4a; }
[data-theme="dark"] .data-table tbody tr:nth-child(10n + 8) { --row-top: #f97316; --row-bottom: #c2410c; --row-text: #fff; --bottom-face: #fdba74; --side-face: #7c2d12; }
[data-theme="dark"] .data-table tbody tr:nth-child(10n + 9) { --row-top: #8b5cf6; --row-bottom: #5b21b6; --row-text: #fff; --bottom-face: #c4b5fd; --side-face: #3b0764; }
[data-theme="dark"] .data-table tbody tr:nth-child(10n)     { --row-top: #10b981; --row-bottom: #047857; --row-text: #fff; --bottom-face: #6ee7b7; --side-face: #064e3b; }

/* ----- LIGHT ----- original 4 ----- */
/* Light mode reuses the SAME saturated planks as dark — white text stays readable
   even on the lighter top/left of the continuous gradient (the pale set washed out). */
[data-theme="light"] .data-table tbody tr:nth-child(10n + 1) { --row-top: #19b4ec; --row-bottom: #0a90c4; --row-text: #fff; --bottom-face: #62cdf2; --side-face: #075b78; }
[data-theme="light"] .data-table tbody tr:nth-child(10n + 2) { --row-top: #3b5998; --row-bottom: #2c4677; --row-text: #fff; --bottom-face: #6f8bc4; --side-face: #1f3357; }
[data-theme="light"] .data-table tbody tr:nth-child(10n + 3) { --row-top: #dd4b39; --row-bottom: #b83a2b; --row-text: #fff; --bottom-face: #f0856f; --side-face: #8a2a1d; }
[data-theme="light"] .data-table tbody tr:nth-child(10n + 4) { --row-top: #e4405f; --row-bottom: #c52647; --row-text: #fff; --bottom-face: #f0859a; --side-face: #8f1733; }
/* ----- LIGHT ----- 6 new ----- */
[data-theme="light"] .data-table tbody tr:nth-child(10n + 5) { --row-top: #19c6ee; --row-bottom: #0786b0; --row-text: #fff; --bottom-face: #5fd4ef; --side-face: #07576f; }
[data-theme="light"] .data-table tbody tr:nth-child(10n + 6) { --row-top: #6366f1; --row-bottom: #3730a3; --row-text: #fff; --bottom-face: #818cf8; --side-face: #272075; }
[data-theme="light"] .data-table tbody tr:nth-child(10n + 7) { --row-top: #14b8a6; --row-bottom: #0f766e; --row-text: #fff; --bottom-face: #5eead4; --side-face: #0b4f4a; }
[data-theme="light"] .data-table tbody tr:nth-child(10n + 8) { --row-top: #f97316; --row-bottom: #c2410c; --row-text: #fff; --bottom-face: #fdba74; --side-face: #7c2d12; }
[data-theme="light"] .data-table tbody tr:nth-child(10n + 9) { --row-top: #8b5cf6; --row-bottom: #5b21b6; --row-text: #fff; --bottom-face: #c4b5fd; --side-face: #3b0764; }
[data-theme="light"] .data-table tbody tr:nth-child(10n)     { --row-top: #10b981; --row-bottom: #047857; --row-text: #fff; --bottom-face: #6ee7b7; --side-face: #064e3b; }

/* light theme */
[data-theme="light"] .data-table thead th {
  background: linear-gradient(180deg, #1e8ab8, #0e7490);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30),
              0 8px 12px -4px rgba(15, 23, 42, 0.22);
}
[data-theme="light"] .data-table tbody td {
  background: linear-gradient(180deg, #ffffff, #eef3f8);
  box-shadow: inset 10px 0 18px rgba(15, 23, 42, 0.03),
              inset -9px 0 16px rgba(255, 255, 255, 0.55),
              0 1px 2px rgba(15, 23, 42, 0.10);
}
[data-theme="light"] .data-table tbody tr:nth-child(even) td {
  background: linear-gradient(180deg, #fbfdff, #e9eff5);
}
[data-theme="light"] .data-table tbody tr.row-bookmarked td {
  box-shadow: 0 4px 0 #5fd0ec,
              0 4px 16px rgba(34, 160, 200, 0.50),
              0 2px 4px rgba(15, 23, 42, 0.15);
}

/* ===== Notification button: consistent glass look (readable on any coloured
   hover row) + a shine sweep on its own hover. Solid glass base means it never
   washes out on the blue / dark-blue plank in dark mode. ===== */
.data-table td.table-link-cell .table-link-btn {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.82);
  color: #0e7490;
  border: 1px solid rgba(148, 163, 184, 0.35);
  font-weight: 800;
  border-radius: 12px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 0.22s ease, box-shadow 0.22s ease, color 0.22s ease, background 0.22s ease;
}
[data-theme="dark"] .data-table td.table-link-cell .table-link-btn {
  background: rgba(30, 41, 59, 0.88);
  color: #e0f2fe;
  border-color: rgba(148, 163, 184, 0.42);
}
/* its own hover (also the only thing that reacts when the cell itself is hovered) */
.data-table td.table-link-cell .table-link-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.22),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.data-table td.table-link-cell .table-link-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left 0.55s ease;
}
.data-table td.table-link-cell .table-link-btn:hover::after { left: 140%; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .data-table tbody tr,
  .data-table tbody td,
  .data-table tbody td::before,
  .data-table tbody td:last-child::after { transition: none; }
  .data-container.view-table .data-table tbody tr:hover { transform: none; filter: none; }
}

/* ===========================================================================
   FIT-TO-WIDTH COLUMN LAYOUT (desktop) — stop the horizontal scrollbar and the
   "Notificatio…" clipping. Fixed layout + percentage widths so the table always
   fills its container; text-heavy columns wrap instead of forcing it wider.
   Scoped to #dataContainer.view-table and gated to desktop so the <=768px
   stacked/responsive layout is untouched.
   =========================================================================== */
@media (min-width: 769px) {
  #dataContainer.view-table .data-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0 10px;          /* floating plank rows with gaps (matches earlier dark look) */
  }
  #dataContainer.view-table .data-table tbody td { border-bottom: none; }
  /* ALL cell text centred — horizontally + vertically (equidistant from edges) */
  #dataContainer.view-table .data-table th,
  #dataContainer.view-table .data-table td {
    overflow: visible;
    vertical-align: middle;
    text-align: center;
  }
  #dataContainer.view-table .data-table th .sort-btn { justify-content: center; gap: 6px; }

  /* Days Left: NO circle/pill — just centred coloured text.
     >15 days = green, <=15 = red (rest state); hover behaviour handled above. */
  #dataContainer.view-table .data-table td:nth-child(7) { text-align: center; white-space: nowrap; }
  #dataContainer.view-table .data-table td:nth-child(7) .days-pill {
    display: inline;
    min-height: 0;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
  }
  /* Phase 2 item 9 — five urgency bands, not two, and a per-theme palette.

     The old split was ">15 green, <=15 red", so a post closing tomorrow and one
     closing in a fortnight were typeset identically — the reader had to parse
     the digits to learn anything. Now hue AND weight both ramp with urgency, so
     the scale still reads in greyscale and for a red-green colour-blind reader.
     Bands come from getDaysLeftTone().

     These colours were previously shared by both themes, and measuring the real
     composited row backgrounds showed nearly the whole scale failing AA — the
     text is 0.82rem, i.e. NORMAL text, so the bar is 4.5, not 3.0:
        #ef4444 closing  4.02 dark / 3.25 light
        #16a34a safe     4.59 dark / 2.85 light
        #94a3b8 expired  5.90 dark / 2.21 light
     Light rows are opaque white -> #eef3f8 gradients, so a palette tuned for a
     dark navy row was never going to survive there. Each theme now gets its own
     ramp, and every value below is the worst case across all four row-gradient
     stops. Measured, not modelled. */
  #dataContainer.view-table .data-table td:nth-child(7) .days-pill-critical { color: #f87171; font-weight: 800; }  /* <=2   5.47 */
  #dataContainer.view-table .data-table td:nth-child(7) .days-pill-closing  { color: #fb923c; font-weight: 700; }  /* <=7   6.69 */
  #dataContainer.view-table .data-table td:nth-child(7) .days-pill-soon     { color: #fbbf24; font-weight: 700; }  /* <=15  9.06 */
  #dataContainer.view-table .data-table td:nth-child(7) .days-pill-safe     { color: #4ade80; font-weight: 600; }  /* >15   8.68 */
  #dataContainer.view-table .data-table td:nth-child(7) .days-pill-expired,
  #dataContainer.view-table .data-table td:nth-child(7) .days-pill-muted    { color: #94a3b8; font-weight: 600; }  /* past  5.90 */

  /* light twin — rows here are opaque near-white, so the ramp inverts to dark
     saturated tones. Same five steps, same weights. */
  [data-theme="light"] #dataContainer.view-table .data-table td:nth-child(7) .days-pill-critical { color: #b91c1c; }  /* 5.59 */
  [data-theme="light"] #dataContainer.view-table .data-table td:nth-child(7) .days-pill-closing  { color: #9a3412; }  /* 6.31 */
  [data-theme="light"] #dataContainer.view-table .data-table td:nth-child(7) .days-pill-soon     { color: #854d0e; }  /* 5.91 */
  [data-theme="light"] #dataContainer.view-table .data-table td:nth-child(7) .days-pill-safe     { color: #166534; }  /* 6.16 */
  [data-theme="light"] #dataContainer.view-table .data-table td:nth-child(7) .days-pill-expired,
  [data-theme="light"] #dataContainer.view-table .data-table td:nth-child(7) .days-pill-muted    { color: #556378; }  /* 5.27 */
  /* header labels may wrap (so "NOTIFICATION" never clips) */
  #dataContainer.view-table .data-table thead th { white-space: normal; }

  /* column balance — sums to 100% */
  #dataContainer.view-table .data-table th:nth-child(1),
  #dataContainer.view-table .data-table td:nth-child(1)  { width: 11%; min-width: 0; }   /* Post */
  #dataContainer.view-table .data-table th:nth-child(2),
  #dataContainer.view-table .data-table td:nth-child(2)  { width: 6%;  min-width: 0; }   /* Level */
  #dataContainer.view-table .data-table th:nth-child(3),
  #dataContainer.view-table .data-table td:nth-child(3)  { width: 10%; min-width: 0; }   /* Eligibility */
  #dataContainer.view-table .data-table th:nth-child(4),
  #dataContainer.view-table .data-table td:nth-child(4)  { width: 18%; min-width: 0; }   /* Ministry */
  #dataContainer.view-table .data-table th:nth-child(5),
  #dataContainer.view-table .data-table td:nth-child(5)  { width: 7%;  min-width: 0; }   /* Org */
  #dataContainer.view-table .data-table th:nth-child(6),
  #dataContainer.view-table .data-table td:nth-child(6)  { width: 11%; min-width: 0; }   /* Location */
  #dataContainer.view-table .data-table th:nth-child(7),
  #dataContainer.view-table .data-table td:nth-child(7)  { width: 9%;  min-width: 0; }   /* Days Left */
  #dataContainer.view-table .data-table th:nth-child(8),
  #dataContainer.view-table .data-table td:nth-child(8)  { width: 9%;  min-width: 0; white-space: normal; } /* Notif. Date */
  #dataContainer.view-table .data-table th:nth-child(9),
  #dataContainer.view-table .data-table td:nth-child(9)  { width: 14%; min-width: 0; }   /* Notification */
  #dataContainer.view-table .data-table th:nth-child(10),
  #dataContainer.view-table .data-table td:nth-child(10) { width: 5%;  min-width: 0; }   /* Bookmark */

  /* wrap only the text-heavy columns; the rest stay tidy */
  #dataContainer.view-table .data-table td:nth-child(1),
  #dataContainer.view-table .data-table td:nth-child(3),
  #dataContainer.view-table .data-table td:nth-child(4),
  #dataContainer.view-table .data-table td:nth-child(5),
  #dataContainer.view-table .data-table td:nth-child(6) {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* the Notification button + EN badge fill their column without clipping */
  #dataContainer.view-table .data-table td:nth-child(9) { text-align: center; }
  #dataContainer.view-table .data-table td.table-link-cell .table-link-btn,
  #dataContainer.view-table .data-table td.table-link-cell .source-badge {
    width: 100%;
    max-width: 132px;
  }
  /* Notification cell stays above the 3D faces and is the only thing that reacts
     to its own hover (row stays put — see :has() gate above). */
  #dataContainer.view-table .data-table tbody tr td:nth-child(9),
  #dataContainer.view-table .data-table tbody tr td:nth-child(10) {
    position: relative;
    z-index: 7;
  }
}

/* ===========================================================================
   CARD VIEW — matching 3D plank lift + brand colour cycle + clip-path side face.
   A softer version of the table-row effect so both views feel consistent.
   =========================================================================== */
#dataContainer.view-card .cards-grid { overflow: visible; }
#dataContainer.view-card .job-card {
  --depth: 14px;
  position: relative;
  overflow: visible;
  transform-origin: left center;
  transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease, border-color 0.24s ease, border-radius 0.24s ease;
}
/* keep card content above the side/bottom faces */
#dataContainer.view-card .job-card > * { position: relative; z-index: 3; }

/* colour cycle per card */
#dataContainer.view-card .job-card:nth-child(4n + 1) { --row: #19b4ec; --bottom-face: #62cdf2; }
#dataContainer.view-card .job-card:nth-child(4n + 2) { --row: #3b5998; --bottom-face: #6f8bc4; }
#dataContainer.view-card .job-card:nth-child(4n + 3) { --row: #dd4b39; --bottom-face: #f0856f; }
#dataContainer.view-card .job-card:nth-child(4n)     { --row: #e4405f; --bottom-face: #f0859a; }

/* angled BOTTOM face */
#dataContainer.view-card .job-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--depth));
  height: var(--depth);
  background: var(--bottom-face, #62cdf2);
  clip-path: polygon(0 0, 100% 0, calc(100% + var(--depth)) 100%, var(--depth) 100%);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}
/* clip-path RIGHT side face */
#dataContainer.view-card .job-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: calc(-1 * var(--depth));
  width: var(--depth);
  height: calc(100% + var(--depth));
  background: var(--row, #19b4ec);
  filter: brightness(0.6);
  clip-path: polygon(0 0, 100% var(--depth), 100% 100%, 0 calc(100% - var(--depth)));
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}
/* hover: lift + plank tilt; square the right + bottom corners so faces meet flush */
#dataContainer.view-card .job-card:hover {
  transform: translate(-8px, -8px) skewX(-2deg);
  border-color: var(--row, #19b4ec);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  filter: drop-shadow(14px 18px 16px rgba(15, 23, 42, 0.20));
  z-index: 5;
}
#dataContainer.view-card .job-card:hover::before,
#dataContainer.view-card .job-card:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  #dataContainer.view-card .job-card,
  #dataContainer.view-card .job-card::before,
  #dataContainer.view-card .job-card::after { transition: none; }
  #dataContainer.view-card .job-card:hover { transform: none; filter: none; }
}

/* ===========================================================================
   DARK THEME: clean navy plank rows at REST (revert the heavy translucent look).
   No !important / no id → the brand-gradient hover rule still wins on :hover.
   =========================================================================== */
[data-theme="dark"] .data-table thead th {
  background: linear-gradient(180deg, rgba(21, 36, 56, 0.96), rgba(14, 24, 40, 0.96));
  color: #f8fafc;
  box-shadow: none;
}
[data-theme="dark"] .data-table tbody td {
  background: linear-gradient(180deg, rgba(20, 31, 49, 0.96), rgba(14, 23, 38, 0.96));
  color: #f1f5f9;
  box-shadow: none;
}
[data-theme="dark"] .data-table tbody tr:nth-child(even) td {
  background: linear-gradient(180deg, rgba(27, 39, 60, 0.96), rgba(18, 29, 47, 0.96));
}

/* ===========================================================================
   MOBILE (<=768px): the homepage table collapses to stacked "LABEL: value" cards
   via .responsive-table (thead hidden, tr/td block/flex, td::before=data-label).
   Several DESKTOP rules are not media-scoped and leak in by source order — they
   force the <table> to min-width:1100px (horizontal scroll) and paint the 3D
   plank faces on the stacked cells. This section (appended last) overrides them.
   Scoped to #dataContainer so the admin page is untouched.
   =========================================================================== */
@media (max-width: 768px) {
  /* mobile table scrolls sideways inside its wrapper (no stacked transform) */
  #dataContainer .data-table,
  .data-table.responsive-table {
    min-width: 900px !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }
  /* drop the right/bottom padding that was reserved for the desktop 3D faces */
  .table-wrapper { padding: 0 !important; overflow-x: auto !important; }
  /* flatten the plank visuals on the stacked cells (no gradient, no 3D faces) */
  #dataContainer .data-table tbody td {
    background: transparent !important;
    box-shadow: none !important;
  }
  #dataContainer .data-table tbody td::before,
  #dataContainer .data-table tbody td::after {
    display: none !important;
  }
}

/* ===========================================================================
   TOUCH: disable the 3D-plank hover so a tap doesn't lift/skew a row or card.
   id-scoped (#dataContainer) + !important to beat the desktop hover gradient,
   which is itself declared !important. (hover: none) = phones/tablets at any
   width; (max-width: 768px) is a fallback for narrow windows.
   =========================================================================== */
@media (hover: none), (max-width: 768px) {
  /* table rows */
  #dataContainer.view-table .data-table tbody tr:hover {
    transform: none !important;
    filter: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #dataContainer.view-table .data-table tbody tr:hover td {
    background: transparent !important;
    color: inherit !important;
    text-shadow: none !important;
  }
  #dataContainer.view-table .data-table tbody tr:hover td::before,
  #dataContainer.view-table .data-table tbody tr:hover td::after,
  #dataContainer.view-table .data-table tbody tr:hover td:last-child::after {
    opacity: 0 !important;
  }
  /* don't recolour the Days-Left text on tap (all five bands, or the ones
     added in Phase 2 would still flash their hover colour on touch) */
  #dataContainer.view-table .data-table tbody tr:hover .days-pill-safe,
  #dataContainer.view-table .data-table tbody tr:hover .days-pill-closing,
  #dataContainer.view-table .data-table tbody tr:hover .days-pill-critical,
  #dataContainer.view-table .data-table tbody tr:hover .days-pill-soon {
    color: inherit !important;
    font-weight: inherit !important;
  }
  /* cards */
  #dataContainer.view-card .job-card:hover {
    transform: none !important;
    filter: none !important;
  }
  #dataContainer.view-card .job-card:hover::before,
  #dataContainer.view-card .job-card:hover::after {
    opacity: 0 !important;
  }
}

/* ===========================================================================
   APPROVED REDESIGN ADDITIONS (appended on top of the original stylesheet)
   The homepage look above is untouched — these rules only add the approved
   features: sprite icons, card view v2 + grouping, sort dropdown, load-more,
   condensed pagination, native dialog + share, skeletons, focus rings,
   paper-light support bits, and the mobile perf budget.
   ======================================================================== */

/* ---- sprite icon utility (no icon CDN) ---- */
.icon {
  width: 18px;
  height: 18px;
  flex: none;
  display: inline-block;
  vertical-align: -0.18em;
  color: inherit;
  fill: none;
}

/* keyboard focus (item 29) */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary-color) 60%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* hint text under the Experience filter (markup moved off inline styles) */
.filter-hint {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* light theme: on the coloured plank-hover rows, the organisation subtext under
   Post Name must flip to white like the rest of the row (the generic light-mode
   ".table-subtext { color:#475569 !important }" otherwise wins and vanishes
   against the plank colour) */
[data-theme="light"] .data-container.view-table .data-table tbody tr:hover:not(:has(td:nth-child(9):hover, td:nth-child(10):hover)) td .table-subtext {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

/* Days Left column: the actual last date in small type under the days count;
   flips to readable white on the coloured plank-hover rows */
.days-date-sub {
  display: block;
  margin-top: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.data-container.view-table .data-table tbody tr:hover:not(:has(td:nth-child(9):hover, td:nth-child(10):hover)) .days-date-sub {
  color: rgba(255, 255, 255, 0.88) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

/* sprite-friendly heart/bookmark fills (shadow-DOM paths inherit the svg fill) */
.table-heart-btn.saved svg,
.card-heart-btn.saved svg { fill: #ff334f !important; }
.icon-btn.has-saved svg { fill: currentColor; }
.save-col-heading.has-saved svg { fill: #ff334f; color: #ff334f !important; }

/* keep open dropdown panels above the (stacking-context) cards below */
.filters-sidebar { z-index: 10; }
.top-toolbar { position: relative; z-index: 6; }

/* visitor-pill overlap is handled by the pill's own collapse-on-collision
   guard in site-widgets.js — no overflow clipping on the sidebar, so the wide
   Location panel can spread over the content like on the live site */

/* ---- toolbar: joined view toggle (item 8) + sort dropdown (item 7) ---- */
.view-toggles {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  overflow: hidden;
  background: var(--bg-surface-solid);
}
.view-btn {
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
}
.view-btn + .view-btn { border-left: 1px solid var(--border-color); }
.view-btn:hover { color: var(--text-primary); }
.view-btn.active {
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 11%, transparent);
  box-shadow: inset 0 -2px 0 var(--primary-color);
}
.view-btn .icon { width: 17px; height: 17px; }

.toolbar-sort { width: 175px; flex: none; }
.toolbar-sort .ms-trigger { padding: 0.42rem 0.65rem; font-size: 0.83rem; border-radius: 10px; }
.toolbar-sort .ms-panel { min-width: 205px; }
.toolbar-sort[hidden] { display: none !important; }

/* condensed pagination ellipsis (item 19) */
.page-ellipsis { color: var(--text-muted); padding: 0 2px; font-weight: 700; }

/* ---- load more (item 14) ---- */
.load-more-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 1.1rem;
}
.load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.65rem 1.6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  color: var(--primary-color);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.load-more-btn:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 24px -6px color-mix(in srgb, var(--primary-color) 45%, transparent);
  transform: translateY(-1px);
}
.load-more-note { font-size: 0.74rem; color: var(--text-muted); font-weight: 600; }

/* ---- CARD VIEW v2 (items 10–16) — table view keeps the original design ---- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  align-items: start;
}
.view-table .cards-grid { display: none; }

.vx-card {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: linear-gradient(165deg, var(--bg-surface), rgba(15, 23, 42, 0.35));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.05rem 1.05rem 0.9rem;
  box-shadow: var(--shadow-glass);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}
[data-theme="light"] .vx-card { background: #ffffff; }
.vx-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-highlight);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary-color) 14%, transparent),
    0 20px 44px -16px rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .vx-card:hover {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary-color) 18%, transparent),
    0 18px 40px -18px rgba(15, 23, 42, 0.22);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .vx-card {
      animation: vx-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 48%;
    }
  }
}
@keyframes vx-in {
  from { opacity: 0.2; transform: translateY(16px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.vx-head { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.vx-head-spacer { flex: 1; }

.vx-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.26rem 0.62rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  white-space: nowrap;
}
.vx-pill-level {
  color: var(--primary-color);
  border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.vx-new {
  display: inline-flex;
  align-items: center;
  padding: 0.24rem 0.55rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #04111c;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--primary-color) 60%, transparent);
}
[data-theme="light"] .vx-new { color: #ffffff; }

/* Table row "NEW" pill — sits inline after the post name, with a soft pulse
   so fresh listings stand out (signals the data isn't stale). */
.post-col .vx-new.table-new {
  font-size: 0.58rem;
  padding: 0.14rem 0.42rem;
  margin-left: 0.45rem;
  vertical-align: 0.12em;
  letter-spacing: 0.07em;
}
@media (prefers-reduced-motion: no-preference) {
  .post-col .vx-new.table-new { animation: tableNewPulse 2.6s ease-in-out infinite; }
}
/* Verification edge (two-stage approval, 0017_admin_verified.sql).
   Amber = published in bulk, not yet read by an admin. Green = checked.

   Deliberately the quietest signal on the row: a 3px strip on the leading edge
   and nothing else — no pill, no text, no icon. It reads as trim rather than as
   a warning, which is the point; an unverified vacancy is not a suspect one,
   it just hasn't had its second pass yet. Only an explicit "not verified" is
   amber — anything already posted counts as verified and shows green.

   Drawn as an INSET BOX-SHADOW, not a pseudo-element or a real border:
   `td::before` is already the row's 3D plank bottom-face (style.css:4884) and
   its clip-path erases anything else parked there, while a real border-left
   would shift every cell by 3px. An inset shadow collides with nothing and
   costs no layout. */
.clickable-row.vx-verif-pending td:first-child {
  box-shadow: inset 3px 0 0 #f5b301;
}
.clickable-row.vx-verif-ok td:first-child {
  box-shadow: inset 3px 0 0 #37c46b;
}

/* Card view gets the same edge, so the two layouts agree. */
.vx-card.vx-verif-pending { box-shadow: inset 3px 0 0 #f5b301; }
.vx-card.vx-verif-ok { box-shadow: inset 3px 0 0 #37c46b; }

/* Legend that sits below the table/cards so the 3px edge stops being a
   mystery. Two swatches + labels — the swatches reproduce the exact inset
   shadow the rows use so the legend matches what the user sees. Inline
   padding mirrors the cards' own horizontal rhythm so it never looks
   pasted on. Hidden on very narrow screens where the cards already show
   ample context (the legend would crowd the page). */
.vx-verif-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  align-items: center;
  margin: 0.65rem 0 0.4rem;
  padding: 0.5rem 0.95rem;
  font-size: 0.62rem;
  line-height: 1.35;
  color: var(--text-secondary);
  background: rgba(15, 23, 42, 0.28);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}
[data-theme="light"] .vx-verif-legend { background: #f4f7fa; }
.vx-verif-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.vx-verif-legend-label {
  /* keep the helper copy in one tight block, not wrapped per word */
  white-space: normal;
}
.vx-verif-legend-label strong {
  /* The bold label keeps the site's main sans-serif so it stays readable
     even at the small 0.62rem size. Only the explanation italicises. */
  color: var(--text-primary);
  font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.01em;
  font-size: 0.7rem;
}
.vx-verif-legend-label em {
  /* The explanation renders in Lora italic — a stylish transitional serif
     that pairs with the site's geometric sans-serif display fonts and
     reads as "editorial footnote" rather than "warning text". */
  font-family: "Lora", "Source Serif Pro", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--text-secondary);
  margin-left: 0.15rem;
}
/* The swatch is a 10px × 14px block with the same inset shadow the rows
   carry — visually a tiny version of the leading edge on a real vacancy. */
.vx-verif-swatch {
  display: inline-block;
  width: 10px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 2px;
  border: 1px solid var(--border-color);
}
.vx-verif-swatch-pending {
  background: rgba(15, 23, 42, 0.35);
  box-shadow: inset 3px 0 0 #f5b301;
}
[data-theme="light"] .vx-verif-swatch-pending {
  background: #fff;
}
.vx-verif-swatch-ok {
  background: rgba(15, 23, 42, 0.35);
  box-shadow: inset 3px 0 0 #37c46b;
}
[data-theme="light"] .vx-verif-swatch-ok {
  background: #fff;
}
@media (max-width: 520px) {
  /* On phone-width screens the cards already fill the column — a horizontal
     legend would crowd them, so stack the two items vertically instead. */
  .vx-verif-legend {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}

@keyframes tableNewPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-color) 55%, transparent); }
  55%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary-color) 0%, transparent); }
}

/* the card heart keeps the classic glassy look but sits in the header row */
.vx-heart { position: static !important; top: auto; right: auto; width: 34px !important; height: 34px !important; }

.vx-title {
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  font-size: 1.13rem;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  text-wrap: balance;
  padding-right: 0.25rem;
}

.vx-org { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.4; margin-top: -0.3rem; }

.vx-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.vx-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 0.28rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: rgba(15, 23, 42, 0.35);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
[data-theme="light"] .vx-chip { background: #f4f7fa; }
.vx-chip .icon { width: 13px; height: 13px; color: var(--text-muted); }
.vx-chip span { overflow: hidden; text-overflow: ellipsis; }
.vx-date { font-variant-numeric: tabular-nums; }

.vx-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-color);
}

.vx-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.42rem 0.75rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 28%, transparent);
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  color: var(--primary-color);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.18s ease;
}
.vx-link:hover { border-color: var(--primary-color); filter: brightness(1.08); }
.vx-link .icon { width: 13px; height: 13px; }
.vx-link.vx-link-muted { border-color: var(--border-color); background: transparent; color: var(--text-secondary); }
.vx-link.vx-link-muted:hover { color: var(--text-primary); border-color: var(--border-highlight); }

.vx-share {
  width: 32px;
  height: 32px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.18s ease;
}
.vx-share:hover { color: var(--primary-color); border-color: var(--border-highlight); }
.vx-share .icon { width: 15px; height: 15px; }

/* Card-view WhatsApp share — mirrors modal .card-action-btn.share-wa tint */
.vx-share.vx-share-wa { color: #25d366; border-color: rgba(37, 211, 102, 0.35); }
.vx-share.vx-share-wa:hover { color: #25d366; border-color: #25d366; background: rgba(37, 211, 102, 0.08); }
.vx-share.vx-share-wa .icon { width: 16px; height: 16px; }
[data-theme="light"] .vx-share.vx-share-wa { color: #128c4b; border-color: rgba(18, 140, 75, 0.3); }
[data-theme="light"] .vx-share.vx-share-wa:hover { color: #128c4b; border-color: #128c4b; background: rgba(18, 140, 75, 0.08); }

.vx-src {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-align: right;
  /* Badge text (e.g. "p33 of EN 30 May-5 Jun 2026") can run long; allow
     wrap on small cards and cap to two lines rather than ellipsising the
     edition date. */
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
  max-width: 100%;
}

.vx-count-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-color);
}
.vx-count-line .icon { width: 14px; height: 14px; }

.vx-locs { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.vx-loc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.26rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.vx-loc-chip:hover {
  color: var(--text-primary);
  border-color: var(--border-highlight);
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}
.vx-loc-chip.tone-closing { border-color: color-mix(in srgb, var(--danger-color) 40%, transparent); color: var(--danger-color); }
.vx-loc-more { font-size: 0.72rem; color: var(--text-muted); font-weight: 700; }

.vx-expand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.4rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}
.vx-expand:hover { color: var(--text-primary); border-color: var(--border-highlight); }
.vx-expand .icon { width: 14px; height: 14px; transition: transform 0.2s ease; }
.vx-expand[aria-expanded="true"] .icon { transform: rotate(180deg); }

.vx-members {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 0.2rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border-color);
}
.vx-members[hidden] { display: none; }
.vx-member {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.vx-member:hover {
  background: color-mix(in srgb, var(--primary-color) 9%, transparent);
  border-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
}
.vx-member-loc {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vx-member-loc .icon { width: 13px; height: 13px; color: var(--text-muted); margin-right: 5px; }
.vx-member .days-pill { font-size: 0.7rem; min-height: 0; min-width: 0; padding: 0.18rem 0.5rem; }
.vx-member .table-heart-btn { width: 30px; height: 30px; }

@container (max-width: 360px) {
  .vx-src { display: none; }
  .vx-title { font-size: 1.05rem; }
}

/* ---- native detail dialog (items 21–25); inner .modal-content keeps the
       original premium styling defined above ---- */
dialog.vxd {
  border: none;
  padding: 0;
  margin: auto;
  background: transparent;
  width: min(94vw, 1080px);
  max-height: 94dvh;
  overflow: visible;
  color: var(--text-primary);
}
dialog.vxd:not([open]) { display: none; }
dialog.vxd::backdrop {
  background:
    radial-gradient(circle at 20% 20%, rgba(34, 211, 238, 0.08), transparent 28%),
    radial-gradient(circle at 80% 80%, rgba(167, 139, 250, 0.10), transparent 24%),
    rgba(2, 4, 11, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}
[data-theme="light"] dialog.vxd::backdrop {
  background:
    radial-gradient(circle at 20% 20%, rgba(14, 116, 144, 0.08), transparent 28%),
    radial-gradient(circle at 80% 80%, rgba(109, 40, 217, 0.08), transparent 24%),
    rgba(226, 232, 240, 0.72);
}
dialog.vxd .modal-content { width: 100%; max-height: 94dvh; }
dialog.vxd[open] {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
@starting-style {
  dialog.vxd[open] { opacity: 0; transform: translateY(14px) scale(0.978); }
}
body:has(dialog.vxd[open]) { overflow: hidden; }
body.vxd-open { overflow: hidden; }

/* WhatsApp share button (item 23) */
.card-action-btn.share-wa {
  border-color: rgba(37, 211, 102, 0.4);
  background: rgba(37, 211, 102, 0.1);
  color: #25d366;
}
.card-action-btn.share-wa:hover { border-color: #25d366; }
[data-theme="light"] .card-action-btn.share-wa {
  color: #128c4b;
  background: rgba(18, 140, 75, 0.08);
  border-color: rgba(18, 140, 75, 0.3);
}
.card-action-btn .icon { width: 15px; height: 15px; }

/* toast can sit above the open dialog (popover top layer) */
.home-toast:popover-open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.home-toast[popover] { inset: auto; left: 50%; bottom: 24px; margin: 0; }

/* ---- loading skeleton v2 (item 40) ---- */
.sk-strip { height: 180px; border-radius: var(--radius-lg); }
.sk-toolbar { height: 56px; border-radius: var(--radius-lg); }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.sk-card { height: 215px; border-radius: var(--radius-lg); }
.sk-strip, .sk-toolbar, .sk-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
}

/* first paint: real KPI cards with placeholder values until the data lands */
.kpi-card.kpi-skeleton { pointer-events: none; }
.kpi-skeleton .kpi-trend { opacity: 0.6; }

/* the legacy shimmer rows were dark-only — paper-light variants */
[data-theme="light"] .loading-table-shell {
  background: #ffffff;
  border-color: rgba(13, 23, 44, 0.10);
}
[data-theme="light"] .loading-table-toolbar,
[data-theme="light"] .loading-row {
  background: #eef1f6;
  border-color: rgba(13, 23, 44, 0.07);
}

/* ---- mobile additions (items 30–33) ---- */
@media (max-width: 768px) {
  /* perf budget: no animated blobs / blur layers on phones (item 31) */
  .shape { display: none !important; animation: none !important; }
  body {
    background:
      radial-gradient(900px 480px at 18% -160px, rgba(34, 211, 238, 0.12), transparent 60%),
      radial-gradient(700px 420px at 105% 105%, rgba(167, 139, 250, 0.10), transparent 60%),
      var(--bg-main);
  }
  [data-theme="light"] body { background: var(--bg-main); }
  .ms-panel, .modal, .filters-sidebar, .toolbar-line {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .cards-grid { grid-template-columns: 1fr; gap: 0.85rem; }
  .vx-card { padding: 0.95rem 0.95rem 0.8rem; }
  .vx-card:nth-child(n + 7) {
    content-visibility: auto;
    contain-intrinsic-size: auto 230px;
  }
  .toolbar-sort { width: auto; flex: 1; max-width: 200px; }

  /* full-screen detail sheet (item 33) */
  dialog.vxd { width: 100vw; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; }
  dialog.vxd .modal-content {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vx-card { animation: none !important; transition: none !important; }
  .vx-card:hover { transform: none; }
  dialog.vxd[open] { transition: none; }
}

/* ===========================================================================
   EXPERIMENT: collapsible desktop filters.
   Default (body.filters-collapsed): a compact filter card sits BESIDE the four
   KPI cards showing only "My Pay Level" + a "Show more filters" button, and
   the toolbar + table below take the FULL page width (Post Name gets the
   extra room). Clicking the button removes the body class → the original
   left sidebar layout returns, with the same button reading "Hide filters".
   Mobile (≤768px) is untouched — the Show Filters accordion works as before.
   To revert the whole experiment: remove the body class + the toggle button
   from index.html and the initDesktopFilterCollapse() call in app.js.
   ======================================================================== */
.filters-more-btn { display: none; }

@media (min-width: 769px) {
  .filters-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.62rem 0.9rem;
    border-radius: var(--radius-md, 14px);
    border: 1px solid color-mix(in srgb, var(--primary-color) 26%, transparent);
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: var(--primary-color);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
  }
  .filters-more-btn:hover {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 13%, transparent);
  }
  .filters-more-btn .icon { width: 16px; height: 16px; }
  .filters-more-caret { transition: transform 0.2s ease; }
  .filters-more-btn[aria-expanded="true"] .filters-more-caret { transform: rotate(180deg); }

  /* Cue: collapsed + a hidden filter is active → fill the button with the brand
     gradient (theme-aware) and show a count, so unseen filters aren't a surprise. */
  .filters-more-btn--cue {
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: #fff;
    box-shadow: 0 6px 18px -7px color-mix(in srgb, var(--accent-color) 65%, transparent);
  }
  .filters-more-btn--cue:hover {
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    filter: brightness(1.06);
  }
  .filters-more-count {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.34rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
  }
  .filters-more-btn--cue .filters-more-count { display: inline-flex; }

  /* expanded sidebar: "Hide filters" sits at the top, right below the
     Filters / Clear All header */
  .filters-sidebar { display: flex; flex-direction: column; }
  .filters-sidebar .filters-header { order: -2; }
  .filters-sidebar .filters-more-btn { order: -1; margin: 0 0 1.1rem; }

  /* smooth (slower) morph when the filter panel expands / collapses */
  .filters-sidebar { view-transition-name: vt-filters-panel; }
  .kpi-grid { view-transition-name: vt-kpis; }
  .top-toolbar { view-transition-name: vt-toolbar; }
  .data-container { view-transition-name: vt-rows; }
}
html.vt-filters::view-transition-group(*),
html.vt-filters::view-transition-old(*),
html.vt-filters::view-transition-new(*) { animation-duration: 0.85s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }

@media (min-width: 769px) {

  /* ---- collapsed state ---- */
  body.filters-collapsed .main-layout {
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "filters kpis"
      "toolbar toolbar"
      "data    data";
    gap: 1rem 1.5rem;
  }
  /* lift the dashboard children into the outer grid so the toolbar + rows can
     span the full width while the KPIs stay beside the compact filter card */
  body.filters-collapsed .dashboard-content { display: contents; }
  body.filters-collapsed .filters-sidebar {
    grid-area: filters;
    position: static;
    max-height: none;
    overflow: visible;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  body.filters-collapsed .kpi-grid { grid-area: kpis; margin-bottom: 0; align-self: stretch; }
  body.filters-collapsed .kpi-card { min-height: 0; }
  body.filters-collapsed .top-toolbar { grid-area: toolbar; margin-bottom: 0; }
  body.filters-collapsed .data-container { grid-area: data; }

  /* Miniature card = just My Pay Level (top) + Search (below) + the button.
     Hide the header, Clear-All and every other filter group. */
  body.filters-collapsed .filters-sidebar .filters-header { display: none; }
  body.filters-collapsed .filters-sidebar .filter-group:not(.fg-primary):not(.fg-search) { display: none; }
  body.filters-collapsed .filters-sidebar .fg-search label { display: none; }   /* box only */
  body.filters-collapsed .filters-sidebar .fg-primary { order: 1; margin-bottom: 0.9rem; }
  body.filters-collapsed .filters-sidebar .fg-search  { order: 2; margin-bottom: 0; }
  /* collapsed card: button back at the bottom of the compact card */
  body.filters-collapsed .filters-sidebar .filters-more-btn { order: 3; margin: auto 0 0; }

  /* full-width rows: hand the freed space to Post Name (sums to 100%) */
  body.filters-collapsed #dataContainer.view-table .data-table th:nth-child(1),
  body.filters-collapsed #dataContainer.view-table .data-table td:nth-child(1) { width: 20%; }
  body.filters-collapsed #dataContainer.view-table .data-table th:nth-child(2),
  body.filters-collapsed #dataContainer.view-table .data-table td:nth-child(2) { width: 6%; }
  body.filters-collapsed #dataContainer.view-table .data-table th:nth-child(3),
  body.filters-collapsed #dataContainer.view-table .data-table td:nth-child(3) { width: 10%; }
  body.filters-collapsed #dataContainer.view-table .data-table th:nth-child(4),
  body.filters-collapsed #dataContainer.view-table .data-table td:nth-child(4) { width: 14%; }
  body.filters-collapsed #dataContainer.view-table .data-table th:nth-child(5),
  body.filters-collapsed #dataContainer.view-table .data-table td:nth-child(5) { width: 7%; }
  body.filters-collapsed #dataContainer.view-table .data-table th:nth-child(6),
  body.filters-collapsed #dataContainer.view-table .data-table td:nth-child(6) { width: 10%; }
  body.filters-collapsed #dataContainer.view-table .data-table th:nth-child(7),
  body.filters-collapsed #dataContainer.view-table .data-table td:nth-child(7) { width: 8%; }
  body.filters-collapsed #dataContainer.view-table .data-table th:nth-child(8),
  body.filters-collapsed #dataContainer.view-table .data-table td:nth-child(8) { width: 8%; }
  body.filters-collapsed #dataContainer.view-table .data-table th:nth-child(9),
  body.filters-collapsed #dataContainer.view-table .data-table td:nth-child(9) { width: 12%; }
  body.filters-collapsed #dataContainer.view-table .data-table th:nth-child(10),
  body.filters-collapsed #dataContainer.view-table .data-table td:nth-child(10) { width: 5%; }

  /* ---- sequenced toggle: rows-first-then-filters / filters-fold-first ----
     Two transient body classes gate the filter content while the VT morphs
     the grid layout. filters-pending-reveal keeps groups hidden after expand
     until the VT finishes; filters-folding hides them before collapse VT runs.
     The .filter-group baseline transition drives both fold and reveal. */
  .filters-sidebar .filter-group {
    max-height: 1200px;
    transition:
      max-height 0.32s ease,
      opacity 0.28s ease,
      margin 0.32s ease,
      padding 0.32s ease;
  }
  /* overflow:hidden is applied ONLY while gated so resting-state dropdowns
     (multi-select chip menus, etc.) aren't clipped inside the filter group. */
  body.filters-pending-reveal .filters-sidebar .filter-group:not(.fg-primary),
  body.filters-folding         .filters-sidebar .filter-group:not(.fg-primary) {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  /* Reveal stagger — top groups first (cascading drop into the new column) */
  .filters-sidebar .filter-group:nth-child(1) { transition-delay: 0ms; }
  .filters-sidebar .filter-group:nth-child(2) { transition-delay: 60ms; }
  .filters-sidebar .filter-group:nth-child(3) { transition-delay: 120ms; }
  .filters-sidebar .filter-group:nth-child(4) { transition-delay: 180ms; }
  .filters-sidebar .filter-group:nth-child(5) { transition-delay: 240ms; }
  .filters-sidebar .filter-group:nth-child(n+6) { transition-delay: 300ms; }
  /* Fold stagger — bottom groups first, so the panel rolls up from the base */
  body.filters-folding .filters-sidebar .filter-group:nth-child(n+6) { transition-delay: 0ms; }
  body.filters-folding .filters-sidebar .filter-group:nth-child(5)   { transition-delay: 60ms; }
  body.filters-folding .filters-sidebar .filter-group:nth-child(4)   { transition-delay: 120ms; }
  body.filters-folding .filters-sidebar .filter-group:nth-child(3)   { transition-delay: 180ms; }
  body.filters-folding .filters-sidebar .filter-group:nth-child(2)   { transition-delay: 240ms; }
  body.filters-folding .filters-sidebar .filter-group:nth-child(1)   { transition-delay: 300ms; }

  /* During the folding phase the sidebar still occupies the left column.
     During pending-reveal the layout is already in expanded form — the
     gating class only hides content, never re-flows the grid. */
}

@media (prefers-reduced-motion: reduce) {
  .filters-sidebar .filter-group { transition: none !important; }
}

/* ===========================================================================
   EXPERIMENT: automatic link preview on hover.
   A floating thumbnail of the Official Notification document that fades in by
   the cursor when hovering a "Notification" link and follows it. The card is
   created + positioned by initLinkPreview() in app.js; thumbnails are
   pre-rendered at build time (scripts/build_link_previews.py) and looked up via
   data/link_previews.json. Card only exists on the homepage, so this block is
   inert on the other pages that share style.css.
   To revert: remove this block + initLinkPreview() (and its call), the
   notifPreviewAttr() calls, and loadLinkPreviews() in app.js.
   ======================================================================== */
/* Wrapper = positioning only (JS sets transform:translate every cursor move,
   so the follow stays instant). The reveal/hide animation lives on .lp-inner,
   which owns its own transform (scale + slide) so the two never collide. */
#linkPreviewCard {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1500;                 /* above content; below dialog.vxd top layer */
  width: 260px;
  pointer-events: none;          /* never intercept hover / clicks */
  transform: translate(-9999px, -9999px);
  will-change: transform;
}
#linkPreviewCard .lp-inner {
  padding: 6px 6px 0;
  border-radius: 12px;
  background: var(--surface-2, #0b1220);
  border: 1px solid color-mix(in srgb, var(--primary-color) 28%, transparent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  transform-origin: top left;
  /* hidden resting state: smaller, nudged down + in, transparent */
  opacity: 0;
  transform: scale(0.86) translateY(10px);
  transition:
    opacity 0.18s ease,
    transform 0.26s cubic-bezier(0.2, 0.9, 0.25, 1);   /* gentle overshoot-y pop */
  will-change: opacity, transform;
}
#linkPreviewCard.show .lp-inner {
  opacity: 1;
  transform: scale(1) translateY(0);
}
#linkPreviewCard img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px;
  background: #fff;              /* PDF pages render on white */
}
#linkPreviewCard .lp-cap {
  display: block;
  padding: 6px 4px 7px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-secondary, #9fb0c3);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  #linkPreviewCard .lp-inner {
    transition: none;
    transform: none;            /* appear/disappear instantly, no motion */
  }
}

/* "Updated <date>" pinned to the right of the top nav (home only). Set once
   from meta.generated_at_utc by setDataUpdated() in app.js; hidden until
   populated. The .nav-links { margin: 0 auto } keeps the links centred while
   this sits at the right edge. */
.nav-updated {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #9fb3c8;
  opacity: 0.9;
}
[data-theme="light"] .nav-updated { color: #5a6b85; }
@media (max-width: 860px) {
  .nav-updated { display: none; }   /* nav becomes a scroller on mobile */
}

/* ============================================================================
   WEBSITE-REVIEW P0 additions (2026-07-08)
   P0-9: skip-to-content link · P0-3: compact mobile KPI strip + smaller hero
   ============================================================================ */

/* -- P0-9: skip link — hidden until keyboard-focused ----------------------- */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 4000;
  padding: 0.65rem 1.1rem;
  border-radius: 12px;
  background: var(--primary-color);
  color: #04111c;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-200%);
  opacity: 0;
  pointer-events: none;
}
.skip-link:focus-visible {
  transform: none;
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* -- P0-3: mobile — 4 KPI chips in ONE row so the list starts near the fold */
@media (max-width: 640px) {
  .kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
    margin-bottom: 0.8rem;
  }
  .kpi-card {
    min-height: 0;
    padding: 0.55rem 0.25rem 0.5rem;
    gap: 0.12rem;
    border-radius: 12px;
  }
  .kpi-icon { display: none; }
  .kpi-value { font-size: 1.28rem; }
  .kpi-title {
    font-size: 0.55rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .kpi-trend { display: none; }   /* deltas are desktop detail; chips stay clean */

  /* smaller hero: tighten the title row */
  .app-header { margin-bottom: 0.6rem; }
  .header-logo > .icon { display: none; }
  .header-logo h1 { font-size: 1.02rem; }
}

/* -- P0-5 (M3): search is the most-used control — keep it visible on mobile
   even when the filter accordion is collapsed (only the box, label hidden).
   Desktop layout unchanged (desktop-collapsed already shows it). */
@media (max-width: 768px) {
  .filters-sidebar.collapsed > .fg-search { display: block !important; margin-bottom: 0; }
  .filters-sidebar.collapsed > .fg-search label { display: none; }
}

/* -- P1-9 (M4): Post Name column stays pinned while the table scrolls
   horizontally (mirrors the bookmark column already pinned on the right).
   >=769px only — below that the table reflows into stacked cards. */
@media (min-width: 769px) {
  #dataContainer.view-table .data-table th:first-child,
  #dataContainer.view-table .data-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #0f172a;   /* solid — cells scrolling underneath must not ghost through */
  }
  [data-theme="light"] #dataContainer.view-table .data-table th:first-child,
  [data-theme="light"] #dataContainer.view-table .data-table td:first-child {
    background: #ffffff;
  }
  #dataContainer.view-table .data-table thead th:first-child { z-index: 3; }

  /* BUG FIX: the solid sticky background above (needed so horizontally-scrolled
     content doesn't ghost through the pinned column) has higher specificity
     (#dataContainer ID) than the plank-hover rule's `background: transparent`,
     so on hover the first cell stayed opaque white/navy while its text still
     flipped to white — invisible text. Give hover back control of just this
     cell, in both themes, so the row's colour-plank gradient shows through. */
  #dataContainer.view-table .data-table tbody tr:hover td:first-child {
    background: transparent;
  }
}

/* -- P1-9b (M4, owner-approved): sticky header row. The wrapper becomes the
   vertical scroller, so the header AND the Post Name column stay pinned while
   the rows scroll. Pagination sits outside the wrapper and stays visible. */
@media (min-width: 769px) {
  /* Wrapper no longer caps its own height — with the table paginated to
     a small fixed row count (v7.3.4+), there's nothing to scroll inside it.
     Page scroll owns the scroll context; sticky header + sticky Post Name
     column (P1-9b) still work because `position: sticky` rides against any
     scroll context, including the page itself. The existing top-of-page
     scroll-progress bar already signals "more data" to the user. */
  /* No background overrides here: both themes already ship near-opaque themed
     header gradients (same approach as the pinned bookmark column), so the
     designed look rides along unchanged while the header is stuck. */
  #dataContainer.view-table .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    box-shadow: 0 1px 0 var(--border-color);   /* keep the divider line while stuck */
  }
  /* corner cell is pinned on BOTH axes — sits above every other sticky cell */
  #dataContainer.view-table .data-table thead th:first-child { z-index: 5; }
}

/* ============================================================================
   P3-3 PR 4 — AI semantic search (flagship bar)
   Dedicated full-width search bar below the KPI grid. Always visible; the
   results panel (`.semantic-results` below) only paints when the user types
   ≥3 chars. The previous sidebar `.semantic-toggle` chip has been removed —
   the AI path is now always-on via this single dedicated input.
   ============================================================================ */


.ai-search-section {
  margin: 0 0 1rem 0;
  /* The dashboard-content is a flex column where .data-container has
     flex: 1 1 auto (so the table fills available vertical space).
     Without flex-shrink:0 the new section would get pushed to the bottom
     of the column. Keep us at our natural position right under the KPI
     grid. */
  flex-shrink: 0;
}

/* Collapsed-filters layout (desktop default since P2): dashboard-content
   becomes display:contents and its children become grid items. Without an
   explicit grid-area, the new AI section lands at the bottom of the
   implicit grid (after the data table). Pin it to a new row that sits
   between the KPI row and the toolbar row. The AI section is always
   present in the DOM, so we can always extend the grid without :has(). */
/* Both rules below are part of the collapsed-filters DESKTOP experiment and
   must stay inside the same (min-width: 769px) gate as the rest of it.
   Unscoped, the two-column `grid-template-areas` also applied at phone
   widths: `body` carries `filters-collapsed` by default, so .main-layout
   grew an implicit second column, the sidebar was squeezed to its 34px
   min-width (padding + border, contents clipped by overflow:hidden) and the
   whole dashboard was pushed into a narrow right-hand column. */
@media (min-width: 769px) {
  body.filters-collapsed .ai-search-section {
    grid-area: ai;
    margin: 0;
  }
  /* Overrides the 3-row grid defined for .main-layout in the collapsed-filters
     block above — same specificity, later in source order. */
  body.filters-collapsed .main-layout {
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "filters kpis"
      "ai      ai"
      "toolbar toolbar"
      "data    data";
  }
}
.ai-search-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: linear-gradient(145deg, var(--bg-surface), rgba(15, 23, 42, 0.4));
  padding: 0.85rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-glass);
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}
.ai-search-bar:focus-within {
  border-color: var(--accent-color);
  box-shadow: var(--shadow-glass),
              0 0 0 3px rgba(167, 139, 250, 0.18);
}
.ai-search-glyph {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.45));
  animation: ai-glyph-pulse 3.4s ease-in-out infinite;
}
@keyframes ai-glyph-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-search-glyph { animation: none; }
}
.ai-search-field {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg-surface-solid);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}
.ai-search-field input {
  border: none;
  background: transparent;
  padding: 0.55rem 0.5rem 0.55rem 2.8rem;
  font-size: 1rem;
  color: var(--text-primary);
}
.ai-search-field input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
/* Supabase unreachable (NIC walled garden): dim the bar and grey out the
   "AI-powered" chip but keep it visible so the affordance is still
   discoverable. The input is disabled (app.js) and the placeholder now
   carries the explanation. */
.ai-search-bar.is-unavailable { opacity: 0.78; }
.ai-search-bar.is-unavailable .ai-search-glyph { animation: none; filter: grayscale(1); opacity: 0.55; }
.ai-search-bar.is-unavailable .ai-search-hint { display: inline-block; opacity: 0.55; filter: grayscale(1); pointer-events: none; }
.ai-search-bar.is-unavailable #aiSearchInput { cursor: not-allowed; background: transparent; }

.ai-search-hint {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-surface-solid);
  border: 1px solid var(--border-color);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .ai-search-hint { display: none; }
  .ai-search-bar  { padding: 0.7rem 0.9rem; gap: 0.6rem; }
}
[data-theme="light"] .ai-search-bar {
  background: linear-gradient(145deg, var(--bg-surface), rgba(255, 255, 255, 0.5));
}
[data-theme="light"] .ai-search-field {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .ai-search-field input::placeholder {
  color: rgba(15, 23, 42, 0.45);
  font-style: italic;
}

.semantic-results {
  margin: 0 0 14px;
  padding: 12px 14px 10px;
  border-radius: 14px;
  background: var(--bg-elevated, rgba(148, 163, 184, 0.08));
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.28));
  backdrop-filter: blur(8px);
}
.semantic-results[hidden] { display: none; }

.semantic-results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.semantic-results-title {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}
.semantic-results-status {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.semantic-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.semantic-results-list li {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg-surface-solid, rgba(15, 23, 42, 0.4));
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.semantic-results-list li:hover {
  border-color: var(--accent, #22d3ee);
}
.semantic-results-list li:active { transform: scale(0.998); }

/* Relevance readout: percentage of the best match in the set (app.js
   normalises against the top hit) over a proportional bar. Raw cosine
   similarity lives in the wrapper's title attribute. */
.semantic-relevance {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  cursor: help;
}
.semantic-score {
  display: block;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 2px 4px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.25), rgba(34, 211, 238, 0.22));
  color: var(--text-primary);
}
.semantic-bar {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
  overflow: hidden;
}
.semantic-bar i {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary-color, #a78bfa), var(--accent-color, #22d3ee));
}

.semantic-result-meta {
  min-width: 0;
}
.semantic-result-post {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.semantic-result-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.semantic-result-open {
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
}

html[data-theme="light"] .semantic-results {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] .semantic-results-list li {
  background: #ffffff;
}
html[data-theme="light"] .semantic-result-post,
html[data-theme="light"] .semantic-results-title { color: #0f172a; }
html[data-theme="light"] .semantic-result-sub,
html[data-theme="light"] .semantic-result-open,
html[data-theme="light"] .semantic-results-status { color: #475569; }
html[data-theme="light"] .semantic-bar { background: rgba(15, 23, 42, 0.12); }

/* ============================================================================
   v7.3.13 — AI search neural loader.

   Shown while runSemanticSearch() awaits the Edge Function response. Pure
   CSS + SVG — no library, no extra network calls. Three overlapping phases
   mirror the visual brief: nodes emerge and pulse, edges draw between them,
   a central energy core brightens, status text cycles every 1.3 s. When the
   response resolves (any path), app.js adds `.is-leaving` and the loader
   fades out in 280 ms — never outlasts the real response.

   Hidden by default; only revealed by JS adding the .is-active class. NIC
   users (whose ensureSupabaseAvailable() returns false) never reach this
   code path, so the loader stays hidden for them.
   ============================================================================ */
.semantic-loader {
  position: relative;
  margin: .6rem 0 0;
  padding: .55rem 0 .35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
  /* Sit *above* the search bar text but *below* the panel boundary; the
     SVG is sized so it doesn't push the layout. */
}
.semantic-loader[hidden] { display: none !important; }
.semantic-loader.is-active {
  opacity: 1;
  transform: translateY(0);
}
.semantic-loader.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
}

/* SVG stage. 240x160 viewBox; nodes positioned in JS via absolute coords
   within this coordinate space. */
.semantic-loader-net {
  width: 240px;
  height: 90px;
  display: block;
  overflow: visible;
}

/* Edges (lines). Stroke is set on the parent <g> via CSS to avoid one
   style attr per line; .sem-net-edges line picks up the gradient. */
.sem-net-edges line {
  stroke: url(#semNetGrad);
  stroke-width: 1.2;
  stroke-linecap: round;
  fill: none;
  /* draw-in: dasharray + dashoffset animated from full length to 0. The
     line lengths are computed at runtime in app.js. */
  stroke-dasharray: var(--len, 120);
  stroke-dashoffset: var(--len, 120);
  opacity: 0;
}
.semantic-loader.is-active .sem-net-edges line {
  animation:
    sem-edge-draw 1.6s cubic-bezier(.2,.8,.2,1) forwards,
    sem-edge-fade 2.4s ease-in-out 1.6s infinite;
}
@keyframes sem-edge-draw {
  0%   { stroke-dashoffset: var(--len, 120); opacity: 0; }
  20%  { opacity: .55; }
  100% { stroke-dashoffset: 0;             opacity: .55; }
}
@keyframes sem-edge-fade {
  0%, 100% { opacity: .35; }
  50%      { opacity: .75; }
}

/* Nodes (circles). 6 of them, positioned by JS into the SVG <g>. */
.sem-net-nodes circle {
  fill: #22d3ee;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, .85));
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
.semantic-loader.is-active .sem-net-nodes circle {
  animation:
    sem-node-in .55s cubic-bezier(.2,1.4,.4,1) forwards,
    sem-node-pulse 2.2s ease-in-out infinite;
}
/* Stagger per-node entry so they pop in one after another (Phase 1). */
.sem-net-nodes circle:nth-child(1) { animation-delay: 0s,    1.5s; }
.sem-net-nodes circle:nth-child(2) { animation-delay: .12s,  1.7s; }
.sem-net-nodes circle:nth-child(3) { animation-delay: .24s,  1.9s; }
.sem-net-nodes circle:nth-child(4) { animation-delay: .36s,  2.1s; }
.sem-net-nodes circle:nth-child(5) { animation-delay: .48s,  2.3s; }
.sem-net-nodes circle:nth-child(6) { animation-delay: .60s,  2.5s; }
@keyframes sem-node-in {
  0%   { transform: scale(0);   opacity: 0; }
  60%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes sem-node-pulse {
  0%, 100% { filter: drop-shadow(0 0 6px  rgba(34, 211, 238, .85)); }
  50%      { filter: drop-shadow(0 0 14px rgba(167, 139, 250, 1)); }
}

/* Central energy core (Phase 3 prep). Hidden initially; fades in late so
   the network "converges" before the loader dismisses. */
.sem-net-core {
  opacity: 0;
  transform-origin: 120px 80px;
  transform-box: view-box;
  filter: drop-shadow(0 0 18px rgba(34, 211, 238, .9))
          drop-shadow(0 0 32px rgba(167, 139, 250, .65));
}
.semantic-loader.is-active .sem-net-core {
  animation: sem-core-in 1.2s ease-out 1.6s forwards,
             sem-core-pulse 1.8s ease-in-out 2.8s infinite;
}
@keyframes sem-core-in {
  0%   { opacity: 0; transform: scale(.2); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes sem-core-pulse {
  0%, 100% { transform: scale(1);    opacity: .9; }
  50%      { transform: scale(1.18); opacity: 1;  }
}

/* Status text — soft white with cyan glow, fades upward as it cycles.
   The data-loader-msg span is replaced by JS every 1.3s. */
.semantic-loader-status {
  margin: 0;
  font-size: .82rem;
  letter-spacing: .01em;
  font-weight: 500;
  color: rgba(238, 246, 255, .92);
  text-shadow: 0 0 12px rgba(34, 211, 238, .55);
  min-height: 1.1em;
  transition: opacity .35s ease, transform .35s ease;
}
.semantic-loader-status.is-swapping {
  opacity: 0;
  transform: translateY(-6px);
}
.semantic-loader-echo {
  margin: 0;
  font-size: .72rem;
  color: rgba(238, 246, 255, .45);
  font-style: italic;
  max-width: 280px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Light theme variant: deeper navy + indigo accents instead of cyan glow. */
html[data-theme="light"] .sem-net-edges line {
  /* SVG <linearGradient> is the same definition; in light theme the lines
     render against a near-white background so we thicken + darken via
     CSS so they stay readable. */
  stroke-width: 1.4;
  opacity: .85;
  stroke: url(#semNetGrad);
}
html[data-theme="light"] .sem-net-nodes circle {
  fill: #6d28d9;
  filter: drop-shadow(0 0 6px rgba(109, 40, 217, .55));
}
html[data-theme="light"] .sem-net-core {
  filter: drop-shadow(0 0 18px rgba(109, 40, 217, .65))
          drop-shadow(0 0 32px rgba(14, 116, 144, .55));
}
html[data-theme="light"] .semantic-loader-status {
  color: #0b1628;
  text-shadow: none;
}
html[data-theme="light"] .semantic-loader-echo { color: #475569; }

/* Reduced motion: collapse the loader to a static dot + plain status text.
   The .is-leaving fade still works. */
@media (prefers-reduced-motion: reduce) {
  .semantic-loader.is-active .sem-net-edges line,
  .semantic-loader.is-active .sem-net-nodes circle,
  .semantic-loader.is-active .sem-net-core {
    animation: none;
    opacity: .55;
  }
  .semantic-loader.is-active .sem-net-nodes circle { opacity: 1; }
  .semantic-loader.is-active .sem-net-core        { opacity: 1; }
}

/* ============================================================================
   P3-10 — light-theme headline contrast

   The brand gradient (#FF6B6B -> #6B66FF) passes comfortably on the dark theme
   (7.38 / 4.85) but the red stop measures 2.59:1 on the light background,
   under even the 3.0 large-text bar. REDESIGN.md reported this as a dark-theme
   failure; measurement showed the opposite. P3-9 settled that the gradient is
   staying, so this is permanent debt rather than something a restyle removes.

   Darkened stops for LIGHT ONLY: #C81E1E = 5.35, #4F46E5 = 5.87 against the
   measured body background rgb(246,247,249). Both clear the strict 4.5
   normal-text bar, so they hold if the headline is ever scaled down. Dark
   theme is untouched. Same approach rules.html:539 already ships.

   Specificity is deliberate, not defensive. Three rules compete for this
   element and the winner is NOT the obvious one:
     style.css:315                                  (0,1,0)
     .gradient-text.tw-flow  (injected by site-widgets.js at runtime)  (0,2,0)
     home-flourish.css:17  .app-header .header-logo h1 .gradient-text (0,3,1)
   home-flourish wins on index.html, and it loads after style.css, so an
   equal-specificity override here would lose. Verified in the browser: the
   computed backgroundImage on the headline is home-flourish's two-layer form.
   ============================================================================ */

/* Base — every page that loads style.css (index, my-deputation,
   upcoming-projects). Beats the bare .gradient-text and the injected
   .tw-flow, which is why the html[] prefix is here. */
html[data-theme="light"] .gradient-text {
  background-image: linear-gradient(to right, #C81E1E, #4F46E5);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* The flowing variant keeps its 3-stop loop so the animation still reads. */
html[data-theme="light"] .gradient-text.tw-flow {
  background-image: linear-gradient(90deg, #C81E1E, #4F46E5, #C81E1E);
}

/* index.html only: mirror home-flourish's TWO-layer structure rather than
   flattening it, so the one-shot sheen (which animates background-position
   across both layers) still works. Collapsing to one layer would silently
   kill that animation. */
html[data-theme="light"] .app-header .header-logo h1 .gradient-text {
  background:
    linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .72) 50%, transparent 62%),
    linear-gradient(to right, #C81E1E, #4F46E5);
  background-size: 240% 100%, 100% 100%;
  background-position: 250% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}

/* ============================================================================
   PHASE 2 — Typography and rhythm  (REDESIGN.md items 7, 8, 9)
   ============================================================================ */

/* --- item 7: tabular figures ------------------------------------------------
   Proportional digits made pay levels, day-counts and dates ragged down the
   column — "11" is narrower than "13", so nothing lined up. The idiom already
   existed in 8 places (.kpi-value, .vx-date, DeFeX tables) and simply was not
   applied to the vacancy table. Measured before: every one of these columns
   computed `font-variant-numeric: normal`; only .days-date-sub had it. */
.data-table td.level-col,
.data-table td.eligibility-col,
.data-table td.days-col,
.data-table td.notification-date-col,
.data-table .days-pill {
  font-variant-numeric: lining-nums tabular-nums;
}

/* --- item 8: kill the row jitter --------------------------------------------
   Measured before: rows were 89px or 106px — a 17px spread. The post name is
   always one line, so the whole variance came from .table-subtext (the
   organisation) wrapping to a third line at 19px per line. Clamping to exactly
   two lines pins every row. `height` rather than `min-height`/`max-height`
   because it has to hold in BOTH directions: a one-line organisation would
   otherwise leave a short row and reintroduce the jitter from the other side.
   app.js adds a `title` so the full name is still reachable on hover. */
.post-col .table-subtext {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  height: 2.8em;                      /* exactly two lines, always */
}

/* --- item 9: urgency legible before the number is read ----------------------
   "93 days" and "1 day" were typeset identically — same colour, same weight —
   so the reader had to parse the digits to learn anything. app.js used three
   bands (expired / <=15 / rest) while shared/vacancy-utils.js already carried
   five. Adopting the five-band scale is what makes this legible AND collapses
   the duplication Phase 0 deliberately left in place.

     critical  <= 2 days   solid fill, 800   — loudest thing in the row
     closing   <= 7 days   red on tint, 700
     soon      <= 15 days  amber on tint, 700
     safe      > 15 days   outline only, 600 — quietest
   Weight ramps monotonically with urgency, so the scale reads even in
   greyscale or for a red-green colour-blind reader. */
/* Card + modal keep real pill chrome (table view strips it — see :5083).
   Critical is the only band with a solid fill: it should be the loudest thing
   on the card. var(--danger-color) #f43f5e was the obvious choice but measures
   only 3.67:1 against white text, and at 0.95rem/800 this is still NORMAL text
   (the large-text exemption starts at 18.66px bold), so the bar is 4.5.
   #e11d48 clears it at 4.70 and is the same rose family. */
.days-pill-critical {
  color: #fff;
  background: #e11d48;
  border-color: #e11d48;
  font-weight: 800;
}

.days-pill-soon {
  color: var(--warning-color);
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.30);
}

.days-pill-safe {
  font-weight: 600;                   /* quietest of the scale */
}

/* modal + card contexts strip the pill chrome, so they need the tone colours
   restated or critical/soon would fall back to plain body text. */
.highlight-box .days-pill-critical,
.job-highlight-row .highlight-box:first-child .days-pill-critical {
  color: var(--danger-color);
}

.highlight-box .days-pill-soon,
.job-highlight-row .highlight-box:first-child .days-pill-soon {
  color: var(--warning-color);
}

/* card Days-Left box: critical borrows the closing treatment (it is the same
   family, louder), soon gets its own amber so it is not mistaken for danger. */
html:not([data-theme="light"]) .job-highlight-row .highlight-box:first-child:has(.days-pill-critical) {
  border-color: rgba(244, 63, 94, 0.40);
  background: rgba(244, 63, 94, 0.12);
}

html:not([data-theme="light"]) .job-highlight-row .highlight-box:first-child:has(.days-pill-soon) {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.07);
}

/* light theme */
[data-theme="light"] .days-pill-critical {
  color: #fff;
  background: #e11d48;
  border-color: #e11d48;
  font-weight: 800;
}

[data-theme="light"] .days-pill-soon {
  color: #92400e;                     /* #b45309 measured 4.51 — too thin a margin */
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.32);
}

/* the light block above sets .days-pill-safe to 800, which would make the
   calmest band the heaviest and invert the whole ramp. */
[data-theme="light"] .days-pill-safe {
  font-weight: 600;
}

/* ----------------------------------------------------------------------------
   Location column clamp.

   Phase 2 item 8 measured a row-height spread of 0 and stopped there, but that
   only proved it for the rows on page 1 at the time — the organisation subtext
   was the jitter source in that sample. Posts spanning many offices carry a
   far longer location string: the worst live row is 167 characters ("Delhi;
   Bhopal; Rajamundry; Jaipur; Gwalior; Indore; Chennai; Bangalore; Jammu,
   Delhi; Madhya Pradesh; ...") which wraps inside a ~104px column to a 362px
   row, beside 110px neighbours. Three ACTIVE rows are affected today.

   The clamp goes on an inner div, NEVER on the <td>: setting
   `display: -webkit-box` on a table cell drops it out of table layout, the
   column collapses to its minimum width and the text wraps one character per
   line. That version actually shipped in an earlier draft and passed every
   numeric check — only a screenshot caught it. (.table-subtext works precisely
   because it is already a div.)

   app.js keeps the full string in a title, and the modal shows it in full. */
.data-table td.location-col .loc-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}