/* ============================================================================
   ATS Design System — KEVIN.MURPHY brand, minimalist revision
   Layout: fixed left sidebar (nav + jobs/pipelines) + main content area.
   Views: dashboard, kanban board, candidate profile (drawer), CSV import
          wizard, reports/funnel analytics, workflow admin.
   Visual language: exaggerated minimalism. Monochrome UI chrome (near-black
   on white / near-white on black) matching kevinmurphy.com.au, hairline
   borders instead of drop shadows, generous whitespace, Inter type with
   tight tracking on headings and tabular figures on numbers. Color is
   reserved for DATA, not chrome: the 11-step plum stage ramp (from the
   product packaging) for pipeline stages, distinct semantic status hues
   (Withdrawn / Rejected / Talent Pool / success / warning / danger / info),
   and a single warm-orange brand signature (the wordmark dot + tagline,
   echoing the site's orange nav highlight). --brand is therefore the
   MONOCHROME primary (black in light mode, white in dark) — everything
   tinted plum on purpose reads from --stage-* or --status-talent-pool.
   ============================================================================ */

:root {
  color-scheme: light;
  /* Brand = monochrome primary. --on-brand is the text color that sits on
     top of a --brand fill (buttons, avatar, chart bars) and flips with the
     theme, since --brand itself flips black<->white. */
  --brand: #171519;
  --brand-strong: #000000;
  --brand-soft: #efedf0;
  --on-brand: #ffffff;
  --accent-orange: #e14f2a;

  /* Neutrals (light mode) */
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-alt: #f4f3f5;
  --border: #e9e7ea;
  --border-strong: #d6d3d7;
  --text: #171519;
  --text-muted: #5c575f;
  --text-faint: #8f8a92;
  --ring: rgba(23, 21, 25, 0.1);
  --shadow: 0 1px 2px rgba(20, 10, 22, 0.04);
  --shadow-lg: 0 16px 40px rgba(20, 10, 22, 0.14), 0 2px 8px rgba(20, 10, 22, 0.06);

  /* Status colors (categorical, distinct from brand + stage ramp) */
  --status-withdrawn: #8a91a0;
  --status-withdrawn-bg: #eef0f3;
  --status-rejected: #c23b3b;
  --status-rejected-bg: #fbeaea;
  --status-talent-pool: #8b5cc7;
  --status-talent-pool-bg: #f2ecfa;
  --status-success: #1f8a53;
  --status-success-bg: #e7f6ee;
  --status-warning: #b7791f;
  --status-warning-bg: #fdf3e0;
  --status-danger: #c23b3b;
  --status-danger-bg: #fbeaea;
  --status-info: #2a6cc9;
  --status-info-bg: #e8f0fc;

  /* 11-step ordinal plum ramp: stage 1 (Applied, lightest) -> stage 11 (Hired, darkest) */
  --stage-1: #caa0d8;
  --stage-2: #bc92c9;
  --stage-3: #ad84ba;
  --stage-4: #9f77ab;
  --stage-5: #90699c;
  --stage-6: #825b8d;
  --stage-7: #744d7e;
  --stage-8: #653f6f;
  --stage-9: #573260;
  --stage-10: #482451;
  --stage-11: #3a1642;

  /* Jobma score colors */
  --score-high: #1f8a53;
  --score-mid: #b7791f;
  --score-low: #c23b3b;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --sidebar-width: 248px;
  --topbar-height: 60px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #f3f1f2;
  --brand-strong: #ffffff;
  --brand-soft: #262227;
  --on-brand: #141214;
  --accent-orange: #ff7a4d;

  --bg: #0d0c0e;
  --surface: #151316;
  --surface-alt: #1d1a1e;
  --border: #29252b;
  --border-strong: #423c44;
  --text: #f3f1f2;
  --text-muted: #b3acb5;
  --text-faint: #7f7882;
  --ring: rgba(243, 241, 242, 0.14);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);

  --status-withdrawn: #a6adbb;
  --status-withdrawn-bg: #232a38;
  --status-rejected: #e07a7a;
  --status-rejected-bg: #33201f;
  --status-talent-pool: #b697e0;
  --status-talent-pool-bg: #2a2138;
  --status-success: #5cc98c;
  --status-success-bg: #16281f;
  --status-warning: #e0ad57;
  --status-warning-bg: #2f2515;
  --status-danger: #e07a7a;
  --status-danger-bg: #33201f;
  --status-info: #7aa9e2;
  --status-info-bg: #16233a;

  /* 11-step ordinal plum ramp, lightened for contrast on the near-black surface */
  --stage-1: #e6c9ef;
  --stage-2: #ddbde7;
  --stage-3: #d4b1de;
  --stage-4: #caa4d6;
  --stage-5: #c198ce;
  --stage-6: #b88cc6;
  --stage-7: #af80bd;
  --stage-8: #a674b5;
  --stage-9: #9c67ad;
  --stage-10: #935ba4;
  --stage-11: #8a4f9c;

  --score-high: #5cc98c;
  --score-mid: #e0ad57;
  --score-low: #e07a7a;
}

