/* ============================================================
   Kevaro — Design System
   Design system
   ============================================================ */

/* Self-hosted instead of Google's CDN — loading fonts.googleapis.com
   sends every visitor's IP to Google before they've agreed to anything,
   which several EU data protection authorities have found to be a GDPR
   violation without a legal basis for that transfer. One variable-font
   file covers every weight this portal uses (400-800). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/inter.woff2') format('woff2');
}

/* Kevaro's brand typeface — same self-hosting reasoning as Inter above.
   Manrope's own variable font covers the full 200-800 weight range in
   one file, same shape as Inter's. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/manrope.woff2') format('woff2');
}

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

:root {
  /* Brand — Kevaro's indigo, from the brand guide (#6366F1) */
  --primary-900: #1e1b4b;
  --primary-800: #312e81;
  --primary-700: #3730a3;
  --primary-600: #4338ca;
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --accent: #6366f1;
  --accent-light: #eef2ff;
  --accent-light-hover: #e0e7ff;

  /* Semantic */
  --success: #157a52;
  --success-bg: #eafbf3;
  --success-border: #b9ecd4;
  --warning: #b45a09;
  --warning-bg: #fef3e6;
  --warning-border: #f8d9ae;
  /* Teal — Kevaro's secondary brand colour (#14B8A6), used for the AI
     feature family specifically so it stays visually distinct from the
     indigo primary, same reasoning as when this was called --violet. */
  --teal: #14b8a6;
  --teal-bg: #e6f7f5;
  --danger: #c5303e;
  --danger-bg: #fdedee;
  --danger-border: #f6c4c9;
  --info: #2563a8;
  --info-bg: #eaf3fc;

  /* Neutrals — Kevaro's ink (#0B1020) and light bg (#F1F5F9) */
  --ink: #0b1020;
  --text-dark: #1b1e30;
  --text-mid: #565b78;
  --text-light: #8388a3;
  --text-faint: #aeb2c6;
  --border: #e5e7f2;
  --border-soft: #eef0f8;
  --bg: #f1f5f9;
  --bg-sunk: #e9eef3;
  --white: #ffffff;

  /* Scale */
  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --shadow-sm: 0 1px 2px rgba(11, 16, 32, 0.05);
  --shadow: 0 2px 10px rgba(11, 16, 32, 0.06);
  --shadow-md: 0 8px 24px rgba(11, 16, 32, 0.08);
  --shadow-lg: 0 20px 48px rgba(11, 16, 32, 0.16);
  --sidebar-w: 248px;
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Dark mode. Applies when the OS prefers dark AND the user hasn't
   explicitly chosen light (data-theme="light" wins over the OS), and
   again — unconditionally — when the user has explicitly chosen dark.
   Same token set, just redefined; every rule in this file already reads
   colours through these variables so nothing below needs touching.
   --white keeps its name but plays "card/input surface colour" here,
   same role it already plays throughout this file in light mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #818cf8;
    --primary-hover: #6366f1;
    --accent: #818cf8;
    --accent-light: rgba(99, 102, 241, 0.18);
    --accent-light-hover: rgba(99, 102, 241, 0.28);
    --success: #34d399;
    --success-bg: rgba(21, 122, 82, 0.22);
    --success-border: rgba(52, 211, 153, 0.35);
    --warning: #fbbf24;
    --warning-bg: rgba(180, 90, 9, 0.22);
    --warning-border: rgba(251, 191, 36, 0.35);
    --teal: #2dd4bf;
    --teal-bg: rgba(20, 184, 166, 0.18);
    --danger: #f87171;
    --danger-bg: rgba(197, 48, 62, 0.22);
    --danger-border: rgba(248, 113, 113, 0.35);
    --info: #60a5fa;
    --info-bg: rgba(37, 99, 168, 0.22);
    --text-dark: #eef1f8;
    --text-mid: #a3a9c4;
    --text-light: #7580a3;
    --text-faint: #4d5578;
    --border: #232b45;
    --border-soft: #1c2338;
    --bg: #0b1020;
    --bg-sunk: #070a16;
    --white: #131a2e;
  }
}
:root[data-theme="dark"] {
  --primary: #818cf8;
  --primary-hover: #6366f1;
  --accent: #818cf8;
  --accent-light: rgba(99, 102, 241, 0.18);
  --accent-light-hover: rgba(99, 102, 241, 0.28);
  --success: #34d399;
  --success-bg: rgba(21, 122, 82, 0.22);
  --success-border: rgba(52, 211, 153, 0.35);
  --warning: #fbbf24;
  --warning-bg: rgba(180, 90, 9, 0.22);
  --warning-border: rgba(251, 191, 36, 0.35);
  --teal: #2dd4bf;
  --teal-bg: rgba(20, 184, 166, 0.18);
  --danger: #f87171;
  --danger-bg: rgba(197, 48, 62, 0.22);
  --danger-border: rgba(248, 113, 113, 0.35);
  --info: #60a5fa;
  --info-bg: rgba(37, 99, 168, 0.22);
  --text-dark: #eef1f8;
  --text-mid: #a3a9c4;
  --text-light: #7580a3;
  --text-faint: #4d5578;
  --border: #232b45;
  --border-soft: #1c2338;
  --bg: #0b1020;
  --bg-sunk: #070a16;
  --white: #131a2e;
}

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-dark);
  line-height: 1.5;
  font-size: 14px;
}

.hidden { display: none !important; }
.visible { display: block; }

a { color: var(--accent); }

/* ============================== Buttons ============================== */

button {
  background: var(--primary);
  color: white;
  border: none;
  padding: 10px 18px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 13.5px;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 2px rgba(20, 23, 43, 0.08);
}

button:hover { background: var(--primary-hover); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.55; cursor: not-allowed; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-block { width: 100%; }

.btn-secondary {
  background: var(--white); color: var(--text-mid);
  border: 1px solid var(--border); box-shadow: none;
}
.btn-secondary:hover { background: var(--bg-sunk); color: var(--text-dark); border-color: #d3d6e6; }

.btn-small { padding: 6px 13px; font-size: 12px; }

.btn-danger-outline {
  background: var(--white); color: var(--danger);
  border: 1px solid var(--danger-border); box-shadow: none;
}
.btn-danger-outline:hover { background: var(--danger-bg); }

.add-btn { padding: 10px 20px !important; font-size: 13px !important; }

.theme-toggle {
  display: inline-flex; gap: 3px; padding: 4px;
  background: var(--bg-sunk); border-radius: var(--radius); width: fit-content;
}
.theme-toggle button {
  background: transparent; color: var(--text-mid); box-shadow: none;
  padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 500;
}
.theme-toggle button:hover { background: transparent; color: var(--text-dark); }
.theme-toggle button.active { background: var(--white); color: var(--text-dark); box-shadow: var(--shadow-sm); }

/* ============================== Forms ============================== */

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

label { display: block; margin-bottom: 7px; font-weight: 600; color: var(--text-mid); font-size: 12.5px; }

input[type="email"], input[type="password"], input[type="text"], input[type="tel"],
input[type="url"], input[type="number"], input[type="date"], input[type="time"], input[type="file"],
textarea, select {
  width: 100%; padding: 10px 13px;
  border: 1.5px solid var(--border);
  background: var(--white); border-radius: var(--radius-sm);
  font-size: 13.5px; color: var(--text-dark); font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="file"] { padding: 8px 10px; cursor: pointer; }

/* Eye-toggle wrapper for password fields (and, in the platform console,
   Stripe ID fields) — the input itself keeps whatever width:100% rule
   already applies, this just reserves room on the right for the button. */
.password-field-wrap { position: relative; }
.password-field-wrap input { padding-right: 40px; }
.password-toggle-btn {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; box-shadow: none; padding: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-light); cursor: pointer; width: auto; height: auto;
}
.password-toggle-btn:hover { color: var(--text-dark); background: transparent; }
.password-toggle-btn .eye-slash { opacity: 0; transition: opacity 0.1s ease; }
.password-toggle-btn.active .eye-slash { opacity: 1; }

/* Every <select> was rendering the browser's own native dropdown arrow —
   a different shape/weight on every OS/browser and the one part of an
   otherwise fully custom-styled form that never matched the rest of the
   design system. One custom chevron, applied everywhere. */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238388a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 11px;
  padding-right: 34px;
  cursor: pointer;
}
select:disabled { cursor: not-allowed; }

