/*
  Design tokens — navy + brass, warm-neutral surfaces (not cool grey),
  IBM Plex Sans for text, IBM Plex Mono reserved for numbers (stats,
  prices, counts, dates in tables) so figures always line up and read
  as data, not just text that happens to be a number.
*/
:root {
  --ink-950: #0a1420;
  --ink-900: #10213d;
  --ink-800: #1b2e52;
  --ink-700: #2a4470;
  --ink-100: #eef1f7;

  --brass-700: #8a5f14;
  --brass-600: #a97418;
  --brass-500: #c08a2e;
  --brass-400: #d0a655;
  --brass-100: #f6ead0;

  --success-600: #2f7a4d;
  --success-100: #e3f3e8;
  --warning-600: #a8710a;
  --warning-100: #fbedd0;
  --danger-600: #b3261e;
  --danger-100: #fbe3e1;
  --info-600: #2563a6;
  --info-100: #e2eefb;

  --surface: #ffffff;
  --surface-muted: #f7f5f1;
  --border: #e7e1d5;
  --border-strong: #d8d0bf;
  --text: #1a1f2e;
  --text-muted: #6d6559;

  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --shadow-sm: 0 1px 2px rgba(16,33,61,0.06);
  --shadow-md: 0 2px 8px rgba(16,33,61,0.08), 0 1px 2px rgba(16,33,61,0.06);
  --shadow-lift: 0 4px 14px rgba(16,33,61,0.10);
  --radius: 10px;
  --radius-sm: 7px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-muted);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a.link { color: var(--ink-900); font-weight: 500; }
a.link:hover { color: var(--brass-600); }
a:focus-visible, button:focus-visible, .sidebar-link:focus-visible, .topbar-icon-btn:focus-visible,
.quick-action-link:focus-visible, .topbar-profile-btn:focus-visible, .topbar-menu-link:focus-visible {
  outline: 2px solid var(--brass-500); outline-offset: 2px;
}

h1 { font-size: 21px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 14px; font-weight: 600; margin: 0; }

/* Numbers as data: any element opting into tabular figures */
.stat-value, .job-meta, .legal-price, .chip, .completion-label,
input[type=number] { font-variant-numeric: tabular-nums; }

/* Layout */
.app-shell { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: 226px;
  flex-shrink: 0;
  background: var(--ink-900);
  background-image: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
  color: rgba(238,241,247,0.85);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sidebar-header {
  height: 58px; display: flex; align-items: center; gap: 10px; padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-logo {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--brass-400), var(--brass-600));
  color: var(--ink-950); font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.sidebar-title { color: #fff; font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.sidebar-nav { padding: 10px; flex: 1; }
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm); margin-bottom: 1px;
  font-size: 13px; font-weight: 500; color: rgba(238,241,247,0.65);
  border-left: 2px solid transparent;
  transition: background-color 120ms ease, color 120ms ease;
}
.sidebar-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sidebar-link.active {
  background: rgba(192,138,46,0.14); color: #fff;
  border-left: 2px solid var(--brass-500);
  padding-left: 10px;
}
.sidebar-link .icon { width: 16px; text-align: center; opacity: 0.9; }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 58px; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 22px;
}
.topbar-welcome { font-size: 13px; color: var(--text-muted); }
.topbar-welcome strong { color: var(--text); font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.completion-track { width: 96px; height: 6px; border-radius: 3px; background: var(--ink-100); overflow: hidden; }
/* Default/fallback color — pages set the real color inline via completion_bar_color()
   (red → amber → green based on how filled-out the profile is), this just covers
   any spot that doesn't pass one. */
/* display:block is required here, not cosmetic — .completion-fill is a <span>,
   and width/height on an inline element are ignored by the CSS spec, so
   without this the fill never rendered at all (just an empty gray track). */
.completion-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--brass-500), var(--brass-400)); transition: width .3s ease, background-color .3s ease; }
.completion-label { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }

.content { flex: 1; overflow-y: auto; padding: 26px; }
.content-narrow { max-width: 720px; margin: 0 auto; }
.content-medium { max-width: 900px; margin: 0 auto; }
.content-wide { max-width: 1080px; margin: 0 auto; }

.page-header { margin-bottom: 22px; }
.page-header h1 { color: var(--ink-900); }
.page-header p { margin: 5px 0 0; color: var(--text-muted); font-size: 13px; }