/* ---------------------------------------------------------------------- */
/* Reset / base                                                           */
/* ---------------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { letter-spacing: -0.015em; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* `color: inherit` above picks up the theme's near-white text in dark mode,
   but text-ish inputs/selects still fall back to the browser's own (light)
   control background unless we set one — that combination is white-on-white
   and unreadable. Give every un-classed select/text input a sane themed
   background by default; more specific rules (.field input, .search-box
   input, etc.) still win where they exist. Checkboxes/radios/file inputs
   are excluded so they keep their native appearance. */
/* :where() keeps this rule at zero specificity, so any classed rule
   (.field input, .search-box input, …) beats it no matter how simple its
   selector is — without it, the :not() chain alone out-specified them and
   e.g. the search box's icon padding never applied. */
:where(select,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"])) {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}

a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--text); }

.hidden { display: none !important; }

/* Keyboard focus: one consistent, visible ring everywhere. Mouse clicks
   don't trigger it (:focus-visible), so the chrome stays quiet. */
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* Safety-net default for every inline icon <svg> in the app: without an
   explicit width/height, an SVG is a replaced element that falls back to
   the browser's intrinsic 300x150 box — which is exactly what was
   happening to every icon() call that didn't have its own sizing rule or
   inline style (print/table-view buttons, "+ New pipeline", etc.). Any
   more specific selector elsewhere (.nav-item svg, .dropzone svg, an
   inline style="width:...") still wins over this by normal CSS cascade
   rules, so this only catches icons that were otherwise unsized. */
svg { width: 16px; height: 16px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }

/* Reduced motion: strip every non-essential transition/animation. The
   loading spinner keeps animating — it's the only signal that the app is
   doing something, so freezing it would read as a hang. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .spinner { animation: spin 0.7s linear infinite !important; }
}

/* ---------------------------------------------------------------------- */
/* Auth screen                                                            */
/* ---------------------------------------------------------------------- */

#auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 384px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.auth-brand .logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--brand);
  color: var(--on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}

.auth-brand .logo-text {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.auth-card h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
}

.auth-card .auth-sub {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 24px;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px var(--ring);
}

.field textarea { resize: vertical; min-height: 70px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-weight: 550;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn svg { flex-shrink: 0; }

.btn:hover { background: var(--surface-alt); border-color: var(--border-strong); }
.btn:active { background: var(--border); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.btn-primary:active { background: var(--brand-strong); }

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

.btn-block { width: 100%; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-icon { padding: 7px; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-alt); border-color: transparent; }

.auth-error {
  background: var(--status-danger-bg);
  color: var(--status-danger);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 12.5px;
  margin-bottom: 16px;
}

.auth-toggle {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-muted);
}
.auth-toggle a { color: var(--text-muted); }
.auth-toggle a:hover { color: var(--text); }

.auth-config-warning {
  max-width: 480px;
  margin: 80px auto;
  background: var(--surface);
  border: 1px solid var(--status-warning);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: left;
}
.auth-config-warning h2 { margin-top: 0; }
.auth-config-warning code {
  background: var(--surface-alt);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12.5px;
}

.auth-success {
  background: var(--status-success-bg);
  color: var(--status-success);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 12.5px;
  margin-bottom: 16px;
}

.auth-hint {
  color: var(--text-faint);
  font-size: 12px;
  margin-top: -8px;
  margin-bottom: 16px;
}

.auth-code-input {
  letter-spacing: 8px;
  font-size: 22px;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------- */
/* App shell                                                              */
/* ---------------------------------------------------------------------- */

#app {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
#sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  transition: width 0.15s ease, margin-left 0.15s ease;
}

#sidebar.collapsed {
  width: 60px;
}

