/* PersonalScore — design system (Motopp brand) */
:root {
  /* Motopp brand palette (motopp.nl) */
  --brand-dark: #111f25;   /* logo / primary dark teal */
  --brand-blue: #c7dde5;   /* light blue (hero + primary button) */
  --brand-cream: #f7f4f0;  /* warm off-white */
  --brand-tan: #c9b599;    /* sand accent */
  --brand-slate: #617278;  /* muted slate */

  /* Neutrals (subtly warmed to match the Motopp cream) */
  --bg: #f6f5f2;
  --surface: #ffffff;
  --surface-2: #f2f2ef;
  --border: #e8e7e2;
  --border-strong: #d7d6cf;
  --text: #14181f;
  --text-muted: #687283;
  --text-faint: #99a2b1;

  /* Accent — Motopp dark teal, with the light blue as the soft highlight */
  --accent: #111f25;
  --accent-hover: #24404a;
  --accent-weak: #e6f0f4;
  --accent-ring: rgba(17, 31, 37, .18);

  /* Semantic */
  --success: #15803d; --success-bg: #e9f7ee;
  --warning: #b45309; --warning-bg: #fdf3e3;
  --danger:  #b91c1c; --danger-bg:  #fdeaea;
  --info:    #1d4ed8; --info-bg:    #e8eefc;
  --purple:  #6d28d9; --purple-bg:  #f1eafe;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.12);
  --sidebar-w: 248px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

/* Micro-interactions: one shared transition for everything interactive, and a
   visible keyboard-focus ring (modern + accessible). */
.btn, .icon-btn, .nav a, .chip, .combo-input, .status-opt, .anchor, .fb-open,
.filters input, .filters select, .field .input, .field select, .field textarea,
table.data tbody tr {
  transition: background-color .13s ease, color .13s ease, border-color .13s ease,
              box-shadow .13s ease;
}
.btn:focus-visible, .icon-btn:focus-visible, .chip:focus-visible,
.status-trigger:focus-visible, .status-opt:focus-visible, .fb-open:focus-visible,
.modal-close:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--accent-ring);
}
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Thin, unobtrusive scrollbars in scroll containers */
.table-wrap, .chat-log, .modal-body, .combo-list {
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.table-wrap::-webkit-scrollbar, .chat-log::-webkit-scrollbar,
.modal-body::-webkit-scrollbar, .combo-list::-webkit-scrollbar { width: 8px; height: 8px; }
.table-wrap::-webkit-scrollbar-thumb, .chat-log::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb, .combo-list::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 99px;
}
body {
  margin: 0; font-family: var(--font); color: var(--text);
  background: var(--bg); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; font-weight: 650; letter-spacing: -.01em; margin: 0; }
h2 { font-size: 17px; font-weight: 600; margin: 0; }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 14px; color: var(--text); }

/* ---------- App shell ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar .brand {
  display: flex; align-items: center; gap: 10px; padding: 18px 20px;
  font-weight: 700; font-size: 14px; letter-spacing: .02em;
  border-bottom: 1px solid var(--border);
}
.sidebar .brand { gap: 10px; }
.sidebar .brand .logo-img { height: 22px; width: auto; display: block; }
.sidebar .brand .brand-app {
  font-weight: 600; font-size: 13px; letter-spacing: 0; color: var(--text-muted);
  padding-left: 10px; border-left: 1px solid var(--border-strong);
}
.sidebar .brand .logo {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
  background: var(--brand-dark);
  display: grid; place-items: center; color: #fff; font-weight: 700;
}
/* flex:1 + min-height:0 lets the nav scroll instead of pushing items (e.g. the
   Settings section) off the bottom of a short viewport. */
.nav { padding: 12px; display: flex; flex-direction: column; gap: 2px; flex: 1;
  min-height: 0; overflow-y: auto; }
.nav .label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint); padding: 14px 12px 6px;
}
.nav a, .nav .nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 500;
}
.nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav a.active { background: var(--accent-weak); color: var(--accent); font-weight: 600; }
.nav a.active svg { color: var(--accent); }
.nav svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--text-faint); }
.nav .nav-item.disabled { color: var(--text-faint); cursor: default; }
.nav .soon {
  margin-left: auto; font-size: 10px; background: var(--surface-2);
  color: var(--text-faint); padding: 2px 7px; border-radius: 999px; font-weight: 600;
}
.sidebar .foot { padding: 14px; border-top: 1px solid var(--border); }

/* ---------- Topbar ---------- */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 60px; background: rgba(255,255,255,.8); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); display: flex; align-items: center;
  justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 5;
}
.topbar .crumbs { color: var(--text-muted); font-size: 13px; }
.topbar .crumbs b { color: var(--text); font-weight: 600; }
.user { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--accent);
  color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 12px;
}
.content { padding: 28px; max-width: 1200px; width: 100%; }
/* Data-heavy list pages need more room than reading-oriented pages. */
.content.wide { max-width: 1500px; }
.page-head { margin-bottom: 22px; }
.page-head .sub { color: var(--text-muted); margin: 4px 0 0; font-size: 13px; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px;
}
.card.tight { padding: 0; overflow: hidden; }
.card-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.grid { display: grid; gap: 18px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn.secondary:hover { background: var(--surface-2); }
.btn.sm { padding: 5px 11px; font-size: 12px; }
.btn svg { width: 15px; height: 15px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { text-align: left; padding: 9px 12px; font-size: 13px; }
table.data thead th {
  background: var(--surface-2); color: var(--text-muted); font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}
table.data tbody tr { border-bottom: 1px solid var(--border); }
table.data tbody tr:last-child { border-bottom: none; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data td .name { font-weight: 600; color: var(--text); }
/* Empty states: every list uses <td colspan class="muted"> — give it room to breathe */
table.data td.muted[colspan] {
  text-align: center; padding: 40px 16px; color: var(--text-faint); font-size: 13px;
}
/* Sticky first column: keeps the trainee name in view while a wide table scrolls
   horizontally. box-shadow (not border) draws the divider so it survives
   border-collapse while scrolling. */
table.data.sticky-first th:first-child,
table.data.sticky-first td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
  box-shadow: inset -1px 0 0 var(--border);
}
table.data.sticky-first thead th:first-child { background: var(--surface-2); z-index: 2; }
table.data.sticky-first tbody tr:hover td:first-child { background: var(--surface-2); }
table.data.sticky-first td.muted[colspan] { box-shadow: none; }

/* key-value table (no chrome) */
table.kv { width: 100%; border-collapse: collapse; }
table.kv th { text-align: left; font-weight: 500; color: var(--text-muted); padding: 8px 14px 8px 0; width: 42%; vertical-align: top; white-space: nowrap; }
table.kv td { padding: 8px 0; color: var(--text); overflow-wrap: break-word; word-break: break-word; }
table.kv tr { border-bottom: 1px solid var(--border); }
table.kv tr:last-child { border-bottom: none; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.badge::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity:.8; }
.badge.partner { background: var(--purple-bg); color: var(--purple); }
.badge.work    { background: var(--success-bg); color: var(--success); }
.badge.intro   { background: var(--info-bg); color: var(--info); }
.badge.training{ background: var(--surface-2); color: var(--text-muted); }
.badge.bootcamp   { background: var(--surface-2); color: var(--text-muted); }
.badge.internship { background: var(--warning-bg); color: var(--warning); }
.badge.talent_list{ background: var(--accent-weak); color: var(--accent); }
.badge.dropout { background: var(--danger-bg); color: var(--danger); }
/* readiness not yet assessed — quiet, dot-less */
.badge.none { background: var(--surface-2); color: var(--text-faint); }
.badge.none::before { display: none; }

/* Dropout reasons — responsive checkbox grid on the trainee form */
.reasons-field #id_dropout_reasons {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px 18px; margin-top: 4px; }
.reasons-field #id_dropout_reasons > div { display: flex; align-items: center; gap: 9px; }
.reasons-field #id_dropout_reasons input { width: 16px; height: 16px;
  accent-color: var(--accent); flex: none; }
.reasons-field #id_dropout_reasons label { margin: 0; font-weight: 400; }

/* Bulk trainee picker — group_add_trainees */
.reasons-field #id_trainees {
  display: flex; flex-direction: column; gap: 2px; margin-top: 4px;
  max-height: 420px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: 8px; padding: 6px; }
.reasons-field #id_trainees > div { display: flex; align-items: center; gap: 9px;
  padding: 5px 8px; border-radius: 6px; }