/* Currency fields (job salary, placement fee) are a typeable
   <input list="currencyDatalist">, not a real <select> — same chevron
   cue anyway, so they still read as "pick from a list" rather than a
   stray plain text box next to properly-styled selects/inputs. */
#jf_salaryCurrency, #pm_feeCurrency {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238388a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 11px;
  padding-right: 34px;
}

input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-light);
}

input:disabled, textarea:disabled, select:disabled {
  /* background-color, not the background shorthand — select's own rule
     sets a background-image (the custom chevron), which the shorthand
     would silently reset to none on every disabled select otherwise. */
  background-color: var(--bg-sunk); color: var(--text-light); cursor: not-allowed;
}

textarea { resize: vertical; min-height: 84px; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
small { color: var(--text-light); font-size: 11.5px; display: block; margin-top: 5px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--text-mid); cursor: pointer; }

input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
  width: 19px; height: 19px; border: 1.5px solid var(--border); border-radius: 6px;
  background: var(--white); cursor: pointer; position: relative;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="checkbox"]:hover { border-color: var(--accent); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 9px; border: solid white; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:checked:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

.filter-checkbox-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-mid); cursor: pointer;
}
.filter-checkbox-row:hover { background: var(--bg-sunk); }

/* ============================== App shell ============================== */

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

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--primary-900);
  color: #cdd1f0;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.sidebar-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 22px 20px 18px;
}

.brand-mark {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }

.sidebar-brand h1 { font-size: 14.5px; font-weight: 700; color: white; letter-spacing: -0.2px; }
.sidebar-brand .subtitle { font-size: 11px; color: #8b90c0; font-weight: 500; margin-top: 1px; }

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

.nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: #b7bbdc; font-size: 13.5px; font-weight: 600;
  background: transparent; border: none; text-align: left; width: 100%;
  cursor: pointer; box-shadow: none; transition: background 0.15s ease, color 0.15s ease;
}
.nav-link:hover { background: rgba(255,255,255,0.06); color: white; }
.nav-link.active { background: rgba(79, 95, 224, 0.28); color: white; }
.nav-link svg { flex-shrink: 0; opacity: 0.9; }
.nav-link .nav-count {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,0.1); color: #d7d9f2;
  padding: 1px 8px; border-radius: 20px;
}

.sidebar-footer {
  padding: 14px; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 8px;
}

.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: var(--radius-sm);
}

.user-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), #7d8cf5); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; overflow: hidden;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.avatar-editable { cursor: pointer; position: relative; transition: filter 0.15s ease; }
.avatar-editable:hover { filter: brightness(0.85); }

.sidebar-user-info { min-width: 0; flex: 1; }
.sidebar-user-info span#userEmail {
  display: block; font-size: 12.5px; font-weight: 600; color: white;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#userRoleBadge { display: inline-block; margin-top: 2px; }

.sidebar-actions { display: flex; gap: 6px; }

.settings-icon-btn, .logout-btn {
  background: rgba(255,255,255,0.06); color: #cdd1f0;
  border: 1px solid rgba(255,255,255,0.08); box-shadow: none;
  font-weight: 600; font-size: 12.5px;
}
.settings-icon-btn { width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.settings-icon-btn:hover, .logout-btn:hover { background: rgba(255,255,255,0.12); color: white; }
.logout-btn { flex: 1; }

.main-area { flex: 1; min-width: 0; }

.container { max-width: 1120px; margin: 0 auto; padding: 40px 36px 60px; }

/* ============================== Page bits ============================== */

.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; gap: 16px; flex-wrap: wrap; }
.page-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.section-title { font-size: 23px; color: var(--text-dark); font-weight: 800; letter-spacing: -0.4px; }
.section-subtitle { font-size: 13px; color: var(--text-light); margin-top: 4px; }

.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 30px; }

.stat-card {
  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.stat-card .stat-value { font-size: 27px; font-weight: 800; color: var(--text-dark); letter-spacing: -0.5px; }
.stat-card .stat-label { font-size: 11.5px; color: var(--text-light); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

/* AI points usage — a plain used/limit number doesn't read at a glance;
   the fill colour shifts amber near the limit and red once genuinely out
   of budget, so "am I about to run out" is visible without doing the maths. */
.points-bar-track {
  width: 100%; height: 8px; border-radius: 100px; background: var(--bg-sunk);
  overflow: hidden; margin-top: 8px;
}
.points-bar-fill {
  height: 100%; border-radius: 100px; background: var(--teal);
  transition: width 0.25s ease, background 0.25s ease;
}
.points-bar-fill.warning { background: var(--warning); }
.points-bar-fill.danger { background: var(--danger); }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ============================== Tables ============================== */

#overviewAdviserTable { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.overview-table {
  width: 100%; min-width: 640px; background: var(--white); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); border-collapse: separate; border-spacing: 0;
  overflow: hidden; margin-top: 10px; box-shadow: var(--shadow-sm);
}

.overview-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-light); background: var(--bg-sunk); padding: 12px 18px; border-bottom: 1px solid var(--border-soft);
}

.overview-table td { padding: 14px 18px; font-size: 13.5px; color: var(--text-mid); border-bottom: 1px solid var(--border-soft); }
.overview-table tr:last-child td { border-bottom: none; }
.overview-table tr:hover td { background: var(--bg-sunk); }
.overview-table .adviser-name-cell { font-weight: 700; color: var(--text-dark); }
.overview-table tr.adviser-row-clickable { cursor: pointer; }

.breakdown-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.breakdown-item {
  display: flex; align-items: center; gap: 9px; background: var(--bg-sunk);
  border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 8px 14px;
  cursor: pointer; box-shadow: none; transition: background 0.15s ease, border-color 0.15s ease;
}
.breakdown-item:hover { background: var(--accent-light); border-color: var(--accent); }
.breakdown-count { font-weight: 800; font-size: 14px; color: var(--text-dark); }

/* Same visual language as .breakdown-item but purely informational (AI
   points cost breakdown) — no cursor/hover, since it isn't clickable. */
.cost-chip { display: flex; align-items: center; gap: 9px; background: var(--bg-sunk); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 8px 14px; }
.cost-chip-pts { font-weight: 800; font-size: 14px; color: var(--accent); }

/* ===== STATISTICS & PLACEMENTS ===== */
/* Shared by every "filter dropdown(s) above a list/chart" toolbar in the
   app (Statistics, Placements, Calendar) — was previously duplicated ad
   hoc per-select as inline width/margin styles that didn't quite agree
   with each other (160px here, 200px there, one with its own
   margin-bottom instead of the toolbar spacing everyone else got). */
.filter-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.filter-select { width: auto; min-width: 160px; }

