:root {
  --primary-color: #2563eb;
  --primary-hover: #1d4ed8;
  --bg-color: #f8fafc;
  --card-bg: #ffffff;
  --border-color: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --danger-color: #ef4444;
  --danger-bg: #fef2f2;
  --success-color: #10b981;
  --header-bg: #0f172a;
  --table-header-bg: #f8fafc;
  --input-bg: #ffffff;
  --dropdown-bg: #ffffff;
  --item-hover-bg: #f1f5f9;
}

[data-theme="dark"] {
  --primary-color: #60a5fa;
  --primary-hover: #93c5fd;
  --bg-color: #0b0f19;
  --card-bg: #111827;
  --border-color: #1f2937;
  --text-main: #f9fafb;
  --text-muted: #9ca3af;
  --danger-color: #f87171;
  --danger-bg: #450a0a;
  --success-color: #34d399;
  --header-bg: #030712;
  --table-header-bg: #1f2937;
  --input-bg: #1f2937;
  --dropdown-bg: #1f2937;
  --item-hover-bg: #374151;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-main);
  line-height: 1.5;
  padding-bottom: 40px;
}

/* APP HEADER */
.app-header {
  background: var(--header-bg);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  width: 100%;
}

.app-header-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.brand-icon-svg {
  color: #60a5fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The wordmark is 1769x1154 — sized by height so the two lines stay legible;
   a square box crushes it. It's copied from the repo root at build time.

   logo.svg paints with fill="currentColor", but an <img> is a separate
   document: currentColor resolves against the SVG's own root (black), not
   this page, so the mark rendered near-black on the dark navy header. The
   filter forces the monochrome artwork to pure white, which is what this
   always-dark header needs, and keeps one logo file rather than shipping a
   second inverted copy. */
.brand-logo-img {
  height: 50.4px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  transform: scaleX(1.15);
  transform-origin: left center;
}

/* Keeps text in the accessibility tree and in the HTML for crawlers while the
   logo carries it visually. Not display:none — that would remove it from both. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 16.5px;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.brand-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.03em;
  margin-top: 1px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-toggle-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.3);
}

.sun-icon {
  display: block;
}

.moon-icon {
  display: none;
}

[data-theme="dark"] .sun-icon {
  display: none;
}

[data-theme="dark"] .moon-icon {
  display: block;
  color: #fbbf24;
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] .search-box input,
[data-theme="dark"] .toolbar-search-input,
[data-theme="dark"] .toolbar-input {
  background-color: var(--input-bg);
  color: var(--text-main);
  border-color: var(--border-color);
  background-image: none;
}

[data-theme="dark"] select.toolbar-select,
[data-theme="dark"] .toolbar-select,
[data-theme="dark"] .popover-trigger-btn,
[data-theme="dark"] .dept-dropdown-btn,
[data-theme="dark"] .grade-dropdown-btn,
[data-theme="dark"] .clearance-dropdown-btn,
[data-theme="dark"] .profession-dropdown-btn,
[data-theme="dark"] .contract-dropdown-btn {
  background-color: var(--input-bg);
  color: var(--text-main);
  border-color: var(--border-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}

select option {
  background-color: var(--dropdown-bg, #1e293b);
  color: var(--text-main, #f8fafc);
}

[data-theme="dark"] .dept-dropdown-btn.active-filter,
[data-theme="dark"] .grade-dropdown-btn.active-filter,
[data-theme="dark"] .salary-dropdown-btn.active-filter,
[data-theme="dark"] .closing-dropdown-btn.active-filter,
[data-theme="dark"] .clearance-dropdown-btn.active-filter,
[data-theme="dark"] .profession-dropdown-btn.active-filter,
[data-theme="dark"] .contract-dropdown-btn.active-filter,
[data-theme="dark"] .toolbar-search-input.active-filter,
[data-theme="dark"] .toolbar-search-input:not(:placeholder-shown),
[data-theme="dark"] .mini-field.active-filter {
  background-color: rgba(59, 130, 246, 0.15);
  border-color: rgba(96, 165, 250, 0.4);
  color: #60a5fa;
}

[data-theme="dark"] .mini-field.active-filter .field-prefix,
[data-theme="dark"] .mini-field.active-filter .toolbar-input-num,
[data-theme="dark"] .mini-field.active-filter .btn-num-stepper {
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.4);
}

[data-theme="dark"] .dept-dropdown-btn.active-filter,
[data-theme="dark"] .grade-dropdown-btn.active-filter,
[data-theme="dark"] .salary-dropdown-btn.active-filter,
[data-theme="dark"] .closing-dropdown-btn.active-filter,
[data-theme="dark"] .clearance-dropdown-btn.active-filter,
[data-theme="dark"] .profession-dropdown-btn.active-filter,
[data-theme="dark"] .contract-dropdown-btn.active-filter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2360a5fa' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}

[data-theme="dark"] th {
  background-color: var(--table-header-bg);
  color: var(--text-muted);
}

[data-theme="dark"] tr:hover td {
  background-color: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .popover-dropdown-menu,
[data-theme="dark"] .dept-dropdown-menu,
[data-theme="dark"] .grade-dropdown-menu {
  background-color: var(--dropdown-bg);
  border-color: var(--border-color);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .popover-menu-item,
[data-theme="dark"] .dept-menu-item,
[data-theme="dark"] .grade-menu-item {
  color: #e2e8f0;
}

[data-theme="dark"] .popover-menu-item:hover,
[data-theme="dark"] .dept-menu-item:hover,
[data-theme="dark"] .grade-menu-item:hover {
  background-color: var(--item-hover-bg);
}

[data-theme="dark"] .popover-header-actions {
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .popover-menu-divider,
[data-theme="dark"] .grade-menu-divider,
[data-theme="dark"] .dept-menu-divider {
  background-color: var(--border-color);
}

[data-theme="dark"] .popover-action-btn:hover {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

[data-theme="dark"] .sort-label,
[data-theme="dark"] .field-prefix {
  color: #cbd5e1;
}

[data-theme="dark"] .grade-pill {
  background: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-muted);
}

[data-theme="dark"] .grade-pill.active {
  background: #312e81;
  color: #c7d2fe;
  border-color: #4338ca;
}

[data-theme="dark"] .badge-mass-campaign {
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
  border-color: rgba(249, 115, 22, 0.3);
}

[data-theme="dark"] .pay-min {
  color: #34d399;
}

[data-theme="dark"] .text-grade {
  color: #f1f5f9;
}

[data-theme="dark"] .text-department {
  color: #94a3b8;
}

[data-theme="dark"] th.active-sort {
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.18);
}

[data-theme="dark"] th.sortable:hover {
  background: #1e293b;
  color: #f8fafc;
}

[data-theme="dark"] .sort-icon.inactive {
  color: #64748b;
}

[data-theme="dark"] .days-text-urgent {
  color: #f87171;
}

[data-theme="dark"] .days-text-warning {
  color: #fbbf24;
}

[data-theme="dark"] .days-text-normal {
  color: #e2e8f0;
}

/* HEADER AUTH & MODE SWITCHER BUTTONS */
.header-auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.header-auth-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.header-login-btn {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border: 1px solid #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.header-login-btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
  border-color: #60a5fa !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.5);
}

/* AUTH & PRO MODALS */
.modal-auth-content {
  max-width: 680px !important;
  width: 94%;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 28px;
  color: #0f172a;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15);
}

[data-theme="dark"] .modal-auth-content {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

.auth-modal-body {
  padding-top: 12px;
}

.auth-modal-subtitle {
  font-size: 13.5px;
  color: #475569;
  margin-bottom: 20px;
  line-height: 1.5;
}

[data-theme="dark"] .auth-modal-subtitle {
  color: #94a3b8;
}

.modal-header-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.signin-modal-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  font-size: 11px;
  font-weight: 800;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

.signin-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 20px 0 24px 0;
}

@media (max-width: 640px) {
  .signin-feature-grid {
    grid-template-columns: 1fr;
  }
}

.signin-feature-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: all 0.2s ease;
}

.signin-feature-card:hover {
  border-color: #cbd5e1;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

[data-theme="dark"] .signin-feature-card {
  background: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .signin-feature-card:hover {
  border-color: #475569;
  background: #111827;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.signin-feature-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.signin-feature-icon.icon-blue {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
  color: #2563eb;
}

.signin-feature-icon.icon-emerald {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
  color: #059669;
}

.signin-feature-icon.icon-amber {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
  color: #d97706;
}

.signin-feature-icon.icon-purple {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.3);
  color: #7c3aed;
}

[data-theme="dark"] .signin-feature-icon.icon-blue {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(96, 165, 250, 0.4);
  color: #60a5fa;
}

[data-theme="dark"] .signin-feature-icon.icon-emerald {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(52, 211, 153, 0.4);
  color: #34d399;
}

[data-theme="dark"] .signin-feature-icon.icon-amber {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(251, 191, 36, 0.4);
  color: #fbbf24;
}

[data-theme="dark"] .signin-feature-icon.icon-purple {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(192, 132, 252, 0.4);
  color: #c084fc;
}

.signin-feature-content strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
  line-height: 1.3;
}

[data-theme="dark"] .signin-feature-content strong {
  color: #ffffff;
}

.signin-feature-content p {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.5;
  margin: 0;
}

[data-theme="dark"] .signin-feature-content p {
  color: #cbd5e1;
}

.btn-google-auth {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  background: #2563eb;
  color: #ffffff;
  font-weight: 700;
  font-size: 13.5px;
  border-radius: 8px;
  border: 1px solid #1d4ed8;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.btn-google-auth:hover {
  background: #1d4ed8;
  border-color: #1e40af;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.btn-google-auth svg {
  background: #ffffff;
  padding: 3px;
  border-radius: 4px;
  box-sizing: content-box;
  flex-shrink: 0;
}

[data-theme="dark"] .btn-google-auth {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .btn-google-auth:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .btn-google-auth svg {
  background: transparent;
  padding: 0;
}

.auth-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  text-align: center;
  position: relative;
}

.auth-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #334155;
}

.auth-divider span {
  position: relative;
  background: #0f172a;
  padding: 0 12px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  margin: 0 auto;
}

.auth-footer-text {
  font-size: 12.5px;
  color: #94a3b8;
  text-align: center;
  margin-top: 16px;
}

.auth-footer-text a {
  color: #60a5fa;
  font-weight: 600;
  text-decoration: none;
}

.auth-footer-text a:hover {
  text-decoration: underline;
}

.auth-email-input {
  width: 100%;
  padding: 10px 14px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #f8fafc;
  font-size: 13px;
  margin-bottom: 8px;
  outline: none;
  transition: border-color 0.15s ease;
}

.auth-email-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.btn-secondary-auth {
  width: 100%;
  padding: 10px;
  background: #2563eb;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-secondary-auth:hover {
  background: #1d4ed8;
}

.user-profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  font-size: 12px;
  color: #e2e8f0;
}

.signout-link-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.signout-link-btn:hover {
  color: #f87171;
}

/* .modal-auth-content adapts dynamically per theme — crisp light background in light mode,
   sleek dark slate card in dark mode. Header text, icons, and borders adapt automatically. */
.modal-auth-content .modal-header {
  border-bottom-color: #e2e8f0 !important;
}

.modal-auth-content .modal-title {
  color: #0f172a !important;
}

.modal-auth-content .modal-close-btn {
  color: #64748b !important;
}

.modal-auth-content .modal-close-btn:hover {
  color: #0f172a !important;
}

[data-theme="dark"] .modal-auth-content .modal-header {
  border-bottom-color: #334155 !important;
}

[data-theme="dark"] .modal-auth-content .modal-title {
  color: #f8fafc !important;
}

[data-theme="dark"] .modal-auth-content .modal-close-btn {
  color: #94a3b8 !important;
}

[data-theme="dark"] .modal-auth-content .modal-close-btn:hover {
  color: #f8fafc !important;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-header-login {
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-header-login:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-pro {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
  color: white;
  border: none;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.35);
  transition: all 0.15s ease;
}

.btn-pro:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.45);
}

.user-profile-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #f1f5f9;
}

.btn-signout-text {
  background: none;
  border: none;
  color: #fca5a5;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.12s ease;
}

.btn-test-toggle {
  background: rgba(245, 158, 11, 0.15);
  border: 1px dashed #f59e0b;
  color: #fef3c7;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-test-toggle:hover {
  background: rgba(245, 158, 11, 0.25);
  border-color: #fbbf24;
}

.badge-pro-lock {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  padding: 1px 6px;
  margin-top: 3px;
}