/* Cards — deliberately NOT uniform: plain content cards stay quiet and
   flat; stat cards (the numbers people scan first) get real elevation
   so the eye knows where to land first. */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 17px; border-bottom: 1px solid var(--border);
}
.card-header h2 { color: var(--ink-900); }
.card-body { padding: 17px; }
.card-body.tight { padding: 0; }
.card-list > div { padding: 14px 17px; border-bottom: 1px solid var(--border); transition: background-color 120ms ease; }
.card-list > div:last-child { border-bottom: none; }
.card-list > a:hover, .card-list > div:hover { background: var(--surface-muted); }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.stat-card {
  padding: 17px; border-color: var(--border); box-shadow: var(--shadow-sm);
  transition: box-shadow 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.stat-value { font-family: var(--font-mono); font-size: 25px; font-weight: 600; color: var(--ink-900); letter-spacing: -0.01em; }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.stat-card:hover { border-color: var(--brass-500); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
a.stat-card { display: block; }

/* Forms */
label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=file], input[type=date], textarea, select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: 13px; font-family: inherit; background: #fff; color: var(--text);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--brass-500);
  box-shadow: 0 0 0 3px rgba(192,138,46,0.18);
}
textarea { resize: vertical; }
.field { margin-bottom: 15px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-error { color: var(--danger-600); font-size: 12px; margin-top: 4px; }
.checkbox-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; }
.checkbox-row input[type="checkbox"] { flex-shrink: 0; margin-top: 3px; }
.phone-input-group { display: flex; gap: 0; }
.phone-input-group .phone-prefix {
  display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--border);
  border-right: none; border-radius: 8px 0 0 8px; background: var(--surface-muted, #f3f1eb);
  font-size: 13px; color: var(--text-muted); flex-shrink: 0;
}
.phone-input-group input { border-radius: 0 8px 8px 0; }

.mode-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mode-choice-option {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 3px; min-width: 0; border: 1.5px solid var(--border); border-radius: 8px;
  padding: 14px 6px 10px; font-size: 12px; cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.mode-choice-option:hover { border-color: var(--border-strong); }
.mode-choice-option:has(input:checked) {
  border-color: var(--brass-500); background: var(--brass-100);
  box-shadow: 0 0 0 1px var(--brass-500) inset;
}
.mode-choice-option input { position: absolute; top: 8px; left: 8px; margin: 0; }
.mode-choice-option .mode-choice-label { font-weight: 600; font-size: 13px; color: var(--ink-900); overflow-wrap: break-word; }
.mode-choice-option .mode-choice-price { font-size: 11px; color: var(--text-muted); line-height: 1.35; overflow-wrap: break-word; }
@media (max-width: 480px) {
  .mode-choice { grid-template-columns: 1fr; }
  .mode-choice-option { flex-direction: row; text-align: left; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 12px 10px 34px; }
  .mode-choice-option input { top: 50%; transform: translateY(-50%); }
}

.locked-panel { border: 1px dashed var(--border); border-radius: 8px; padding: 24px; text-align: center; }
.locked-panel .locked-icon { font-size: 22px; margin-bottom: 8px; }

/* Paywall teaser: real content shown blurred behind an overlay CTA, instead
   of hiding it outright — gives an unpaid user a reason to subscribe. */
.paywall-wrap { position: relative; }
.paywall-blur { filter: blur(5px); pointer-events: none; user-select: none; max-height: 640px; overflow: hidden; }
.paywall-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px; z-index: 2;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--surface, #fff) 42%);
}
.paywall-overlay .paywall-icon { font-size: 26px; }
.paywall-overlay p { font-size: 14px; max-width: 360px; margin: 0; color: var(--text); }
.paywall-overlay .btn { margin-top: 4px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px;
  padding: 9px 15px; cursor: pointer; font-family: inherit;
  transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease;
}
.btn-primary { background: var(--ink-900); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--ink-800); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-secondary { background: #fff; color: var(--ink-900); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--surface-muted); border-color: var(--ink-700); }
.btn-danger { background: var(--danger-600); color: #fff; }
.btn-sm { padding: 6px 11px; font-size: 12px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--brass-500); outline-offset: 2px; }

/* Chips */
.chip {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: 2px 10px; font-size: 12px; font-weight: 600;
}
.chip-neutral { background: var(--ink-100); color: var(--ink-800); }
.chip-info { background: var(--info-100); color: var(--info-600); }
.chip-success { background: var(--success-100); color: var(--success-600); }
.chip-warning { background: var(--warning-100); color: var(--warning-600); }
.chip-danger { background: var(--danger-100); color: var(--danger-600); }
.chip-brass { background: var(--brass-100); color: var(--brass-700); }

/* Alerts / flash */
.alert { padding: 11px 15px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 15px; border: 1px solid transparent; }
.alert-success { background: var(--success-100); color: var(--success-600); border-color: rgba(47,122,77,0.18); }
.alert-danger { background: var(--danger-100); color: var(--danger-600); border-color: rgba(179,38,30,0.18); }
.alert-warning { background: var(--warning-100); color: var(--warning-600); border-color: rgba(168,113,10,0.18); }

/* Job cards / lists */
.job-card { padding: 17px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; transition: box-shadow 140ms ease; }
.job-card:hover { box-shadow: var(--shadow-md); }
.job-title { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.job-company { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.job-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.job-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }

.empty-state {
  border: 1px dashed var(--border-strong); background: #fff; border-radius: var(--radius);
  padding: 36px 24px; text-align: center; color: var(--text-muted); font-size: 13px;
}

.filters-bar { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 10px; margin-bottom: 16px; }

/* Auth pages */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--surface-muted); padding: 16px; }
.auth-box { width: 100%; max-width: 368px; }
.auth-logo { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.auth-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-md); }
.auth-footer { text-align: center; margin-top: 18px; font-size: 13px; color: var(--text-muted); }