.stats-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; }
.chart-card {
  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.chart-wrap { position: relative; height: 260px; }
.chart-empty-note { color: var(--text-light); font-size: 12.5px; text-align: center; padding: 40px 10px; }

.status-badge.at-risk { background: var(--warning-bg); color: var(--warning); }
.status-badge.complete { background: var(--success-bg); color: var(--success); }
.status-badge.clawback { background: var(--danger-bg); color: var(--danger); }
.status-badge.left-safe { background: var(--bg-sunk); color: var(--text-mid); }

.placement-card-meta-row { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12.5px; color: var(--text-mid); }
.placement-card-meta-row strong { color: var(--text-dark); }
.placement-fee { font-weight: 800; color: var(--text-dark); }

/* ============================== Cards ============================== */

.card {
  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 20px 22px; margin-bottom: 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { border-color: #d7d9ec; box-shadow: var(--shadow); }

.card-header { display: flex; justify-content: space-between; align-items: start; cursor: pointer; gap: 14px; }
.card-title-row { display: flex; align-items: center; gap: 12px; min-width: 0; }

.chevron {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; background: var(--bg-sunk);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-light); transition: transform 0.2s ease; font-size: 11px;
}
.chevron.open { transform: rotate(90deg); color: var(--accent); background: var(--accent-light); }

.card-title { font-size: 15.5px; font-weight: 700; color: var(--text-dark); overflow-wrap: anywhere; }
.card-meta { font-size: 12.5px; color: var(--text-light); margin-top: 3px; }

.card-body { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.card-body.open { display: block; }

.card-content { color: var(--text-mid); line-height: 1.7; font-size: 13.5px; }
.card-content p { margin-bottom: 4px; }
.card-content strong { color: var(--text-dark); font-weight: 600; }

.card-notes {
  margin-top: 12px; padding: 12px 14px; background: var(--bg-sunk);
  border-radius: var(--radius); border-left: 3px solid var(--accent);
  font-size: 13px; color: var(--text-mid);
}

.card-linked-jobs { margin-top: 16px; }
.card-linked-jobs h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-light); margin-bottom: 9px; font-weight: 700;
}

.comment-item {
  background: var(--bg-sunk); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 8px;
}
.comment-meta {
  font-size: 11.5px; color: var(--text-light); margin-bottom: 4px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.comment-meta strong { color: var(--text-dark); }
.comment-text { font-size: 13px; color: var(--text-mid); white-space: pre-wrap; }

.comment-delete-btn {
  background: none; border: none; color: var(--text-light); cursor: pointer;
  font-size: 11px; padding: 0; text-decoration: underline; box-shadow: none;
}
.comment-delete-btn:hover { color: var(--danger); background: none; }

.comment-input-row { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.comment-input-row textarea {
  width: 100%; padding: 9px 11px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; resize: vertical;
}

.linked-job-pill, .removable-pill, .tag-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-light); color: var(--accent);
  padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
  margin: 0 6px 6px 0;
}
.removable-pill, .tag-pill { padding: 5px 6px 5px 12px; }

.removable-pill:has(.pill-link) { padding-left: 4px; transition: background 0.15s ease, box-shadow 0.15s ease; }

.pill-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: inherit; text-decoration: none; cursor: pointer;
  padding: 3px 4px 3px 8px; margin: -3px 0; border-radius: 16px;
  transition: background 0.15s ease, color 0.15s ease;
}
.pill-link::after {
  content: '›'; font-weight: 700; font-size: 13px; line-height: 1;
  color: var(--accent); opacity: 0; transform: translateX(-3px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.pill-link:hover {
  background: var(--white); color: var(--primary-hover);
  box-shadow: 0 1px 4px rgba(20, 23, 43, 0.12);
}
.pill-link:hover::after { opacity: 1; transform: translateX(0); }
.pill-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.removable-pill button, .tag-pill button {
  background: none; border: none; color: var(--accent); cursor: pointer;
  padding: 0 4px; font-size: 14px; line-height: 1; box-shadow: none;
  border-radius: 50%; transition: background 0.15s ease, color 0.15s ease;
}
.removable-pill button:hover, .tag-pill button:hover { color: var(--danger); background: rgba(197, 48, 62, 0.1); }

.cv-box {
  margin-top: 16px; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; background: var(--bg-sunk); border-radius: var(--radius);
  border: 1px solid var(--border-soft);
}
.cv-box a { color: var(--accent); font-weight: 600; font-size: 13px; text-decoration: none; }
.cv-box a:hover { text-decoration: underline; }
.cv-box .cv-icon { font-size: 15px; }

.badge {
  display: inline-block; padding: 4px 12px; border-radius: 20px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
}
.badge-open, .badge-new { background: var(--success-bg); color: var(--success); }
.badge-closed, .badge-rejected { background: var(--danger-bg); color: var(--danger); }
.badge-reviewed, .badge-shortlisted { background: var(--warning-bg); color: var(--warning); }
.badge-hired { background: var(--accent-light); color: var(--accent); }

.alert { padding: 13px 17px; margin-bottom: 16px; border-radius: var(--radius); font-size: 13.5px; border-left: 4px solid; }
.alert-success { background: var(--success-bg); border-left-color: var(--success); color: #0d5c3d; }
.alert-error { background: var(--danger-bg); border-left-color: var(--danger); color: #8f2029; }
.alert-warning { background: var(--warning-bg); border-left-color: var(--warning); color: #7a3d06; }

/* ============================== AI features ============================== */
/* One consistent violet identity for every AI-powered control (Ask AI,
   AI Match, Fill with AI) so they read as one family at a glance and are
   visually distinct from the app's regular blue primary actions. */

.btn-ai { background: var(--teal); box-shadow: 0 1px 2px rgba(20, 184, 166, 0.28); }
.btn-ai:hover { background: #5d3fc0; }
.btn-ai:focus-visible { outline-color: var(--teal); }

.badge-ai { background: var(--teal-bg); color: var(--teal); }

.ai-box {
  background: var(--teal-bg); border: 1px solid #a7e6df; border-radius: var(--radius);
  padding: 15px 17px;
}
.ai-box + .ai-box { margin-top: 12px; }
.ai-box-label {
  display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px; color: var(--teal); margin-bottom: 8px;
}
.ai-box-text { font-size: 13.5px; color: var(--text-dark); line-height: 1.55; white-space: pre-wrap; }
.ai-box-meta { font-size: 11.5px; color: var(--text-light); margin-top: 10px; }

.ai-ref-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ai-ref-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--white); border: 1px solid #a7e6df; color: var(--teal);
  padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.ai-ref-chip:hover { background: var(--teal); color: #fff; border-color: var(--teal); }

.temp-credential-box {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 14px; font-weight: 600; color: var(--text-dark);
  background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; user-select: all; word-break: break-all;
}

.empty-state {
  text-align: center; padding: 64px 20px; background: var(--white);
  border: 1.5px dashed var(--border); border-radius: var(--radius-lg); color: var(--text-light);
}
.empty-state .empty-icon { font-size: 30px; margin-bottom: 12px; opacity: 0.6; }
.empty-state p { font-size: 13.5px; }

/* ============================== Modals ============================== */

.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(19, 22, 46, 0.55); backdrop-filter: blur(2px);
  z-index: 1000; align-items: center; justify-content: center; padding: 20px;
  overflow-y: auto;
}
.modal-overlay.active { display: flex; }

/* linkPickerModal doubles as "pick a candidate/user to add" while the
   compose modal is already open (compose-candidate/compose-adviser
   modes) — same z-index as every other modal-overlay meant it was
   opening BEHIND the compose modal in that case, since later DOM order
   wins a z-index tie and composeEmailModal is declared after it. Only
   needs to beat other modals, not the toast (1100). */
#linkPickerModal.active { z-index: 1050; }

.modal-box {
  background: var(--white); border-radius: var(--radius-xl); width: 100%; max-width: 540px;
  max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg);
}

.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 26px; border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; background: var(--white); z-index: 1;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.modal-header h3 { font-size: 17px; font-weight: 700; color: var(--text-dark); }

.modal-close {
  background: transparent; color: var(--text-light); border: none; box-shadow: none;
  font-size: 19px; cursor: pointer; padding: 4px 9px; line-height: 1; border-radius: var(--radius-sm);
}
.modal-close:hover { color: var(--text-dark); background: var(--bg-sunk); }

.modal-body { padding: 24px 26px; }

.modal-footer {
  padding: 18px 26px; border-top: 1px solid var(--border-soft);
  display: flex; justify-content: flex-end; gap: 10px;
  position: sticky; bottom: 0; background: var(--white);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.tags-input-wrap {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--white);
  min-height: 46px; align-items: center; cursor: text;
}
.tags-input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3.5px var(--accent-light); }
.tags-input-wrap input { border: none; outline: none; flex: 1; min-width: 120px; padding: 4px; font-size: 13px; width: auto; }

/* ============================== Stage pills ============================== */

.stage-pill {
  display: inline-block; padding: 4px 12px; border-radius: 20px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
}

.status-badge {
  display: inline-block; padding: 4px 12px; border-radius: 20px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
}
.status-badge.active { background: var(--success-bg); color: var(--success); }
.status-badge.inactive { background: var(--danger-bg); color: var(--danger); }
.status-badge.due-soon { background: var(--warning-bg); color: var(--warning); }
.stage-new { background: var(--info-bg); color: var(--info); }
.stage-contacted { background: var(--warning-bg); color: var(--warning); }
.stage-meeting_booked { background: #fde8d6; color: #b5560f; }
.stage-proposal_sent { background: var(--teal-bg); color: var(--teal); }
.stage-contract_signed { background: var(--success-bg); color: var(--success); }
.stage-active { background: var(--success-bg); color: var(--success); }
.stage-inactive { background: var(--bg-sunk); color: var(--text-light); }
.stage-screening { background: var(--warning-bg); color: var(--warning); }
.stage-submitted { background: #fde8d6; color: #b5560f; }
.stage-interviewing { background: var(--teal-bg); color: var(--teal); }
.stage-offered { background: #dbeafe; color: #1d5ba6; }
.stage-placed { background: var(--success-bg); color: var(--success); }
.stage-rejected { background: var(--danger-bg); color: var(--danger); }

/* Stage accent colour, reused for the column's top bar and the card
   avatars in it — one source of truth per stage instead of restating
   the same colour three different ways. */
:root {
  --stage-c-new: var(--info);
  --stage-c-screening: var(--warning);
  --stage-c-submitted: #b5560f;
  --stage-c-interviewing: var(--teal);
  --stage-c-offered: #1d5ba6;
  --stage-c-placed: var(--success);
  --stage-c-rejected: var(--danger);
}

.pipeline-board {
  display: flex; gap: 14px; align-items: flex-start; width: 100%;
  overflow-x: auto; padding-bottom: 6px;
}

.pipeline-column {
  flex: 1 1 220px; min-width: 220px; background: var(--white); border: 1px solid var(--border-soft);
  border-top: 3px solid var(--border-soft); border-radius: var(--radius-lg); display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.pipeline-column.stage-column-new { border-top-color: var(--stage-c-new); }
.pipeline-column.stage-column-screening { border-top-color: var(--stage-c-screening); }
.pipeline-column.stage-column-submitted { border-top-color: var(--stage-c-submitted); }
.pipeline-column.stage-column-interviewing { border-top-color: var(--stage-c-interviewing); }
.pipeline-column.stage-column-offered { border-top-color: var(--stage-c-offered); }
.pipeline-column.stage-column-placed { border-top-color: var(--stage-c-placed); }
.pipeline-column.stage-column-rejected { border-top-color: var(--stage-c-rejected); }
.pipeline-column.drag-over { background: var(--accent-light); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }

.pipeline-column-header {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 12px 12px 10px; border-bottom: 1px solid var(--border-soft); flex-shrink: 0;
}
.pipeline-column-header .stage-pill { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-column-count {
  flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--text-light);
  background: var(--bg-sunk); border-radius: 20px; padding: 2px 8px;
}

.pipeline-column-cards {
  flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 80px;
}

.pipeline-card {
  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 9px 10px; cursor: grab; box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 9px; text-align: left;
  transition: box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.pipeline-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #d7d9ec; }
.pipeline-card:active { cursor: grabbing; }
.pipeline-card.dragging { opacity: 0.4; transform: scale(0.97); }
.pipeline-card-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0;
  text-transform: none;
}
.pipeline-card-info { min-width: 0; flex: 1; text-align: left; }
.pipeline-card-name, .pipeline-card-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-card-name { font-size: 12.5px; font-weight: 700; color: var(--text-dark); }
.pipeline-card-meta { font-size: 11px; color: var(--text-light); margin-top: 1px; }
.pipeline-column-empty {
  font-size: 11.5px; color: var(--text-light); text-align: center; padding: 20px 10px;
  border: 1.5px dashed var(--border); border-radius: var(--radius); margin: 2px;
}

/* ============================== Pipeline stage settings ============================== */

.pipeline-stage-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.pipeline-stage-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 10px 12px; background: var(--bg-sunk); border-radius: var(--radius);
}
.pipeline-stage-row .form-group input { margin: 0; }
.pipeline-stage-hide-toggle {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 12.5px; font-weight: 600; color: var(--text-mid); cursor: pointer;
  padding-top: 10px;
}
.pipeline-stage-hide-toggle input[type="checkbox"]:disabled { cursor: not-allowed; }

.link-trigger-btn { margin-top: 12px; }

.link-picker-list { margin-top: 14px; max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }

.link-picker-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left; padding: 10px 13px;
  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius);
  cursor: pointer; box-shadow: none; transition: background 0.15s ease, border-color 0.15s ease;
}
.link-picker-item:hover { background: var(--accent-light); border-color: var(--accent); }
.link-picker-name { font-size: 13.5px; font-weight: 700; color: var(--text-dark); }
.link-picker-meta { font-size: 12px; color: var(--text-light); }

/* ============================== File upload dropzone ============================== */

.file-drop {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 92px; padding: 16px; cursor: pointer;
  border: 1.5px dashed var(--border); border-radius: var(--radius);
  background: var(--bg-sunk); transition: border-color 0.15s ease, background 0.15s ease;
}
.file-drop:hover { border-color: var(--accent); background: var(--accent-light); }
.file-drop.dragover { border-color: var(--accent); background: var(--accent-light); box-shadow: 0 0 0 3.5px var(--accent-light); }

/* input.file-drop-input (not just .file-drop-input) to match
   input[type="file"]'s specificity (0,1,1) — a bare class selector loses
   that tie by source order, so the wide default input[type="file"] width
   above silently won over this element's own intended width: 1px, every
   time. Confirmed live: the hidden input measured ~1265px wide (its
   nearest positioned ancestor's full width) instead of 1px, invisible on
   most tabs but wide enough to push a page-wide horizontal scrollbar on
   Agency Settings specifically, since nothing there happened to clip it. */
input.file-drop-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.file-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-light); text-align: center; }
.file-drop-empty svg { opacity: 0.7; }
.file-drop-text { font-size: 13px; color: var(--text-mid); line-height: 1.5; }
.file-drop-text strong { color: var(--accent); font-weight: 700; }
.file-drop-text span { font-size: 11.5px; color: var(--text-light); }

.file-drop-selected {
  display: flex; align-items: center; gap: 10px; width: 100%;
  color: var(--accent);
}
.file-drop-selected svg { flex-shrink: 0; }
.file-drop-filename {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
}
.file-drop-remove {
  flex-shrink: 0; background: none; border: none; color: var(--text-light); cursor: pointer;
  box-shadow: none; width: 26px; height: 26px; border-radius: 50%; padding: 0;
  font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.file-drop-remove:hover { background: var(--danger-bg); color: var(--danger); }

.search-bar-wrap { margin-bottom: 18px; position: relative; }
.search-bar-wrap::before {
  content: ''; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; pointer-events: none;
  background: var(--text-faint);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") center/contain no-repeat;
}
.search-bar-wrap input { width: 100%; max-width: 480px; padding: 11px 16px 11px 38px; font-size: 13.5px; }

.view-toggle {
  display: inline-flex; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg-sunk); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 3px; margin-bottom: 18px;
}
.view-toggle-btn {
  background: transparent; color: var(--text-mid); border: none; box-shadow: none;
  padding: 7px 16px; border-radius: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  flex-shrink: 0;
}
.view-toggle-btn:hover { background: transparent; color: var(--text-dark); }
.view-toggle-btn.active { background: var(--white); color: var(--accent); box-shadow: var(--shadow-sm); }
.view-toggle-btn .nav-count {
  margin-left: 6px; font-size: 11px; font-weight: 700;
  background: var(--accent); color: white;
  padding: 1px 7px; border-radius: 20px;
}

.bulk-assign-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  background: var(--accent-light); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px;
}
.bulk-assign-count { font-weight: 700; color: var(--text-dark); font-size: 13px; margin-right: auto; }
.bulk-assign-bar select { width: auto; min-width: 200px; padding: 8px 10px; }

.card-select-checkbox { width: 18px; height: 18px; margin-right: 2px; cursor: pointer; flex-shrink: 0; }

.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.card-tag { background: var(--bg-sunk); color: var(--text-mid); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; border: 1px solid var(--border-soft); }

.added-by { font-size: 12px; color: var(--text-light); margin-top: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.shared-badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 10.5px; font-weight: 700; background: var(--warning-bg); color: var(--warning);
  margin-left: 8px;
}

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.info-item { background: var(--bg-sunk); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px 14px; }
.info-item .info-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-light); margin-bottom: 4px; }
.info-item .info-value { font-size: 13.5px; font-weight: 600; color: var(--text-dark); word-break: break-word; }