.reasons-field #id_trainees > div:hover { background: var(--surface-2); }
.reasons-field #id_trainees input { width: 16px; height: 16px;
  accent-color: var(--accent); flex: none; }
.reasons-field #id_trainees label { margin: 0; font-weight: 400; }

/* score labels — one distinct colour per level 1..5 (red → orange → gold →
   lime → green), so adjacent levels are clearly tellable apart */
.lab { font-weight: 600; }
.lab-1 { color: #dc2626; }  /* Insufficient / Orienting  */
.lab-2 { color: #ea580c; }  /* Weak / Developing         */
.lab-3 { color: #ca8a04; }  /* Sufficient / Applying     */
.lab-4 { color: #65a30d; }  /* Good / Advancing          */
.lab-5 { color: #15803d; }  /* Excellent / Job-ready     */
.score-num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }

/* ---------- Avatars / misc ---------- */
.avatar-lg {
  width: 84px; height: 84px; border-radius: 16px; background: var(--accent-weak);
  color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 28px;
  margin-bottom: 6px;
}
.pitch { white-space: pre-wrap; line-height: 1.6; color: var(--text); margin: 0; }

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.field input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: 14px; font-family: var(--font); background: var(--surface);
}
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* ---------- Login ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; background:
  radial-gradient(1200px 600px at 50% -10%, var(--brand-blue) 0%, var(--bg) 60%); }
.auth-card { width: 360px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-lg); padding: 32px; }
.auth-card .logo-img { height: 30px; width: auto; display: block; margin: 0 auto 18px; }
.auth-card .logo { width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 14px;
  background: var(--brand-dark); display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 20px; }
.auth-card h1 { text-align: center; font-size: 19px; }
.auth-card .sub { text-align: center; color: var(--text-muted); margin: 6px 0 22px; font-size: 13px; }
.alert-err { background: var(--danger-bg); color: var(--danger); padding: 10px 12px;
  border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; }
.btn-sso { width: 100%; justify-content: center; gap: 10px; padding: 11px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.btn-sso:hover { background: var(--surface-2); border-color: var(--border-strong);
  color: var(--text); text-decoration: none; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0;
  color: var(--text-muted); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px;
  background: var(--border); }

/* ---------- Toasts / messages ---------- */
.toast { padding: 11px 16px; border-radius: var(--radius-sm); font-size: 13px;
  margin-bottom: 16px; border: 1px solid var(--border); border-left-width: 4px;
  background: var(--surface); color: var(--text); }
.toast.success { background: var(--success-bg); color: var(--success); border-color: #cde9d6; }
.toast.error, .toast.warning { background: var(--warning-bg); color: var(--warning); border-color: #f4e2c4; }

/* Page-level flash messages: a fixed stack under the topbar, always in view even
   when the page has scrolled to a #section anchor after a redirect. */
.flash-stack { position: fixed; top: 72px; right: 24px; z-index: 50;
  display: flex; flex-direction: column; gap: 8px;
  width: min(400px, calc(100vw - 48px)); }
.flash-stack .toast { margin: 0; box-shadow: var(--shadow-lg);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  animation: flash-in .18s ease-out; }
.flash-close { background: none; border: none; cursor: pointer; font-size: 18px;
  line-height: 1; color: inherit; opacity: .55; padding: 0 2px; flex: none; }
.flash-close:hover { opacity: 1; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .flash-stack { top: 68px; right: 12px; left: 12px; width: auto; } }

/* ---------- Forms (shared) ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.form-grid .full { grid-column: 1 / -1; }
.field { margin-bottom: 16px; }
.field > label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--text); }
.field .input, .field select, .field textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: 14px; font-family: var(--font);
  background: var(--surface); color: var(--text);
}
.field textarea { resize: vertical; }
.field .input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
/* Native file inputs pick up the design system */
.field input[type="file"],
.submit-part-form input[type="file"] { border: none; padding: 0; font-size: 13px; color: var(--text-muted); }
.field input[type="file"]::file-selector-button,
.submit-part-form input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 7px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color .13s ease;
}
.field input[type="file"]::file-selector-button:hover,
.submit-part-form input[type="file"]::file-selector-button:hover { background: var(--surface-2); }
.field.check { display: flex; align-items: center; gap: 9px; }
.field.check label { margin: 0; order: 2; font-weight: 500; }
.field.check .checkbox { width: 17px; height: 17px; accent-color: var(--accent); order: 1; }
.form-err { margin-bottom: 14px; padding: 10px 13px; border-radius: var(--radius-sm);
  background: var(--danger-bg); border: 1px solid #e9b8b8; color: var(--danger);
  font-size: 13px; font-weight: 500; }
.field-err { color: var(--danger); font-size: 12px; margin-top: 5px; }
.hint { color: var(--text-faint); font-size: 12px; margin-top: 5px; }
.hint.hint-ok { color: var(--success); }
.hint.hint-warn { color: var(--warning); }
.form-actions { display: flex; gap: 10px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--border); }
/* Weekly-score score+feedback rows */
.score-row { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: start;
  padding: 12px 0; border-bottom: 1px solid var(--border); }
.score-row:last-of-type { border-bottom: none; }
@media (max-width: 640px) { .score-row { grid-template-columns: 1fr; gap: 8px; } }
.rubric-hint { grid-column: 1 / -1; }
.rubric-hint summary { cursor: pointer; font-size: 12.5px; color: var(--accent); font-weight: 600;
  list-style: none; }
.rubric-hint summary::-webkit-details-marker { display: none; }
.rubric-hint summary::before { content: "▸ "; }
.rubric-hint[open] summary::before { content: "▾ "; }
.rubric-hint ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex;
  flex-direction: column; gap: 5px; }
.rubric-hint li { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.rubric-hint .anchor-score { margin-right: 4px; }

/* Bulk weekly-score send matrix (group → send weekly scores) */
.cbx { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.cbx input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; margin: 0; }
.cbx.col span, .cbx.cell { font-weight: 500; }
.share-matrix th { white-space: nowrap; }
.share-matrix .cell { justify-content: center; position: relative; }
.share-matrix .dot-shared { color: var(--success); font-size: 12px; font-weight: 700;
  position: absolute; right: -12px; }

/* Feedback preview + read-more modal */
.fb-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.fb-item:last-of-type { border-bottom: none; }
.fb-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 3px; }
.fb-preview { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.5; }
.fb-open { background: none; border: none; padding: 0; margin-top: 4px; cursor: pointer;
  color: var(--accent); font-size: 12.5px; font-weight: 600; }
.fb-open:hover { text-decoration: underline; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(16,24,40,.45);
  display: none; align-items: center; justify-content: center; z-index: 50; padding: 24px; }
.modal-backdrop.open { display: flex; }
.modal-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 620px; max-height: 82vh; display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; }
.modal-close { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--text-muted); }
.modal-body { padding: 18px 20px; overflow-y: auto; white-space: pre-wrap; line-height: 1.65;
  font-size: 14px; }
.modal-meta { color: var(--text-muted); font-size: 12.5px; padding: 0 20px 14px; }

/* Technical assessment rubric (radio anchors) */
.anchors { display: flex; flex-direction: column; gap: 6px; }
.anchor { display: grid; grid-template-columns: 22px 30px 1fr; align-items: start; gap: 8px;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; font-size: 13px; line-height: 1.45; }
.anchor:hover { background: var(--surface-2); }
.anchor input { margin-top: 2px; accent-color: var(--accent); }
.anchor:has(input:checked) { border-color: var(--accent); background: var(--accent-weak); }
.anchor-score { font-weight: 700; color: var(--accent); text-align: center; }
.anchor-text { color: var(--text); }
/* Tech assessment table on the score card */
.tech-table td .anchor-mini { color: var(--text-muted); font-size: 12px; }
.tech-table td .dim-comment {
  margin-top: 7px; padding: 8px 11px; font-size: 12.5px; line-height: 1.55;
  background: var(--surface-2); border-left: 3px solid var(--accent);
  border-radius: 6px; color: var(--text);
}

/* ---------- Inline status editor (trainee lists) ---------- */
.status-menu { position: relative; display: inline-block; }
/* The trigger IS a normal .badge pill — reset only the <button> chrome so it
   looks identical to the static badge, keeping the click-to-edit behaviour. */
.status-trigger { border: none; margin: 0; font-family: inherit; cursor: pointer; }
.status-trigger:hover { filter: brightness(.96); }
/* Popover is position:fixed (placed by JS) so it escapes the table's
   overflow-x clipping. */