/* Auth tabs — Log in / Sign up pill switcher atop the form card on the
   split auth pages. Each tab is a real link to the other page (no JS,
   no merged form logic) so it reads as one entry surface with two tabs. */
.auth-tabs { display: flex; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 10px; padding: 3px; margin-bottom: 18px; }
.auth-tabs a { flex: 1; text-align: center; padding: 8px 0; font-size: 13px; font-weight: 600; color: var(--text-muted); border-radius: 7px; text-decoration: none; }
.auth-tabs a.active { background: #fff; color: var(--ink-900); box-shadow: var(--shadow-sm); }

/* Register step wizard — three .reg-step panels shown one at a time by JS,
   all inside the same <form> so the existing single-POST backend logic is
   untouched. Falls back to one continuous scroll if JS is unavailable
   (handled by register.php not adding the no-js class in that case). */
.reg-progress-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-bottom: 7px; }
.reg-progress { display: flex; gap: 6px; margin-bottom: 18px; }
.reg-progress .dot { flex: 1; height: 4px; border-radius: 2px; background: var(--border); }
.reg-progress .dot.active, .reg-progress .dot.done { background: var(--brass-500); }
.reg-step { display: block; }
.has-js .reg-step { display: none; }
.has-js .reg-step.active { display: block; }
.reg-step-actions { display: flex; gap: 10px; margin-top: 20px; }
.reg-step-actions .btn { flex: 1; }
.reg-step-actions .btn-secondary { flex: 0 0 96px; }
.js-only { display: none; }
.has-js .js-only { display: flex; }