.badge-unlocked {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 4px;
  padding: 1px 6px;
  margin-top: 3px;
}

.user-profile-badge[hidden],
[hidden] {
  display: none !important;
}

/* SIGN-IN MODAL */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  background: #ffffff;
  border-radius: 16px;
  width: 90%;
  max-width: 440px;
  padding: 28px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  position: relative;
  border: 1px solid #e2e8f0;
}

.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
}

.modal-close-btn:hover {
  color: #0f172a;
}

.modal-badge-pro {
  display: inline-block;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  color: white;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.modal-card h2 {
  font-size: 19px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

.modal-card p.subtitle {
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 16px;
}

.btn-start-trial:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.45);
}

.btn-google-auth {
  width: 100%;
  padding: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 12px;
}

.btn-google-auth:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

/* Waiting on the redirect to Google (see setGoogleSigninBusy). */
.btn-google-auth:disabled,
.btn-google-auth:disabled:hover {
  opacity: 0.75;
  cursor: progress;
  transform: none;
}

/* MAIN CONTAINER */
.main-content {
  max-width: 1140px;
  margin: 24px auto;
  padding: 0 24px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  /* flex-start, not center: the copy column now carries the h1, a supporting
     line and the data-provenance line, so centring pushed the vacancy-count
     badge into the middle of a three-line block. */
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.stat-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.15s ease;
}

[data-theme="dark"] .stat-badge {
  color: #cbd5e1;
}

.stat-badge.is-filtered {
  border-color: #bfdbfe;
  background-color: #eff6ff;
  color: #1d4ed8;
}

[data-theme="dark"] .stat-badge.is-filtered {
  border-color: rgba(96, 165, 250, 0.4);
  background-color: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
}

.btn-reset-filters {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  border-radius: 12px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-reset-filters:hover {
  background-color: #dbeafe;
  border-color: #93c5fd;
}

[data-theme="dark"] .btn-reset-filters {
  background-color: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.4);
  color: #93c5fd;
}

[data-theme="dark"] .btn-reset-filters:hover {
  background-color: rgba(96, 165, 250, 0.2);
}

.panel-header-copy {
  min-width: 0;
}

.panel-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Was an inline style attribute on the <h1>. */
.hero-heading {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-main);
  margin: 0 0 6px 0;
}

.hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
  max-width: 68ch;
  line-height: 1.5;
}

.data-provenance {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
  opacity: 0.8;
  margin-top: 6px;
}

.data-provenance a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease, text-decoration 0.15s ease;
}

.data-provenance a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

/* BUTTONS */
.btn {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn.primary {
  background: var(--primary-color);
  color: white;
}

.btn.primary:hover {
  background: var(--primary-hover);
}

.btn.secondary {
  background: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-main);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.btn.secondary:hover {
  background: var(--item-hover-bg);
  border-color: var(--border-color);
}

.btn.danger {
  background: var(--danger-bg);
  color: var(--danger-color);
  border-color: var(--danger-color);
}

.btn.danger:hover {
  background: #fee2e2;
}

/* MODERN FILTER TOOLBAR (3-TIER LAYOUT) */
.filter-toolbar {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toolbar-header {
  margin-bottom: -2px;
}

.toolbar-title {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-main);
}

.toolbar-top-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.search-main {
  flex: 2;
  min-width: 240px;
}

.search-location {
  flex: 1.2;
  min-width: 180px;
}

/* Sits inside the location field, against its right edge, because the radius
   modifies that input rather than standing on its own — "within 25 miles" is
   meaningless without the cities typed to its left. */
.radius-select {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  border-left: 1px solid var(--border-color);
  background: transparent !important;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 16px 2px 8px;
  max-width: 132px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
}

[data-theme="dark"] .radius-select {
  color: var(--text-muted);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
}

.radius-select:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reads as an applied filter once it is doing something, like the popover
   buttons do. */
.radius-select.active-filter {
  color: var(--primary-color);
}

.search-location .toolbar-search-input {
  padding-right: 168px;
}

.search-clear-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--text-muted);
  opacity: 0.55;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-clear-btn:hover {
  opacity: 1;
  color: var(--text-main);
}

.search-main .toolbar-search-input {
  padding-right: 30px;
}

.search-main .search-clear-btn {
  right: 4px;
}

/* Sits just left of .radius-select (absolutely positioned at right: 6px,
   up to 132px wide) so the two never overlap. */
.search-location .search-clear-btn {
  right: 142px;
}

/* MOBILE FILTER ACCORDION TOGGLE (Hidden on desktop) */
.btn-toggle-more-filters {
  display: none !important;
}

.mobile-more-filters-group {
  display: contents;
}

.toolbar-middle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.field-grow {
  flex: 1;
  min-width: 130px;
}

.field-grow-sm {
  flex: 0 0 auto;
}

.field-grow .toolbar-select,
.field-grow .grade-dropdown-btn {
  width: 100%;
}

.toolbar-bottom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

.sort-field-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sort-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
}

.sort-select-compact {
  flex: 1.5;
  min-width: 210px;
  height: 38px;
  box-sizing: border-box;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  cursor: pointer;
}

.toolbar-spacer-lg {
  flex: 0.5;
  min-width: 40px;
}

.sort-select-compact:hover {
  background-color: var(--item-hover-bg);
  border-color: var(--border-color);
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  font-size: 13px;
  pointer-events: none;
  opacity: 0.6;
}

.toolbar-search-input {
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  padding: 0 12px 0 34px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-main);
  background: var(--input-bg);
  transition: all 0.15s ease;
}

.toolbar-search-input.active-filter,
.toolbar-search-input:not(:placeholder-shown) {
  border-color: #bfdbfe;
  background-color: #eff6ff;
  color: #1d4ed8;
  font-weight: 500;
}

[data-theme="dark"] .toolbar-search-input.active-filter,
[data-theme="dark"] .toolbar-search-input:not(:placeholder-shown) {
  border-color: rgba(96, 165, 250, 0.4);
  background-color: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
}

.toolbar-search-input:focus {
  outline: none;
  background: var(--card-bg);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.toolbar-search-input.active-filter:focus,
.toolbar-search-input:not(:placeholder-shown):focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.toolbar-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 3;
}

.toolbar-field {
  display: flex;
  align-items: center;
}

.toolbar-input {
  width: 125px;
  height: 38px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-main);
  background: var(--input-bg);
  cursor: text;
  transition: all 0.15s ease;
}

.toolbar-input:focus,
.toolbar-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.toolbar-select:hover,
.toolbar-input:hover {
  border-color: var(--border-color);
}

.mini-field {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 38px;
  box-sizing: border-box;
  background: var(--input-bg);
  padding: 0 6px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.field-prefix {
  font-size: 11px;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
}

.toolbar-input-num {
  width: 24px;
  min-width: 18px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-main);
  text-align: center;
  flex-shrink: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}

.toolbar-input-num::-webkit-outer-spin-button,
.toolbar-input-num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.toolbar-input-num:focus {
  outline: none;
}

.btn-num-stepper {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-weight: 700;
  font-size: 13px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: all 0.12s ease;
  user-select: none;
  flex-shrink: 0;
}

.btn-num-stepper:hover:not(:disabled) {
  background: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
}

.btn-num-stepper:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sort-select {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────
   DROPDOWN DESIGN SYSTEM (Single Source of Truth)
   Type 1: Standard Single-Select Native Dropdowns (.toolbar-select)
   Type 2: Multi-Select Popovers with Checkboxes (.popover-dropdown-menu)
   ───────────────────────────────────────────────────────────────── */

/* TYPE 1: STANDARD SINGLE-SELECT DROPDOWNS */
.toolbar-select {
  height: 38px;
  box-sizing: border-box;
  padding: 0 28px 0 12px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 500;
  line-height: 36px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: all 0.15s ease;
}

.dept-dropdown-wrapper,
.grade-dropdown-wrapper,
.salary-dropdown-wrapper,
.closing-dropdown-wrapper,
.clearance-dropdown-wrapper,
.profession-dropdown-wrapper,
.contract-dropdown-wrapper {
  position: relative;
}

.dept-dropdown-btn,
.grade-dropdown-btn,
.salary-dropdown-btn,
.closing-dropdown-btn,
.clearance-dropdown-btn,
.profession-dropdown-btn,
.contract-dropdown-btn {
  text-align: left;
  width: 100%;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dept-dropdown-btn.active-filter,
.grade-dropdown-btn.active-filter,
.salary-dropdown-btn.active-filter,
.closing-dropdown-btn.active-filter,
.clearance-dropdown-btn.active-filter,
.profession-dropdown-btn.active-filter,
.contract-dropdown-btn.active-filter,
.toolbar-search-input.active-filter,
.toolbar-search-input:not(:placeholder-shown),
.mini-field.active-filter {
  background-color: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
  font-weight: 600;
}

.mini-field.active-filter .field-prefix,
.mini-field.active-filter .toolbar-input-num,
.mini-field.active-filter .btn-num-stepper {
  color: #1d4ed8;
}

.mini-field.active-filter .btn-num-stepper {
  border-color: #bfdbfe;
}

.dept-dropdown-btn.active-filter,
.grade-dropdown-btn.active-filter,
.salary-dropdown-btn.active-filter,
.closing-dropdown-btn.active-filter,
.clearance-dropdown-btn.active-filter,
.profession-dropdown-btn.active-filter,
.contract-dropdown-btn.active-filter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%231d4ed8' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}

/* TYPE 2: MULTI-SELECT POPOVER DROPDOWNS (Checkboxes + Select All / Clear All) */
.popover-dropdown-menu,
.dept-dropdown-menu,
.grade-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 230px;
  max-height: 270px;
  overflow-y: auto;
  background: var(--dropdown-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.popover-dropdown-menu[hidden],
.dept-dropdown-menu[hidden],
.grade-dropdown-menu[hidden] {
  display: none !important;
}

/* On mobile, "More Filters" lays these buttons out in a 2-column grid —
   Grade, Clearance and Contract all land in the right-hand column (Dept and
   Profession are left-column and don't need this). Their menus inherited
   left: 0 from the shared rule above, anchoring the panel's LEFT edge to a
   button that's already in the right half of a narrow screen — at
   min-width: 230px that pushed the menu's right edge well past the
   viewport, forcing unwanted horizontal scroll. Anchoring to the button's
   right edge instead keeps the same 230px panel within the screen, since
   these buttons have roughly a full column's width of room to their left. */
@media (max-width: 640px) {
  #grade-dropdown-menu,
  #closing-dropdown-menu,
  #clearance-dropdown-menu,
  #contract-dropdown-menu {
    left: auto;
    right: 0;
  }
}

/* Header Quick Actions: Select All / Clear All */
.popover-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px 6px 6px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  margin-bottom: 2px;
  flex-shrink: 0;
}

.popover-action-btn {
  background: transparent;
  border: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-color, #2563eb);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.12s ease;
}

.popover-action-btn:hover {
  background: #eff6ff;
  color: #1d4ed8;
}

/* Popover Checkbox Items & Dividers */
.popover-menu-item,
.dept-menu-item,
.grade-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-main);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s ease;
  /* .popover-menu-item is also used as a plain <button> (Salary, Deadline —
     single-select, no checkbox), which needs its native chrome reset to
     match the <label> rows used everywhere else. */
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.popover-menu-item:hover,
.dept-menu-item:hover,
.grade-menu-item:hover {
  background: var(--item-hover-bg, #f1f5f9);
}

.popover-menu-item input[type="checkbox"],
.dept-menu-item input[type="checkbox"],
.grade-menu-item input[type="checkbox"] {
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--primary-color);
  flex-shrink: 0;
}