.card-footer-actions {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}

/* ============================== Auth pages ============================== */

.auth-shell { min-height: 100vh; display: flex; }

.auth-brand-panel {
  flex: 1.1; display: flex; flex-direction: column; justify-content: center;
  padding: 60px 72px; color: white; position: relative; overflow: hidden;
  background: radial-gradient(circle at 15% 15%, var(--primary-700), var(--primary-900) 60%);
}
.auth-brand-panel::after {
  content: ''; position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  background: radial-gradient(circle at 85% 85%, rgba(125, 140, 245, 0.35), transparent 55%);
}
.auth-brand-panel > * { position: relative; }

.auth-brand-mark {
  width: 56px; height: 56px; margin-bottom: 28px;
  display: flex; align-items: center; justify-content: center;
}
.auth-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.auth-brand-panel h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.6px; max-width: 420px; line-height: 1.25; }
.auth-brand-panel p.auth-tagline { margin-top: 14px; font-size: 14.5px; color: #b9bee6; max-width: 380px; line-height: 1.6; }

.auth-form-panel { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 40px 24px; }

.login-container { max-width: 380px; width: 100%; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--text-light); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.oauth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.oauth-btn:first-of-type { margin-top: 0; }

.login-logo { display: none; width: 44px; height: 44px; margin-bottom: 20px; }
.login-logo img { width: 100%; height: 100%; object-fit: contain; }

.login-container h2 { margin-bottom: 6px; color: var(--text-dark); font-size: 22px; font-weight: 800; letter-spacing: -0.4px; }
.login-subtitle { color: var(--text-light); font-size: 13px; margin-bottom: 28px; }

/* ============================== Messages ============================== */

.messages-shell {
  display: flex; height: 600px; max-height: calc(100vh - 260px); min-height: 420px;
  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
}

.messages-list-panel {
  width: 280px; flex-shrink: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--border-soft); background: var(--bg-sunk); min-height: 0;
}