/* Landing — a considered typographic hero, no stock imagery needed */
.landing { min-height: 100vh; background: var(--ink-900); background-image: radial-gradient(1200px 600px at 15% -10%, rgba(192,138,46,0.15), transparent), linear-gradient(180deg, var(--ink-900), var(--ink-950)); color: #fff; display: flex; flex-direction: column; }
.landing-inner { max-width: 720px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px; }
.landing-badge {
  display: inline-flex; width: fit-content; background: rgba(192,138,46,0.16);
  color: var(--brass-100); border: 1px solid rgba(192,138,46,0.3);
  border-radius: 999px; padding: 5px 13px; font-size: 12px; font-weight: 500; margin-bottom: 14px;
}
.landing h1 { font-size: 40px; line-height: 1.16; max-width: 480px; font-weight: 600; letter-spacing: -0.015em; }
.landing p { color: rgba(238,241,247,0.72); max-width: 480px; margin-top: 13px; font-size: 15px; line-height: 1.6; }
.landing-actions { display: flex; gap: 10px; margin-top: 26px; }
.landing-footer { border-top: 1px solid rgba(255,255,255,0.08); text-align: center; padding: 15px; font-size: 12px; color: rgba(238,241,247,0.5); }

/* Home — two-audience landing page (job seekers / employers) replacing the
   single-CTA .landing hero above on the candidate root (index.php). Keeps
   .landing-footer for the legal strip at the bottom. */
.home-nav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1120px; margin: 0 auto; padding: 20px 24px; color: #fff; position: relative; z-index: 2;
}
.home-nav-logo { display: flex; align-items: center; gap: 9px; color: #fff; }
.home-nav-logo strong { font-size: 15px; }
.home-nav-actions { display: flex; align-items: center; gap: 18px; }
.home-nav-actions a.link-ghost { color: rgba(238,241,247,0.78); font-size: 13.5px; text-decoration: none; }
.home-nav-actions a.link-ghost:hover { color: #fff; }
.home-nav-actions .btn { padding: 8px 16px; font-size: 13px; }

.home-hero {
  background: var(--ink-900);
  background-image: radial-gradient(1200px 600px at 15% -10%, rgba(192,138,46,0.15), transparent), linear-gradient(180deg, var(--ink-900), var(--ink-950));
  color: #fff; padding-bottom: 56px;
}
.home-hero-inner { max-width: 1120px; margin: 0 auto; padding: 8px 24px 0; text-align: center; }
.home-hero-badge {
  display: inline-flex; background: rgba(192,138,46,0.16); color: var(--brass-100);
  border: 1px solid rgba(192,138,46,0.3); border-radius: 999px; padding: 5px 13px;
  font-size: 12px; font-weight: 500; margin-bottom: 16px;
}
.home-hero h1 { font-size: 36px; line-height: 1.18; font-weight: 600; letter-spacing: -0.015em; max-width: 640px; margin: 0 auto; }
.home-hero > .home-hero-inner > p { color: rgba(238,241,247,0.72); max-width: 540px; margin: 13px auto 0; font-size: 15px; line-height: 1.6; }

.home-audience { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1000px; margin: 34px auto 0; padding: 0 24px; }
.home-audience-card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
  padding: 28px 26px; text-align: left; backdrop-filter: blur(2px);
}
.home-audience-card.is-employer { background: rgba(255,255,255,0.97); color: var(--text); border-color: transparent; }
.home-audience-icon {
  width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 19px; margin-bottom: 14px; background: rgba(192,138,46,0.22); color: var(--brass-100);
}
.home-audience-card.is-employer .home-audience-icon { background: var(--brass-100); color: var(--ink-900); }
.home-audience-card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.home-audience-card p.kicker { color: rgba(238,241,247,0.68); font-size: 13.5px; margin-top: 5px; line-height: 1.55; min-height: 40px; }
.home-audience-card.is-employer p.kicker { color: var(--text-muted); }
.home-audience-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.home-audience-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: rgba(238,241,247,0.86); line-height: 1.5; }
.home-audience-card.is-employer .home-audience-list li { color: var(--text); }
.home-audience-list li .tick {
  flex-shrink: 0; width: 17px; height: 17px; border-radius: 50%; background: rgba(192,138,46,0.22);
  color: var(--brass-100); display: flex; align-items: center; justify-content: center; font-size: 10px; margin-top: 1px;
}
.home-audience-card.is-employer .home-audience-list li .tick { background: rgba(192,138,46,0.14); color: var(--brass-500); }
.home-audience-card .btn { margin-top: 20px; width: 100%; justify-content: center; }