.popover-menu-divider,
.dept-menu-divider,
.grade-menu-divider {
  height: 1px;
  flex-shrink: 0;
  background: var(--border-color, #e2e8f0);
  margin: 4px 0;
}

.dept-menu-empty,
.grade-menu-empty {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.grade-pill:hover {
  border-color: #94a3b8;
  color: var(--text-main);
}

.grade-pill.active {
  background: #e0e7ff;
  color: #3730a3;
  border-color: #c7d2fe;
}

/* TABLE STYLING */
.table-container {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

th {
  background: var(--table-header-bg);
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
}

td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
  vertical-align: middle;
}

.vacancy-title-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.15s ease;
}

.vacancy-title-link:hover {
  text-decoration: underline;
}

/* MULTIPLE LOCATIONS POPUP */
.loc-cell-has-popup {
  position: relative;
  cursor: pointer;
  user-select: none;
}

.loc-text-multiple {
  color: var(--text-main);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.loc-cell-has-popup:hover .loc-text-multiple,
.loc-cell-has-popup.active-popup .loc-text-multiple {
  color: var(--text-main);
}

.loc-popup-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 190px;
  max-width: 280px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: all 0.15s ease;
  z-index: 200;
  pointer-events: none;
  text-align: left;
}

/* For top rows in table, position popup tooltip BELOW to prevent top border clipping */
tr:first-child .loc-popup-tooltip,
tr:nth-child(2) .loc-popup-tooltip {
  bottom: auto;
  top: calc(100% + 6px);
}

tr:hover {
  position: relative;
  z-index: 10;
}

.loc-popup-tooltip strong {
  display: block;
  font-size: 11px;
  color: #60a5fa;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.loc-popup-tooltip p {
  font-size: 12px;
  color: #f8fafc;
  margin: 0;
  line-height: 1.35;
  word-break: break-word;
  white-space: normal;
}

/* The qualifier that changes what the list means ("Regular travel will be
   required", "Croydon is only open to existing staff"). Set apart from the
   places themselves so it doesn't read as another location. */
.loc-popup-note {
  margin-top: 6px !important;
  padding-top: 6px;
  border-top: 1px solid #334155;
  color: #cbd5e1 !important;
  font-style: italic;
}

@media (hover: hover) {
  .loc-cell-has-popup:hover .loc-popup-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

.loc-cell-has-popup.active-popup .loc-popup-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

tr:last-child td {
  border-bottom: none;
}

tr:hover td {
  background: var(--item-hover-bg);
}

.numeric {
  text-align: center;
}

.badge-posts-num,
.badge-vacancies-gated {
  font-weight: 700;
  font-size: 13px;
  transition: color 0.15s ease;
}

.badge-vacancies-gated.badge-locked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  color: var(--primary-color, #2563eb);
  font-weight: 600;
}

.badge-vacancies-gated.badge-locked:hover {
  text-decoration: underline;
}

.badge-posts-num.badge-locked {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.badge-posts-num.badge-locked:hover {
  transform: scale(1.1);
}

.badge-locked-eye {
  font-size: 14px;
  line-height: 1;
}

.badge-locked-text {
  font-size: 9.5px;
  font-weight: 700;
  text-decoration: underline;
  letter-spacing: 0.5px;
  margin-top: 4px;
  padding: 0.5px 3px;
  color: #334155;
}

[data-theme="dark"] .badge-locked-text {
  color: #cbd5e1;
}

.badge-mass-campaign {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  color: #c2410c;
  background: #ffedd5;
  border: 1px solid #fed7aa;
  padding: 1px 6px;
  border-radius: 10px;
  margin-top: 2px;
  white-space: nowrap;
}

/* Same pill shape/weight as .badge-mass-campaign, red instead of orange —
   only ever shown next to an archived vacancy page's own <h1>, never on a
   listing row (that's formatDaysRemaining's days-text-expired instead). */
.badge-expired {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #b91c1c;
  background: #fee2e2;
  border: 1px solid #fecaca;
  padding: 2px 8px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 10px;
  white-space: nowrap;
}
[data-theme="dark"] .badge-expired {
  color: #fca5a5;
  background: #450a0a;
  border-color: #7f1d1d;
}

.btn-unlock-pro {
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 6px;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(168, 85, 247, 0.3);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-unlock-pro:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(168, 85, 247, 0.45);
}

/* CLEAN GRADE TEXT (PERFECTLY ALIGNED WITH TABLE HEADER) */
.text-grade {
  font-weight: 500;
  font-size: 13px;
  color: var(--text-main);
  white-space: nowrap;
}

.text-department {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.2;
}

.text-first-seen {
  font-size: 10.5px;
  color: var(--text-muted);
  opacity: 0.75;
  margin-top: 2px;
  line-height: 1.2;
  cursor: help;
}

.pay-min {
  font-weight: 600;
  color: #047857;
}

/* DAYS COUNTDOWN — CLEAN TEXT (NO BOX) */
.days-text {
  font-size: 13px;
  font-weight: 500;
}

.days-text-urgent {
  color: #dc2626;
  font-weight: 700;
}

.days-text-warning {
  color: #d97706;
  font-weight: 600;
}

.days-text-normal {
  color: var(--text-main);
}

.days-text-expired {
  color: #94a3b8;
  font-style: italic;
}

.text-center {
  text-align: center;
}

.btn-icon-danger {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.15s ease;
}

.btn-icon-danger:hover {
  background: #fef2f2;
  color: #ef4444;
  border-color: #fca5a5;
}

/* SETTINGS CARD */
.settings-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 24px;
  max-width: 680px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.settings-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-main);
}

.form-group.inline {
  display: flex;
  gap: 16px;
}

.checkbox-group {
  margin-bottom: 12px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
}

.stealth-box {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.stealth-box h4 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-main);
}

.save-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.notice-toast {
  font-size: 13px;
  font-weight: 600;
  color: var(--success-color);
}

/* EMPTY STATE */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.empty-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

/* Class, not tag: the heading is an <h2> so the document outline doesn't skip
   a level, but it must keep looking like the small notice it is. */
.empty-state-heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.empty-state p {
  font-size: 13px;
  color: var(--text-muted);
}

/* SCAN BANNER */
.scan-banner {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.scan-banner[hidden] {
  display: none !important;
}

.scan-banner-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #166534;
}

.scan-pulse {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}

.btn.small {
  padding: 4px 10px;
  font-size: 12px;
}

/* CLICKABLE SORTABLE HEADERS */
th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}

th.col-vacancies {
  width: 70px;
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
}

th.col-title {
  width: auto;
}

th.col-grade {
  width: 90px;
  white-space: nowrap;
}

th.col-location {
  width: 120px;
  white-space: nowrap;
}

th.col-pay {
  width: 100px;
  white-space: nowrap;
}

th.col-closing {
  width: 135px;
  white-space: nowrap;
}

.col-action {
  width: 110px;
  text-align: center;
}

.btn-apply-table {
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 6px;
  background: var(--primary-color);
  color: white;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: all 0.15s ease;
}

.btn-apply-table:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

/* Archived vacancy pages only: a black CTA reads as "closed, informational"
   rather than the brand-color "apply now" button — the same visual language
   a "sold out" or "expired" state uses elsewhere, so it doesn't invite a
   click expecting a live application form. */
.btn-apply-table.is-expired {
  background: #111111;
}
.btn-apply-table.is-expired:hover {
  background: #2b2b2b;
}

[data-theme="dark"] .btn-apply-table.is-expired {
  background: #334155;
  color: #f8fafc;
  border: 1px solid #475569;
}
[data-theme="dark"] .btn-apply-table.is-expired:hover {
  background: #475569;
}

th.sortable:hover {
  background: #f1f5f9;
  color: var(--text-main);
}

th.active-sort {
  color: #1e40af;
  background: #eff6ff;
}

.sort-icon {
  display: inline-block;
  margin-left: 6px;
  font-size: 13px;
  font-weight: 800;
  transition: all 0.15s ease;
}

.sort-icon.inactive {
  color: #94a3b8;
  opacity: 0.4;
}

th.sortable:hover .sort-icon.inactive {
  color: #2563eb;
  opacity: 0.8;
}

.sort-icon.active {
  color: #2563eb;
  opacity: 1;
}

@media (max-width: 640px) {
  .app-header-inner {
    padding: 10px 16px;
  }
  .brand {
    gap: 8px;
  }
  .brand-icon-svg svg {
    width: 18px;
    height: 18px;
  }
  .brand-title {
    font-size: 14.5px;
  }
  .brand-tag {
    font-size: 9.5px;
  }
  .header-right {
    gap: 8px;
  }
  .theme-toggle-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    flex-shrink: 0;
  }
  .header-auth-btn {
    padding: 4px 8px;
    font-size: 10.5px;
    white-space: nowrap;
  }
  .filter-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px !important;
    gap: 8px !important;
  }
  .toolbar-top-row {
    flex-direction: column;
    align-items: stretch;
  }
  .search-main,
  .search-location {
    min-width: 100%;
    width: 100%;
  }
  .toolbar-middle-row,
  .toolbar-bottom-row {
    display: contents !important;
  }
  .field-grow,
  .field-grow-sm {
    min-width: 0 !important;
    width: 100% !important;
  }
  .mini-field {
    width: 100%;
    justify-content: space-between;
  }
  /* The label may shrink; the stepper may not. Without this the longer
     "Min Openings:" text pushed the -/1/+ controls past the field's own
     border, because .mini-field is a fixed-height box with overflow: hidden. */
  .mini-field .field-prefix {
    min-width: 0;
    overflow: hidden;
  }
  .mini-field .btn-num-stepper,
  .mini-field .toolbar-input-num {
    flex-shrink: 0;
  }
  .posts-lbl-desktop {
    display: none;
  }
  .posts-lbl-mobile {
    display: inline;
  }
  .toolbar-spacer-lg {
    display: none !important;
  }

  /* Mobile Filter Accordion Toggle — sized and styled to match every other
     dropdown button (.toolbar-select) exactly: same height, padding,
     border and radius. Font-weight deliberately NOT matched to the 500
     the others use — "More Filters" is the one entry point to 7 fields at
     once, not a single value like "All", so it keeps a bit more visual
     weight (550 — enough to read as slightly heavier than the other
     dropdowns without tipping into looking bold) to stand out as the
     more significant control. */
  .btn-toggle-more-filters {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 38px;
    box-sizing: border-box;
    padding: 0 28px 0 12px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 550;
    line-height: 36px;
    cursor: pointer;
    margin-top: 0;
    position: relative;
    transition: all 0.15s ease;
    /* Phones paint a translucent blue box over a tapped button by default.
       That box is the "blue bar" on tap; the card rows already turn this off. */
    -webkit-tap-highlight-color: transparent;
  }

  /* Hover only on devices that really hover. On touch, a tap leaves the
     button in :hover until you tap elsewhere, which kept it blue after
     opening. */
  @media (hover: hover) {
    .btn-toggle-more-filters:hover {
      background: var(--item-hover-bg);
      border-color: var(--primary-color);
    }
  }

  /* Flattens the bottom edge so the button visually fuses with the panel
     below it instead of reading as a separate floating control. */
  .btn-toggle-more-filters[aria-expanded="true"] {
    border-radius: 8px 8px 0 0;
    border-bottom-color: transparent;
  }

  .toggle-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* The old text-character arrow (▾/▴, swapped by app.js) is replaced
     below by the exact same SVG chevron every other dropdown uses — kept
     in the DOM but hidden rather than removed, so app.js's existing
     open/close handler (which still just toggles its textContent) has
     nothing to break even though nothing reads that text anymore. */
  .toggle-arrow {
    display: none;
  }

  .btn-toggle-more-filters::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.15s ease;
  }

  [data-theme="dark"] .btn-toggle-more-filters::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  }

  /* Same open/closed indication the text arrow used to give, now a rotation
     of the real chevron instead of swapping to a different character. */
  .btn-toggle-more-filters[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(180deg);
  }

  /* A small count pill. It must reset line-height: the parent button sets
     36px for its own text, and an inline span inherits that, which is what
     made this blue pill as tall as the whole button. */
  .active-filters-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    min-width: 18px;
    padding: 0 6px;
    box-sizing: border-box;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 9px;
  }

  /* Desktop needs Sort to share .toolbar-bottom-row with Clearance/
     Profession/Contract (nested inside this group, same as the original
     pre-redesign markup), but mobile needs Sort visible at all times,
     independent of whether "More Filters" is expanded — those two
     requirements conflict if collapsing hides this whole container the
     way it used to. Resolved by never hiding the container itself on
     mobile; collapsing instead hides only the individual .toolbar-field
     items below (every real filter field carries that class; Sort does
     not, so it's untouched and stays visible from right where desktop
     needs it in the DOM). */
  .mobile-more-filters-group {
    display: grid !important;
    /* minmax(0, 1fr), NOT plain 1fr - a bare 1fr track defaults to
       minmax(auto, 1fr), so its minimum is the widest item's own
       min-content. The Min Openings stepper (label + number + +/-
       buttons, all nowrap) can't shrink much, and it happened to land in
       column 1 - that alone dragged column 1 out to ~90% of the row and
       crushed every other column-2 field into an unreadable sliver.
       minmax(0, 1fr) makes both tracks truly equal regardless of any one
       item's content; .field-grow's own min-width: 0 (below) handles
       wrapping/clipping inside each cell instead. */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    /* .filter-toolbar's own flex `gap: 8px` inserts space before this
       child no matter what margin is set here — cancel it exactly so this
       container's top (whatever's actually visible in it) sits flush
       against the toggle button's bottom, in both collapsed and
       expanded states, instead of floating a visible gap below it. */
    margin-top: -8px;
  }

  .mobile-more-filters-group:not(.is-open) .toolbar-field {
    display: none !important;
  }

  .mobile-more-filters-group.is-open .toolbar-field {
    display: flex !important;
  }

  /* Border flush against the toggle button's bottom edge, reading as one
     dropdown panel that belongs to that button — only once there's
     actually something in it to frame; collapsed, the container has no
     border/background of its own, so Sort (the only thing left visible)
     just reads as a plain row under the toggle button. Square bottom
     corners, deliberately — Sort (below) provides its own rounded
     closure, so this box's boundary ends at Contract, not lower.
     Background is the outer toolbar card's shade, NOT --input-bg: in dark
     mode --border-color and --input-bg are the same color (#1f2937), so a
     dropdown button's own border is already invisible against its own
     fill there — giving the panel that same fill too made every filter
     pill disappear into it completely. --card-bg is a genuinely different
     shade in dark mode, so the buttons stay visible by contrast instead. */
  /* Sort is a DOM descendant of .toolbar-bottom-row (desktop needs that to
     share a row with Clearance/Profession/Contract), and mobile flattens
     that row via display:contents, so Sort ends up as a grid item of this
     same container right alongside the real fields — there is no clean
     way to make THIS element's own border/background stop before one of
     its own grid items. (Tried: negative margins to "escape" Sort past
     this box - only ever drew an extra border on top, never actually
     shrank this box's own natural size, which always includes every row
     it contains. Tried: a pseudo-element sized to stop one row early -
     conflicts with grid auto-placement, which routes around anything with
     an explicit position, pushing the real fields into the wrong rows.
     Both depend on assuming a fixed field count anyway, which breaks the
     moment one's conditionally hidden.) One box, correctly, is the robust
     answer - the divider below is what actually separates Sort from the
     fields, not a second border fighting the grid for space it doesn't
     have. */
  .mobile-more-filters-group.is-open {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 10px;
  }

  /* Always spans both grid columns regardless of how many .toolbar-field
     items are currently visible beside it, so it reads as its own
     full-width row rather than sitting in a single narrow column. The
     divider above it is what marks it as distinct from the fields above -
     real whitespace (margin-top), not just a line sitting flush against
     the row above, so it doesn't read as one more field in the grid. */
  .sort-field-wrapper {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
  }

  .sort-field-wrapper .sort-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
  }

  .sort-select-compact {
    flex: 1;
    height: 38px;
    box-sizing: border-box;
    width: 100%;
  }
}