.messages-list-search { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); flex-shrink: 0; }
.messages-list-search input { width: 100%; padding: 8px 12px; font-size: 12.5px; background: var(--white); }

.messages-list { flex: 1; overflow-y: auto; }

.messages-list-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 12px 16px; background: transparent; border: none; box-shadow: none;
  cursor: pointer; border-bottom: 1px solid var(--border-soft);
  border-radius: 0; transition: background 0.15s ease;
}
.messages-list-item:hover { background: var(--white); }
.messages-list-item.active { background: var(--white); box-shadow: inset 3px 0 0 var(--accent); }

.messages-list-item .user-avatar { width: 34px; height: 34px; font-size: 13px; }

.messages-list-item-body { flex: 1; min-width: 0; }
.messages-list-item-name { font-size: 13.5px; font-weight: 700; color: var(--text-dark); display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.messages-list-item-preview {
  font-size: 12px; color: var(--text-light); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.messages-list-item.has-unread .messages-list-item-preview { color: var(--text-dark); font-weight: 600; }

.messages-list-item-time { font-size: 10.5px; color: var(--text-faint); font-weight: 600; flex-shrink: 0; }

.messages-unread-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
}

.presence-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; display: inline-block;
}
.presence-dot.online { background: var(--success); }

.messages-thread { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.messages-thread-header {
  padding: 14px 20px; border-bottom: 1px solid var(--border-soft);
  font-size: 14px; font-weight: 700; color: var(--text-dark);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.messages-thread-placeholder { color: var(--text-light); font-weight: 500; font-size: 13.5px; }

.messages-log { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }

.message-bubble-row { display: flex; }
.message-bubble-row.own { justify-content: flex-end; }

.message-bubble {
  max-width: 72%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5;
  background: var(--bg-sunk); color: var(--text-dark);
}
.message-bubble-row.own .message-bubble { background: var(--primary); color: white; }
.message-bubble p { white-space: pre-wrap; word-break: break-word; }
.message-bubble-time { font-size: 10px; margin-top: 4px; opacity: 0.6; }

.message-bubble-file {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,0.15);
  cursor: pointer; text-decoration: none; color: inherit; font-size: 12.5px; font-weight: 600;
}
.message-bubble-row:not(.own) .message-bubble-file { background: var(--white); border: 1px solid var(--border-soft); }
.message-bubble-file:hover { text-decoration: underline; }

.message-mention {
  color: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  background: rgba(255,255,255,0.22); padding: 1px 6px; border-radius: 6px; white-space: nowrap;
}
.message-bubble-row:not(.own) .message-mention { background: var(--accent-light); color: var(--accent); }
.message-mention:hover { text-decoration: underline; }

.messages-composer { border-top: 1px solid var(--border-soft); padding: 12px 16px; flex-shrink: 0; }

#messagesMentionDropdown {
  position: absolute; bottom: 100%; left: 16px; right: 16px; margin-bottom: 6px;
  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius);
  box-shadow: var(--shadow-md); max-height: 220px; overflow-y: auto; padding: 4px; z-index: 20;
}
.mention-dropdown-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 7px 10px; border-radius: 7px;
  background: none; border: none; box-shadow: none; font-size: 13px; cursor: pointer;
  color: var(--text-dark); font-weight: 600;
}
.mention-dropdown-item:hover, .mention-dropdown-item.active { background: var(--bg-sunk); }
.mention-dropdown-meta { font-size: 11.5px; color: var(--text-light); font-weight: 400; }

/* Comment @-mentions — one shared dropdown reused across whichever
   candidate card's comment box is focused, positioned in JS via
   getBoundingClientRect() rather than CSS anchoring (unlike the
   composer's single fixed element, there's one textarea per open card). */
#commentMentionDropdown {
  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius);
  box-shadow: var(--shadow-md); max-height: 220px; overflow-y: auto; padding: 4px; z-index: 50;
}
.comment-mention {
  font-weight: 700; background: var(--accent-light); color: var(--accent);
  padding: 1px 6px; border-radius: 6px; white-space: nowrap;
}

.messages-attachment-chip {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px;
  padding: 5px 6px 5px 10px; background: var(--accent-light); color: var(--accent);
  border-radius: 20px; font-size: 12px; font-weight: 600;
}
.messages-attachment-chip button {
  background: none; border: none; color: var(--accent); cursor: pointer; box-shadow: none;
  padding: 0 4px; font-size: 14px; line-height: 1; border-radius: 50%;
}
.messages-attachment-chip button:hover { color: var(--danger); background: rgba(197, 48, 62, 0.1); }

.messages-composer-row { display: flex; align-items: flex-end; gap: 8px; }

.messages-attach-btn {
  flex-shrink: 0; width: 38px; height: 38px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg-sunk); color: var(--text-mid); border: 1px solid var(--border); box-shadow: none;
}
.messages-attach-btn:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }

.messages-composer-input { flex: 1; min-height: 38px; max-height: 120px; padding: 9px 13px; resize: none; }

/* ============================== Message toast ============================== */

