/*
  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; }
.completion-fill { height: 100%; background: linear-gradient(90deg, var(--brass-500), var(--brass-400)); }
.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; }

.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 split — a two-column entry page (brand story left, form right) used
   by login/register. Separate classes from .auth-shell above, which stays
   the simple single-column layout used by forgot-password, reset-password
   and verify-email. */
.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%; }
}

/* Auth tabs — Log in / Sign up pill switcher atop the form card. */
.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 — .reg-step panels shown one at a time by JS, all
   inside the same <form> so the single-POST backend logic is untouched.
   Falls back to one continuous scroll if JS is unavailable. */
.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); }

.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; }

/* ---------------------------------------------------------------
   Company shell v2: grouped sidebar nav, profile topbar, mobile nav
   --------------------------------------------------------------- */

.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-footer {
  padding: 12px; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; gap: 10px;
}
.sidebar-company-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-company-info { min-width: 0; flex: 1; }
.sidebar-company-name {
  color: #fff; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-company-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-company-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-company-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; }

/* ---------------------------------------------------------------
   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); }

/* ===================================================================
   Register / signup redesign (2026-10)
   Richer auth-split brand panel (badge, icon checklist, hero photo +
   floating stat cards, icon stat row) and a numbered-circle step
   wizard + icon-led mode cards on the form side. Page-scoped to the
   auth-split screens only; nothing here touches the shared dashboard
   styles above.
   =================================================================== */

/* -- colour utility chips, reused by the floating cards / icon
   stat row / mode-choice-v2 badges below -- */
.ic-amber  { background: #fdeccb; color: #a9740f; }
.ic-blue   { background: #dde9fc; color: #2563a6; }
.ic-purple { background: #ece2fb; color: #6d3bc4; }
.ic-green  { background: #d9f2e2; color: #1e8a4c; }

/* -- brand panel header -- */
.auth-split-brand { padding: 40px 46px 32px; }
.auth-badge-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(192,138,46,0.16); color: var(--brass-400, #d0a655);
  border: 1px solid rgba(192,138,46,0.32); border-radius: 999px;
  padding: 6px 13px 6px 11px; font-size: 11.5px; font-weight: 600; margin-top: 22px;
}
.auth-badge-pill svg { flex-shrink: 0; }
.auth-split-brand h2 .accent { color: var(--brass-400, #d0a655); }

/* -- checklist: solid brass circle + white check instead of a plain tick -- */
.auth-split-features li .tick {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  background: var(--brass-500); color: #0a1420;
  display: flex; align-items: center; justify-content: center;
}
.auth-split-features li .tick svg { width: 11px; height: 11px; stroke-width: 3; }

/* -- hero photo + floating stat cards --
   Drop a transparent-background PNG (subject cut out, looking into the
   page) at the path set on .auth-hero-photo below — this box already
   reserves the space and looks finished without it, and picks the photo
   up automatically once the file exists. ~1000x1200px, transparent PNG. */
.auth-hero-wrap { position: relative; flex: 1 1 auto; min-height: 230px; margin: 22px 0 4px; }
.auth-hero-photo {
  position: absolute; inset: 0; background-repeat: no-repeat;
  background-position: bottom center; background-size: contain;
}
.auth-hero-photo::before {
  content: ''; position: absolute; left: 8%; right: 8%; bottom: 2%; height: 55%; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(192,138,46,0.16), transparent 72%);
  border-radius: 50%;
}
.auth-float-card {
  position: absolute; display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 12px; padding: 10px 13px;
  box-shadow: 0 12px 26px rgba(3,10,25,0.22); color: var(--ink-900);
  max-width: 190px;
}
.auth-float-card .fc-icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.auth-float-card b { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.auth-float-card span { display: block; font-size: 10.5px; color: #6d6559; line-height: 1.3; }

/* -- bottom icon stat row (replaces the plain text-only stat row) -- */
.auth-split-stats {
  display: flex; align-items: center; gap: 0; margin-top: auto; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.auth-split-stats .stat-v2 { display: flex; align-items: center; gap: 9px; padding: 0 16px; min-width: 0; }
.auth-split-stats .stat-v2:first-child { padding-left: 0; }
.auth-split-stats .stat-v2 + .stat-v2 { border-left: 1px solid rgba(255,255,255,0.12); }
.auth-split-stats .stat-v2-icon {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.auth-split-stats .stat-v2 strong { display: block; font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap; }
.auth-split-stats .stat-v2 span { font-size: 10.5px; color: rgba(238,241,247,0.6); white-space: nowrap; }

/* -- numbered-circle step wizard (replaces the thin dot/bar progress) -- */
.reg-stepper { display: flex; align-items: flex-start; margin-bottom: 22px; }
.reg-stepper-node { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 0 1 88px; min-width: 56px; }
.reg-stepper-circle {
  width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1.5px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  color: var(--text-muted); transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.reg-stepper-text { font-size: 10.5px; font-weight: 600; color: var(--text-muted); text-align: center; line-height: 1.3; }
.reg-stepper-line { flex: 1 1 auto; height: 2px; background: var(--border); margin-top: 14px; min-width: 10px; transition: background-color 160ms ease; }
.reg-stepper-node.active .reg-stepper-circle { background: var(--brass-500); border-color: var(--brass-500); color: #fff; }
.reg-stepper-node.active .reg-stepper-text { color: var(--ink-900); }
.reg-stepper-node.done .reg-stepper-circle { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.reg-stepper-line.done { background: var(--ink-900); }

/* -- icon-led mode cards (step 1 of the candidate wizard) -- */
.mode-choice-v2 { display: flex; flex-direction: column; gap: 10px; }
.mode-choice-v2-option {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  border: 1.5px solid var(--border); border-radius: 10px; padding: 13px 14px;
  cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.mode-choice-v2-option:hover { border-color: var(--border-strong); }
.mode-choice-v2-option:has(input:checked) {
  border-color: var(--info-600); background: #f3f8fe; box-shadow: 0 0 0 1px var(--info-600) inset;
}
.mode-choice-v2-option input[type="radio"] { margin: 4px 0 0; flex-shrink: 0; }
.mcv2-icon {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.mcv2-body { flex: 1 1 auto; min-width: 0; }
.mcv2-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mcv2-top b { font-size: 13.5px; font-weight: 700; color: var(--ink-900); }
.mcv2-badge { flex-shrink: 0; font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.mcv2-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-top: 2px; }

.auth-tip-box {
  display: flex; align-items: flex-start; gap: 10px; background: #fdf6e8; border: 1px solid #f1e0b4;
  border-radius: 10px; padding: 11px 13px; margin-top: 12px; font-size: 12px; color: #6d5a1f; line-height: 1.5;
}
.auth-tip-box svg { flex-shrink: 0; margin-top: 1px; color: #a9740f; }

/* -- icon-prefixed text inputs (full name / email / company name, etc.) -- */
.field-icon-wrap { position: relative; }
.field-icon-wrap > svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none;
}
.field-icon-wrap input { padding-left: 36px; }
.phone-input-group .phone-prefix { gap: 4px; }
.phone-input-group .phone-prefix svg { color: var(--text-muted); }

/* -- small top accent + arrow-nudge on the primary CTA -- */
.auth-card { position: relative; overflow: hidden; }
.auth-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brass-600), var(--brass-400));
}
.btn-arrow { display: inline-block; transition: transform 150ms ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

@media (max-width: 420px) {
  .reg-stepper-node { flex-basis: 70px; min-width: 46px; }
  .reg-stepper-text { font-size: 9.5px; }
}