.home-trust { background: var(--surface-muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.home-trust-inner {
  max-width: 1120px; margin: 0 auto; padding: 26px 24px; display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; text-align: center;
}
.home-trust-inner div strong { display: block; font-size: 22px; font-weight: 700; color: var(--ink-900); }
.home-trust-inner div span { font-size: 12.5px; color: var(--text-muted); }

@media (max-width: 760px) {
  .home-audience { grid-template-columns: 1fr; }
  .home-hero h1 { font-size: 28px; }
  .home-nav-actions a.link-ghost { display: none; }
}

/* Auth split — a two-column entry page (brand story left, form right) used
   by the candidate panel's login/register pages. Separate classes from
   .auth-shell above, which stays the simple single-column layout used by
   forgot-password, reset-password, verify-email, and the company/admin
   panels — none of that is touched. */
.auth-split { min-height: 100vh; display: flex; }
.auth-split-brand {
  flex: 1 1 44%; display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px 44px; color: #fff; position: relative; overflow: hidden;
  background: var(--ink-900);
  background-image: radial-gradient(1100px 560px at 10% -10%, rgba(192,138,46,0.18), transparent),
                     linear-gradient(180deg, var(--ink-900), var(--ink-950));
}
.auth-split-logo { display: flex; align-items: center; gap: 9px; }
.auth-split-brand h2 { font-size: 32px; line-height: 1.18; font-weight: 600; letter-spacing: -0.015em; margin-top: 40px; max-width: 420px; }
.auth-split-brand > p.lede { color: rgba(238,241,247,0.72); font-size: 14.5px; line-height: 1.6; margin-top: 12px; max-width: 400px; }
.auth-split-features { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.auth-split-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: rgba(238,241,247,0.88); line-height: 1.5; }
.auth-split-features li .tick {
  flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%; background: rgba(192,138,46,0.22);
  color: var(--brass-100); display: flex; align-items: center; justify-content: center; font-size: 11px; margin-top: 1px;
}
.auth-split-stats { display: flex; gap: 22px; margin-top: auto; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.1); }
.auth-split-stats div strong { display: block; font-size: 19px; font-weight: 700; color: #fff; }
.auth-split-stats div span { font-size: 11.5px; color: rgba(238,241,247,0.6); }
.auth-split-form-side { flex: 1 1 56%; display: flex; align-items: center; justify-content: center; background: var(--surface-muted); padding: 32px 24px; overflow-y: auto; }
.auth-split-form-side .auth-box { width: 100%; max-width: 380px; }
@media (max-width: 860px) {
  .auth-split-brand { display: none; }
  .auth-split-form-side { flex: 1 1 100%; }
}

.skill-tag {
  display: inline-flex; align-items: center; gap: 6px; background: var(--ink-100);
  color: var(--ink-800); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 500;
}
.skill-tag button { border: none; background: none; cursor: pointer; color: rgba(27,46,82,0.55); font-size: 14px; line-height: 1; }
.skill-tag button:hover { color: var(--danger-600); }

@media (max-width: 720px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .field-row { grid-template-columns: 1fr; }
  .filters-bar { grid-template-columns: 1fr 1fr; }
}

/* ---- Public legal pages (Terms, Privacy, Refunds, Pricing, Contact) ---- */
.legal-body { background: var(--surface-muted); }
.legal-top { display:flex; align-items:center; justify-content:space-between; padding:15px 26px; background:#fff; border-bottom:1px solid var(--border); }
.legal-brand { display:flex; align-items:center; gap:9px; font-weight:600; font-size:14px; color: var(--ink-900); }
.legal-top nav a { margin-left:18px; font-size:13px; font-weight:500; color:var(--ink-900); }
.legal-top nav a:hover { color: var(--brass-600); }
.legal { max-width:760px; margin:0 auto; padding:32px 24px 44px; }
.legal h1 { font-size:26px; margin:0 0 5px; color: var(--ink-900); }
.legal h2 { font-size:15px; margin:24px 0 7px; color: var(--ink-900); }
.legal p, .legal li { font-size:14px; line-height:1.7; }
.legal ul { padding-left:20px; margin:6px 0 10px; }
.legal a { color:var(--ink-900); text-decoration:underline; text-decoration-color: var(--border-strong); }
.legal a:hover { color: var(--brass-600); }
.legal .legal-updated { color:var(--text-muted); font-size:12px; margin:0 0 20px; }
.legal-callout { background:var(--brass-100); border:1px solid var(--brass-400); border-radius:var(--radius-sm); padding:13px 17px; font-size:14px; margin:0 0 8px; }
.legal-plans { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0; }
.legal-plan, .legal-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; box-shadow: var(--shadow-sm); }
.legal-plan h2, .legal-card h2 { margin-top:0; }
.legal-price { font-family: var(--font-mono); font-size:29px; font-weight:600; margin:5px 0 8px; color: var(--ink-900); }
.legal-price span { font-family: var(--font-sans); font-size:13px; font-weight:400; color:var(--text-muted); }
.legal-foot { text-align:center; font-size:12px; color:var(--text-muted); padding:22px 16px 30px; border-top:1px solid var(--border); background:#fff; line-height:1.9; }
.legal-foot a, .legal-links a, .auth-legal a, .landing-footer a { color:inherit; text-decoration:underline; }
.legal-links { text-align:center; font-size:11px; color:var(--text-muted); padding:26px 0 8px; }
.auth-legal { text-align:center; font-size:11px; color:var(--text-muted); margin-top:10px; line-height:1.9; }
@media (max-width:720px) { .legal-plans { grid-template-columns:1fr; } }

/* ---- Show / Hide password button ---- */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 54px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 4px 7px; font-size: 11px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-radius: 5px; }
.pw-toggle:hover { color: var(--ink-900); background: var(--ink-100); }

/* ---- Analytics: horizontal breakdown bars ---- */
.chart-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.chart-bar-label { width: 170px; font-size: 12px; color: var(--text); flex-shrink: 0; }
.chart-bar-track { flex: 1; background: var(--ink-100); border-radius: 4px; height: 18px; overflow: hidden; }
.chart-bar-fill { height: 100%; background: linear-gradient(90deg, var(--brass-500), var(--brass-400)); border-radius: 4px; min-width: 2px; }
.chart-bar-value { width: 56px; text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); flex-shrink: 0; }

/* ---- Analytics: daily trend (vertical bars) ---- */
.trend-chart { display: flex; align-items: flex-end; gap: 2px; height: 90px; padding-top: 6px; }
.trend-bar { flex: 1; background: var(--brass-500); border-radius: 2px 2px 0 0; min-height: 2px; position: relative; transition: background-color 120ms ease; }
.trend-bar:hover { background: var(--ink-900); }
.trend-bar[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: var(--ink-900); color: #fff; font-size: 11px; font-family: var(--font-mono); padding: 3px 7px; border-radius: 5px;
  white-space: nowrap; margin-bottom: 5px; z-index: 5; box-shadow: var(--shadow-md);
}
.trend-caption { font-size: 11px; font-family: var(--font-mono); color: var(--text-muted); display: flex; justify-content: space-between; margin-top: 4px; }

/* ---------------------------------------------------------------
   Candidate shell v2: grouped sidebar nav, profile topbar, mobile nav
   (identical component system to the Company panel, adapted class
   names below where the underlying entity is a person, not a company)
   --------------------------------------------------------------- */

.sidebar-group { margin-bottom: 4px; }
.sidebar-group-label {
  padding: 14px 14px 4px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(238,241,247,0.4);
  letter-spacing: 0.01em;
}
.sidebar-group:first-child .sidebar-group-label { padding-top: 6px; }

.sidebar-link-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.sidebar-link-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-link { justify-content: space-between; }
.sidebar-badge {
  background: var(--brass-500); color: var(--ink-950);
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: 999px; min-width: 18px; text-align: center;
}
.sidebar-link-locked { opacity: 0.55; }
.sidebar-lock { font-size: 11px; opacity: 0.8; }

.sidebar-footer {
  padding: 12px; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; gap: 10px;
}
.sidebar-user-avatar {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: rgba(255,255,255,0.08); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
}
.sidebar-user-info { min-width: 0; flex: 1; }
.sidebar-user-name {
  color: #fff; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-user-status {
  font-size: 11px; color: rgba(238,241,247,0.5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-collapse-btn {
  background: none; border: 1px solid rgba(255,255,255,0.12); color: rgba(238,241,247,0.65);
  cursor: pointer; padding: 6px 10px; display: flex; align-items: center; justify-content: center;
  gap: 6px; border-radius: 6px; flex-shrink: 0; white-space: nowrap;
}
.sidebar-collapse-btn:hover { color: #fff; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); }
.sidebar-collapse-btn svg { flex-shrink: 0; transform: rotate(90deg); transition: transform 150ms ease; }
.sidebar-collapse-label { font-size: 12px; font-weight: 500; }
.app-shell.sidebar-collapsed .sidebar-collapse-btn svg { transform: rotate(-90deg); }
.app-shell.sidebar-collapsed .sidebar-collapse-btn { padding: 6px; }
.app-shell.sidebar-collapsed .sidebar-collapse-label { display: none; }

/* Collapsed sidebar: icons only */
.app-shell.sidebar-collapsed .sidebar { width: 68px; }
.app-shell.sidebar-collapsed .sidebar-title,
.app-shell.sidebar-collapsed .sidebar-group-label,
.app-shell.sidebar-collapsed .sidebar-link-text,
.app-shell.sidebar-collapsed .sidebar-badge,
.app-shell.sidebar-collapsed .sidebar-user-info { display: none; }
.app-shell.sidebar-collapsed .sidebar-link { justify-content: center; }
.app-shell.sidebar-collapsed .sidebar-footer { justify-content: center; }

/* Topbar: breadcrumb + icon buttons + profile dropdown */
.topbar-context { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-breadcrumb { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; min-width: 0; }
.topbar-breadcrumb strong { color: var(--text); font-weight: 600; }
.topbar-breadcrumb-sep { color: var(--border-strong); }

.topbar-icon-btn {
  position: relative; width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); background: none; border: none; cursor: pointer;
}
.topbar-icon-btn:hover { background: var(--surface-muted); color: var(--text); }
.topbar-icon-dot {
  position: absolute; top: 5px; right: 5px;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
  background: var(--brass-500); color: var(--ink-950);
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
}

.topbar-profile { position: relative; }
.topbar-profile-btn {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer; padding: 4px 6px 4px 4px;
  border-radius: var(--radius-sm);
}
.topbar-profile-btn:hover { background: var(--surface-muted); }
.topbar-avatar {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--brass-400), var(--brass-600));
  color: var(--ink-950); font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.topbar-profile-name { font-size: 13px; font-weight: 500; color: var(--text); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-profile-btn .icon { color: var(--text-muted); }

.topbar-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: 240px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
  padding: 6px; display: none;
}
.topbar-menu.open { display: block; }
.topbar-menu-header { padding: 10px 10px 8px; }
.topbar-menu-header .name { font-size: 13px; font-weight: 600; color: var(--text); }
.topbar-menu-header .meta { font-size: 12px; color: var(--text-muted); }
.topbar-menu-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text);
}
.topbar-menu-link:hover { background: var(--surface-muted); }
.topbar-menu-divider { height: 1px; background: var(--border); margin: 6px 2px; }
.topbar-menu form { margin: 0; }
.topbar-menu button.topbar-menu-link { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-family: inherit; }

/* Mobile nav */
.mobile-nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  align-items: center; justify-content: center; color: var(--text-muted);
}
.sidebar-scrim { display: none; }