.status-pop {
  position: fixed; z-index: 60; min-width: 206px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lg);
}
.status-pop[hidden] { display: none; }
/* Clean text rows (Linear/Notion-style): small colour dot · label · check. */
.status-opt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; border: none; background: none; cursor: pointer;
  border-radius: 7px; text-align: left; font-family: inherit; font-size: 13px;
  color: var(--text);
}
.status-opt:hover { background: var(--surface-2); }
.status-opt.current { font-weight: 600; }
.status-opt .status-name { flex: 1; }
.status-opt .status-check { color: var(--accent); font-weight: 700; font-size: 12px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status-dot.bootcamp    { background: var(--text-faint); }
.status-dot.internship  { background: var(--warning); }
.status-dot.talent_list { background: var(--accent); }
.status-dot.intro       { background: var(--info); }
.status-dot.work        { background: var(--success); }
.status-dot.partner     { background: var(--purple); }
.status-dot.dropout     { background: var(--danger); }
.status-dot.none        { background: var(--text-faint); }

/* ---------- Filter bar ---------- */
/* One coherent panel: filters in an even grid on top, saved views + actions in
   a hairline-separated row below. */
.filter-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 12px 14px; margin-bottom: 18px;
}
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px; align-items: center; }
.filters input, .filters select {
  padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: 13px; font-family: var(--font); background: var(--surface); }
.filters .filter-search { grid-column: span 2; min-width: 0; width: 100%; }
@media (max-width: 480px) { .filters .filter-search { grid-column: span 1; } }
.filters input:focus, .filters select:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring); }
.filters .combo { display: block; width: 100%; }
.filters .combo .combo-input { width: 100%; }

/* Bulk weekly-score entry: selection controls + compact score grid */
.combo-plain { display: flex; flex-direction: column; gap: 4px; }
.bulk-label { font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted); }
.bulk-grid th, .bulk-grid td { padding: 7px 10px; }
.bulk-grid select { min-width: 58px; padding: 6px 8px; }
.bulk-grid input[type="text"] { width: 100%; min-width: 130px; padding: 6px 9px; }
/* A score and its own feedback share one cell: the box folds out under the
   dropdown, so the grid stays one row per trainee however much is written. */
.bulk-grid td.bulk-cell { vertical-align: top; }
.bulk-cell-row { display: flex; align-items: center; gap: 4px; }
.cmt-btn { border: none; background: none; cursor: pointer; padding: 2px 3px;
  font-size: 13px; line-height: 1; border-radius: 4px; opacity: .35;
  filter: grayscale(1); transition: opacity .12s, filter .12s; }
.cmt-btn:hover { opacity: .9; filter: grayscale(0); background: var(--surface-2); }
.cmt-btn.has { opacity: 1; filter: grayscale(0); }
.cmt-box { width: 100%; min-width: 150px; margin-top: 5px; padding: 6px 8px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 12.5px; line-height: 1.4; resize: vertical; }
.cmt-box:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring); }

/* Multi-select language filter (Ready-for-Work list) — chip toggles */
.lang-filters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 26px;
  padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--border); }
.lang-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lang-group-label { font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted); }
.lang-chip { display: inline-flex; align-items: center; cursor: pointer; user-select: none;
  padding: 4px 11px; border: 1px solid var(--border-strong); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--surface);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
.lang-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.lang-chip:hover { background: var(--surface-2); }
.lang-chip.on { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); }
.lang-chip:focus-within { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

/* ---------- Saved filter views ---------- */
.saved-views { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 12px 0 2px; padding-top: 12px; border-top: 1px solid var(--border); }
.saved-views .clear-filters { margin-left: auto; }
.saved-views .sv-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint); font-weight: 600; }
.sv-chip { display: inline-flex; align-items: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 4px 5px 4px 12px; font-size: 12.5px;
  transition: border-color .13s ease, background-color .13s ease; }
.sv-chip a { color: var(--text); font-weight: 500; }
.sv-chip a:hover { text-decoration: none; }
.sv-chip:hover { border-color: var(--accent); }
.sv-chip.active { background: var(--accent-weak); border-color: var(--accent); }
.sv-chip.active a { color: var(--accent); font-weight: 600; }
.sv-chip form { display: inline-flex; }
.sv-chip button { background: none; border: none; cursor: pointer; padding: 0 5px;
  color: var(--text-faint); font-size: 14px; line-height: 1; border-radius: 50%; }
.sv-chip button:hover { color: var(--danger); }
.sv-save { display: inline-flex; align-items: center; gap: 6px; }
.sv-save input[type="text"] { width: 190px; padding: 5px 12px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  font-size: 12.5px; font-family: var(--font); background: var(--surface); }
.sv-save input[type="text"]:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring); }
.sv-save .btn.sm { border-radius: 999px; }

/* ---------- Combobox filters ---------- */
.combo { position: relative; display: inline-block; }
.combo .combo-input {
  width: 150px; box-sizing: border-box; padding: 8px 26px 8px 11px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: 13px; font-family: var(--font);
  background: var(--surface); color: var(--text); cursor: pointer;
  text-overflow: ellipsis; }
.combo .combo-input::placeholder { color: var(--text-muted); opacity: 1; }
.combo .combo-caret { position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: var(--text-muted); pointer-events: none; }
.combo.open .combo-input { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring); }
.combo-list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%;
  max-height: 260px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.combo-list li { padding: 7px 10px; border-radius: 6px; font-size: 13px; cursor: pointer;
  white-space: nowrap; color: var(--text); }
.combo-list li:hover { background: var(--accent-weak); color: var(--accent); }
.combo-list li[aria-selected="true"] { background: var(--accent-weak); color: var(--accent); font-weight: 500; }
.toolbar { display: flex; gap: 10px; align-items: center; }
.spacer { flex: 1; }

/* ---------- KPI cards (reports) ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow-sm); }
.kpi .v { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.kpi .k { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.kpi.accent .v { color: var(--accent); }
.kpi.green .v { color: var(--success); }
.kpi.purple .v { color: var(--purple); }
.kpi.red .v { color: var(--danger); }
.kpi.amber .v { color: var(--warning); }
.kpis.six { grid-template-columns: repeat(6, 1fr); }
.kpis.five { grid-template-columns: repeat(5, 1fr); }
/* KPI cards as links (home dashboard) */
a.kpi { display: block; color: inherit; }
a.kpi:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow); }

/* ---------- Home dashboard ---------- */
.home-grid { grid-template-columns: 1.15fr 1.15fr .85fr; margin-top: 18px; }
.ev-list { list-style: none; margin: 0; padding: 4px 0; }
.ev-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 20px; border-bottom: 1px solid var(--border); font-size: 13px; }
.ev-row:last-child { border-bottom: none; }
.ev-row .name { font-weight: 600; color: var(--text); }
.ev-flow { display: inline-flex; align-items: center; gap: 6px; color: var(--text-faint); }
.ev-time { margin-left: auto; color: var(--text-faint); font-size: 12px; white-space: nowrap; }
.profile-card .pf-name { font-weight: 650; font-size: 16px; margin: 10px 0 8px; }
.sidebar .brand .brand-link { display: inline-flex; align-items: center; }
.sidebar .brand .brand-link:hover { text-decoration: none; opacity: .75; }
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.report-grid.three { grid-template-columns: repeat(3, 1fr); }
.analytics-section { margin-top: 26px; }
.analytics-section > h2 { font-size: 15px; margin: 0 0 12px; color: var(--text);
  display: flex; align-items: center; gap: 9px; }
.analytics-section > h2::before { content: ""; width: 4px; height: 16px; border-radius: 2px;
  background: var(--accent); }