/* SAVED SEARCHES & ALERTS */
.toolbar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.toolbar-saved-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-save-search {
  background: var(--card-bg);
  color: var(--primary-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-save-search:hover {
  background: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
}

.btn-view-saved {
  background: var(--card-bg);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-view-saved:hover {
  color: var(--text-main);
  background: var(--input-bg);
}

/* Modal styles for Saved Searches */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-backdrop[hidden] {
  display: none !important;
}

.modal-content {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

.saved-search-create-box {
  background: var(--input-bg);
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 20px;
}

.saved-box-subtitle {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 6px 0;
  font-weight: 600;
}

.current-filter-preview {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 10px;
  word-break: break-word;
}

.btn-save-preset {
  width: 100%;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  background: var(--primary-color);
  color: #fff;
  border: none;
  cursor: pointer;
}

.saved-list-heading {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: var(--text-main);
}

.saved-searches-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.saved-preset-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.saved-preset-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.saved-preset-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.saved-preset-date {
  font-size: 10px;
  color: var(--text-muted);
}

.saved-preset-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-notify-preset {
  padding: 5px 8px;
  font-size: 13px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  color: var(--text-muted);
  opacity: 0.6;
  transition: all 0.15s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-notify-preset svg {
  display: block;
  flex-shrink: 0;
  stroke-width: 2.2px;
}

.btn-notify-preset:hover {
  opacity: 1;
  color: var(--primary-color);
  border-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.btn-notify-preset.active {
  opacity: 1;
  color: var(--primary-color);
  border-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 15%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.btn-apply-preset {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-delete-preset {
  padding: 3px 6px;
  font-size: 11px;
  background: transparent;
  color: var(--danger-color, #ef4444);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
}

.empty-saved-msg {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin: 12px 0;
}

.signin-alert-banner {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px;
  position: relative;
}

.signin-alert-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--primary-color);
  margin-bottom: 4px;
}

/* Class rather than a tag selector: the modals' headings became
   role="heading" divs so they stop appearing in the crawlable document
   outline of a page they are only ever hidden inside. */
.signin-alert-heading {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--text-main);
}

.signin-alert-banner p {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.btn-upgrade-pro-sm {
  width: 100%;
  padding: 8px;
  background: var(--primary-color);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* ───────────────────────────────────────────────────────────
   JOB DETAIL PAGE (scripts/build-jobs.mjs static output)
   Reuses existing tokens/classes (.pay-min, .text-grade, .days-text-*,
   .badge-posts-num, .badge-mass-campaign, .btn-apply-table) so a detail
   page looks like the same product as the live table, not a separate skin.
   ─────────────────────────────────────────────────────────── */
.job-detail-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 32px 36px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.job-back-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 18px;
}

.job-back-link:hover {
  color: var(--primary-color);
}

.job-detail-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.job-detail-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.job-detail-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px 20px;
  padding: 18px 0;
  margin-bottom: 20px;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.job-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.job-meta-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.job-meta-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
}

.job-detail-description {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-main);
  margin-bottom: 24px;
}

ul.job-detail-description,
ol.job-detail-description,
.job-detail-card ul:not([class]),
.job-detail-card ol:not([class]) {
  padding-left: 24px;
  margin-top: 8px;
  margin-bottom: 24px;
}

ul.job-detail-description li,
ol.job-detail-description li,
.job-detail-card ul:not([class]) li,
.job-detail-card ol:not([class]) li {
  margin-bottom: 8px;
  padding-left: 4px;
  line-height: 1.6;
}

.job-detail-description-body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-main);
  margin-bottom: 24px;
}

.job-detail-description-body p {
  margin-bottom: 1.2rem;
}

.job-detail-description-body ul,
.job-detail-description-body ol {
  margin: 1rem 0 1.2rem 1.5rem;
}

.job-detail-description-body li {
  margin-bottom: 0.4rem;
}

.job-detail-description-body h2,
.job-detail-description-body h3,
.job-detail-description-body h4 {
  margin-top: 1.6rem;
  margin-bottom: 0.6rem;
  font-weight: 700;
  color: var(--text-main);
}

.job-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none;
}

.job-cta-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 8px;
}

.job-source-note {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
  opacity: 0.8;
  margin-top: 24px;
  padding-top: 16px;
  margin-bottom: 14px;
  border-top: 1px solid var(--border-color);
}

.job-source-note:last-child {
  margin-bottom: 0;
}

/* Archived vacancy pages only (see renderArchivedJobPage in
   scripts/build-jobs.mjs) — a closed listing kept at its own URL rather
   than deleted, so it needs a clear, neutral status banner rather than the
   red/urgent styling used for "closing soon" elsewhere on active pages. */
/* Muted text-on-muted-background made this easy to miss entirely — a
   reader landing on a closed listing needs to register "this has closed"
   before anything else on the page, not after scanning past it. */
.job-closed-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-left: 4px solid #111111;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 16px 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-main);
}
.job-closed-banner::before {
  content: "🔒";
  font-size: 16px;
  line-height: 1.4;
}

[data-theme="dark"] .job-closed-banner {
  border-left-color: #e2e8f0;
}

.job-source-note a {
  color: var(--text-muted) !important;
  text-decoration: none !important;
  font-weight: 500;
  transition: color 0.15s ease, text-decoration 0.15s ease;
}

.job-source-note a:hover {
  color: var(--primary-color) !important;
  text-decoration: underline !important;
}

.job-not-found-card {
  text-align: center;
  padding: 56px 32px;
}

.job-not-found-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.job-not-found-card .job-detail-description {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Privacy / Terms pages */
.legal-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  margin: 38px 0 14px;
}

.legal-heading:first-of-type {
  margin-top: 24px;
}

.card-grid-centered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 26px 0;
}

.card-grid-centered > div {
  flex: 0 1 calc(50% - 10px);
  min-width: 280px;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  padding: 20px 22px;
  border-radius: 8px;
}

@media (max-width: 640px) {
  .card-grid-centered > div {
    flex: 1 1 100%;
  }
}

/* ─── Crawlable link surfaces ──────────────────────────────────────
   The breadcrumb, the "Similar vacancies" block on each job page, the
   /jobs/ hub, and the homepage "Latest vacancies" list are all generated
   by scripts/build-jobs.mjs. They exist so job pages aren't orphans
   reachable only from sitemap.xml, so they're real navigation for readers
   too — not markup hidden for crawlers. Same tokens as the rest of the
   card UI, so they inherit light/dark automatically. */

.job-breadcrumb {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.job-breadcrumb a {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
}

.job-breadcrumb a:hover {
  text-decoration: underline;
}

.job-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.job-related-list li {
  font-size: 14px;
  line-height: 1.45;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-color);
}

.job-related-list li:last-child {
  border-bottom: none;
}

.job-related-list a {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
}

.job-related-list a:hover {
  text-decoration: underline;
}

/* The "browse by department/location/grade" index pages (renderFacetIndexPage
   — one shared function for all three, so this covers any future kind added
   to it too) are just a list of names, one per line, on an otherwise
   full-width card — a lot of empty space on desktop for a page that's
   basically a bare index. Two columns uses that space; :nth-last-child(-n+2)
   drops the border from the whole final row rather than just the single
   last item, which the base flex-column rule above assumed. */
@media (min-width: 641px) {
  .facet-index-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 28px;
  }
  .facet-index-list li:nth-last-child(-n+2) {
    border-bottom: none;
  }

  /* Location has more entries than Department/Grade, and each one is a
     short place name rather than a full department name, so it runs 3
     columns instead of the shared 2-column default. The border-removal
     rule needs its own -n+3 here too, otherwise it still only drops the
     border from the last 2 items instead of the whole last row of 3. */
  .facet-index-list--location {
    grid-template-columns: repeat(3, 1fr);
  }
  .facet-index-list--location li:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--border-color);
  }
  .facet-index-list--location li:nth-last-child(-n+3) {
    border-bottom: none;
  }
}

.job-related-dept {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 13px;
}

.job-related {
  margin-top: 28px;
  padding-top: 4px;
  border-top: 1px solid var(--border-color);
}

.job-hub-group {
  margin-bottom: 8px;
}

/* Facet navigation shared by the /jobs/ hub, the three facet indexes and the
   "Browse more like this" block on each vacancy page (lib/hub-pages.js).
   Chips rather than another bullet list: these are lateral navigation between
   landing pages, and they need to read differently from the vacancy lists
   they sit beside. */
.hub-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
}

.hub-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--primary-color);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.hub-chip:hover {
  border-color: var(--primary-color);
  text-decoration: none;
}

.hub-chip-count {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 12px;
}

.latest-vacancies {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px 24px;
  margin-top: 24px;
}

.latest-vacancies .legal-heading {
  margin-top: 0;
}

@media (max-width: 640px) {
  .job-detail-card {
    padding: 20px;
  }

  .job-detail-title {
    font-size: 20px;
  }

  .job-detail-meta {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 14px;
    padding: 16px 0;
  }

  .modal-backdrop {
    padding: 12px;
  }

  .modal-content {
    max-height: calc(100vh - 24px);
    border-radius: 10px;
  }

  .modal-header {
    padding: 12px 16px;
  }

  .modal-body {
    padding: 14px 14px;
  }

  .auth-modal-subtitle {
    font-size: 12px;
    margin-bottom: 12px;
  }

  .signin-feature-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .signin-feature-card {
    padding: 8px;
  }

  .job-page-actions {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
  }

  .job-page-actions .job-back-link,
  .job-page-actions .job-report-link {
    font-size: 12px;
  }

  .saved-preset-item {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
  }

  .saved-preset-info {
    flex: 1;
    min-width: 130px;
  }
}

/* ───────────────────────────────────────────────────────────
   SITE FOOTER (index.html — canonical source extracted by
   scripts/build-jobs.mjs's getSharedFooter() for every other page)
   ─────────────────────────────────────────────────────────── */
.site-footer {
  max-width: 1140px;
  margin: 32px auto 0;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  border-top: 1px solid var(--border-color);
  font-size: 13px;
  color: var(--text-muted);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 24px;
  padding-bottom: 16px;
  width: 100%;
  border-bottom: 1px solid var(--border-color);
  text-align: center;
}