@media (max-width: 880px) {
  .mobile-nav-toggle { display: flex; }
  .sidebar-collapse-btn { display: none; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
    transform: translateX(-100%);
    transition: transform 180ms ease;
    width: 260px;
  }
  .app-shell.mobile-nav-open .sidebar { transform: translateX(0); }
  .app-shell.mobile-nav-open .sidebar-scrim {
    display: block; position: fixed; inset: 0; z-index: 40;
    background: rgba(10,20,32,0.4);
  }
  .app-shell.sidebar-collapsed .sidebar { width: 260px; }
  .app-shell.sidebar-collapsed .sidebar-title,
  .app-shell.sidebar-collapsed .sidebar-group-label,
  .app-shell.sidebar-collapsed .sidebar-link-text,
  .app-shell.sidebar-collapsed .sidebar-badge,
  .app-shell.sidebar-collapsed .sidebar-user-info { display: revert; }
  .app-shell.sidebar-collapsed .sidebar-link { justify-content: space-between; }
  .topbar-profile-name { display: none; }

  /* Touch targets: icon-only controls grow to ~44px on touch-sized viewports. */
  .mobile-nav-toggle, .topbar-icon-btn { width: 44px; height: 44px; }
  .sidebar-link { min-height: 44px; }
  .topbar-profile-btn { min-height: 44px; }
}