/* Collapsed sidebar is only 60px wide (minus 2x8px header padding = 44px of
   content room). The header used to stay a row (logo mark + spacer + the
   collapse/reopen button), which needed ~64px to fit — so the reopen button
   overflowed past the sidebar's right edge and sat, invisible and
   unclickable, underneath the main content column. Stacking the header
   vertically when collapsed keeps both the logo mark and the reopen button
   inside the 60px column, so there's always a visible way back out. */
#sidebar.collapsed .sidebar-header {
  flex-direction: column;
  padding: 14px 8px;
  gap: 8px;
}

/* Give the reopen chevron a visible button "shape" once it's on its own
   line below the logo mark — otherwise it's just a bare arrow floating in
   space with nothing anchoring it, which read as broken/unfinished. */
#sidebar.collapsed .sidebar-collapse-btn {
  background: var(--surface-alt);
  border: 1px solid var(--border);
}

/* Nav icons: with the label hidden, the icon was still flush-left inside
   the button's own padding (an artifact of the row layout meant for
   icon+label together), so it read as randomly off-center rather than a
   tidy icon rail. Centering it, and dropping the now-pointless label gap,
   fixes that. */
#sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 9px;
  gap: 0;
}

/* The Jobs list has no readable form at 60px wide — job titles were
   truncating down to a single letter + ellipsis ("N…", "K…"), which is
   neither useful nor good-looking. Hide the whole section when collapsed;
   expanding the sidebar is the actual way to get at the job list. */
#sidebar.collapsed .sidebar-section {
  display: none;
}

/* Sidebar footer (avatar + theme/backup/logout icons) has the same 60px
   math problem the header did — four items in a row need far more than the
   ~36px of content width left after padding. Stack it vertically instead,
   same fix as the header above. */
#sidebar.collapsed .sidebar-footer {
  flex-direction: column;
  padding: 10px 6px;
  gap: 6px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--border);
}

.sidebar-header .logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--brand);
  color: var(--on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.sidebar-header .logo-text {
  white-space: nowrap;
  overflow: hidden;
}

.brand-wordmark {
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-wordmark .brand-dot { color: var(--accent-orange); }

.brand-tagline {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-orange);
  margin-top: 1px;
  white-space: nowrap;
}

#sidebar.collapsed .logo-text,
#sidebar.collapsed .nav-label,
#sidebar.collapsed .sidebar-section-title,
#sidebar.collapsed .job-item-meta {
  display: none;
}

.sidebar-collapse-btn {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease;
}
.sidebar-collapse-btn:hover { background: var(--surface-alt); color: var(--text); }
#sidebar.collapsed .sidebar-collapse-btn { margin-left: 0; }

/* Chevron points at whichever direction actually collapses/reopens the
   sidebar, rather than always pointing left regardless of state — rotating
   the existing chevronLeft icon 180deg reads as "reopen" when collapsed,
   no separate icon swap needed. */
.sidebar-collapse-btn svg { transition: transform 0.2s ease; }
#sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

.sidebar-nav {
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 500;
  font-size: 13.5px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-item:hover { background: var(--surface-alt); color: var(--text); }
.nav-item.active { background: var(--brand-soft); color: var(--text); font-weight: 600; }

/* Slim accent bar flush with the sidebar's left edge, flagging the active
   section — sits just outside the button's own box (sidebar-nav's 10px
   padding gives it room), so it reads as a rail indicator rather than
   part of the button itself. */
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--brand);
}

.nav-item svg { flex-shrink: 0; width: 17px; height: 17px; }

.sidebar-section {
  padding: 16px 10px 8px;
  overflow-y: auto;
  flex: 1;
}

.sidebar-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.sidebar-section-title button {
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}
.sidebar-section-title button:hover { background: var(--surface-alt); color: var(--text); }

.job-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background 0.15s ease;
}

.job-item:hover { background: var(--surface-alt); }
.job-item.active { background: var(--brand-soft); }
.job-item.active .job-item-title { color: var(--text); }