.footer-links a {
  color: var(--text-color);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
  transition: color 0.15s ease;
  padding: 2px 4px;
}

.footer-links a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.footer-disclaimer {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.footer-ogl {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
  opacity: 0.85;
  text-align: center;
}

.footer-disclaimer a,
.footer-ogl a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease, text-decoration 0.15s ease;
}

.footer-disclaimer a:hover,
.footer-ogl a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .site-footer {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding: 20px 16px 28px;
  }

  .footer-links {
    order: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 16px;
    width: 100%;
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
  }

  .footer-links a {
    display: inline;
    padding: 2px 0;
    font-size: 13px;
    line-height: 1.5;
    white-space: nowrap;
  }

  .footer-disclaimer,
  .footer-ogl {
    order: 2;
    text-align: center;
    width: 100%;
    margin: 0;
  }
}

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

.pagination-bar[hidden] {
  display: none !important;
}

.pagination-indicator {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.pagination-bar button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* Person-spec / qualification bullets on a generated vacancy page. */
.job-detail-bullets {
  margin: 0 0 18px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-main);
}

.job-detail-bullets li {
  margin-bottom: 6px;
}

/* The bottom toolbar row: Clearance, Scope & Nationality filters on the left,
   Sort by on the right. Styled to match Row 2 flex-grow spanning. */
.toolbar-bottom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

.clearance-dropdown-wrapper,
.profession-dropdown-wrapper,
.contract-dropdown-wrapper {
  position: relative;
  flex: 1;
  min-width: 130px;
}

.clearance-dropdown-btn,
.profession-dropdown-btn,
.contract-dropdown-btn {
  text-align: left;
  white-space: nowrap;
  width: 100%;
}

/* Identical to the Dept/Grade active state above — a selected filter should
   look the same wherever it sits in the toolbar. */
.clearance-dropdown-btn.active-filter,
.profession-dropdown-btn.active-filter,
.contract-dropdown-btn.active-filter {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
  font-weight: 600;
}

/* Responsive Department label in table header */
/* ==============================================================================
   MOBILE VACANCY CARDS (max-width: 640px)
   Transforms the wide tabular board into touch-friendly, zero-scroll cards.
   ============================================================================== */
@media (max-width: 640px) {
  /* Container becomes transparent card list only when holding the vacancies table */
  .table-container:has(#vacancies-table) {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  /* Hub/location/department/grade pages wrap their whole page (heading,
     intro, CTA banner, AND the vacancy list) in one .job-detail-card,
     which has its own 20px padding at this breakpoint. The homepage's
     board doesn't have that extra wrapper layer, so its cards only pay
     the page's own outer padding once - here they paid it twice (page
     padding + job-detail-card padding + the card's own padding), which
     is what made cards visibly narrower on hub pages than on the
     homepage. Clawing back most (not all) of that 20px gives the cards
     room to breathe without sitting flush against the wrapper's own
     border - full cancellation looked stripped/accidental rather than
     deliberate. Doesn't touch the heading/intro/CTA banner above it,
     which keep the wrapper's padding as normal. */
  .job-detail-card:has(#vacancies-table) .table-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #vacancies-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border: none !important;
    border-collapse: separate !important;
    table-layout: auto !important;
  }

  /* Hide table header completely */
  #vacancies-table thead {
    display: none !important;
  }

  #vacancies-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* Each vacancy row = modern mobile card with 2-column grid */
  #vacancies-table tbody tr {
    display: grid !important;
    grid-template-columns: 55fr 45fr !important;
    grid-template-areas:
      "title title"
      "salary openings"
      "location closing"
      "divider divider"
      "grade action" !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
    align-items: center !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    /* Positioning context for the stretched-link hit area below — makes
       the whole card tappable without wrapping it in one <a> (which would
       make a nested <button>/<a> invalid HTML and double-fire on tap). */
    position: relative !important;
    cursor: pointer !important;
    /* A tap on a touchscreen is rarely perfectly still — without this, a
       tiny amount of finger movement during a tap gets read as a
       text-selection drag instead of a click, highlighting the card's
       text rather than opening it. The card is meant to be pressed as a
       unit, not read character by character. */
    user-select: none !important;
    -webkit-user-select: none !important;
    /* Separate from the above — this isn't about text selection at all.
       Mobile Safari/Chrome flash a translucent overlay across a LINK's
       entire hit area on tap by default, and the title link's stretched
       ::before hit area (below) covers the whole card, so without this
       every tap flashed the whole card a translucent grey/blue — easy to
       mistake for a selection highlight even though it was neither
       selected text nor this site's own styling. */
    -webkit-tap-highlight-color: transparent !important;
  }

  #vacancies-table tbody tr:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  }

  [data-theme="dark"] #vacancies-table tbody tr:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  }

  /* Subtle card divider above Grade and View */
  #vacancies-table tbody tr::after {
    content: "" !important;
    grid-area: divider !important;
    display: block !important;
    width: 100% !important;
    border-top: 1px dashed var(--border-color) !important;
    margin: 2px 0 0 0 !important;
  }

  /* Reset all table cells */
  #vacancies-table tbody tr td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* 1. Title / Department / First seen (Row 1 full width) */
  #vacancies-table tbody tr td:nth-child(2) {
    grid-area: title !important;
    width: 100% !important;
    padding-right: 0 !important;
    margin-bottom: 2px !important;
  }

  #vacancies-table tbody tr td:nth-child(2) .vacancy-title-link {
    display: inline-block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: var(--primary-color) !important;
    margin-bottom: 4px !important;
    /* The actual tap target is this <a> — its ::before below only
       stretches its HIT AREA, taps still land "on" this element, so this
       is where the tap-flash actually needs suppressing, not just on the
       <tr>. outline: none because a tap can trigger :focus in some mobile
       browsers, and a focus ring sized to the whole card reads the same
       as the tap-flash it's paired with here. */
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
  }

  /* Stretches the title link's hit area over the whole card, so tapping
     anywhere (salary, location, grade...) opens the vacancy — not just
     the title text itself or the small "View" link at the bottom.
     Deliberately NOT position:relative on .vacancy-title-link itself —
     that would make the link its own containing block, and inset: 0
     would then only cover the link's own small box. Leaving it static
     lets the ::before's containing block resolve up to the card (<tr>,
     position: relative above), so inset: 0 covers the whole card edge
     to edge instead. Sits at the lowest stacking layer so "Sign in to
     see" (z-index: 2 below) still intercepts its own taps first. */
  #vacancies-table tbody tr td:nth-child(2) .vacancy-title-link::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
  }

  #vacancies-table tbody tr td:nth-child(2) .text-department {
    font-size: 13px !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    margin-bottom: 2px !important;
  }

  #vacancies-table tbody tr td:nth-child(2) .text-first-seen {
    font-size: 11px !important;
    color: #64748b !important;
    opacity: 0.85 !important;
    margin-top: 1px !important;
  }

  /* 2. Salary (Row 2 left) */
  #vacancies-table tbody tr td.pay-min,
  #vacancies-table tbody tr td:nth-child(5) {
    grid-area: salary !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #047857 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  [data-theme="dark"] #vacancies-table tbody tr td.pay-min,
  [data-theme="dark"] #vacancies-table tbody tr td:nth-child(5) {
    color: #34d399 !important;
  }

  #vacancies-table tbody tr td.pay-min::before,
  #vacancies-table tbody tr td:nth-child(5)::before {
    content: "💰 ";
    font-size: 13px;
  }

  /* 3. Openings (Row 2 right) */
  #vacancies-table tbody tr td.numeric,
  #vacancies-table tbody tr td:first-child {
    grid-area: openings !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: start !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    gap: 3px !important;
  }

  #vacancies-table tbody tr td.numeric::before {
    content: "👥 ";
    font-size: 13px;
  }

  #vacancies-table tbody tr td.numeric .badge-posts-num.badge-locked {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--primary-color) !important;
    cursor: pointer;
    text-decoration: none !important;
    /* Sits above the title link's card-wide stretched hit area (z-index:
       1) so a tap here still reveals the count instead of navigating. */
    position: relative !important;
    z-index: 2 !important;
  }

  #vacancies-table tbody tr td.numeric .badge-posts-num.badge-locked:hover {
    text-decoration: underline !important;
  }

  #vacancies-table tbody tr td.numeric .badge-locked-text {
    order: 1 !important;
    font-size: 0 !important;
  }

  #vacancies-table tbody tr td.numeric .badge-locked-text::after {
    content: "Sign in to see";
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: underline;
  }

  #vacancies-table tbody tr td.numeric .badge-locked-eye {
    display: none !important;
  }

  #vacancies-table tbody tr td.numeric .badge-posts-num:not(.badge-locked) {
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  #vacancies-table tbody tr td.numeric .badge-posts-num:not(.badge-locked)::after {
    content: " posts";
    font-weight: 500;
    color: var(--text-muted);
  }

  /* 4. Location (Row 3 left) */
  #vacancies-table tbody tr td:nth-child(4) {
    grid-area: location !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;
    display: block !important;
    min-width: 0 !important;
    line-height: 1.35 !important;
    /* Sits above the title link's card-wide stretched hit area so tapping
       "+N more" opens the existing tap-to-toggle location popup (app.js
       already handles this click, including on touch) instead of
       navigating the card away. */
    position: relative !important;
    z-index: 2 !important;
  }

  #vacancies-table tbody tr td:nth-child(4)::before {
    content: "📍 ";
    font-size: 13px;
    display: inline;
  }

  /* 5. Closing in (Row 3 right, under openings) */
  #vacancies-table tbody tr td:nth-child(6) {
    grid-area: closing !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: start !important;
    align-self: start !important;
    gap: 4px !important;
    white-space: nowrap !important;
    padding-top: 1px !important;
    border-top: none !important;
    color: var(--text-muted) !important;
  }

  #vacancies-table tbody tr td:nth-child(6)::before {
    content: "⏳ ";
    font-size: 13px;
  }

  #vacancies-table tbody tr td:nth-child(6)::after {
    display: none !important;
  }

  /* 6. Grade (Row 5 left, where closing soon was) */
  #vacancies-table tbody tr td:nth-child(3) {
    grid-area: grade !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: start !important;
    font-size: 12px !important;
    padding-top: 2px !important;
  }

  #vacancies-table tbody tr td:nth-child(3) .text-grade {
    background: #f1f5f9;
    color: #334155;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 11.5px;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
  }

  [data-theme="dark"] #vacancies-table tbody tr td:nth-child(3) .text-grade {
    background: #1e293b;
    color: #cbd5e1;
    border-color: #334155;
  }

  /* 7. Subtle View link (Row 5 right) */
  #vacancies-table tbody tr td.col-action,
  #vacancies-table tbody tr td:nth-child(7) {
    grid-area: action !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    padding-top: 2px !important;
    border-top: none !important;
  }

  #vacancies-table tbody tr td.col-action .btn-apply-table {
    background: transparent !important;
    color: var(--primary-color) !important;
    padding: 0 !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #vacancies-table tbody tr td.col-action .btn-apply-table::after {
    content: " →";
  }

  #vacancies-table tbody tr td.col-action .btn-apply-table:hover {
    text-decoration: underline !important;
    transform: none !important;
    background: transparent !important;
  }
}
.posts-lbl-mobile {
  display: none;
}

th.col-title .dept-lbl-mobile {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────
   INSTANT TOOLTIP SYSTEM (0ms Delay)
   Replaces sluggish native OS tooltips on locked/PRO elements with a
   sleek, instant-hover micro-tooltip.
   ───────────────────────────────────────────────────────────────── */
[data-instant-tooltip] {
  position: relative !important;
  overflow: visible !important;
}

#min-posts-field.is-locked {
  cursor: pointer !important;
}

#min-posts-field.is-locked * {
  pointer-events: none !important;
}

/* Locked radius select: still legible, so the feature is discoverable, but
   the pointer says it isn't usable yet. The mousedown handler opens the
   sign-in modal instead of the option list. */
.radius-select.is-locked {
  cursor: pointer;
  opacity: 0.75;
}