.message-toast {
  position: fixed; bottom: 22px; right: 22px; width: 320px; z-index: 1100;
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-soft); overflow: hidden;
  animation: toast-in 0.25s ease;
}
@keyframes toast-in { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.message-toast-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 14px 14px 10px; }
.message-toast-sender { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.message-toast-sender-text { min-width: 0; }
.message-toast-name { font-size: 13.5px; font-weight: 700; color: var(--text-dark); }
.message-toast-preview {
  font-size: 12.5px; color: var(--text-mid); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.message-toast-header .modal-close { flex-shrink: 0; font-size: 16px; padding: 2px 6px; }

.message-toast-reply-row { display: flex; gap: 6px; padding: 0 14px 12px; }
.message-toast-reply-row input { flex: 1; padding: 8px 11px; font-size: 12.5px; }
.message-toast-reply-row button { flex-shrink: 0; padding: 8px 14px; font-size: 12.5px; }

.message-toast-view-btn {
  display: block; width: 100%; background: var(--bg-sunk); color: var(--text-mid);
  border: none; border-top: 1px solid var(--border-soft); box-shadow: none;
  padding: 9px; font-size: 12px; font-weight: 600; border-radius: 0; text-align: center;
}
.message-toast-view-btn:hover { background: var(--accent-light); color: var(--accent); }

/* ============================== Calendar ============================== */

.calendar-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.calendar-nav { display: flex; align-items: center; gap: 10px; }
.calendar-nav-btn { width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.calendar-month-label { font-size: 15.5px; font-weight: 700; color: var(--text-dark); min-width: 150px; text-align: center; }

.calendar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
}

.calendar-day-header {
  padding: 10px; text-align: center; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-light); background: var(--bg-sunk); border-bottom: 1px solid var(--border-soft);
}

.calendar-cell {
  min-height: 108px; padding: 8px; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
  cursor: pointer; transition: background 0.15s ease; display: flex; flex-direction: column; gap: 5px;
}
.calendar-cell:hover { background: var(--bg-sunk); }
.calendar-cell:nth-child(7n) { border-right: none; }
.calendar-cell.outside { background: var(--bg-sunk); }
.calendar-cell.outside .calendar-cell-date { color: var(--text-faint); }
.calendar-cell.today .calendar-cell-date {
  background: var(--primary); color: white; width: 21px; height: 21px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.calendar-cell-date { font-size: 12px; font-weight: 700; color: var(--text-dark); }
.calendar-cell-events { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }

.calendar-event-chip {
  font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.calendar-more { font-size: 10px; color: var(--text-light); font-weight: 700; padding-left: 6px; }

/* Week view — same 7-column grid, taller cells, no "+N more" truncation */
.calendar-week-cell { min-height: 340px; align-items: stretch; gap: 4px; }
.calendar-week-cell .calendar-event-chip { padding: 5px 7px; font-size: 11px; }
.calendar-day-header-date { display: block; font-size: 15px; font-weight: 800; color: var(--text-dark); margin-top: 2px; }
.calendar-empty-hint { color: var(--text-faint); font-size: 11px; text-align: center; margin-top: 24px; }

/* Day view — single-column agenda list */
.calendar-grid.calendar-view-day { display: block; background: transparent; border: none; box-shadow: none; }
.calendar-day-agenda { display: flex; flex-direction: column; gap: 10px; }
.calendar-agenda-item {
  display: flex; gap: 18px; align-items: flex-start; padding: 14px 18px;
  border-radius: var(--radius-lg); border-left: 4px solid; background: var(--bg-sunk);
  cursor: pointer; transition: background 0.15s ease; box-shadow: var(--shadow-sm);
}
.calendar-agenda-item:hover { filter: brightness(0.98); }
.calendar-agenda-time { font-weight: 700; font-size: 13px; color: var(--text-dark); min-width: 110px; flex-shrink: 0; }
.calendar-agenda-body { flex: 1; min-width: 0; }
.calendar-agenda-title { font-size: 14.5px; font-weight: 700; color: var(--text-dark); }
.calendar-agenda-meta { font-size: 12px; color: var(--text-light); margin-top: 5px; }
.calendar-agenda-meta .badge { vertical-align: middle; }

.event-type-call { background: var(--info-bg); color: var(--info); border-left-color: var(--info); }
.event-type-meeting { background: var(--teal-bg); color: var(--teal); border-left-color: var(--teal); }
.event-type-interview { background: var(--warning-bg); color: var(--warning); border-left-color: var(--warning); }
.event-type-other { background: var(--bg-sunk); color: var(--text-mid); border-left-color: var(--text-light); }

.calendar-candidate-event {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: 6px; border-radius: var(--radius); border-left: 3px solid;
  font-size: 12.5px; cursor: pointer; background: var(--bg-sunk); transition: background 0.15s ease;
}
.calendar-candidate-event:hover { filter: brightness(0.97); }
.calendar-candidate-event-date { font-weight: 700; color: var(--text-dark); flex-shrink: 0; }
.calendar-candidate-event-title {
  color: var(--text-mid); flex: 1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: right;
}

/* ============================== Responsive ============================== */

@media (max-width: 980px) {
  .auth-brand-panel { display: none; }
  .login-logo { display: block; }
}

@media (max-width: 768px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: relative; padding: 0; }
  .sidebar-brand { padding: 14px 16px; }
  .sidebar-nav {
    flex-direction: row; overflow-x: auto; padding: 8px 12px;
    border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nav-link { flex-shrink: 0; }
  .sidebar-footer { flex-direction: row; align-items: center; border-top: none; }
  .sidebar-user-info { display: block; }
  .container { padding: 22px 16px; }
  .card { padding: 17px; }
  .page-header { flex-direction: column; align-items: start; gap: 12px; }
  .form-row { grid-template-columns: 1fr; }
  .auth-form-panel { padding: 24px 16px; }
  .messages-shell { flex-direction: column; height: auto; max-height: none; }
  .messages-list-panel { width: 100%; max-height: 220px; border-right: none; border-bottom: 1px solid var(--border-soft); }
  .messages-thread { min-height: 440px; }
  .message-toast { left: 16px; right: 16px; width: auto; bottom: 16px; }
  .calendar-cell { min-height: 70px; padding: 5px; gap: 3px; }
  .calendar-day-header { font-size: 9px; padding: 6px 2px; }
  .calendar-event-chip { font-size: 9px; padding: 1px 4px; }
  .calendar-month-label { min-width: 0; font-size: 14px; }
  /* stats-charts-grid's 360px column minimum is wider than a phone's
     usable content width (container padding leaves ~340px at 375px
     wide, less on smaller phones) — auto-fit can't drop below that
     minimum, so it was forcing the grid itself to overflow. */
  .stats-charts-grid { grid-template-columns: 1fr; }
}

/* ============================== Toasts & dialogs ==============================
   In-app replacements for alert()/confirm()/prompt() — see showToast /
   confirmDialog / promptDialog in app.js. Bottom-centre so they never
   collide with the message toast in the bottom-right corner. */

.btn-danger { background: #d0293a; color: #fff; }
.btn-danger:hover { background: #b3202f; }

.new-version-banner {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 1300; display: flex; align-items: center; gap: 14px;
  width: max-content; max-width: calc(100vw - 32px);
  padding: 10px 10px 10px 16px; border-radius: var(--radius-lg);
  background: var(--primary-700); color: #fff; box-shadow: var(--shadow-lg);
  font-size: 13.5px; line-height: 1.4; animation: toast-in 0.22s ease;
}
.new-version-banner button {
  flex-shrink: 0; background: #fff; color: var(--primary-800); border: none;
  padding: 7px 14px; font-weight: 700; font-size: 13px; border-radius: var(--radius-md, 8px);
}
.new-version-banner button:hover { background: #eef0ff; }

.toast-stack {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 1200; display: flex; flex-direction: column; gap: 8px;
  width: min(440px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 12px 12px 14px; border-radius: var(--radius-lg);
  background: var(--white); color: var(--text-dark);
  border: 1px solid var(--border); border-left: 4px solid var(--info);
  box-shadow: var(--shadow-lg); font-size: 13.5px; line-height: 1.45;
  animation: toast-in 0.22s ease;
}
.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-icon {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; color: #fff; background: var(--info); margin-top: 1px;
}
.toast-success .toast-icon { background: var(--success); }
.toast-error .toast-icon { background: var(--danger); }
.toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-close {
  flex-shrink: 0; background: transparent; color: var(--text-light); border: none; box-shadow: none;
  padding: 0 6px; font-size: 17px; line-height: 1.1; border-radius: var(--radius-sm);
}
.toast-close:hover { background: var(--bg-sunk); color: var(--text-dark); }
.toast-leaving { opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; }

.app-dialog-overlay { z-index: 1150; animation: fade-in 0.15s ease; }
.app-dialog {
  max-width: 440px; padding: 24px 24px 18px; border-radius: var(--radius-xl);
  animation: dialog-in 0.18s ease;
}
.app-dialog-message { font-size: 14.5px; line-height: 1.55; color: var(--text-dark); white-space: pre-line; margin: 0 0 18px; }
.app-dialog-input { width: 100%; margin: -4px 0 18px; }
.app-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .toast, .app-dialog, .app-dialog-overlay { animation: none; }
  .toast-leaving { transition: none; }
}

/* ============================== Command palette (Ctrl/⌘+K) ============================== */

.palette-overlay { align-items: flex-start; padding-top: 12vh; z-index: 1150; animation: fade-in 0.12s ease; }
.palette {
  width: min(620px, 100%); background: var(--white); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden;
  animation: dialog-in 0.16s ease;
}
.palette-search {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft); color: var(--text-light);
}
.palette-input {
  flex: 1; border: none !important; box-shadow: none !important; outline: none;
  background: transparent; padding: 4px 0; font-size: 15.5px; color: var(--text-dark);
}
.palette-results { max-height: min(420px, 60vh); overflow-y: auto; padding: 6px; }
.palette-group {
  padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-light);
}
.palette-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 10px; border-radius: var(--radius); cursor: pointer; font-size: 14px; color: var(--text-dark);
}
.palette-item.active { background: var(--accent-light); color: var(--accent); }
.palette-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item-hint { flex-shrink: 0; font-size: 12px; color: var(--text-light); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-empty { padding: 22px; text-align: center; color: var(--text-light); font-size: 13.5px; }

kbd {
  display: inline-block; min-width: 22px; padding: 2px 6px; border-radius: 6px;
  border: 1px solid var(--border); border-bottom-width: 2px; background: var(--bg);
  font: 600 11px/1.4 inherit; color: var(--text-mid); text-align: center;
}
.shortcut-list { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; padding-bottom: 18px; }
.shortcut-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; color: var(--text-dark);
}
.shortcut-row:last-child { border-bottom: none; }
.shortcut-keys { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.shortcut-sep { font-size: 11px; color: var(--text-light); }

@media (prefers-reduced-motion: reduce) {
  .palette, .palette-overlay { animation: none; }
}

.sidebar-search {
  margin: 0 12px 4px; width: calc(100% - 24px); display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; box-shadow: none;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  color: #9ca1cc; font-size: 13px; font-weight: 500; text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-search:hover { background: rgba(255,255,255,0.1); color: white; }
.sidebar-search span { flex: 1; }
.sidebar-search kbd { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); color: #b7bbdc; font-size: 10.5px; }

@media (max-width: 768px) {
  .sidebar-search { display: none; }
}

/* ============================== Table view (candidates & jobs) ============================== */

.search-bar-wrap { display: flex; align-items: center; gap: 10px; }
.search-bar-wrap input { flex: 1; }
.layout-toggle {
  display: inline-flex; flex-shrink: 0; margin-left: auto; padding: 3px; gap: 2px;
  background: var(--bg-sunk); border: 1px solid var(--border-soft); border-radius: var(--radius);
}
.layout-toggle-btn {
  background: transparent; color: var(--text-light); box-shadow: none; border: none;
  padding: 6px 9px; border-radius: var(--radius-sm); display: inline-flex; align-items: center;
}
.layout-toggle-btn:hover { background: var(--white); color: var(--text-dark); }
.layout-toggle-btn.active { background: var(--white); color: var(--accent); box-shadow: var(--shadow-sm); }

.data-table-wrap {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow-x: auto; box-shadow: var(--shadow-sm);
}
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--bg); text-align: left;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--text-light); padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.data-table th.sortable button {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.data-table th.sortable button:hover, .data-table th.sorted button { color: var(--text-dark); }
.data-table th.sortable button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.sort-arrow { font-size: 9px; color: var(--accent); }
.data-table td { padding: 10px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; color: var(--text-dark); }
.data-row { cursor: pointer; transition: background 0.12s ease; }
.data-row:hover { background: var(--bg); }
.data-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.data-row.open { background: var(--accent-light); }
.data-row.open td { border-bottom-color: transparent; }
.detail-row > td { padding: 4px 12px 14px; background: var(--accent-light); }
.detail-row .card { margin-bottom: 0; box-shadow: var(--shadow); }
.data-table tbody tr:last-child td { border-bottom: none; }
.table-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.table-sub { font-size: 12px; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.table-owner, .table-date { white-space: nowrap; color: var(--text-mid); }
.table-num { text-align: right; font-variant-numeric: tabular-nums; }
.table-muted { color: var(--text-faint); }
.table-flag { font-size: 12px; margin-left: 2px; }
.table-more { font-size: 11.5px; color: var(--text-light); margin-left: 4px; }
.col-tags .card-tag { margin: 0 4px 0 0; }
.col-select { width: 36px; }
.table-count { margin: 10px 4px 0; font-size: 12.5px; color: var(--text-light); }

/* ============================== Loading placeholders ============================== */

.skeleton-list { display: flex; flex-direction: column; gap: 10px; }
.skeleton {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-sunk) 0%, var(--border-soft) 45%, var(--bg-sunk) 90%);
  background-size: 300% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-text { height: 11px; }
.skeleton-title { height: 15px; width: 46%; margin-bottom: 9px; }
.skeleton-pill { height: 20px; width: 84px; border-radius: 20px; margin-top: 12px; }
.skeleton-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.skeleton-row { display: flex; align-items: center; gap: 12px; }
.skeleton-row .skeleton-text + .skeleton-text { margin-top: 7px; }
.skeleton-card { padding: 18px 20px; }
@keyframes skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* Fixed layout: column widths below, the name column takes the rest, and
   an expanded row's card is always exactly the table's width (auto
   layout let a wide card stretch the table past its container). */
.data-table { table-layout: fixed; min-width: 720px; }
.data-table td { overflow: hidden; text-overflow: ellipsis; }
.data-table .detail-row > td { overflow: visible; white-space: normal; }
.data-table .w-stage { width: 128px; }
.data-table .w-status { width: 96px; }
.data-table .w-owner { width: 132px; }
.data-table .w-company { width: 170px; }
.data-table .w-tags { width: 150px; }
.data-table .w-date { width: 106px; }
.data-table .w-retain { width: 124px; }
.data-table .w-count { width: 100px; }
.data-table .col-select { width: 40px; }
.table-name, .table-sub { max-width: none; }
.col-tags { white-space: nowrap; }
.data-table { min-width: 560px; }
.data-table .w-stage { width: 118px; }
.data-table .w-owner { width: 120px; }
.data-table .w-date { width: 100px; }
.data-table .w-retain { width: 116px; }
.data-table .w-company { width: 150px; }
/* Narrower screens: drop the least-needed columns before squeezing names. */
/* Collapsed to zero width rather than display:none — an expanded row's
   colspan still spans every column, and a display:none column would
   otherwise keep claiming a share of the width. */
@media (max-width: 1360px) { .data-table .w-tags, .data-table .col-tags { width: 0; padding: 0; border: 0; visibility: hidden; } }
@media (max-width: 1140px) { .data-table .w-retain, .data-table .col-retain { width: 0; padding: 0; border: 0; visibility: hidden; } }
.data-table thead th { overflow: hidden; text-overflow: ellipsis; }
.data-table td, .data-table thead th { padding-left: 12px; padding-right: 12px; }
.data-table .w-date { width: 114px; }
.data-table .w-company { width: 132px; }
.data-table .w-count { width: 104px; }
@media (max-width: 1140px) { .data-table .col-optional { width: 0; padding: 0; border: 0; visibility: hidden; } }

/* ============================== Polish pass (24 Sept 2026) ==============================
   Small, low-risk refinements layered on top of the rules above. */

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: var(--accent-light-hover); color: var(--text-dark); }

/* Thin, theme-aware scrollbars for long working sessions. */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: padding-box; border: 2px solid transparent; }
*::-webkit-scrollbar-track { background: transparent; }

/* Consistent keyboard focus everywhere, not only on buttons. */
a:focus-visible, .nav-link:focus-visible, .view-toggle-btn:focus-visible, .card-header:focus-visible,
.layout-toggle-btn:focus-visible, .sidebar-search:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Cards: slightly denser, title centred against the chevron, and a hover
   border that follows the theme (the old hard-coded #d7d9ec flashed a
   bright outline on every card in dark mode). */
.card { padding: 16px 20px; }
.card-header { align-items: center; }
.card:hover { border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }
.detail-row .card:hover { border-color: var(--border-soft); }

/* Drawn chevron instead of the ▶ text glyph. */
.chevron { font-size: 0; }
.chevron::before {
  content: ''; width: 11px; height: 11px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>") center/contain no-repeat;
}

/* Friendlier empty states. */
.empty-state { border-style: dashed; padding: 56px 24px; }
.empty-state .empty-icon {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-light); font-size: 24px; opacity: 1;
}
.empty-state p { max-width: 420px; margin: 0 auto; color: var(--text-mid); line-height: 1.55; }

/* Numbers line up in columns. */
.data-table, .stat-value, .stats-card, .nav-count, .table-date { font-variant-numeric: tabular-nums; }

/* Gentle fade when switching tabs. */
.tab-content.active { animation: tab-fade 0.16s ease; }
@keyframes tab-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .tab-content.active { animation: none; }
  .card, .chevron, .data-row, .nav-link { transition: none; }
}