/* Wraps the job-select button + its delete action as siblings (not nested
   buttons — a <button> inside a <button> is invalid HTML and behaves
   unpredictably on click), so .job-item above keeps all its original
   styling/behavior untouched. */
.job-item-row {
  display: flex;
  align-items: center;
  gap: 1px;
}
.job-item-row .job-item {
  flex: 1;
  min-width: 0;
}
.job-item-delete {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 6px;
  border-radius: 5px;
  display: flex;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.job-item-row:hover .job-item-delete,
.job-item-delete:focus-visible { opacity: 1; }
.job-item-delete:hover { background: var(--status-danger-bg); color: var(--status-danger); }
.job-item-delete svg { width: 14px; height: 14px; }

.job-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.job-item-meta {
  font-size: 11.5px;
  color: var(--text-faint);
}

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}

.sidebar-footer .user-info {
  overflow: hidden;
  flex: 1;
}
.sidebar-footer .user-name {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-footer .user-email {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#sidebar.collapsed .user-info { display: none; }

/* Team profiles modal (switch/add/edit hiring manager & admin profiles) */
.team-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.team-row.active { border-color: var(--brand); background: var(--brand-soft); }
.team-row-info { flex: 1; min-width: 0; }
.team-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-row-title {
  font-size: 11.5px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip-admin { background: var(--brand-soft); color: var(--text); border-color: transparent; }

/* Main content */
#main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#topbar {
  height: var(--topbar-height);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 20;
}

#topbar h1 {
  font-size: 16px;
  font-weight: 650;
  margin: 0;
  flex-shrink: 0;
}

#topbar .topbar-spacer { flex: 1; }

.search-box {
  position: relative;
  max-width: 320px;
  width: 100%;
}
.search-box input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.search-box input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--text);
  box-shadow: 0 0 0 3px var(--ring);
}
.search-box svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-faint);
  pointer-events: none;
}

.view {
  padding: 28px 32px 72px;
  flex: 1;
}

/* ---------------------------------------------------------------------- */
/* Dashboard                                                              */
/* ---------------------------------------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}

.stat-card .stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.stat-card .stat-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-card .stat-sub {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 5px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 20px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.panel-header h2 {
  font-size: 14px;
  font-weight: 650;
  margin: 0;
}

.panel-header .panel-sub {
  font-size: 12px;
  color: var(--text-faint);
}

/* Funnel */
.funnel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.funnel-row {
  display: grid;
  grid-template-columns: 150px 1fr 90px 90px;
  align-items: center;
  gap: 12px;
}

.funnel-row .funnel-label {
  font-size: 12.5px;
  font-weight: 500;
}

.funnel-bar-track {
  background: var(--surface-alt);
  border-radius: 6px;
  overflow: hidden;
  height: 22px;
}

.funnel-bar-fill {
  height: 100%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding-left: 8px;
  color: var(--on-brand);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: width 0.3s ease;
}