[data-instant-tooltip]::after {
  content: attr(data-instant-tooltip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 5px 10px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.06s ease, transform 0.06s ease;
  z-index: 1050;
}

[data-instant-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 5px 0 5px;
  border-style: solid;
  border-color: #0f172a transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.06s ease;
  z-index: 1051;
}

[data-instant-tooltip]:hover::after,
[data-instant-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

[data-theme="dark"] [data-instant-tooltip]::after {
  background: #1e293b;
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] [data-instant-tooltip]::before {
  border-color: #1e293b transparent transparent transparent;
}

/* ─── Signed-in account menu ─────────────────────────────────────
   Avatar with initials, opening a panel with the user's plan and the
   actions an account needs — including the route to Stripe's portal, the
   only place a subscription can be changed or cancelled. Replaces a pill
   that printed the raw email in the header and offered only Sign Out. */
.user-menu {
  position: relative;
}

.user-avatar-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: var(--primary-color);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.user-avatar-btn:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.user-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 232px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  padding: 6px;
  z-index: 200;
}

.user-menu-identity {
  padding: 10px 12px 8px;
}

.user-menu-email {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  word-break: break-all;
}

.user-menu-plan {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
}

.user-menu-plan.is-pro {
  color: var(--success-color);
}

.user-menu-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
}

.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-main);
  cursor: pointer;
  text-decoration: none; /* the class is shared by both <button> (Sign out) and <a> (admin links) */
  transition: background 0.12s ease;
}

.user-menu-item:hover {
  background: var(--item-hover-bg);
}

.user-menu-item-danger {
  color: var(--danger-color);
  font-weight: 600;
}

/* The wordmark is the conventional "back to home" affordance — readers expect
   to be able to click it, and on a generated vacancy page it was inert. */
.brand-home-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.signin-modal-reassure {
  font-size: 12.5px;
  color: #64748b !important;
  font-weight: 500;
  text-align: center;
  margin: 14px 0 0 0;
  line-height: 1.5;
  opacity: 1 !important;
}

[data-theme="dark"] .signin-modal-reassure {
  color: #94a3b8 !important;
}

/* ─── Report a problem (generated vacancy pages) ───────────────── */
.job-report-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: #c53030;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.15s ease, opacity 0.15s ease;
  opacity: 0.85;
}

.job-report-link:hover {
  color: #9b2c2c;
  opacity: 1;
}

[data-theme="dark"] .job-report-link {
  color: #f87171;
  opacity: 0.85;
}

[data-theme="dark"] .job-report-link:hover {
  color: #fca5a5;
  opacity: 1;
}

.job-report-panel {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-color);
}

.job-report-panel .legal-heading {
  margin-top: 0;
}

.job-report-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 12px 0 5px;
}

.job-report-select,
.job-report-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text-main);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 10px;
}

.job-report-textarea {
  min-height: 90px;
  resize: vertical;
  line-height: 1.5;
}