@media (max-width: 720px) {
  /* Touch targets: form controls and primary actions grow to ~44px tall. */
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=file], input[type=date], textarea, select {
    min-height: 44px; padding: 11px 12px;
  }
  .btn { min-height: 44px; padding: 10px 16px; }
  .btn-sm { min-height: 38px; padding: 8px 13px; }
}

/* ---------------------------------------------------------------
   Data table — desktop table with mobile card fallback
   --------------------------------------------------------------- */
.data-table-wrap { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data-table th {
  text-align: left; font-weight: 600; font-size: 11.5px; color: var(--text-muted);
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.data-table td {
  padding: 12px; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.data-table tbody tr:hover { background: var(--surface-muted); }
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table .cell-primary { font-weight: 500; color: var(--text); }
table.data-table .cell-muted { color: var(--text-muted); font-size: 12px; }
table.data-table .cell-actions { text-align: right; white-space: nowrap; }

.overflow-btn {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: #fff; color: var(--text-muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; line-height: 1;
}
.overflow-btn:hover { background: var(--surface-muted); color: var(--text); }

.empty-state-title { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.empty-state-body { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; }

@media (max-width: 720px) {
  table.data-table thead { display: none; }
  table.data-table, table.data-table tbody, table.data-table tr, table.data-table td { display: block; width: 100%; }
  table.data-table tr {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    margin-bottom: 10px; padding: 4px 12px;
  }
  table.data-table td {
    border-bottom: none; padding: 7px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  table.data-table td::before {
    content: attr(data-label); font-size: 11px; font-weight: 600; color: var(--text-muted); flex-shrink: 0;
  }
  table.data-table .cell-actions { justify-content: flex-end; }
  table.data-table .cell-actions::before { content: ''; }
}

.quick-action-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: #fff;
  font-size: 13px; font-weight: 500; color: var(--text);
  transition: border-color 120ms ease, background-color 120ms ease;
}
.quick-action-link:hover { border-color: var(--brass-500); background: var(--surface-muted); }
.quick-action-link .icon { color: var(--brass-600); flex-shrink: 0; }
.quick-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }

/* ---------------------------------------------------------------
   Messages — two-pane inbox on desktop, list-then-thread on mobile
   --------------------------------------------------------------- */
.messages-shell {
  display: flex; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: #fff; min-height: 560px;
}
.messages-list-pane { width: 300px; flex-shrink: 0; border-right: 1px solid var(--border); overflow-y: auto; max-height: 640px; }
.messages-list-pane .conv-row {
  display: block; padding: 12px 14px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit;
}
.messages-list-pane .conv-row:hover { background: var(--surface-muted); }
.messages-list-pane .conv-row.active { background: var(--surface-muted); border-left: 2px solid var(--brass-500); }
.messages-thread-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.messages-empty-pane { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px; }

@media (max-width: 880px) {
  .messages-shell { border: none; min-height: 0; }
  .messages-shell.has-thread .messages-list-pane { display: none; }
  .messages-shell:not(.has-thread) .messages-thread-pane { display: none; }
  .messages-list-pane { width: 100%; border-right: none; max-height: none; border: 1px solid var(--border); border-radius: var(--radius); }
  .messages-thread-pane { border: 1px solid var(--border); border-radius: var(--radius); }
}

/* ---------------------------------------------------------------------- */
/* Location / city picker (assets/js/location-picker.js)                  */
/* ---------------------------------------------------------------------- */
.location-picker { position: relative; }
.location-picker-input { width: 100%; }
.location-picker-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); max-height: 260px; overflow-y: auto; padding: 4px;
}
.location-picker-item {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border: none; background: none;
  border-radius: 6px; font-size: 13px; color: var(--ink-900); cursor: pointer; font-family: inherit;
}
.location-picker-item:hover, .location-picker-item.is-active { background: var(--surface-muted); }
.location-picker-item-other { color: var(--brass-600); font-weight: 600; border-top: 1px solid var(--border); margin-top: 2px; padding-top: 9px; }
.location-picker-manual { display: none; margin-top: 8px; padding: 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-muted); }
.location-picker-manual-mode .location-picker-input-wrap { display: none; }
.location-picker-manual-mode .location-picker-manual { display: block; }
.location-picker-manual-row { display: flex; gap: 8px; }
.location-picker-manual-row .field { flex: 1; margin-bottom: 8px; }
.location-picker-manual-close { font-size: 12px; color: var(--ink-700); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; }