.funnel-row .funnel-count {
  font-size: 12.5px;
  font-weight: 650;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.funnel-row .funnel-drop {
  font-size: 11.5px;
  color: var(--status-danger);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------- */
/* Reports view — period picker, KPI tiles, and chart cards               */
/* ---------------------------------------------------------------------- */

.report-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.period-type-tabs {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.period-type-tabs button {
  border: none;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 12px;
  cursor: pointer;
  border-right: 1px solid var(--border-strong);
  transition: background 0.15s ease, color 0.15s ease;
}
.period-type-tabs button:last-child { border-right: none; }
.period-type-tabs button:hover { background: var(--surface-alt); }
.period-type-tabs button.active { background: var(--brand); color: var(--on-brand); font-weight: 600; }

.period-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.period-nav button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px 7px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.period-nav button:hover:not(:disabled) { background: var(--surface-alt); color: var(--text); }
.period-nav button:disabled { opacity: 0.4; cursor: not-allowed; }
.period-nav svg { width: 15px; height: 15px; }
.period-nav .period-label {
  font-size: 13px;
  font-weight: 600;
  padding: 0 8px;
  min-width: 108px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.report-print-btn { margin-left: auto; }

/* KPI row with deltas */
.kpi-tile .stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.kpi-tile .stat-delta.up-good { color: var(--status-success); }
.kpi-tile .stat-delta.down-bad { color: var(--status-danger); }
.kpi-tile .stat-delta.neutral { color: var(--text-faint); }
.kpi-tile .stat-delta svg { width: 12px; height: 12px; }

/* Chart card chrome shared by every report chart */
.chart-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.chart-card-header .chart-card-titles h2 { margin: 0 0 2px; font-size: 14px; font-weight: 650; }
.chart-card-header .chart-card-titles .panel-sub { display: block; }
.table-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 4px 10px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.table-toggle-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.table-toggle-btn:hover { background: var(--surface-alt); color: var(--text); }
.table-toggle-btn.active { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

.chart-empty { color: var(--text-faint); font-size: 12.5px; padding: 24px 0; text-align: center; }

/* Vertical bar chart (e.g. applications over time) */
.vbar-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 160px;
  padding-top: 8px;
}
.vbar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}
.vbar-col .vbar-value {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.vbar-col .vbar-mark {
  width: 100%;
  max-width: 26px;
  background: var(--brand);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.vbar-col .vbar-mark:hover, .vbar-col .vbar-mark:focus-visible { opacity: 0.75; }
.vbar-col .vbar-label {
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Horizontal bar chart (e.g. avg days to stage, source breakdown) */
.hbar-chart {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.hbar-row {
  display: grid;
  grid-template-columns: 130px 1fr 56px;
  align-items: center;
  gap: 10px;
}
.hbar-row .hbar-label {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hbar-track {
  background: var(--surface-alt);
  border-radius: 6px;
  height: 18px;
  position: relative;
}
.hbar-fill {
  height: 100%;
  border-radius: 6px;
  background: var(--brand);
  min-width: 3px;
  cursor: pointer;
  transition: width 0.3s ease, opacity 0.15s ease;
}
.hbar-fill:hover, .hbar-fill:focus-visible { opacity: 0.75; }
.hbar-row .hbar-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Stacked bar (part-to-whole, e.g. outcome breakdown) */
.stacked-bar {
  display: flex;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  gap: 2px;
  background: var(--surface-alt);
}
.stacked-bar-seg {
  height: 100%;
  min-width: 4px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.stacked-bar-seg:hover, .stacked-bar-seg:focus-visible { opacity: 0.8; }
.stacked-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
}
.stacked-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.stacked-legend-item .legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.stacked-legend-item .legend-count { color: var(--text-faint); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Shared chart tooltip */
#chart-tooltip {
  position: fixed;
  z-index: 500;
  background: var(--text);
  color: var(--surface);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
  white-space: nowrap;
}
#chart-tooltip.visible { opacity: 1; }
#chart-tooltip .tooltip-value { font-weight: 700; font-variant-numeric: tabular-nums; }
#chart-tooltip .tooltip-label { opacity: 0.75; font-weight: 400; margin-left: 5px; }

@media print {
  #sidebar, #topbar .search-box, .report-toolbar, .table-toggle-btn, #toast-stack { display: none !important; }
  #main, .view { padding: 0 !important; }
  .panel { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
}

/* ---------------------------------------------------------------------- */
/* Kanban board                                                           */
/* ---------------------------------------------------------------------- */

.board-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.board-toolbar .topbar-spacer { flex: 1; }

.pipeline-select {
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.kanban-scroll {
  overflow-x: auto;
  padding-bottom: 14px;
}

.kanban-board {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-height: 200px;
}

.kanban-column {
  width: 264px;
  flex-shrink: 0;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 210px);
}

.kanban-column-header {
  padding: 11px 12px 9px;
  border-bottom: 2px solid var(--stage-color, var(--brand));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.kanban-column-header .col-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.kanban-column-header .col-title {
  font-size: 12.5px;
  font-weight: 650;
}

.kanban-column-header .col-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border-radius: 10px;
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}

.kanban-cards {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 60px;
}

.kanban-cards.drag-over {
  background: var(--brand-soft);
  outline: 2px dashed var(--brand);
  outline-offset: -4px;
  border-radius: var(--radius-sm);
}

.candidate-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  cursor: grab;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.candidate-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.candidate-card:active { cursor: grabbing; }
.candidate-card.dragging { opacity: 0.5; }

.candidate-card .card-name-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
}

.candidate-card .card-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* Fallback for moving a candidate between stages without dragging — the
   only way to do it on a touch device, since native HTML5 drag-and-drop
   (used elsewhere on this card) never fires there. Also keyboard-reachable,
   which dragging isn't either. */
.card-move-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px;
  border-radius: 5px;
  display: flex;
  transition: background 0.15s ease, color 0.15s ease;
}
.card-move-btn:hover { background: var(--surface-alt); color: var(--text); }

.candidate-card .card-job {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.candidate-card .card-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.chip-link {
  cursor: pointer;
  background: var(--status-info-bg);
  color: var(--status-info);
  border-color: transparent;
  text-decoration: none;
}
.chip-link:hover { filter: brightness(0.96); text-decoration: none; }

.chip-score-high { background: var(--status-success-bg); color: var(--score-high); border-color: transparent; }
.chip-score-mid { background: var(--status-warning-bg); color: var(--score-mid); border-color: transparent; }
.chip-score-low { background: var(--status-danger-bg); color: var(--score-low); border-color: transparent; }
.chip-warning { background: var(--status-warning-bg); color: var(--status-warning); border-color: transparent; }

/* Import wizard: CSV vs document mode toggle */
.segmented {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 18px;
}
.segmented-btn {
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 500;
  background: var(--surface);
  color: var(--text-muted);
  border: none;
  border-right: 1px solid var(--border-strong);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.segmented-btn:last-child { border-right: none; }
.segmented-btn:hover { background: var(--surface-alt); }
.segmented-btn.active { background: var(--brand); color: var(--on-brand); font-weight: 600; }

.card-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.tag-dot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-muted);
}
.tag-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tag-color, var(--brand));
  display: inline-block;
}

.card-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
}

/* Bucket panel (Withdrawn / Rejected / Talent Pool) */
.bucket-panel {
  display: flex;
  gap: 14px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.bucket-card {
  flex: 1;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.bucket-card:hover { border-color: var(--border-strong); }

.bucket-card .bucket-title {
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}

.bucket-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.bucket-card .bucket-count {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------- */
/* Candidate profile drawer                                               */
/* ---------------------------------------------------------------------- */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 12, 0.45);
  z-index: 100;
  display: flex;
  justify-content: flex-end;
}

.drawer {
  width: 100%;
  max-width: 640px;
  background: var(--surface);
  height: 100%;
  overflow-y: auto;
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: 28px 32px 72px;
}

.drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4px;
}

.drawer-header h2 { margin: 0; font-size: 21px; font-weight: 700; }

.drawer-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.drawer-close:hover { background: var(--surface-alt); color: var(--text); }

.drawer-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 18px 0 20px;
}

.drawer-tab {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.drawer-tab:hover { color: var(--text); }
.drawer-tab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--brand); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.form-grid .field-full { grid-column: 1 / -1; }

.section-title {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin: 24px 0 12px;
}
.section-title:first-child { margin-top: 0; }

.score-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.score-box {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 10px;
  text-align: center;
}
.score-box .score-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.score-box .score-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline-item {
  display: flex;
  gap: 12px;
  padding-bottom: 18px;
  position: relative;
}
.timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 16px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.timeline-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
  margin-top: 4px;
  flex-shrink: 0;
}

.timeline-content .timeline-text { font-size: 13px; }
.timeline-content .timeline-meta { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

.ai-placeholder {
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 24px 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.ai-placeholder svg { width: 26px; height: 26px; margin-bottom: 8px; color: var(--text-faint); }

/* ---------------------------------------------------------------------- */
/* CSV import wizard                                                      */
/* ---------------------------------------------------------------------- */

.wizard-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.wizard-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-faint);
}

.wizard-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.wizard-step.active { color: var(--text); font-weight: 600; }
.wizard-step.active .wizard-step-num { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.wizard-step.done .wizard-step-num { background: var(--status-success); border-color: var(--status-success); color: var(--on-brand); }
.wizard-connector { width: 24px; height: 1px; background: var(--border-strong); }

.dropzone {
  /* This is a <label> wrapping the hidden file input, and a <label> is
     inline by default — without an explicit display here, the border
     wraps around each inline text/icon fragment separately instead of
     one contiguous box (visible as a broken, offset dashed rectangle). */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 48px 20px;
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  background: transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone:hover, .dropzone.drag-over { border-color: var(--text); background: var(--surface-alt); }
.dropzone svg { width: 30px; height: 30px; margin-bottom: 10px; color: var(--text-faint); }

.mapping-table, .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.mapping-table th, .mapping-table td,
.data-table th, .data-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.mapping-table th, .data-table th {
  color: var(--text-faint);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.data-table { display: block; overflow-x: auto; white-space: nowrap; }

.import-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.import-summary .stat-card .stat-value { font-size: 22px; }

/* ---------------------------------------------------------------------- */
/* Workflow admin                                                         */
/* ---------------------------------------------------------------------- */

/* Stage rows are an inline-edit list, not a stack of bordered boxes: each
   row is plain text on the panel, and a field only grows visible chrome
   when you hover or focus it. Editability is hinted by the row's hover
   background instead of 14 rows x 3 permanently outlined inputs. */
.stage-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  border: none;
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
  background: transparent;
  transition: background 0.15s ease;
}
.stage-row:hover { background: var(--surface-alt); }
.stage-row .stage-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-left: 6px;
}
.stage-row .stage-drag-handle { color: var(--text-faint); cursor: grab; }
.stage-row input { flex: 1; }
.stage-row input,
.stage-row select {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.stage-row select { color: var(--text-muted); }
.stage-row input:hover,
.stage-row select:hover { border-color: var(--border-strong); }
.stage-row input:focus,
.stage-row select:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--text);
  box-shadow: 0 0 0 3px var(--ring);
}
.stage-row input::placeholder { color: var(--text-faint); }

/* ---------------------------------------------------------------------- */
/* Misc: toasts, modals, badges, tables, empty states                     */
/* ---------------------------------------------------------------------- */

#toast-stack {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--text);
  color: var(--surface);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  box-shadow: var(--shadow-lg);
  max-width: 320px;
}
.toast.toast-error { background: var(--status-danger); }
.toast.toast-success { background: var(--status-success); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 12, 0.45);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 24px 28px;
}
.modal h2 { margin-top: 0; font-size: 17px; font-weight: 700; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.empty-state {
  text-align: center;
  padding: 64px 20px;
  color: var(--text-faint);
}
.empty-state svg { width: 32px; height: 32px; margin-bottom: 12px; }
.empty-state .empty-title { font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }

.theme-toggle {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 6px 8px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover { background: var(--surface-alt); color: var(--text); }

.link-preview-popup {
  position: absolute;
  z-index: 400;
  background: var(--text);
  color: var(--surface);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  max-width: 260px;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.link-preview-popup.visible { opacity: 1; }

/* Loading spinner */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
.spinner-dark {
  border: 2px solid var(--border-strong);
  border-top-color: var(--text);
}
@keyframes spin { to { transform: rotate(360deg); } }

#global-loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 500;
}

/* Mobile menu button (hamburger) — only ever shown at <=880px; see the
   media query below. Toggles #sidebar's `mobile-hidden` class in main.js. */
.mobile-menu-btn {
  display: none;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  margin-right: 4px;
  flex-shrink: 0;
}
.mobile-menu-btn:hover { background: var(--surface-alt); }
.mobile-menu-btn svg { width: 22px; height: 22px; }

/* Tap-out backdrop behind the sidebar drawer on mobile. Hidden by default;
   main.js adds `.visible` while the drawer is open at <=880px. */
#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 12, 0.45);
  z-index: 49;
}
#sidebar-backdrop.visible { display: block; }

/* Responsive */
@media (max-width: 880px) {
  .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  #sidebar { position: fixed; z-index: 50; left: 0; top: 0; height: 100vh; }
  #sidebar.mobile-hidden { margin-left: calc(-1 * var(--sidebar-width)); }
  #sidebar.collapsed.mobile-hidden { margin-left: -60px; }
  .view { padding: 20px 16px 64px; }
  .form-grid { grid-template-columns: 1fr; }
  .funnel-row { grid-template-columns: 100px 1fr 60px 60px; }
  /* iOS Safari auto-zooms the page when a focused input's font-size is
     under 16px — force text inputs up to 16px on small screens so focusing
     a field never zooms/shifts the layout. */
  .field input, .field select, .field textarea, .search-box input { font-size: 16px; }
}