.job-report-select:focus,
.job-report-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.job-report-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.job-report-status {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.job-report-status.is-error { color: var(--danger-color); }
.job-report-status.is-success { color: var(--success-color); }

.btn-report-submit,
.btn-report-secondary {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-report-submit {
  background: var(--primary-color);
  color: #fff;
}

.btn-report-submit:hover { background: var(--primary-hover); }
.btn-report-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-report-secondary {
  background: var(--card-bg);
  color: var(--text-main);
  border-color: var(--border-color);
}

/* Back link left, report right — the two page-level actions on a vacancy,
   balanced on one row rather than the report being buried in the footnote. */
.job-page-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.job-page-actions .job-back-link {
  margin-bottom: 0;
}

/* Up to four towns are listed by name, which needs room: at the default
   column width "Manchester, Leeds, Newcastle, Blackpool" wrapped one town per
   line and made the row four times taller than its neighbours. */
#vacancies-table td:nth-child(4),
#vacancies-table th:nth-child(4) {
  min-width: 170px;
}

/* ───────────────────────────────────────────────────────────
   OPERATOR DASHBOARD (/admin/)
   Built from the board's own tokens and classes (.filter-toolbar,
   .toolbar-select, .days-text-*, .stat-badge) rather than a separate
   admin skin — the point of moving admin onto the site was to stop
   maintaining a second copy of this UI inside the extension.
   ─────────────────────────────────────────────────────────── */
.admin-page { max-width: 1400px; margin: 0 auto; }

.admin-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.admin-header-actions { display: flex; gap: 8px; }

.admin-gate { max-width: 520px; }

.admin-status {
  padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  background: var(--item-hover-bg); color: var(--text-main); margin-bottom: 14px;
}
.admin-status.is-ok { background: #ecfdf5; color: #047857; }
.admin-status.is-error { background: var(--danger-bg); color: var(--danger-color); }

.admin-stats {
  /* Eight columns for the eight fixed dashboard stats: Total, Active, Expired,
     Hidden, Reported, AI pending, AI failed, Feedback. */
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px; margin-bottom: 12px;
}
.admin-stat {
  background: var(--card-bg); border: 1px solid var(--border-color);
  border-radius: 10px; padding: 9px 10px; display: flex; flex-direction: column; gap: 1px;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.admin-stat:hover, .admin-stat:focus-visible { border-color: var(--text-muted); background: var(--item-hover-bg); }
.admin-stat-value { font-size: 20px; font-weight: 800; color: var(--text-main); line-height: 1.1; }
.admin-stat-label { font-size: 10.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.2; }
@media (max-width: 1180px) {
  .admin-stats { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
}

.admin-newperday { font-size: 12.5px; color: var(--text-muted); margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.admin-day em { font-style: normal; opacity: 0.75; margin-right: 3px; }

/* Something is waiting on the operator: a tile that is not just a count. */
.admin-stat.is-attention { border-color: var(--primary-color); }
.admin-stat.is-attention .admin-stat-value { color: var(--primary-color); }

/* Reader feedback panel */
.admin-feedback { margin: 4px 0 18px; }
.admin-feedback-title { font-size: 15px; font-weight: 800; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.admin-feedback-list { display: flex; flex-direction: column; gap: 8px; }
.admin-feedback-item {
  background: var(--card-bg); border: 1px solid var(--border-color);
  border-radius: 10px; padding: 10px 12px;
}
.admin-feedback-meta { font-size: 12px; color: var(--text-muted); margin: 0 0 4px; overflow-wrap: anywhere; }
.admin-feedback-type { font-weight: 700; color: var(--text-main); }
.admin-feedback-message { font-size: 14px; margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-feedback-actions { display: flex; gap: 8px; }
.admin-feedback-empty { font-size: 13px; color: var(--text-muted); margin: 0; }
.admin-feedback-empty.is-error { color: var(--danger-color); }

.admin-toolbar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  align-items: center !important;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.admin-toolbar .search-input-wrapper {
  flex: 1;
  min-width: 260px;
  position: relative;
  display: flex;
  align-items: center;
}

.admin-toolbar .search-input-wrapper .search-icon {
  position: absolute;
  left: 12px;
  font-size: 14px;
  pointer-events: none;
  opacity: 0.5;
}

.admin-toolbar .toolbar-search-input {
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  padding: 0 12px 0 36px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-main);
  background: var(--input-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-toolbar .toolbar-search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.admin-toolbar .toolbar-select {
  height: 38px;
  box-sizing: border-box;
  padding: 0 32px 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  background-color: var(--input-bg);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-toolbar .toolbar-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.admin-toolbar #admin-count {
  height: 38px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

#admin-table { width: 100%; }
.admin-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text-muted); }
.admin-title { font-weight: 600; font-size: 14px; color: var(--text-main); display: inline-flex; align-items: center; gap: 6px; }
.admin-report-flag {
  color: #dc2626;
  font-size: 13px;
  line-height: 1;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* A hidden row stays legible but visibly inert — it is still in the database
   and still answers its /jobs/ URL with a 410, so it must not look erased. */
.admin-row-deleted { opacity: 0.55; }
.admin-row-deleted .admin-title { text-decoration: line-through; }

/* ───────────────────────────────────────────────────────────
   /admin/analytics/ — built on the same tokens as the rest of the admin
   dashboard above. No charting library: a bar row is just a track div with
   a width-percent fill, which is all a dependency-free chart needs to be. */
.admin-analytics-section {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.admin-analytics-section .legal-heading { margin-top: 0; margin-bottom: 12px; }

.admin-analytics-empty { color: var(--text-muted); font-size: 13px; margin: 8px 0; }

.admin-analytics-chart { display: flex; flex-direction: column; gap: 6px; }

.admin-analytics-bar-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.admin-analytics-bar-label {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-analytics-bar-track {
  background: var(--item-hover-bg);
  border-radius: 4px;
  height: 16px;
  overflow: hidden;
}
.admin-analytics-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary-color) 65%, transparent), var(--primary-color));
  border-radius: 4px;
  transition: width 0.3s ease;
}
.admin-analytics-bar-value {
  color: var(--text-main);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The most recent period in each series — bolder label/value and a solid
   (non-gradient) fill, so the number an operator actually cares about right
   now doesn't read with the same visual weight as five weeks ago. */
.admin-analytics-bar-row.is-latest .admin-analytics-bar-label,
.admin-analytics-bar-row.is-latest .admin-analytics-bar-value {
  color: var(--text-main);
  font-weight: 700;
}
.admin-analytics-bar-row.is-latest .admin-analytics-bar-fill {
  background: var(--primary-color);
}
.admin-analytics-bar-row.is-latest .admin-analytics-bar-track {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) 35%, transparent);
}

@media (max-width: 640px) {
  .admin-analytics-bar-row { grid-template-columns: 70px 1fr; }
  .admin-analytics-bar-value { grid-column: 1 / -1; }
}

/* ── ANALYTICS: SUMMARY CARDS ──
   The headline numbers an operator wants before digging into any one
   chart — same card language as .admin-stats, but not clickable filters
   (there's no table here to filter), so a plainer div, not a button. */
.analytics-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.analytics-summary-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.analytics-summary-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.analytics-summary-label {
  font-size: 12px;
  color: var(--text-muted);
}
.analytics-summary-delta {
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.analytics-summary-delta.is-up { color: var(--success-color, #1a7f37); }
.analytics-summary-delta.is-down { color: var(--danger-color, #cf222e); }

.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-btn {
  border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-main);
  border-radius: 6px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s ease;
}
.admin-btn:hover { background: var(--item-hover-bg); }
.admin-btn.is-primary { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.admin-btn.is-danger { color: var(--danger-color); border-color: var(--danger-color); }

.admin-badge { display: inline-block; margin-top: 4px; font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.admin-badge.is-bad { background: var(--danger-bg); color: var(--danger-color); }
.admin-badge.is-warn { background: #fef3c7; color: #92400e; }

.admin-edit-row > td { background: var(--item-hover-bg); padding: 16px !important; }
.admin-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.admin-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.admin-field input {
  border: 1px solid var(--border-color); border-radius: 6px; padding: 7px 9px;
  font-size: 13px; background: var(--card-bg); color: var(--text-main); font-weight: 400;
}
.admin-edit-note { font-size: 12px; color: var(--text-muted); margin: 12px 0; }
.admin-edit-actions { display: flex; gap: 8px; }
.admin-inline-reports { margin-top: 14px; border-top: 1px solid var(--border-color); padding-top: 12px; }
.admin-inline-reports-title { margin: 0 0 8px 0; font-size: 13px; font-weight: 700; color: var(--text-main); }
.admin-inline-reports-list { display: grid; gap: 8px; }
.admin-inline-report-item { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 12px; }
.admin-inline-report-reason { margin: 0 0 4px 0; font-size: 12px; font-weight: 700; color: var(--text-main); }
.admin-inline-report-comment { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.admin-inline-report-actions { display: flex; gap: 8px; margin-top: 8px; }

.admin-pagination {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-top: 16px; padding: 12px 16px;
  background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px;
}
.admin-pagination-info { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.admin-pagination-nav { display: flex; gap: 8px; align-items: center; }
.admin-page-number { font-size: 13px; font-weight: 700; color: var(--text-main); padding: 0 4px; white-space: nowrap; }

/* ── ADMIN: MOBILE / NARROW VIEWPORTS ──
   Nothing below this used to have a breakpoint, so the toolbar's forced
   single-row layout and the seven-tile stat grid simply ran off the side of
   the screen on a phone instead of reflowing. */
@media (max-width: 900px) {
  .admin-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .admin-toolbar {
    flex-wrap: wrap !important;
  }
  .admin-toolbar .search-input-wrapper { flex-basis: 100%; min-width: 0; }
  .admin-toolbar .toolbar-select { flex: 1; }
  .admin-toolbar #admin-count { flex: 0 0 auto; }

  .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .admin-header { flex-direction: column; align-items: stretch; }
  .admin-header-actions { justify-content: flex-end; }

  .admin-pagination { flex-direction: column; align-items: stretch; text-align: center; }
  .admin-pagination-nav { justify-content: center; }
}

/* ── CALCULATOR PAGE DESIGN SYSTEM ── */
.calc-container { max-width: 1140px; margin: 0 auto; padding: 24px 16px 60px 16px; }
.calc-hero { text-align: center; margin-bottom: 32px; }
.calc-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  background: rgba(37, 99, 235, 0.12); color: var(--primary-color); border: 1px solid rgba(37, 99, 235, 0.25);
  margin-bottom: 12px;
}
.calc-hero h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 800; color: var(--text-main); letter-spacing: -0.02em; margin-bottom: 12px; line-height: 1.2; }
.calc-hero p { font-size: 15px; color: var(--text-muted); max-width: 760px; margin: 0 auto; line-height: 1.6; }
.preset-chips-container { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.preset-chip { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 20px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; color: var(--text-main); cursor: pointer; transition: all 0.2s ease; }
.preset-chip:hover { border-color: var(--primary-color); color: var(--primary-color); transform: translateY(-1px); }
.preset-chip.active { background: var(--primary-color); color: #ffffff; border-color: var(--primary-color); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3); }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin-top: 28px; }
@media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; } }
.calc-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 24px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); }
.card-title-group { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-color); padding-bottom: 14px; margin-bottom: 20px; }
.card-title-group h2 { font-size: 18px; font-weight: 800; color: var(--text-main); }
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 13px; font-weight: 700; color: var(--text-main); margin-bottom: 6px; }
.form-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.input-with-prefix { display: flex; align-items: center; border: 1px solid var(--border-color); border-radius: 8px; background: var(--input-bg); overflow: hidden; transition: border-color 0.2s ease; }
.input-with-prefix:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.input-prefix { padding: 10px 14px; background: rgba(0, 0, 0, 0.03); color: var(--text-muted); font-size: 14px; font-weight: 700; border-right: 1px solid var(--border-color); }
[data-theme="dark"] .input-prefix { background: rgba(255, 255, 255, 0.05); }
.calc-input { flex: 1; border: none; background: transparent; padding: 10px 14px; font-size: 15px; font-weight: 700; color: var(--text-main); outline: none; }
.calc-select { width: 100%; padding: 10px 14px; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-main); outline: none; transition: border-color 0.2s ease; }
.calc-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.segmented-control { display: flex; background: rgba(0, 0, 0, 0.04); border-radius: 8px; padding: 3px; border: 1px solid var(--border-color); }
[data-theme="dark"] .segmented-control { background: rgba(255, 255, 255, 0.05); }
.segmented-btn { flex: 1; padding: 8px; font-size: 12.5px; font-weight: 700; text-align: center; border-radius: 6px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.2s ease; }
.segmented-btn.active { background: var(--card-bg); color: var(--primary-color); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); }
.hero-metric-box { background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(16, 185, 129, 0.08) 100%); border: 1px solid rgba(37, 99, 235, 0.2); border-radius: 12px; padding: 18px; margin-bottom: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 500px) { .hero-metric-box { grid-template-columns: 1fr; } }
.hero-metric { display: flex; flex-direction: column; }
.hero-metric-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.hero-metric-val { font-size: clamp(20px, 3vw, 26px); font-weight: 900; color: var(--primary-color); line-height: 1.1; }
.hero-metric-val.emerald { color: var(--success-color); }
.hero-metric-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.breakdown-bar-container { margin: 18px 0; }
.breakdown-bar-label { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; display: flex; justify-content: space-between; }
.breakdown-bar { height: 12px; border-radius: 6px; overflow: hidden; display: flex; background: var(--border-color); }
.bar-segment { height: 100%; transition: width 0.3s ease; }
.bar-net { background: #10b981; } .bar-tax { background: #ef4444; } .bar-ni { background: #f59e0b; } .bar-pension { background: #3b82f6; } .bar-sl { background: #8b5cf6; }
.breakdown-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-main); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.pay-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 13px; }
.pay-table th, .pay-table td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--border-color); }
.pay-table th:first-child, .pay-table td:first-child { text-align: left; }
.pay-table th { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); background: rgba(0, 0, 0, 0.02); }
[data-theme="dark"] .pay-table th { background: rgba(255, 255, 255, 0.03); }
.pay-table td { font-weight: 600; }
.pay-table tr.row-total td { font-size: 14px; font-weight: 800; color: var(--success-color); border-top: 2px solid var(--border-color); border-bottom: none; background: rgba(16, 185, 129, 0.06); }
.projection-box { margin-top: 24px; background: rgba(37, 99, 235, 0.04); border: 1px dashed rgba(37, 99, 235, 0.3); border-radius: 12px; padding: 18px; }
.projection-title { font-size: 15px; font-weight: 800; color: var(--text-main); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.projection-slider-group { margin: 14px 0; }
.projection-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
@media (max-width: 500px) { .projection-stats { grid-template-columns: 1fr; } }
.proj-stat-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; }
.proj-stat-title { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.proj-stat-num { font-size: 17px; font-weight: 800; color: var(--primary-color); margin-top: 2px; }
.seo-guide-section { max-width: 1000px; margin: 50px auto 0 auto; padding: 0 16px; box-sizing: border-box; }
.guide-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 32px; margin-bottom: 32px; box-sizing: border-box; }
.guide-card h2 { font-size: 22px; font-weight: 800; color: var(--text-main); margin-bottom: 14px; letter-spacing: -0.01em; }
.guide-card h3 { font-size: 17px; font-weight: 700; color: var(--text-main); margin: 20px 0 10px 0; }
.guide-card p { font-size: 14.5px; color: var(--text-main); line-height: 1.7; margin-bottom: 14px; }
.guide-card ul { margin: 12px 0 16px 24px; font-size: 14px; line-height: 1.7; }
.faq-item { background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; }
.faq-item:hover { border-color: var(--primary-color); }
.faq-question { font-size: 14.5px; font-weight: 700; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; gap: 12px; user-select: none; cursor: pointer; list-style: none; }
.faq-question::-webkit-details-marker { display: none; }
.faq-icon { font-size: 10px; color: var(--text-muted); transition: transform 0.25s ease, color 0.25s ease; flex-shrink: 0; }
.faq-item.active .faq-icon, .faq-item[open] .faq-question .faq-icon { transform: rotate(180deg); color: var(--primary-color); }
.faq-answer { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-color); font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.faq-item.active .faq-answer, .faq-item[open] .faq-answer { display: block; animation: faqExpand 0.2s ease-out forwards; }
@keyframes faqExpand { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ── CALCULATOR MOBILE RESPONSIVE POLISH ── */
@media (max-width: 600px) {
  .calc-container { padding: 16px 10px 40px 10px; max-width: 100vw; overflow-x: hidden; box-sizing: border-box; }
  .calc-hero { margin-bottom: 20px; max-width: 100%; box-sizing: border-box; }
  .calc-hero h1 { font-size: 21px; margin-bottom: 8px; line-height: 1.25; }
  .calc-hero p { font-size: 13px; line-height: 1.5; }
  
  .preset-chips-container { gap: 6px; margin-top: 14px; width: 100%; max-width: 100%; box-sizing: border-box; justify-content: center; flex-wrap: wrap; }
  .preset-chip { padding: 6px 10px; font-size: 11.5px; line-height: 1; border-radius: 16px; max-width: 100%; box-sizing: border-box; }
  
  .calc-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; width: 100%; max-width: 100%; box-sizing: border-box; }
  .calc-card { padding: 16px 12px; border-radius: 14px; width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); }
  .card-title-group { margin-bottom: 14px; padding-bottom: 10px; width: 100%; box-sizing: border-box; }
  .card-title-group h2 { font-size: 15.5px; }
  
  .form-group { margin-bottom: 14px; width: 100%; box-sizing: border-box; }
  .form-label { font-size: 12px; margin-bottom: 4px; }
  .form-hint { font-size: 11px; line-height: 1.4; }
  .input-with-prefix { min-height: 44px; width: 100%; max-width: 100%; box-sizing: border-box; }
  .input-prefix { padding: 10px 10px; font-size: 13.5px; }
  .calc-input { font-size: 16px; padding: 8px 10px; width: 100%; max-width: 100%; box-sizing: border-box; }
  .calc-select { min-height: 44px; font-size: 13px; padding: 8px 8px; width: 100%; max-width: 100%; box-sizing: border-box; text-overflow: ellipsis; }
  
  .segmented-control { width: 100%; max-width: 100%; display: flex; flex-wrap: nowrap; gap: 2px; box-sizing: border-box; }
  .segmented-btn { flex: 1; padding: 9px 4px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  
  .hero-metric-box { padding: 12px 10px; gap: 8px; margin-bottom: 16px; border-radius: 10px; width: 100%; max-width: 100%; box-sizing: border-box; }
  .hero-metric-val { font-size: clamp(17px, 4.2vw, 21px); }
  .hero-metric-label { font-size: 9.5px; }
  .hero-metric-sub { font-size: 10px; }
  
  .breakdown-bar-container { margin: 14px 0; width: 100%; box-sizing: border-box; }
  .breakdown-bar-label { font-size: 11px; margin-bottom: 6px; }
  .breakdown-legend { gap: 6px 8px; margin-top: 8px; width: 100%; max-width: 100%; box-sizing: border-box; }
  .legend-item { font-size: 10.5px; gap: 4px; }
  
  .pay-table-wrapper { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 14px; box-sizing: border-box; }
  .pay-table { font-size: 11.5px; width: 100%; table-layout: fixed; word-break: break-word; }
  .pay-table th:first-child, .pay-table td:first-child { width: 44%; }
  .pay-table th:nth-child(2), .pay-table td:nth-child(2) { width: 28%; }
  .pay-table th:nth-child(3), .pay-table td:nth-child(3) { width: 28%; }
  .pay-table th, .pay-table td { padding: 7px 4px; }
  .pay-table tr.row-total td { font-size: 12.5px; }
  
  .projection-box { padding: 12px 10px; margin-top: 16px; border-radius: 10px; width: 100%; max-width: 100%; box-sizing: border-box; }
  .projection-title { font-size: 13.5px; gap: 6px; }
  .projection-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; width: 100%; box-sizing: border-box; }
  .proj-stat-card { padding: 8px 6px; border-radius: 8px; width: 100%; box-sizing: border-box; }
  .proj-stat-title { font-size: 9.5px; }
  .proj-stat-num { font-size: 13.5px; margin-top: 1px; }
  
  .seo-guide-section { margin-top: 28px; padding: 0 8px; width: 100%; max-width: 100%; box-sizing: border-box; }
  .guide-card { padding: 16px 12px; border-radius: 12px; margin-bottom: 16px; width: 100%; max-width: 100%; box-sizing: border-box; }
  .guide-card h2 { font-size: 17.5px; margin-bottom: 8px; }
  .guide-card h3 { font-size: 14.5px; margin: 12px 0 6px 0; }
  .guide-card p, .guide-card ul { font-size: 13px; line-height: 1.5; }
  .faq-item { padding: 12px 10px; width: 100%; max-width: 100%; box-sizing: border-box; }
  .faq-question { font-size: 13px; }
  .faq-answer { font-size: 12px; margin-top: 8px; padding-top: 8px; }
}

.seo-guide-section a:not(.btn):not([class*="btn-"]):not([class*="job-cta"]),
.guide-card a:not(.btn):not([class*="btn-"]):not([class*="job-cta"]),
.faq-answer a:not(.btn):not([class*="btn-"]):not([class*="job-cta"]),
.home-content p a:not(.home-sources a):not(.data-provenance a):not(.btn):not([class*="btn-"]):not([class*="job-cta"]),
.home-content ul a:not(.btn):not([class*="btn-"]):not([class*="job-cta"]),
.job-detail-card a:not(.btn):not([class*="btn-"]):not([class*="job-cta"]),
.job-detail-description a:not(.btn):not([class*="btn-"]):not([class*="job-cta"]),
.job-detail-description-body a:not(.btn):not([class*="btn-"]):not([class*="job-cta"]),
.main-content p a:not(.home-sources a):not(.data-provenance a):not(.btn):not([class*="btn-"]):not([class*="job-cta"]),
.main-content li a:not(.btn):not([class*="btn-"]):not([class*="job-cta"]) {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease, text-decoration 0.15s ease;
}