.report-grid .card canvas { width: 100% !important; }
.chart-note { color: var(--text-muted); font-size: 12px; margin: 8px 2px 0; }
.chart-desc { color: var(--text-muted); font-size: 12px; line-height: 1.45;
  margin: 0 2px 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.chart-desc b { color: var(--text); font-weight: 600; }
.chart-empty { display: grid; place-items: center; height: 240px; text-align: center;
  color: var(--text-faint); font-size: 13px; padding: 0 20px; }

/* Suggested IT roles (score card) */
.role-suggest { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.role-suggest h4 { margin: 0 0 10px; font-size: 13px; }
.role-suggest h4 .muted { cursor: help; font-weight: 400; }
.role-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.role-list li { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; }
.role-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.role-name { font-weight: 600; font-size: 13px; color: var(--text); }
.role-fit { font-weight: 700; font-size: 12px; color: var(--accent);
  background: var(--accent-weak); border-radius: 999px; padding: 1px 9px; }
.role-why { color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }

/* AI "second opinion" panel under the rule-based role suggestions */
.ai-advice { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.ai-advice-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ai-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-weak); border-radius: 999px; padding: 2px 9px; }
.ai-summary { font-size: 12.5px; color: var(--text); margin: 0 0 8px; }
.ai-conflict { font-size: 11.5px; color: var(--warning); margin: 8px 0 0; line-height: 1.5; }
/* Onboarding questionnaire: multi-select option chips */
.ob-options { display: flex; flex-wrap: wrap; gap: 8px; }

/* Interview outcome buttons (staff-only): three labelled, mutually-exclusive
   states. Inactive buttons are muted; the active one takes its state colour. */
.outcomes { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.outcomes form { display: inline; }
.oc { border: 1px solid var(--border); background: var(--surface); border-radius: 999px;
  padding: 3px 9px; cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--muted); opacity: .8;
  transition: opacity .12s ease, border-color .12s ease, background-color .12s ease, color .12s ease; }
.oc:hover { opacity: 1; border-color: var(--border-strong); }
.oc.on { opacity: 1; }
.oc-next.on     { background: #e6f0f4; border-color: #2b6a86; color: #1d5872; }
.oc-placed.on   { background: #e9f7ee; border-color: #15803d; color: #146c34; }
.oc-rejected.on { background: #fdeaea; border-color: #b91c1c; color: #9c1717; }

/* Read-only outcome badge (staff without the manage-interviews cap) */
.oc-badge { display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; border: 1px solid transparent; }
.oc-badge.oc-next_round { background: #e6f0f4; border-color: #bcd6e2; color: #1d5872; }
.oc-badge.oc-placed     { background: #e9f7ee; border-color: #b8e0c6; color: #146c34; }
.oc-badge.oc-rejected   { background: #fdeaea; border-color: #f0c2c2; color: #9c1717; }

.ai-feedback { margin-top: 10px; font-size: 12.5px; }
.ai-feedback > summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.ai-feedback > summary:hover { color: var(--text); }
.ai-feedback-form { margin-top: 10px; display: grid; gap: 8px; }
.ai-feedback-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ai-verdict { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ai-feedback-form select, .ai-feedback-form input[type="text"] {
  width: 100%; max-width: 340px; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; }
.ai-feedback-form .bulk-label { margin: 0; }

/* Weekly assignment submissions */
.submit-week.locked { opacity: .85; }
.submit-week-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.submit-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.submit-parts { display: flex; flex-direction: column; gap: 10px; }
.submit-part { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 12px 0; border-top: 1px solid var(--border); }
.submit-part-label { font-weight: 600; font-size: 13px; width: 168px; flex: none; }
.submit-part-status { flex: 1 1 200px; min-width: 160px; font-size: 12.5px;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.submit-part-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end; margin-left: auto; }
.submit-part-form { display: flex; align-items: center; gap: 8px; }
.submit-part-form input[type=file] { font-size: 12px; max-width: 220px; }
.file-link { color: var(--success); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
@media (max-width: 640px) {
  .submit-part-label { width: 100%; }
  .submit-part-actions { margin-left: 0; }
}
/* Required dimensions. The asterisk marks what the selected week must be scored
   on; a required score that is still empty gets a ring, so what is left to do is
   visible without reading a message. */
.req-mark { color: var(--warning); font-weight: 700; margin-left: 3px; }
select.open-required { border-color: var(--warning); background: var(--warning-bg); }
.score-row.required label { font-weight: 600; }

/* "Not assessed" picker in the bulk grid: highlighted once set, so a row that
   deliberately has no score is visible as such at a glance. */
.na-pick { min-width: 150px; }
.na-pick.on { border-color: var(--accent); background: var(--accent-weak);
  font-weight: 600; }

/* Overdue weekly scores on the home page. A warning, not a KPI: it only exists
   while something is late, and every row is a link into the form that clears it. */
.overdue { margin-bottom: 18px; padding: 14px 16px 12px; background: var(--warning-bg);
  border: 1px solid #f4e2c4; border-left: 4px solid var(--warning);
  border-radius: var(--radius); }
.overdue-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; }
.overdue-head h2 { margin: 0; display: flex; align-items: center; gap: 9px;
  font-size: 15px; color: var(--warning); }
.overdue-mark { display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--warning);
  color: #fff; font-size: 13px; font-weight: 700; }
.overdue-sub { font-size: 12.5px; color: var(--text-muted); }
.overdue-list { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 6px; }
.overdue-item { display: grid; align-items: baseline; gap: 4px 14px;
  grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr) auto;
  padding: 9px 12px; background: var(--surface); border: 1px solid #f0e0c6;
  border-radius: var(--radius-sm); text-decoration: none; color: var(--text); }
.overdue-item:hover { border-color: var(--warning); }
.overdue-where { font-weight: 600; font-size: 13px; }
.overdue-count { font-size: 12.5px; font-weight: 600; color: var(--warning); }
.overdue-when { font-size: 11.5px; color: var(--text-muted); }
.overdue-go { font-size: 12px; font-weight: 600; color: var(--accent);
  white-space: nowrap; }
@media (max-width: 760px) {
  .overdue-item { grid-template-columns: 1fr auto; }
  .overdue-when { grid-column: 1 / -1; }
}

/* Weekly hand-ins on the scorecard: a week lists its own deliverables, because
   which ones it asks for is now a per-cohort setting. */
.sub-parts { display: flex; flex-direction: column; gap: 4px; }
.sub-part { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  font-size: 12.5px; }
.sub-part .muted { font-size: 11px; }
.sub-part-name { font-weight: 600; min-width: 190px; }
.sub-part.done .sub-part-name { color: var(--text); }
.sub-part.withdrawn { opacity: .65; }

/* Week configuration — one card per week: who runs it, what it asks for.
   Prefixed .cfg- because .wk- already belongs to the submission overview. */
.cfg-list { display: flex; flex-direction: column; gap: 12px; }
.cfg-week { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px 16px 16px; }
.cfg-week.on { border-color: var(--accent); }
.cfg-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border); }
.cfg-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cfg-num { font-weight: 700; font-size: 14px; color: var(--text); }
.cfg-topic { font-size: 12.5px; color: var(--text-muted); }
.cfg-state { font-size: 11px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-muted); }
.cfg-week.on .cfg-state { color: var(--success); }
.cfg-week.warn { border-color: var(--warning); }
.cfg-week.warn .cfg-state { color: var(--warning); }
.cfg-row { display: flex; gap: 14px; align-items: flex-start; padding: 8px 0; }
.cfg-row + .cfg-row { border-top: 1px dashed var(--border); }
.cfg-row-label { flex: 0 0 96px; padding-top: 7px; font-size: 11px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.cfg-trainers { display: flex; flex-wrap: wrap; gap: 8px; }
.cfg-trainer { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 6px 12px; font-size: 13px; border: 1px solid var(--border-strong);
  border-radius: 999px; background: var(--surface); white-space: nowrap; }
.cfg-trainer input { margin: 0; }
.cfg-trainer.on { border-color: var(--accent); background: var(--accent-weak);
  font-weight: 600; }
.cfg-parts { display: grid; gap: 8px 12px; flex: 1; min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
/* Label above its deadline: side by side, the longer deliverable names get
   clipped at any column width that still fits five of them. */
.cfg-part { display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 7px 9px; border: 1px solid transparent; border-radius: var(--radius-sm); }
.cfg-part.on { border-color: var(--border); background: var(--bg); }
.cfg-part-pick { display: flex; align-items: center; gap: 7px; cursor: pointer;
  min-width: 0; font-size: 13px; }
.cfg-part-pick input { flex: 0 0 auto; }
.cfg-part.on .cfg-part-pick { font-weight: 600; }
.cfg-deadline { width: 100%; padding: 6px 8px; font-size: 12.5px;
  font-family: var(--font); color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.cfg-deadline:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring); }
.cfg-deadline:disabled { opacity: .4; background: var(--bg); cursor: not-allowed; }
.cfg-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 12px 0 4px;
  background: linear-gradient(to top, var(--bg) 65%, transparent); }
.cfg-bar-hint { font-size: 12px; }
@media (max-width: 640px) {
  .cfg-row { flex-direction: column; gap: 6px; }
  .cfg-row-label { flex: none; padding-top: 0; }
  .cfg-deadline { width: 100%; }
  .cfg-part { flex-wrap: wrap; }
}

/* Submission overview — week switcher */
.wk-switch { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px;
  margin-bottom: 14px; scrollbar-width: thin; }
.wk-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600;
  white-space: nowrap; }
.wk-pill:hover { background: var(--surface-2); text-decoration: none; }
.wk-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.wk-count { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted); }
.wk-pill.active .wk-count { background: rgba(255,255,255,.22); color: #fff; }
.wk-count.some { background: var(--warning-bg); color: var(--warning); }
.wk-count.full { background: var(--success-bg); color: var(--success); }
.wk-pill.active .wk-count.some, .wk-pill.active .wk-count.full { background: rgba(255,255,255,.22); color: #fff; }

/* Submission overview — per-week table */
.sub-table th .dl-hint { font-weight: 500; font-size: 10.5px; color: var(--text-muted);
  text-transform: none; letter-spacing: 0; margin-top: 2px; }
.sub-table th .dl-hint.passed { color: var(--danger); }
.sub-cell { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sub-when { font-size: 10.5px; color: var(--text-faint); }
.file-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.file-chip.ok { background: var(--success-bg); color: var(--success); }
.file-chip.none { background: var(--surface-2); color: var(--text-faint); font-weight: 500; }
.sub-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mini-btn { display: inline-flex; align-items: center; cursor: pointer; font-size: 11.5px;
  font-weight: 600; padding: 4px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.mini-btn:hover { background: var(--surface-2); }
.mini-btn.danger { color: var(--danger); border-color: #e9b8b8; }
.mini-btn.danger:hover { background: var(--danger-bg); }

/* Persistent (non-blocking) reminder that a trainee has no CV on file */
.cv-nudge { display: flex; align-items: center; justify-content: space-between;
  gap: 12px 16px; flex-wrap: wrap; margin-bottom: 18px; padding: 12px 16px;
  background: var(--warning-bg); border: 1px solid #f0dcb8;
  border-radius: var(--radius); font-size: 13px; }
.cv-nudge b { color: var(--warning); }
.cv-nudge span { color: var(--text-muted); }

.vac-extra { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }

/* Group-assignment grading: team picker + one shared assessment */
.ga-members { display: grid; gap: 6px 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ga-member { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; }
.ga-member:hover { background: var(--surface-2); }
.ga-dim { padding: 12px 0; border-top: 1px solid var(--border); }
.ga-dim:first-of-type { border-top: none; padding-top: 0; }
.ga-dim-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ga-dim-head .bulk-label { margin: 0; min-width: 190px; }

/* Rows that open their own detail page on click (see base.html row-link JS) */
tr.row-link { cursor: pointer; }

/* Multi-select filter combobox (several score levels per dimension) */
.combo.multi { position: relative; }
.multi-trigger { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  text-align: left; max-width: 260px; }
.multi-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-count { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; padding: 1px 6px;
  border-radius: 999px; background: var(--accent); color: #fff; }
.multi-list { padding: 6px; min-width: 190px; max-height: 300px; overflow-y: auto; }
.multi-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; }
.multi-opt:hover { background: var(--surface-2); }
.multi-opt.on { background: var(--accent-weak); color: var(--accent); font-weight: 600; }
.multi-opt input { accent-color: var(--accent); }
.multi-empty { padding: 8px; font-size: 12px; }
.multi-clear { display: block; width: 100%; margin-top: 4px; padding: 6px 8px; cursor: pointer;
  font-size: 12px; text-align: left; background: none; border: none; border-top: 1px solid var(--border);
  color: var(--text-muted); }
.multi-clear:hover { color: var(--danger); }

/* Free-text refinement of the candidate list */
.rf-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--border); }
.rf-form { display: flex; gap: 8px; flex: 1 1 420px; }
.rf-form input { flex: 1; }
.rf-active { padding: 12px 20px; background: var(--accent-weak);
  border-bottom: 1px solid var(--border); }
.rf-q { font-weight: 600; font-size: 13.5px; display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap; }
.rf-summary { margin: 6px 0 0; font-size: 13px; line-height: 1.55; }
.rf-caveat { margin: 6px 0 0; font-size: 12.5px; color: var(--warning); }
.rf-meta { margin: 6px 0 0; font-size: 11.5px; }
.rf-reason { margin-top: 4px; color: var(--accent); font-size: 11.5px; line-height: 1.45; }

/* Match verdicts — Sales rating a proposed candidate */
.mf { display: flex; align-items: center; gap: 4px; }
.mf-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; cursor: pointer; font-size: 13px; line-height: 1;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); list-style: none; }
.mf-btn::-webkit-details-marker { display: none; }
.mf-btn:hover { background: var(--surface-2); }
.mf-btn.on-up { background: var(--success-bg); border-color: #b7e0c4; }
.mf-btn.on-down { background: var(--danger-bg); border-color: #e9b8b8; }
.mf-down { position: relative; }
.mf-form { position: absolute; right: 0; top: 30px; z-index: 20; width: 260px;
  padding: 10px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.mf-label { display: block; font-size: 11.5px; font-weight: 600; margin-bottom: 5px; }
.mf-form textarea { width: 100%; font-size: 12px; margin-bottom: 7px; }
.mf-reason { font-size: 11px; color: var(--text-muted); margin-top: 4px; max-width: 180px; }
tr.match-rejected { opacity: .55; }

/* Partner profile — the qualitative picture Sales keeps of a client */
.pp-grid { display: grid; gap: 16px 22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pp-item { min-width: 0; }
.pp-label { font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.pp-text { margin: 0; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }
.pp-details > summary { cursor: pointer; font-size: 14px; list-style: none; }
.pp-details > summary::-webkit-details-marker { display: none; }
.pp-details > summary::before { content: "▸ "; color: var(--text-muted); }
.pp-details[open] > summary::before { content: "▾ "; }

/* AI shortlist on a vacancy */
.sl-list { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 10px; counter-reset: sl; }
.sl-item { border-left: 2px solid var(--border-strong); padding: 2px 0 2px 12px; }
.sl-item:first-child { border-left-color: var(--accent); }
.sl-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sl-why { font-size: 13px; line-height: 1.55; margin-top: 3px; }
.sl-concern { font-size: 12px; color: var(--warning); margin-top: 3px; }

/* Vacancy matching — fit bar per candidate */
.fit-bar { position: relative; display: flex; align-items: center; gap: 8px;
  height: 20px; width: 110px; }
.fit-bar::before { content: ""; position: absolute; inset: 6px 34px 6px 0;
  background: var(--surface-2); border-radius: 999px; }
.fit-fill { position: absolute; left: 0; top: 6px; height: 8px; border-radius: 999px;
  max-width: calc(100% - 34px); background: var(--text-faint); }
.fit-fill.high { background: var(--success); }
.fit-fill.mid  { background: var(--warning); }
.fit-fill.low  { background: var(--text-faint); }
.fit-num { position: absolute; right: 0; font-size: 12px; font-weight: 700;
  color: var(--text); font-variant-numeric: tabular-nums; }
tr.match-blocked td { opacity: .62; }
tr.match-blocked:hover td { opacity: 1; }

/* Submissions overview matrix (legacy dots, still used elsewhere) */
.sub-dots { display: inline-flex; gap: 3px; }
.sub-dot { display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px; font-size: 11px; font-weight: 700;
  text-decoration: none; }
.sub-dot.on { background: #dcfce7; color: #16a34a; }
.sub-dot.off { background: var(--surface-2); color: var(--text-faint); }

/* ---------- Code / key display ---------- */
code.key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: var(--surface-2); padding: 3px 8px; border-radius: 6px; color: var(--text); }
.muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text-muted); cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.icon-btn.danger:hover { color: var(--danger); border-color: #e9b8b8; }
.icon-btn svg { width: 15px; height: 15px; }

/* ---------- AI assistant chat ---------- */
.chat { display: flex; flex-direction: column; height: calc(100vh - 60px - 56px); max-width: 820px; }
.chat-log { flex: 1; overflow-y: auto; padding: 4px 2px 16px; display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; gap: 10px; max-width: 88%; }
.msg .bubble { padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
/* Rendered markdown inside bot bubbles */
.msg.bot .bubble { white-space: normal; }
.msg.bot .bubble > :first-child { margin-top: 0; }
.msg.bot .bubble > :last-child { margin-bottom: 0; }
/* What the assistant is busy with, under the typing dots — a long answer
   should look like work in progress, not like a hang. */
.msg .bubble .progress { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.msg.bot .bubble p { margin: 0 0 10px; }
.msg.bot .bubble ul, .msg.bot .bubble ol { margin: 0 0 10px; padding-left: 20px; }
.msg.bot .bubble li { margin: 2px 0; }
.msg.bot .bubble h1, .msg.bot .bubble h2, .msg.bot .bubble h3 { font-size: 15px; margin: 12px 0 6px; }
.msg.bot .bubble code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.msg.bot .bubble pre { background: var(--surface-2); padding: 10px 12px; border-radius: 8px; overflow-x: auto; }
.msg.bot .bubble pre code { background: none; padding: 0; }
.msg.bot .bubble table { border-collapse: collapse; width: 100%; margin: 4px 0 10px; font-size: 13px; }
.msg.bot .bubble th, .msg.bot .bubble td { border: 1px solid var(--border); padding: 6px 9px; text-align: left; vertical-align: top; }
.msg.bot .bubble th { background: var(--surface-2); font-weight: 600; }
.msg.bot .bubble a { color: var(--accent); }
.msg.bot .bubble { max-width: 100%; }
.msg.bot { max-width: 100%; }
.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg.user .bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.msg.bot .bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
.msg .ava { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.msg.bot .ava { background: linear-gradient(135deg, var(--brand-dark), #2c4d5a); color: #fff; }
.msg.user .ava { background: var(--surface-2); color: var(--text-muted); }
.chat-input { display: flex; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.chat-input textarea { flex: 1; resize: none; padding: 11px 13px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-family: var(--font); font-size: 14px; max-height: 140px; }
.chat-input textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.chat-empty { color: var(--text-muted); text-align: center; margin: 40px auto; max-width: 460px; }
.chat-empty .chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.chip { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 7px 13px; font-size: 12.5px; cursor: pointer; color: var(--text); }
.chip:hover { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); }
.typing { display: inline-flex; gap: 4px; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); animation: blink 1.2s infinite both; }
.typing span:nth-child(2){ animation-delay: .2s; } .typing span:nth-child(3){ animation-delay: .4s; }
@keyframes blink { 0%,80%,100%{ opacity:.3; } 40%{ opacity:1; } }

@media (max-width: 980px) {
  .kpis, .kpis.six, .kpis.five { grid-template-columns: repeat(2, 1fr); }
  .report-grid, .report-grid.three, .form-grid { grid-template-columns: 1fr; }
}
@media (min-width: 981px) and (max-width: 1300px) {
  .kpis.six, .kpis.five { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
}

/* ---- Internship project (scrum phase) ---------------------------------- */
.pj-pill { display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; background: var(--accent-weak);
  color: var(--accent); border: 1px solid transparent; }
.pj-pill.warn { background: var(--danger-bg); color: var(--danger); }

/* Sprint markers in the team matrix: flag state at a glance. */
.sp-dot { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; font-size: 12px;
  font-weight: 700; line-height: 1; }
.sp-standout  { background: var(--accent-weak); color: var(--accent); }
.sp-on_track  { background: var(--success-bg); color: var(--success); }
.sp-attention { background: var(--warning-bg); color: var(--warning); }
.sp-at_risk   { background: var(--danger-bg);  color: var(--danger); }
.sp-none      { background: var(--surface-2);  color: var(--text-faint); }

/* The sprint grid packs a whole team on one screen. Inputs get the same look as
   the app's form fields (which are scoped to .field), just a little tighter. */
.pj-table td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.pj-table select, .pj-table textarea {
  width: 100%; padding: 7px 9px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: 13px; font-family: var(--font);
  background: var(--surface); color: var(--text); }
.pj-table select:focus, .pj-table textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.pj-table textarea { resize: vertical; min-width: 190px; line-height: 1.4; }
.pj-table select[name^="role_"] { min-width: 128px; }
.pj-table .pj-flag { min-width: 150px; }
.pj-table select[name^="teamwork_"], .pj-table select[name^="ownership_"],
.pj-table select[name^="agile_practice_"], .pj-table select[name^="craft_"] {
  min-width: 60px; text-align: center; }
/* Give the four score columns a subtle shared tint so they read as one block. */
.pj-table th.pj-score, .pj-table td.pj-score { background: var(--surface-2); }

/* Score guide: the 1-5 anchors per dimension, in the app's rubric-hint style. */
.score-guide { margin-top: 10px; }
.score-guide-grid { display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px 22px; margin-top: 10px; }
.score-guide-dim { min-width: 0; }
.score-guide-head { font-size: 12.5px; font-weight: 700; color: var(--text); }
.score-guide-help { font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; }
@media (max-width: 720px) { .score-guide-grid { grid-template-columns: 1fr; } }

.pj-avgs { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-avg { display: flex; align-items: baseline; gap: 6px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.pj-avg-label { font-size: 11.5px; color: var(--text-muted); }
.pj-avg-val { font-size: 14px; font-weight: 700; }
.pj-verdict { margin-top: 14px; padding: 12px 14px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border); }
.ok-text { color: var(--success); font-weight: 600; }
.repo-row { display: flex; gap: 8px; margin-bottom: 8px; }
.repo-row .input { font-size: 13px; }

/* ---- Distance in the vacancy matching list ----------------------------- */
.dist-km { display: inline-block; font-size: 12px; font-weight: 700;
  padding: 1px 8px; border-radius: 999px; }
.dist-km.near { background: var(--success-bg); color: var(--success); }
.dist-km.mid  { background: var(--warning-bg); color: var(--warning); }
.dist-km.far  { background: var(--danger-bg);  color: var(--danger); }
.dist-cities { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ---- New client (prospect) block on the vacancy form ------------------- */
.new-partner { margin: 4px 0 16px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-2); padding: 10px 12px; }
.new-partner > summary { cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--accent); list-style: none; }
.new-partner > summary::-webkit-details-marker { display: none; }
.new-partner > summary::before { content: "+ "; font-weight: 700; }
.new-partner[open] > summary::before { content: "– "; }
.new-partner .np-grid { display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 18px; margin-top: 10px; }
.new-partner .np-grid .full { grid-column: 1 / -1; }

/* ==== Scrum board =========================================================
   A deliberately Jira-like surface: dense rows, grey columns, small white
   cards, one primary action per screen. Scoped under .jira so the rest of
   PersonalScore keeps its own, roomier design language.
   ------------------------------------------------------------------------ */
.jira {
  --j-bg: #f7f8f9; --j-col: #f1f2f4; --j-line: #dfe1e6; --j-line-2: #c1c7d0;
  --j-text: #172b4d; --j-sub: #626f86; --j-blue: #0c66e4; --j-blue-bg: #e9f2ff;
  --j-green: #216e4e; --j-green-bg: #dcfff1; --j-red: #ae2e24; --j-red-bg: #ffecea;
  --j-purple: #5e4db2; --j-amber-bg: #fff7d6;
  --j-card-shadow: 0 1px 1px rgba(9,30,66,.25), 0 0 1px 1px rgba(9,30,66,.09);
  color: var(--j-text); font-size: 14px;
}

/* --- header: title, one primary action, tabs ---------------------------- */
.j-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap; margin: 0 0 4px; }
.j-head h1 { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.j-sub { font-size: 12.5px; color: var(--j-sub); margin: 3px 0 0;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.j-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.j-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--j-line);
  margin: 14px 0 18px; flex-wrap: wrap; }
.j-tabs a { padding: 7px 12px; font-size: 13.5px; font-weight: 500;
  color: var(--j-sub); border-bottom: 2px solid transparent; margin-bottom: -2px;
  border-radius: 3px 3px 0 0; }
.j-tabs a:hover { color: var(--j-text); background: var(--j-col); text-decoration: none; }
.j-tabs a.on { color: var(--j-blue); border-bottom-color: var(--j-blue); font-weight: 600; }

/* --- buttons ------------------------------------------------------------ */
.j-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px;
  padding: 0 12px; border-radius: 3px; border: none; background: rgba(9,30,66,.06);
  color: var(--j-text); font: 500 13.5px/1 var(--font); cursor: pointer;
  white-space: nowrap; }
.j-btn:hover { background: rgba(9,30,66,.12); text-decoration: none; color: var(--j-text); }
.j-btn.primary { background: var(--j-blue); color: #fff; font-weight: 600; }
.j-btn.primary:hover { background: #0055cc; color: #fff; }
.j-btn.subtle { background: transparent; color: var(--j-sub); }
.j-btn.subtle:hover { background: rgba(9,30,66,.06); color: var(--j-text); }
.j-btn.danger { color: var(--j-red); }
.j-btn.danger:hover { background: var(--j-red-bg); }
.j-btn.sm { height: 26px; padding: 0 9px; font-size: 12.5px; }
.j-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* --- issue type icons --------------------------------------------------- */
.j-type { display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 3px; color: #fff; flex-shrink: 0;
  font-size: 10px; line-height: 1; font-weight: 700; }
.j-type.story { background: #63ba3c; }
.j-type.task { background: #4bade8; }
.j-type.bug { background: #e5493a; }
.j-type.subtask { background: #4bade8; }
.j-type.epic { background: #904ee2; }

/* --- avatar, points, epic chip, status badge ---------------------------- */
.j-avatar { display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--av, #626f86);
  color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  flex-shrink: 0; }
.j-avatar.none { background: transparent; border: 1px dashed var(--j-line-2);
  color: var(--j-sub); font-weight: 400; }
.j-pts { display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 20px; padding: 0 7px; border-radius: 10px;
  background: var(--j-line); color: #44546f; font-size: 11.5px; font-weight: 700; }
.j-pts.done { background: var(--j-green-bg); color: var(--j-green); }
.j-epic { display: inline-flex; align-items: center; max-width: 160px;
  padding: 1px 7px; border-radius: 3px; font-size: 11px; font-weight: 600;
  color: #fff; background: var(--epic, #5e4db2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.j-status { display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
  border-radius: 3px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; background: var(--j-line); color: #44546f; }
.j-status.progress { background: var(--j-blue-bg); color: var(--j-blue); }
.j-status.review { background: var(--j-amber-bg); color: #974f0c; }
.j-status.done { background: var(--j-green-bg); color: var(--j-green); }
.j-flag { display: inline-flex; align-items: center; gap: 3px; height: 20px;
  padding: 0 7px; border-radius: 3px; background: var(--j-red-bg);
  color: var(--j-red); font-size: 11px; font-weight: 700; }

/* --- board columns ------------------------------------------------------ */
.j-board { display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr); gap: 8px; overflow-x: auto;
  padding-bottom: 8px; align-items: start; }
.j-col { background: var(--j-col); border-radius: 3px; display: flex;
  flex-direction: column; min-width: 240px; max-height: calc(100vh - 320px); }
.j-col-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--j-sub); }
.j-col-head .n { color: var(--j-sub); font-weight: 600; }
.j-col-head .pts { margin-left: auto; font-weight: 600; text-transform: none;
  letter-spacing: 0; }
.j-drop { padding: 0 8px 8px; flex: 1; min-height: 60px; overflow-y: auto; }
.j-drop.over { background: var(--j-blue-bg); border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--j-blue); }
.j-col.done-col .j-col-head { color: var(--j-green); }

/* --- board card --------------------------------------------------------- */
.j-card { position: relative; display: block; background: #fff; border-radius: 3px;
  box-shadow: var(--j-card-shadow); padding: 10px 10px 8px; margin-bottom: 8px;
  cursor: grab; border-left: 3px solid transparent; }
.j-card:hover { background: #f7f8f9; text-decoration: none; }
.j-card.dragging { opacity: .4; }
.j-card.blocked { border-left-color: #e5493a; }
.j-card-title { display: block; font-size: 13.5px; line-height: 1.35;
  color: var(--j-text); margin-bottom: 8px; }
.j-card-title:hover { color: var(--j-blue); text-decoration: underline; }
.j-card-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.j-card-foot { display: flex; align-items: center; gap: 6px; }
.j-key { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  font-weight: 600; color: var(--j-sub); letter-spacing: .01em; }
.j-key:hover { color: var(--j-blue); text-decoration: none; }
.j-key.is-done .k { text-decoration: line-through; }
.j-card-foot .spacer { margin-left: auto; }

/* --- backlog: rows, not cards ------------------------------------------- */
.j-hint { font-size: 12.5px; color: var(--j-sub); margin: 0 0 14px; }
.j-sprint { border: 1px solid var(--j-line); border-radius: 3px; background: #fff;
  margin-bottom: 12px; }
.j-sprint-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; background: var(--j-col); border-radius: 3px 3px 0 0;
  border-bottom: 1px solid var(--j-line); }
.j-sprint-head .name { font-weight: 600; font-size: 14px; }
.j-sprint-head .meta { font-size: 12.5px; color: var(--j-sub); }
.j-sprint-head .goal { font-size: 12.5px; color: var(--j-sub); font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 380px; }
.j-sprint-head .right { margin-left: auto; display: flex; align-items: center;
  gap: 8px; }
.j-counts { display: flex; gap: 4px; }
.j-counts span { min-width: 24px; height: 20px; padding: 0 6px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; }
.j-counts .todo { background: var(--j-line); color: #44546f; }
.j-counts .prog { background: var(--j-blue-bg); color: var(--j-blue); }
.j-counts .done { background: var(--j-green-bg); color: var(--j-green); }

.j-rows { min-height: 44px; }
.j-rows.over { background: var(--j-blue-bg); box-shadow: inset 0 0 0 2px var(--j-blue); }
.j-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px;
  border-bottom: 1px solid #f0f1f3; cursor: grab; background: #fff; }
.j-row:last-child { border-bottom: none; }
.j-row:hover { background: var(--j-col); }
.j-row.dragging { opacity: .4; }
.j-row .summary { flex: 1; min-width: 0; font-size: 13.5px; color: var(--j-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j-row .summary:hover { color: var(--j-blue); text-decoration: underline; }
.j-row.is-done .j-key .k { text-decoration: line-through; }
.j-row .right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.j-empty { padding: 18px 12px; text-align: center; color: var(--j-sub);
  font-size: 12.5px; }

/* --- empty backlog: import a template or start writing ------------------ */
.j-start { background: #fff; border: 1px solid var(--j-line); border-radius: 3px;
  padding: 28px 24px; text-align: center; }
.j-start h3 { margin: 0 0 6px; font-size: 16px; }
.j-start p { margin: 0 auto 16px; max-width: 460px; font-size: 13.5px;
  color: var(--j-sub); line-height: 1.5; }
.j-start form { display: inline-flex; gap: 8px; align-items: center;
  flex-wrap: wrap; justify-content: center; }
.j-select { height: 32px; padding: 0 8px; border: 1px solid var(--j-line-2);
  border-radius: 3px; background: #fff; font: 400 13.5px/1 var(--font);
  color: var(--j-text); }

/* --- issue detail ------------------------------------------------------- */
.j-issue { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 20px;
  align-items: start; }
.j-panel { background: #fff; border: 1px solid var(--j-line); border-radius: 3px;
  padding: 14px 16px; margin-bottom: 12px; }
.j-panel > h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--j-sub); }
.j-props { display: grid; grid-template-columns: 96px 1fr; gap: 9px 12px;
  margin: 0; font-size: 13.5px; align-items: center; }
.j-props dt { color: var(--j-sub); font-size: 12.5px; }
.j-props dd { margin: 0; display: flex; align-items: center; gap: 6px; }
.j-log { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.j-log li { padding: 5px 0; border-bottom: 1px solid #f0f1f3; color: var(--j-sub); }
.j-log li:last-child { border-bottom: none; }
.j-comment { display: flex; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid #f0f1f3; }
.j-comment:last-of-type { border-bottom: none; }
.j-comment .who { font-size: 12.5px; font-weight: 600; }
.j-comment .when { font-size: 11.5px; color: var(--j-sub); margin-left: 6px; }
.j-comment .body { font-size: 13.5px; line-height: 1.5; margin-top: 2px; }
.j-textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--j-line-2);
  border-radius: 3px; font: 400 13.5px/1.5 var(--font); resize: vertical;
  color: var(--j-text); }
.j-textarea:focus { outline: none; border-color: var(--j-blue);
  box-shadow: 0 0 0 1px var(--j-blue); }
.md { font-size: 14px; line-height: 1.55; }
.md p { margin: 0 0 10px; } .md p:last-child { margin-bottom: 0; }
.md ul, .md ol { margin: 0 0 10px; padding-left: 20px; }
.md code { background: var(--j-col); padding: 1px 5px; border-radius: 3px; font-size: 13px; }
.md pre { background: var(--j-col); padding: 12px; border-radius: 3px; overflow-x: auto; }

/* --- planning poker ----------------------------------------------------- */
.j-poker-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--j-sub); margin-bottom: 12px; }
.j-seats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.j-seat { width: 56px; text-align: center; }
.j-seat .face { height: 74px; border-radius: 5px; display: flex;
  align-items: center; justify-content: center; font-size: 22px; font-weight: 700;
  border: 1px solid var(--j-line-2); background: #fff; color: var(--j-text); }
.j-seat.waiting .face { background: repeating-linear-gradient(45deg,
  #f1f2f4, #f1f2f4 6px, #e6e8ec 6px, #e6e8ec 12px); color: transparent; }
.j-seat.ready .face { background: var(--j-blue); border-color: var(--j-blue);
  color: #fff; font-size: 20px; }
.j-seat.out .face { border-style: dashed; color: var(--j-sub); font-size: 18px; }
.j-seat .who { font-size: 11px; color: var(--j-sub); margin-top: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j-deck { display: flex; gap: 8px; flex-wrap: wrap; }
.j-pcard { width: 48px; height: 66px; border: 1px solid var(--j-line-2);
  border-radius: 5px; background: #fff; font-size: 18px; font-weight: 700;
  color: var(--j-text); cursor: pointer; transition: transform .08s, box-shadow .08s; }
.j-pcard:hover { transform: translateY(-4px); box-shadow: var(--j-card-shadow);
  border-color: var(--j-blue); }
.j-pcard.chosen { background: var(--j-blue); border-color: var(--j-blue);
  color: #fff; transform: translateY(-4px); }
.j-outcome { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--j-col); border-radius: 3px; padding: 12px 14px; margin: 4px 0 14px; }
.j-outcome .big { font-size: 26px; font-weight: 700; line-height: 1; }
.j-outcome .lbl { font-size: 11.5px; color: var(--j-sub); text-transform: uppercase;
  letter-spacing: .04em; }
.j-outcome .verdict { margin-left: auto; font-size: 12.5px; max-width: 320px; }
.j-outcome.spread { background: var(--j-amber-bg); }

/* --- retro -------------------------------------------------------------- */
.j-retro-note { display: flex; align-items: center; gap: 8px; background: var(--j-blue-bg);
  color: #0055cc; font-size: 12.5px; padding: 9px 13px; border-radius: 3px;
  margin-bottom: 16px; }
.j-retro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; align-items: start; }
.j-rcol { background: var(--j-col); border-radius: 3px; display: flex;
  flex-direction: column; }
.j-rcol > header { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  font-size: 12.5px; font-weight: 700; border-top: 3px solid var(--accent-col, #dfe1e6);
  border-radius: 3px 3px 0 0; }
.j-rcol > header .n { margin-left: auto; font-weight: 600; color: var(--j-sub); }
.j-rcol.went_well { --accent-col: #22a06b; }
.j-rcol.improve { --accent-col: #e2b203; }
.j-rcol.action { --accent-col: #0c66e4; }
.j-notes { padding: 0 10px; flex: 1; min-height: 40px; }
.j-note { background: #fff; border-radius: 3px; box-shadow: var(--j-card-shadow);
  padding: 10px 11px; margin-bottom: 8px; }
.j-note .body { font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; }
.j-note .foot { display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 11.5px; color: var(--j-sub); }
.j-note .foot .spacer { margin-left: auto; }
.j-vote { display: inline-flex; align-items: center; gap: 4px; height: 22px;
  padding: 0 8px; border: 1px solid var(--j-line-2); border-radius: 11px;
  background: #fff; font-size: 11.5px; cursor: pointer; color: var(--j-sub); }
.j-vote.on { background: var(--j-blue-bg); border-color: var(--j-blue); color: var(--j-blue);
  font-weight: 700; }
.j-compose { padding: 10px; border-top: 1px solid var(--j-line); }
.j-compose textarea { width: 100%; min-height: 58px; padding: 8px 9px;
  border: 1px solid var(--j-line-2); border-radius: 3px; resize: vertical;
  font: 400 13.5px/1.45 var(--font); background: #fff; }
.j-compose textarea:focus { outline: none; border-color: var(--j-blue);
  box-shadow: 0 0 0 1px var(--j-blue); }
.j-compose .row { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.j-compose .row .j-select { flex: 1; min-width: 0; }
.j-action { display: flex; align-items: flex-start; gap: 9px; background: #fff;
  border-radius: 3px; box-shadow: var(--j-card-shadow); padding: 9px 10px;
  margin-bottom: 8px; font-size: 13.5px; }
.j-action.carried { background: #fffaeb; }
.j-check { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--j-line-2); background: #fff; cursor: pointer;
  font-size: 11px; line-height: 1; color: transparent; margin-top: 1px; }
.j-check:hover { border-color: var(--j-green); }
.j-check.done { background: var(--j-green); border-color: var(--j-green); color: #fff; }
.j-action .txt { flex: 1; min-width: 0; line-height: 1.4; }
.j-action.is-done .txt { text-decoration: line-through; color: var(--j-sub); }
.j-action .owner { font-size: 11.5px; color: var(--j-sub); display: block; margin-top: 2px; }

/* --- docs --------------------------------------------------------------- */
.j-doc-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  background: #fff; border: 1px solid var(--j-line); border-radius: 3px;
  margin-bottom: 8px; }
.j-doc-row:hover { border-color: var(--j-line-2); text-decoration: none; }
.j-doc-row .ic { width: 28px; height: 28px; border-radius: 3px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--j-blue-bg); color: var(--j-blue); font-size: 13px; }
.j-doc-row .ic.pdf { background: var(--j-red-bg); color: var(--j-red); }
.j-doc-row .t { flex: 1; min-width: 0; }
.j-doc-row .t b { display: block; font-size: 13.5px; font-weight: 600;
  color: var(--j-text); }
.j-doc-row .t span { font-size: 11.5px; color: var(--j-sub); }
.j-section-title { font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--j-sub); margin: 22px 0 10px; }
.j-section-title:first-of-type { margin-top: 0; }
.j-upload { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: #fff; border: 1px dashed var(--j-line-2); border-radius: 3px;
  padding: 12px 14px; }
.j-upload input[type=text] { flex: 1; min-width: 160px; height: 32px; padding: 0 9px;
  border: 1px solid var(--j-line-2); border-radius: 3px; font: 400 13.5px/1 var(--font); }
.j-upload input[type=file] { font-size: 12.5px; max-width: 100%; }

/* --- epic colour swatches ---------------------------------------------- */
.colour-row { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; box-shadow: inset 0 0 0 2px #fff; }
.swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.swatch:has(input:checked) { border-color: var(--j-text); }

/* --- templates ---------------------------------------------------------- */
.j-tpl { display: flex; align-items: center; gap: 12px; background: #fff;
  border: 1px solid var(--j-line); border-radius: 3px; padding: 12px 14px;
  margin-bottom: 8px; }
.j-tpl .t { flex: 1; min-width: 0; }
.j-tpl .t b { font-size: 14px; }
.j-tpl .t p { margin: 2px 0 0; font-size: 12.5px; color: var(--j-sub); }
.j-tpl.retired { opacity: .6; }
.j-tpl-epic { border: 1px solid var(--j-line); border-radius: 3px; background: #fff;
  margin-bottom: 10px; }
.j-tpl-epic > header { display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  background: var(--j-col); border-bottom: 1px solid var(--j-line); font-weight: 600;
  font-size: 13.5px; }

@media (max-width: 900px) {
  .j-issue { grid-template-columns: 1fr; }
  .j-retro { grid-template-columns: 1fr; }
}

/* --- stand-up ----------------------------------------------------------- */
.j-standup { display: flex; flex-direction: column; gap: 8px; }
.j-su-row { display: flex; gap: 12px; align-items: flex-start; background: #fff;
  border: 1px solid var(--j-line); border-radius: 3px; padding: 11px 13px; }
.j-su-row .who { display: flex; align-items: center; gap: 8px; width: 170px;
  flex-shrink: 0; font-size: 13px; font-weight: 600; }
.j-su-row .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  flex: 1; min-width: 0; font-size: 13px; }
.j-su-row .cols .lbl { font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--j-sub); display: block; margin-bottom: 2px; }
.j-su-row.blocked { border-left: 3px solid #e5493a; }
@media (max-width: 800px) {
  .j-su-row { flex-direction: column; }
  .j-su-row .cols { grid-template-columns: 1fr; }
}

/* ---- Board evidence on the sprint grid --------------------------------- */
.evidence-line { font-size: 11px; color: var(--text-muted); margin-top: 3px;
  line-height: 1.35; max-width: 260px; }
.evidence-banner { background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 13px; font-size: 12.5px;
  margin-bottom: 14px; }