/* ---------------------------------------------------------------------- */
/* GPS "near me" controls (assets/js/geolocation.js)                      */
/* ---------------------------------------------------------------------- */
.geo-status { display: inline-block; font-size: 11px; margin-left: 8px; font-weight: 500; }
.near-me-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -6px 0 14px; }
.near-me-row select { width: auto; padding: 7px 10px; font-size: 12px; }

/* ---------------------------------------------------------------------- */
/* Job title picker (assets/js/job-title-picker.js)                       */
/* ---------------------------------------------------------------------- */
.job-title-picker { position: relative; }
.job-title-picker-input { width: 100%; }
.job-title-picker-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); max-height: 260px; overflow-y: auto; padding: 4px;
}
.job-title-picker-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 8px 10px; border: none; background: none;
  border-radius: 6px; font-size: 13px; color: var(--ink-900); cursor: pointer; font-family: inherit;
}
.job-title-picker-item:hover, .job-title-picker-item.is-active { background: var(--surface-muted); }
.job-title-picker-category { font-size: 11px; color: var(--ink-700); flex-shrink: 0; }

/* ---------------------------------------------------------------------- */
/* Share widget (includes/share.php)                                      */
/* ---------------------------------------------------------------------- */
.share-widget { position: relative; display: inline-block; }
.share-menu {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 40;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: 6px; min-width: 150px; display: flex; flex-direction: column; gap: 2px;
}
.share-menu[hidden] { display: none; }
.share-menu-item {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border: none; background: none;
  border-radius: 6px; font-size: 13px; color: var(--ink-900); cursor: pointer; font-family: inherit; text-decoration: none;
}
.share-menu-item:hover { background: var(--surface-muted); }