.seo-guide-section a:not(.btn):not([class*="btn-"]):not([class*="job-cta"]):hover,
.guide-card a:not(.btn):not([class*="btn-"]):not([class*="job-cta"]):hover,
.faq-answer a:not(.btn):not([class*="btn-"]):not([class*="job-cta"]):hover,
.home-content p a:not(.home-sources a):not(.data-provenance a):not(.btn):not([class*="btn-"]):not([class*="job-cta"]):hover,
.home-content ul a:not(.btn):not([class*="btn-"]):not([class*="job-cta"]):hover,
.job-detail-card a:not(.btn):not([class*="btn-"]):not([class*="job-cta"]):hover,
.job-detail-description a:not(.btn):not([class*="btn-"]):not([class*="job-cta"]):hover,
.job-detail-description-body a:not(.btn):not([class*="btn-"]):not([class*="job-cta"]):hover,
.main-content p a:not(.home-sources a):not(.data-provenance a):not(.btn):not([class*="btn-"]):not([class*="job-cta"]):hover,
.main-content li a:not(.btn):not([class*="btn-"]):not([class*="job-cta"]):hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

/* Ensure button link text is crisp white across all themes and contexts */
a.btn-apply-table,
a.job-cta,
a.btn-secondary-auth,
a.btn-primary,
a.btn.primary,
.btn.primary,
.btn-apply-table,
.job-cta,
.btn-secondary-auth {
  color: #ffffff !important;
  text-decoration: none !important;
}

a.btn-apply-table:hover,
a.job-cta:hover,
a.btn-secondary-auth:hover,
a.btn-primary:hover,
a.btn.primary:hover,
.btn.primary:hover,
.btn-apply-table:hover,
.job-cta:hover,
.btn-secondary-auth:hover {
  color: #ffffff !important;
  text-decoration: none !important;
}

@media (max-width: 380px) {
  .calc-container { padding: 10px 6px 28px 6px; }
  .calc-card { padding: 12px 8px; }
  .hero-metric-box { grid-template-columns: 1fr; gap: 8px; }
  .projection-stats { grid-template-columns: 1fr; }
  .preset-chip { padding: 5px 6px; font-size: 10.5px; }
}

/* Tablet. This block's opening line was lost in the paste that introduced it
   (commit 7739712, a 188-line pure insertion), leaving a stray
   "}: 6px 10px; margin-top: 8px; }" and roughly twenty orphaned rules.
   The consequence was not cosmetic: because the malformed declaration ends at
   the first "}", every rule after it parsed as a normal TOP-LEVEL rule and
   applied at all viewport widths, so these tablet sizes were silently in force
   on desktop too. Restoring the wrapper puts them back on tablet only.
   The first declaration is reconstructed: the surviving fragment was
   ": 6px 10px; margin-top: 8px; }", .breakdown-legend is the only legend
   container in this file, and its sibling override in the 600px block above is
   "gap: 6px 8px; margin-top: 8px". */
@media (max-width: 768px) {
  .breakdown-legend { gap: 6px 10px; margin-top: 8px; }
  .legend-item { font-size: 11px; gap: 4px; }
  
  .pay-table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 14px; }
  .pay-table { font-size: 12px; }
  .pay-table th, .pay-table td { padding: 8px 5px; }
  .pay-table tr.row-total td { font-size: 13px; }
  
  .projection-box { padding: 14px 12px; margin-top: 16px; border-radius: 10px; }
  .projection-title { font-size: 14px; gap: 6px; }
  .projection-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
  .proj-stat-card { padding: 10px 8px; border-radius: 8px; }
  .proj-stat-title { font-size: 10px; }
  .proj-stat-num { font-size: 14.5px; margin-top: 1px; }
  
  .seo-guide-section { margin-top: 32px; padding: 0 10px; }
  .guide-card { padding: 18px 14px; border-radius: 12px; margin-bottom: 18px; }
  .guide-card h2 { font-size: 18px; margin-bottom: 8px; }
  .guide-card h3 { font-size: 15px; margin: 14px 0 6px 0; }
  .guide-card p, .guide-card ul { font-size: 13px; line-height: 1.55; }
  .faq-item { padding: 12px; }
  .faq-question { font-size: 13.5px; }
  .faq-answer { font-size: 12.5px; margin-top: 8px; padding-top: 8px; }
}

@media (max-width: 380px) {
  .calc-container { padding: 12px 8px 32px 8px; }
  .calc-card { padding: 14px 10px; }
  .hero-metric-box { grid-template-columns: 1fr; gap: 10px; }
  .projection-stats { grid-template-columns: 1fr; }
  .preset-chip { padding: 5px 8px; font-size: 11px; }
}


/* ─────────────────────────────────────────────────────────────────
   HOMEPAGE CRAWLABLE CONTENT
   The hub nav, the long-form section and the FAQ below the board. All of it
   is real content for readers as much as crawlers, so it is styled as a
   proper article column rather than hidden or shrunk into a footer mat.
   ───────────────────────────────────────────────────────────────── */

.home-noscript {
  margin-top: 28px;
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.home-noscript h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 10px 0;
}

.home-noscript ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.9;
}

.home-noscript a {
  color: var(--primary-color);
}

.hub-nav {
  margin-top: 36px;
  padding: 22px 20px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.hub-nav > h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 16px 0;
}

.hub-nav-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.hub-col h3 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 8px 0;
}

.hub-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hub-col a {
  font-size: 13.5px;
  color: var(--primary-color);
  text-decoration: none;
  line-height: 1.4;
}

.hub-col a:hover {
  text-decoration: underline;
}

/* ── HOME GUIDANCE & FAQ PREMIUM DESIGN SYSTEM ── */
.home-guidance-container {
  margin-top: 40px;
}

.home-guidance-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 16px 0;
}

.guidance-toggle-wrapper {
  margin-top: 12px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.guidance-toggle-wrapper:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.guidance-toggle-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  gap: 16px;
}

.guidance-toggle-summary::-webkit-details-marker {
  display: none;
}

.guidance-toggle-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.guidance-toggle-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-main);
}

.guidance-toggle-btn {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.toggle-icon {
  font-size: 11px;
  transition: transform 0.2s ease;
}

.guidance-toggle-wrapper[open] .toggle-icon {
  transform: rotate(180deg);
}

.guidance-toggle-wrapper[open] .guidance-toggle-summary {
  border-bottom: 1px solid var(--border-color);
  background: var(--card-bg);
}

.guidance-toggle-wrapper .home-content {
  margin-top: 0;
  padding: 28px 24px 32px 24px;
}

.guidance-section-header {
  margin-bottom: 28px;
}

.guidance-badge,
.feature-icon-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--primary-color);
  background: rgba(37, 99, 235, 0.08);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

[data-theme="dark"] .guidance-badge,
[data-theme="dark"] .feature-icon-badge {
  background: rgba(96, 165, 250, 0.14);
}

.guidance-main-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.3px;
  margin-bottom: 10px;
  line-height: 1.3;
}

.home-intro-lead {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 900px;
}

.home-grade-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 24px 0 36px 0;
}

.home-grade-card {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 22px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.home-grade-card:hover {
  border-color: var(--primary-color);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.home-grade-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.home-grade-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

.grade-salary-badge {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--primary-color);
  background: rgba(37, 99, 235, 0.08);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

[data-theme="dark"] .grade-salary-badge {
  background: rgba(96, 165, 250, 0.14);
}

.home-grade-card p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
  flex-grow: 1;
}

.home-card-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.15s ease;
}

.home-card-link:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.home-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-bottom: 24px;
}

.home-feature-card {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.home-feature-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}

.home-feature-card h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
  margin: 6px 0 12px 0;
  scroll-margin-top: 80px;
}

.home-feature-card h3 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-main);
  margin: 12px 0 8px 0;
}

.home-feature-card p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0 0 12px 0;
}

.home-feature-card p strong {
  color: var(--text-main);
}

.home-feature-card p:last-child {
  margin-bottom: 0;
}

.clearance-list {
  margin: 8px 0 14px 0;
  padding-left: 18px;
}

.clearance-list li {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.clearance-list li strong {
  color: var(--text-main);
}

.home-faq-section {
  margin-top: 16px;
  margin-bottom: 16px;
}

.home-faq-section h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin: 4px 0 12px 0;
}

.home-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.home-faq-card {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 16px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.home-faq-card:hover {
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.home-faq-card h3 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
  margin: 0 0 6px 0;
}

.home-faq-card p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

.home-sources {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-color);
  font-size: 11.5px;
  color: var(--text-muted);
  opacity: 0.75;
  line-height: 1.55;
}

p.home-sources a,
.home-sources a,
p.data-provenance a,
.data-provenance a {
  color: var(--text-muted) !important;
  text-decoration: none !important;
  font-weight: 500;
  transition: color 0.15s ease, text-decoration 0.15s ease;
}

p.home-sources a:hover,
.home-sources a:hover,
p.data-provenance a:hover,
.data-provenance a:hover {
  color: var(--primary-color) !important;
  text-decoration: underline !important;
}

@media (max-width: 768px) {
  .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* .panel-header stacks vertically here, and align-items: flex-start above
     pulls every stacked child to the left edge — including the "1 to 50 of
     1,283 jobs" badge, which desktop keeps on the right via the row layout's
     justify-content: space-between. Pin just this child back to the right so
     mobile doesn't lose that alignment. */
  .panel-header .actions {
    align-self: flex-end;
  }

  .hero-heading {
    font-size: 19px;
  }

  .hub-nav {
    padding: 22px 18px;
    border-radius: 12px;
  }

  .home-grade-grid,
  .home-feature-grid,
  .home-faq-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .guidance-main-title {
    font-size: 18px;
  }

  .home-content p,
  .home-content li {
    font-size: 13.5px;
  }
}

/* Hub Page Filter CTA Banner */
.hub-filter-banner {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 20px 0 24px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hub-filter-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hub-filter-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.hub-filter-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0;
}

.hub-filter-banner .btn {
  color: #ffffff !important;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .hub-filter-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    /* Same double-padding problem as the vacancy cards (see the
       .job-detail-card:has(#vacancies-table) rule above): this banner
       sits in the same 20px-padded wrapper but isn't inside
       .table-container, so it never got that fix and stayed narrower
       than the cards below it - the exact "doesn't match" gap. Same
       -12px correction, same result: both end up the same width. */
    margin-left: 0;
    margin-right: 0;
    /* Pressing/tapping to follow the link shouldn't highlight the title
       and description text underneath, same reasoning as the vacancy
       cards - this reads as one tappable unit, not a paragraph to
       select. */
    user-select: none;
    -webkit-user-select: none;
  }
  .hub-filter-banner .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Phone gutters. The page's own 24px side margins, the wrapper's 20px and
   the card's 16px stacked to about 60px per side on hub pages, which is
   what made vacancy cards narrow. One 12px page gutter, and the wrapper
   keeps only a little internal padding, so cards get the width back.
   Kept above zero deliberately: edge-to-edge looked stripped. */
@media (max-width: 640px) {
  .main-content {
    padding: 0 12px;
    margin: 16px auto;
  }
  .job-detail-card {
    padding: 16px 12px;
  }
}

/* ─── Floating Site Feedback Button & Modal ───────────────────────── */
.site-feedback-floating-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 850;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.site-feedback-floating-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  border-color: var(--primary-color);
}

.site-feedback-floating-btn svg {
  color: var(--primary-color);
  flex-shrink: 0;
}

[data-theme="dark"] .site-feedback-floating-btn {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .site-feedback-floating-btn:hover {
  border-color: #60a5fa;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .site-feedback-floating-btn svg {
  color: #60a5fa;
}

@media (max-width: 640px) {
  .site-feedback-floating-btn {
    bottom: 16px;
    right: 16px;
    padding: 7px 12px;
    font-size: 12px;
  }
}

.modal-feedback-content {
  max-width: 480px;
}

/* Quiet corner prompt above the Feedback button. Fixed, so it never moves page
   content; hidden on phone-sized screens where it would cover the page. */
.feedback-nudge {
  position: fixed;
  bottom: 72px;
  right: 24px;
  z-index: 840;
  width: 260px;
  padding: 14px 32px 14px 14px;
  background: var(--card-bg);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}
.feedback-nudge[hidden] {
  display: none;
}
.feedback-nudge-text {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.feedback-nudge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.feedback-nudge-btn {
  padding: 6px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-main);
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  cursor: pointer;
}
.feedback-nudge-btn:hover {
  border-color: var(--primary-color);
}
.feedback-nudge-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 28px;
  height: 28px;
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted);
  background: none;
  border: 0;
  cursor: pointer;
}
[data-theme="dark"] .feedback-nudge {
  background: #1e293b;
  border-color: #334155;
}
@media (max-width: 640px) {
  .feedback-nudge {
    display: none;
  }
}

.feedback-advert-note {
  margin: 0 0 12px;
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.feedback-meta-note {
  margin-top: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-muted);
}