/* ============================== Candidate profile fields ============================== */
.form-section {
  margin: 4px 0 18px; padding: 16px 16px 2px; border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); background: var(--bg);
}
.form-section-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-light); margin-bottom: 12px;
}
.form-row-3 { grid-template-columns: 1fr 1fr 110px; }
.card-role { font-size: 12.5px; color: var(--text-mid); margin-top: 3px; overflow-wrap: anywhere; }
.card-role .sep { color: var(--text-faint); margin: 0 5px; }
@media (max-width: 768px) { .form-row-3 { grid-template-columns: 1fr; } }

/* ============================== Candidate filters ============================== */
.filter-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  background: var(--white); color: var(--text-mid); border: 1px solid var(--border);
  box-shadow: none; padding: 9px 13px; font-size: 13px; font-weight: 600;
}
.filter-btn:hover { background: var(--bg-sunk); color: var(--text-dark); }
.filter-btn.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-light); }
.filter-count {
  min-width: 18px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: #fff;
  font-size: 11px; line-height: 18px; text-align: center;
}
.filter-panel {
  margin: -6px 0 18px; padding: 16px; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 14px; }
.filter-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-mid); }
.filter-grid select, .filter-grid input { padding: 8px 10px; font-size: 13px; }
.filter-panel-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.filter-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dark); font-weight: 500; }
.cv-match-badge {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 20px; vertical-align: middle;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--teal); background: var(--teal-bg);
}

/* ============================== Per-job pipeline ============================== */
.pipeline-summary { margin-left: 8px; font-size: 11.5px; font-weight: 600; color: var(--text-light); text-transform: none; letter-spacing: 0; }
.pipeline-links { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.pipeline-link-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 8px 6px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--white);
}
.pipeline-link-row .pill-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-link-actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pipeline-unlink {
  background: transparent; box-shadow: none; border: none; color: var(--text-light);
  padding: 2px 7px; font-size: 16px; line-height: 1; border-radius: var(--radius-sm);
}
.pipeline-unlink:hover { background: var(--danger-bg); color: var(--danger); }
.job-stage-select, .job-stage-tag {
  font-size: 12px; font-weight: 700; padding: 4px 26px 4px 10px; border-radius: 20px; border: 1px solid transparent;
  background-color: var(--bg-sunk); color: var(--text-mid); width: auto; min-width: 0; cursor: pointer;
}
.job-stage-tag { padding-right: 10px; cursor: default; }
.job-stage-select.stage-applied, .job-stage-tag.stage-applied { background-color: var(--info-bg); color: var(--info); }
.job-stage-select.stage-cv_sent, .job-stage-tag.stage-cv_sent { background-color: var(--accent-light); color: var(--accent); }
.job-stage-select.stage-interview, .job-stage-select.stage-final_interview,
.job-stage-tag.stage-interview, .job-stage-tag.stage-final_interview { background-color: var(--teal-bg); color: var(--teal); }
.job-stage-select.stage-offer, .job-stage-tag.stage-offer { background-color: var(--warning-bg); color: var(--warning); }
.job-stage-select.stage-placed, .job-stage-tag.stage-placed { background-color: var(--success-bg); color: var(--success); }
.job-stage-select.stage-rejected, .job-stage-select.stage-withdrawn,
.job-stage-tag.stage-rejected, .job-stage-tag.stage-withdrawn { background-color: var(--danger-bg); color: var(--danger); }
.table-sub-inline { font-size: 12px; color: var(--text-light); }

/* ============================== Clients & contacts ============================== */
.client-status {
  flex-shrink: 0; display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
}
.client-status-active { background: var(--success-bg); color: var(--success); }
.client-status-prospect { background: var(--info-bg); color: var(--info); }
.client-status-inactive { background: var(--bg-sunk); color: var(--text-light); }
.client-terms { margin: 12px 0 0; font-size: 13px; color: var(--text-dark); }
.client-terms .info-label { display: inline; margin-right: 6px; }
.contact-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.contact-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--white);
}
.contact-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-light); color: var(--accent); font-weight: 700; font-size: 13px;
}
.contact-main { flex: 1; min-width: 0; }
.contact-name { font-weight: 700; font-size: 13.5px; color: var(--text-dark); }
.contact-primary {
  margin-left: 6px; padding: 1px 7px; border-radius: 20px; font-size: 10.5px; font-weight: 700;
  background: var(--accent-light); color: var(--accent); vertical-align: middle;
}
.contact-meta { font-size: 12.5px; color: var(--text-mid); margin-top: 2px; overflow-wrap: anywhere; }
.contact-meta .sep, .card-role .sep { color: var(--text-faint); margin: 0 6px; }
.contact-notes { font-size: 12.5px; color: var(--text-light); margin-top: 4px; white-space: pre-line; }
.field-hint {
  margin-top: 6px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12.5px;
  background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border);
}
.data-table .w-num { width: 92px; }

/* ============================== Activity log ============================== */
.last-contact { font-size: 11.5px; font-weight: 600; margin-left: 8px; white-space: nowrap; }
.last-contact-fresh { color: var(--success); }
.last-contact-aging { color: var(--warning); }
.last-contact-stale, .last-contact-never { color: var(--text-light); }
.activity-log-form {
  display: flex; flex-direction: column; gap: 8px; padding: 12px; margin: 6px 0 12px;
  border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--bg);
}
.activity-type-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.activity-chip {
  background: var(--white); color: var(--text-mid); border: 1px solid var(--border); box-shadow: none;
  padding: 5px 11px; font-size: 12.5px; font-weight: 600; border-radius: 20px;
}
.activity-chip:hover { background: var(--bg-sunk); color: var(--text-dark); }
.activity-chip.active { background: var(--accent-light); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.activity-form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.activity-form-row select, .activity-form-row input { width: auto; flex: 0 1 auto; padding: 7px 10px; font-size: 13px; }
.activity-log-form textarea { min-height: 54px; font-size: 13px; }
.activity-timeline { display: flex; flex-direction: column; gap: 2px; }
.activity-item { display: flex; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border-soft); }
.activity-item:last-child { border-bottom: none; }
.activity-icon { width: 26px; flex-shrink: 0; text-align: center; font-size: 15px; line-height: 22px; }
.activity-main { flex: 1; min-width: 0; }
.activity-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dark); }
.activity-when { margin-left: auto; font-size: 12px; color: var(--text-light); }
.activity-body { font-size: 13px; color: var(--text-mid); margin-top: 3px; white-space: pre-line; overflow-wrap: anywhere; }
.activity-outcome-tag { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 20px; background: var(--bg-sunk); color: var(--text-mid); }
.activity-outcome-tag.outcome-connected, .activity-outcome-tag.outcome-interested { background: var(--success-bg); color: var(--success); }
.activity-outcome-tag.outcome-not_interested { background: var(--danger-bg); color: var(--danger); }
.activity-outcome-tag.outcome-voicemail, .activity-outcome-tag.outcome-no_answer { background: var(--warning-bg); color: var(--warning); }
.activity-delete { background: transparent; border: none; box-shadow: none; color: var(--text-faint); padding: 0 6px; font-size: 15px; line-height: 1; }
.activity-delete:hover { color: var(--danger); background: var(--danger-bg); }

/* ============================== Tasks ============================== */
.task-group { margin-bottom: 20px; }
.task-group-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-light);
  margin: 0 0 8px 4px;
}
.task-group-title span { margin-left: 6px; color: var(--text-faint); }
.task-group-title.overdue { color: var(--danger); }
.task-group-list { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.task-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
.task-row:last-child { border-bottom: none; }
.task-row:hover { background: var(--bg); }
.task-check { margin-top: 2px; flex-shrink: 0; }
.task-main { flex: 1; min-width: 0; }
.task-title { font-size: 14px; font-weight: 600; }
.task-title a { color: var(--text-dark); text-decoration: none; }
.task-title a:hover { color: var(--accent); }
.task-row.done .task-title, .task-row.done .task-title a { color: var(--text-light); text-decoration: line-through; }
.task-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--text-light); margin-top: 3px; }
.task-row.overdue .task-due { color: var(--danger); font-weight: 700; }
.task-link { color: var(--accent); text-decoration: none; }
.task-link:hover { text-decoration: underline; }
.task-notes { font-size: 12.5px; color: var(--text-mid); margin-top: 4px; white-space: pre-line; }

/* ============================== Team activity report ============================== */
.activity-report-card { margin-bottom: 18px; }
.activity-report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.report-table { table-layout: auto; min-width: 760px; font-size: 13px; }
.report-table th, .report-table td { white-space: nowrap; padding: 9px 10px; }
.report-table .report-name { text-align: left; min-width: 140px; }
.report-table .report-key { background: color-mix(in srgb, var(--accent) 8%, transparent); font-weight: 700; }
.report-table thead .report-key { color: var(--accent); }
.report-total td { font-weight: 700; border-top: 2px solid var(--border); background: var(--bg); }