/* High-class Rekrytering CRM — Lever-inspirerad UI (ren, kandidatcentrerad, luftig) */

/* ── Global filter / sök ── */
.crm-global-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin: 0 0 1rem;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px hsl(215 25% 15% / 0.04), 0 8px 24px -10px hsl(215 25% 15% / 0.08);
}
.crm-search-wrap {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
  margin: 0;
}
.crm-search-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: var(--text-md);
  pointer-events: none;
}
.crm-search {
  width: 100%;
  padding-left: 2rem !important;
  border-radius: 10px;
}
.crm-global-bar .tt-filter {
  min-width: 130px;
  margin: 0;
}
.crm-result-count {
  margin-left: auto;
  align-self: center;
  font-weight: 650;
  white-space: nowrap;
}

/* Form sections */
.crm-form-sections .crm-sec-lab {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0.85rem 0 0.35rem;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.crm-form-sections .crm-sec-lab:first-child {
  margin-top: 0;
}
.crm-form-sections label {
  font-size: var(--text-xs);
  font-weight: 650;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.crm-form-sections .input,
.crm-form-sections .select,
.crm-form-sections .textarea {
  font-weight: 500;
  border-radius: 10px;
}
.crm-form-sections .textarea {
  min-height: 64px;
  resize: vertical;
}

.crm-layout-wide {
  grid-template-columns: minmax(0, 1fr) min(340px, 100%);
}
.crm-side-col #crm-new-card {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

/* Candidate table */
.cand-table-wrap {
  overflow-x: auto;
}
.cand-table th {
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.cand-table td {
  vertical-align: middle;
  font-size: var(--text-sm);
}
.cand-row:focus {
  outline: none;
}
.cand-row:focus-visible {
  box-shadow: inset 0 0 0 2px hsl(215 80% 50% / 0.45);
  background: var(--surface-accent);
}
.cand-row {
  cursor: pointer;
  transition: background 0.12s;
}
.cand-row:hover {
  background: hsl(var(--primary) / 0.035);
}
.cand-contact-line {
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
}
.prio-hi {
  color: hsl(24 80% 38%);
  font-weight: 700;
}
.next-overdue {
  color: hsl(24 80% 32%);
}
.crm-empty {
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--text-muted);
}
.crm-empty.soft {
  text-align: left;
  padding: 0.65rem 0.25rem;
}
.crm-empty strong {
  display: block;
  color: var(--text);
  margin-bottom: 4px;
  font-size: var(--text-md);
}
.crm-empty p {
  margin: 0;
  font-size: var(--text-sm);
}

.pipe-card .pc-contact {
  font-size: var(--text-3xs);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted);
}

.pipe-quick {
  position: relative;
  margin-top: 8px;
}
.pipe-move-btn {
  width: 100%;
  font-size: var(--text-2xs) !important;
  padding: 4px 6px !important;
}
.pipe-stage-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 5;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px hsl(215 25% 15% / 0.12);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
}
.pipe-stage-menu.hidden { display: none; }
.pipe-stage-opt {
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 650;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
}
.pipe-stage-opt:hover {
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
}

/* Drag and drop pipeline */
.pipe-col-body {
  min-height: 48px;
}
.pipe-card:focus {
  outline: none;
}
.pipe-card:focus-visible {
  box-shadow: 0 0 0 3px hsl(215 80% 50% / 0.28), 0 8px 24px hsl(215 30% 20% / 0.08);
  border-color: hsl(215 70% 55%);
}
.pipe-card[draggable="true"] {
  cursor: grab;
}
.pipe-card.dragging {
  opacity: 0.45;
  cursor: grabbing;
  transform: scale(0.98);
}
.pipe-col.drag-over {
  background: hsl(var(--primary) / 0.08);
  outline: 2px dashed hsl(var(--primary) / 0.55);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.12);
}
.pipe-col.drag-over .pipe-empty {
  border-color: hsl(var(--primary) / 0.45);
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.06);
}
.pipe-empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-2xs);
  padding: 10px 4px !important;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

/* Messages trust */
#tab-messages .muted.small {
  border-left: 3px solid hsl(var(--primary) / 0.35);
  padding-left: 10px;
  margin-top: 8px;
}

/* Kandidatresan — röd tråd */
.journey {
  list-style: none;
  margin: 0 0 1rem;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,.04));
}

.journey > li { flex-shrink: 0; }

.journey-line {
  width: 18px;
  height: 2px;
  background: linear-gradient(90deg, hsl(var(--primary) / 0.25), hsl(var(--secondary) / 0.45));
  margin: 0 2px;
  border-radius: 2px;
}

.journey-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
  background: transparent;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  min-width: 64px;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.journey-step:hover {
  background: hsl(var(--primary) / 0.06);
  border-color: hsl(var(--primary) / 0.15);
}

.journey-step.active,
.journey-step.on {
  background: hsl(var(--primary) / 0.1);
  border-color: hsl(var(--primary) / 0.3);
}

.j-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--text-2xs);
  font-weight: 700;
  font-family: var(--font-heading);
  color: #fff;
  background: var(--gradient-primary);
  box-shadow: 0 2px 8px hsl(var(--primary) / 0.25);
}

.j-lab {
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: hsl(var(--primary-dark));
  white-space: nowrap;
}

.j-count {
  font-size: var(--text-3xs);
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-height: 1em;
}

.tt-sub-ico {
  opacity: 0.7;
  font-size: var(--text-xs);
  margin-right: 2px;
}

.crm-tab-groups .crm-tabs {
  flex-wrap: wrap;
  align-items: center;
}

.crm-tab-group-lab {
  font-size: var(--text-3xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--neutral-400));
  padding: 0 4px 0 8px;
  width: 100%;
  margin-top: 4px;
}

.crm-tab-group-lab:first-child { margin-top: 0; }

.tt-work-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tt-work-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border-soft);
  background: hsl(var(--neutral-50));
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
}

.tt-work-item:hover {
  border-color: hsl(var(--primary) / 0.35);
  background: var(--surface);
}

.tt-work-item strong {
  display: block;
  font-size: var(--text-base);
}

.tt-calendar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
}

.tt-cal-day-lab {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  margin-bottom: 6px;
}

.tt-cal-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border-soft);
  background: hsl(var(--neutral-50));
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
  cursor: pointer;
  font: inherit;
}

.tt-cal-item:hover {
  border-color: hsl(var(--primary) / 0.35);
  background: var(--surface);
}

.tt-cal-kind {
  font-size: var(--text-3xs);
  font-weight: 800;
  padding: 4px 6px;
  border-radius: 6px;
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}

.tt-cal-kind.todo {
  background: hsl(var(--accent-orange) / 0.12);
  color: hsl(24 75% 32%);
}

.tt-cal-time {
  font-size: var(--text-xs);
  font-weight: 700;
  color: hsl(var(--primary));
  min-width: 7.5rem;
  font-variant-numeric: tabular-nums;
}

.tt-decide-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.tt-decide-row .btn {
  flex-shrink: 0;
  min-width: 52px;
}

.tt-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.tt-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  margin-bottom: 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,.04));
}

.tt-sub {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: -0.01em;
}

.tt-sub:hover { color: hsl(var(--primary)); background: hsl(var(--primary) / 0.05); }
.tt-sub.active {
  background: hsl(var(--primary));
  color: #fff;
  box-shadow: 0 2px 8px hsl(var(--primary) / 0.25);
}

.tt-panel { display: none; }
.tt-panel.active { display: block; }

.tt-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.tt-filter {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}

.tt-funnel { display: flex; flex-direction: column; gap: 8px; }
.tt-funnel-step { width: 100%; }
.tt-funnel-bar {
  background: var(--gradient-energy);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 8px;
  /* 80px räckte inte för etiketten när ett steg står på noll —
     stapeln klipptes till \"Ansökninga\". Låt den växa efter texten. */
  min-width: fit-content;
  box-shadow: 0 2px 8px hsl(var(--primary) / 0.15);
}

.tt-jobs-list, .tt-job-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tt-job-row {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}

.tt-job-card {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  margin-bottom: 8px;
}

.tt-job-card:hover {
  border-color: hsl(var(--primary) / 0.4);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.06));
}

.tt-job-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.tt-job-card-stats {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.tt-tags, .tt-mini-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.tt-tag {
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / 0.12);
}

.tt-mini-tags span {
  font-size: var(--text-3xs);
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: hsl(var(--neutral-100));
  color: var(--text-muted);
}

.crm-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.crm-kicker {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(var(--primary) / 0.75);
  margin-bottom: 6px;
}

.crm-hero-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: hsl(var(--primary-dark));
  margin: 0 0 6px;
}

.crm-hero-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.crm-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.crm-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,.04));
  position: relative;
  overflow: hidden;
}

.crm-kpi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gradient-primary);
  border-radius: 3px 0 0 3px;
}

.crm-kpi.warn::before {
  background: hsl(var(--accent-orange));
}

.crm-kpi .stat-value {
  font-size: 1.5rem;
  margin: 4px 0 0;
}

.crm-charts {
  margin-bottom: 0.25rem;
}

.crm-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crm-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 28px;
  gap: 10px;
  align-items: center;
}

.crm-bar-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-bar-track {
  height: 8px;
  background: var(--track);
  border-radius: 999px;
  overflow: hidden;
}

.crm-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--gradient-energy);
  min-width: 2px;
  transition: width 0.35s ease;
}

.crm-bar-n {
  font-size: var(--text-xs);
  font-weight: 700;
  color: hsl(var(--primary));
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.crm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1rem;
  align-items: start;
}

.crm-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.crm-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.crm-top-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.crm-top-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border-soft);
  background: hsl(var(--neutral-50));
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font: inherit;
}

.crm-top-item:hover {
  border-color: hsl(var(--primary) / 0.35);
  background: var(--surface);
}

.crm-top-item strong {
  display: block;
  font-size: var(--text-base);
}

.crm-score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
}

.crm-score-badge.sm {
  min-width: 28px;
  height: 22px;
  font-size: var(--text-2xs);
  padding: 0 5px;
}

.pipe-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.pipe-card.prio-high {
  border-color: hsl(var(--accent-orange) / 0.45);
  box-shadow: inset 0 0 0 1px hsl(var(--accent-orange) / 0.08);
}

.prio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(var(--accent-orange));
}

/* Drawer */
.crm-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: flex-end;
}

.crm-drawer.hidden { display: none !important; }

.crm-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: hsl(var(--neutral-900) / 0.35);
  backdrop-filter: blur(2px);
}

.crm-drawer-panel {
  position: relative;
  width: min(560px, 100%);
  height: 100%;
  background: var(--surface);
  box-shadow: -12px 0 40px hsl(var(--neutral-900) / 0.12);
  overflow-y: auto;
  padding: 1.25rem 1.35rem 2.5rem;
  animation: slideIn 0.22s ease;
}

@keyframes slideIn {
  from { transform: translateX(16px); opacity: 0.6; }
  to { transform: none; opacity: 1; }
}

.crm-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-soft);
}

.crm-drawer-head h2 {
  font-size: 1.35rem;
  margin: 0;
}

.crm-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 1rem;
  padding: 4px;
  background: hsl(var(--neutral-50));
  border-radius: 10px;
  border: 1px solid var(--border-soft);
}

.crm-tab {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  padding: 7px 11px;
  border-radius: 7px;
  cursor: pointer;
  letter-spacing: -0.01em;
}

.crm-tab:hover { color: hsl(var(--primary)); }
.crm-tab.active {
  background: var(--surface);
  color: hsl(var(--primary));
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,.06));
}

.crm-tab-panel { display: none; }
.crm-tab-panel.active { display: block; }

.score-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.score-item {
  display: grid;
  grid-template-columns: 1fr 1fr 36px;
  gap: 10px;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: hsl(var(--neutral-700));
}

.score-item span { color: var(--text-muted); font-weight: 600; font-size: var(--text-xs); }
.score-range { width: 100%; accent-color: hsl(var(--primary)); }
.score-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--primary));
}

.score-total {
  margin-top: 14px;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: hsl(var(--primary-dark));
}

.crm-comments, .crm-contracts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crm-comment, .crm-contract {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: hsl(var(--neutral-50));
  font-size: var(--text-base);
  line-height: 1.45;
}

.crm-comment-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: 4px;
}

.crm-contract {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.crm-contract-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.crm-contract .status-chip { margin-left: 6px; }

.crm-cv-status {
  padding: 10px 12px;
  background: hsl(var(--neutral-50));
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
}

@media (max-width: 1000px) {
  .crm-layout { grid-template-columns: 1fr; }
  .crm-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .crm-bar-row { grid-template-columns: 110px 1fr 24px; }
}

@media (max-width: 560px) {
  .crm-kpi-row { grid-template-columns: 1fr 1fr; }
  .crm-form-row { grid-template-columns: 1fr; }
  .crm-drawer-panel { width: 100%; }
  .lever-head { flex-direction: column; }
  .lever-actions { flex-direction: column; }
  .lever-actions .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════
   Lever-inspirerad polish
   Ref: lever.co — soft slate, kandidat-avatar, fit-score ring,
   journey pills, rena kort, generös whitespace
   ═══════════════════════════════════════════════════════ */

#view-crm {
  --lever-slate: 210 20% 97%;
  --lever-ink: 215 28% 17%;
  --lever-muted: 215 14% 46%;
  --lever-line: 214 20% 90%;
  --lever-card-shadow: 0 1px 2px hsl(215 25% 15% / 0.04), 0 8px 24px -8px hsl(215 25% 15% / 0.08);
  --lever-radius: 14px;
}

/* Lever-paletten var låst till ljusa värden och överskuggade temat:
   i mörkt läge blev "Din dag i flödet" och stegetiketterna nästan
   osynliga (mörk text på mörk yta). */
:root[data-theme="dark"] #view-crm {
  --lever-slate: 215 26% 18%;
  --lever-ink: 210 30% 94%;
  --lever-muted: 215 14% 68%;
  --lever-line: 215 18% 28%;
  --lever-card-shadow: 0 1px 2px hsl(0 0% 0% / 0.4), 0 8px 24px -8px hsl(0 0% 0% / 0.5);
}

/* Hero */
.lever-hero {
  padding: 4px 2px 8px;
}
.lever-hero .crm-hero-title {
  font-size: var(--text-2xl);
  letter-spacing: -0.035em;
  color: hsl(var(--lever-ink, var(--primary-dark)));
}
.lever-hero-sub {
  max-width: 36rem;
  line-height: 1.5;
}

/* Journey bar — softer, more product-like */
.journey {
  background: var(--surface);
  border: 1px solid hsl(var(--lever-line, var(--neutral-200)));
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--lever-card-shadow);
}
.journey-step {
  border-radius: 12px;
  padding: 8px 12px;
  min-width: 72px;
}
.journey-step.active,
.journey-step.on {
  background: hsl(var(--primary) / 0.08);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.18);
}
.j-num {
  width: 28px;
  height: 28px;
  font-size: var(--text-xs);
  box-shadow: 0 2px 10px hsl(var(--primary) / 0.22);
}
.j-lab {
  font-size: var(--text-2xs);
  font-weight: 650;
  color: hsl(var(--lever-ink, var(--primary-dark)));
}
.j-count {
  background: hsl(var(--neutral-100));
  padding: 1px 6px;
  border-radius: 999px;
  font-size: var(--text-3xs);
  color: hsl(var(--lever-muted, var(--neutral-500)));
}
.journey-step.active .j-count,
.journey-step.on .j-count {
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}

/* Subnav — pill segmented control */
.tt-subnav {
  gap: 2px;
  padding: 5px;
  border-radius: 14px;
  border-color: hsl(var(--lever-line, var(--neutral-200)));
  box-shadow: var(--lever-card-shadow);
  background: hsl(var(--lever-slate, 210 20% 97%));
}
.tt-sub {
  border-radius: 10px;
  padding: 9px 13px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: hsl(var(--lever-muted, var(--neutral-500)));
}
.tt-sub:hover {
  background: var(--surface);
  color: hsl(var(--primary));
}
.tt-sub.active {
  background: var(--surface);
  color: hsl(var(--primary-dark));
  box-shadow: 0 1px 3px hsl(215 25% 15% / 0.08), 0 0 0 1px hsl(var(--primary) / 0.12);
}

/* Work list rows */
.tt-work-item.lever-row {
  border-radius: 12px;
  border-color: hsl(var(--lever-line, var(--neutral-200)));
  background: var(--surface);
  padding: 10px 12px;
  box-shadow: 0 1px 2px hsl(215 25% 15% / 0.03);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.tt-work-item.lever-row:hover {
  border-color: hsl(var(--primary) / 0.28);
  box-shadow: var(--lever-card-shadow);
  transform: translateY(-1px);
  background: var(--surface);
}
.lever-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lever-row-body strong {
  font-size: var(--text-base);
  letter-spacing: -0.015em;
  color: hsl(var(--lever-ink, var(--neutral-900)));
}

/* Avatar initials */
.lever-mini-av {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--text-2xs);
  font-weight: 700;
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
  color: hsl(var(--primary));
  background: linear-gradient(145deg, hsl(var(--primary) / 0.12), hsl(var(--secondary) / 0.14));
  border: 1px solid hsl(var(--primary) / 0.12);
}
.pipe-card .lever-mini-av {
  width: 26px;
  height: 26px;
  font-size: var(--text-3xs);
}

/* Table name cell */
.lever-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lever-stage-chip {
  display: inline-block;
  font-size: var(--text-2xs);
  font-weight: 650;
  padding: 3px 9px;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
  letter-spacing: -0.01em;
  white-space: nowrap;
}
#view-crm .table tbody tr.lever-table-row:hover {
  background: hsl(var(--primary) / 0.03);
}

/* KPI cards — Lever soft elevation */
.crm-kpi {
  border-radius: 14px;
  border-color: hsl(var(--lever-line, var(--neutral-200)));
  box-shadow: var(--lever-card-shadow);
  padding: 1rem 1.1rem;
}
.crm-kpi .stat-label {
  font-size: var(--text-2xs);
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: hsl(var(--lever-muted, var(--neutral-500)));
}
.crm-kpi .stat-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: hsl(var(--lever-ink, var(--neutral-900)));
}

/* Score badge — fit-style */
.crm-score-badge {
  border-radius: 999px;
  min-width: 34px;
  height: 26px;
  font-size: var(--text-xs);
  background: linear-gradient(145deg, hsl(var(--primary) / 0.1), hsl(var(--secondary) / 0.12));
  color: hsl(var(--primary-dark));
  border: 1px solid hsl(var(--primary) / 0.1);
}
.crm-score-badge.sm {
  min-width: 28px;
  height: 22px;
}

/* Job cards */
.tt-job-card {
  border-radius: 14px;
  border-color: hsl(var(--lever-line, var(--neutral-200)));
  box-shadow: 0 1px 2px hsl(215 25% 15% / 0.03);
  padding: 14px 16px;
}
.tt-job-card:hover {
  box-shadow: var(--lever-card-shadow);
  border-color: hsl(var(--primary) / 0.3);
}

/* Tags */
.tt-tag {
  background: hsl(var(--secondary) / 0.08);
  color: hsl(var(--secondary-dark));
  border-color: hsl(var(--secondary) / 0.15);
  font-weight: 650;
}

/* ── Drawer: Lever candidate profile ── */
.crm-drawer-panel.lever-profile {
  width: min(600px, 100%);
  padding: 0;
  background: var(--surface);
  box-shadow: -16px 0 48px hsl(215 28% 12% / 0.14);
}
.crm-drawer-panel.lever-profile > .lever-head,
.crm-drawer-panel.lever-profile > .lever-journey,
.crm-drawer-panel.lever-profile > .lever-actions,
.crm-drawer-panel.lever-profile > .crm-tab-groups,
.crm-drawer-panel.lever-profile > .crm-tab-panels {
  padding-left: 1.4rem;
  padding-right: 1.4rem;
}
.crm-drawer-panel.lever-profile > .lever-head {
  padding-top: 1.35rem;
  padding-bottom: 1rem;
  margin-bottom: 0;
  border-bottom: 0;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
}
.lever-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.lever-identity {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-width: 0;
}
.lever-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  color: #fff;
  background: var(--gradient-energy);
  box-shadow: 0 4px 14px hsl(var(--primary) / 0.28);
  flex-shrink: 0;
}
.lever-identity-text {
  min-width: 0;
}
.lever-identity-text h2 {
  font-size: 1.4rem;
  letter-spacing: -0.03em;
  margin: 4px 0 4px;
  color: hsl(var(--lever-ink, var(--neutral-900)));
}
.lever-stage-pill {
  display: inline-block;
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  margin-bottom: 2px;
}
.lever-head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

/* Fit score ring (Lever-style) */
.lever-fit {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
}
.lever-fit-ring {
  position: absolute;
  inset: 0;
  width: 64px;
  height: 64px;
  transform: rotate(-90deg);
}
.lever-fit-bg {
  fill: none;
  stroke: var(--track);
  stroke-width: 3;
}
.lever-fit-fg {
  fill: none;
  stroke: hsl(var(--primary));
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease, stroke 0.2s;
}
.lever-fit-fg.high { stroke: hsl(var(--secondary)); }
.lever-fit-fg.mid { stroke: hsl(var(--primary-glow)); }
.lever-fit-fg.low { stroke: hsl(var(--accent-orange)); }
.lever-fit-n {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: -0.03em;
  color: hsl(var(--lever-ink, var(--neutral-900)));
  line-height: 1;
  z-index: 1;
}
.lever-fit-lab {
  position: absolute;
  bottom: -2px;
  font-size: var(--text-2xs);   /* 0.55rem = 8.8px, under läsbar gräns */
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Stage journey under header */
.lever-journey {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 2px;
  padding-top: 0 !important;
  padding-bottom: 12px !important;
  margin-bottom: 0;
  border-bottom: 1px solid hsl(var(--lever-line, var(--neutral-200)));
}
.lever-j-step {
  font-size: var(--text-2xs);
  font-weight: 650;
  padding: 4px 9px;
  border-radius: 999px;
  color: hsl(var(--lever-muted, var(--neutral-500)));
  background: hsl(var(--neutral-100));
  letter-spacing: -0.01em;
}
.lever-j-step.done {
  background: hsl(var(--secondary) / 0.1);
  color: hsl(var(--secondary-dark));
}
.lever-j-step.on {
  background: hsl(var(--primary-solid));
  color: #fff;
  box-shadow: 0 2px 8px hsl(var(--primary-solid) / 0.25);
}
.lever-j-arrow {
  font-size: var(--text-3xs);
  color: hsl(var(--neutral-400));
  padding: 0 2px;
  user-select: none;
}

/* Primary actions like Lever "Advance / Save for later" */
.lever-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid hsl(var(--lever-line, var(--neutral-200)));
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 2;
}
.lever-actions .btn {
  border-radius: 10px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.lever-actions .btn.primary {
  box-shadow: 0 2px 10px hsl(var(--primary) / 0.22);
}
.lever-actions .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.crm-drawer-panel.lever-profile .crm-tab-groups {
  padding-top: 12px;
  margin-top: 0;
}
.crm-drawer-panel.lever-profile .crm-tabs {
  background: hsl(var(--lever-slate, 210 20% 97%));
  border-color: hsl(var(--lever-line, var(--neutral-200)));
  border-radius: 12px;
}
.crm-drawer-panel.lever-profile .crm-tab.active {
  color: hsl(var(--primary-dark));
  box-shadow: 0 1px 3px hsl(215 25% 15% / 0.08);
}
.crm-drawer-panel.lever-profile .crm-tab-panels {
  padding-bottom: 2.5rem;
  padding-top: 4px;
}

/* Comments / activity — softer */
.crm-comment, .crm-contract {
  border-radius: 12px;
  border-color: hsl(var(--lever-line, var(--neutral-200)));
  background: hsl(var(--lever-slate, 210 20% 97%));
}

/* Calendar items */
.tt-cal-item {
  border-radius: 12px;
  background: var(--surface);
  border-color: hsl(var(--lever-line, var(--neutral-200)));
  box-shadow: 0 1px 2px hsl(215 25% 15% / 0.03);
}
.tt-cal-item:hover {
  box-shadow: var(--lever-card-shadow);
}

/* Funnel bars softer */
.tt-funnel-bar {
  border-radius: 10px;
  font-weight: 650;
}

/* Cards inside CRM */
#view-crm .card {
  border-radius: var(--radius-lg);
  border-color: hsl(var(--lever-line, var(--neutral-200)));
  box-shadow: var(--lever-card-shadow);
}
#view-crm .card-head h2 {
  letter-spacing: -0.02em;
  font-weight: 650;
}

/* ═══════════════════════════════════════════════════════
   Introduktion / onboarding — världsklass
   ═══════════════════════════════════════════════════════ */

.onb-hero {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--surface-2), hsl(170 30% 97%));
  border: 1px solid var(--border);
}

.onb-progress-ring-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}
.onb-progress-ring {
  width: 72px;
  height: 72px;
  transform: rotate(-90deg);
}
.onb-pr-bg {
  fill: none;
  stroke: var(--track);
  stroke-width: 3;
}
.onb-pr-fg {
  fill: none;
  stroke: hsl(var(--primary));
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.45s ease, stroke 0.2s;
}
.onb-pr-fg.done { stroke: hsl(var(--secondary)); }
.onb-pr-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}
.onb-pr-center strong {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  letter-spacing: -0.03em;
  color: var(--text);
}
.onb-pr-center span {
  font-size: var(--text-3xs);
  font-weight: 650;
  color: var(--text-muted);
}

.onb-hero-text { min-width: 0; flex: 1; }
.onb-hero-title {
  margin: 4px 0 4px;
  font-size: var(--text-lg);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
}
.onb-status-pill {
  display: inline-block;
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: hsl(var(--neutral-100));
  color: var(--text-soft);
}
.onb-status-pill.st-in_progress {
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}
.onb-status-pill.st-complete {
  background: hsl(var(--secondary) / 0.14);
  color: hsl(var(--secondary-dark));
}
.onb-status-pill.st-not_started {
  background: hsl(var(--neutral-100));
  color: var(--text-muted);
}

.onb-phase-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.onb-phase-mini {
  display: grid;
  grid-template-columns: 88px 1fr 32px;
  gap: 8px;
  align-items: center;
  font-size: var(--text-2xs);
  font-weight: 650;
  color: var(--text-soft);
}
.onb-phase-mini em {
  font-style: normal;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.onb-mini-track {
  height: 6px;
  background: var(--track);
  border-radius: 999px;
  overflow: hidden;
}
.onb-mini-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--gradient-energy);
  min-width: 2px;
  transition: width 0.35s ease;
}

.onb-meta-row { margin-bottom: 0.35rem; }

.onb-phases { display: flex; flex-direction: column; gap: 14px; margin: 12px 0; }

.onb-phase-block {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 2px hsl(215 25% 15% / 0.03);
}
.onb-phase-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.onb-phase-head h4 {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.onb-phase-head span {
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--primary));
}

.onb-check-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.onb-check-item {
  border-bottom: 1px solid var(--border-soft);
}
.onb-check-item:last-child { border-bottom: 0; }
.onb-check-item.done {
  background: hsl(var(--secondary) / 0.04);
}
.onb-check-item.overdue:not(.done) {
  background: hsl(var(--accent-orange) / 0.05);
}
.onb-check-lab {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 14px;
  cursor: pointer;
  margin: 0;
}
.onb-check-lab input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: hsl(var(--secondary));
  flex-shrink: 0;
}
.onb-check-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.onb-check-body strong {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.onb-check-item.done .onb-check-body strong {
  text-decoration: line-through;
  color: var(--text-muted);
}
.onb-check-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--text-2xs);
  font-weight: 650;
}
.onb-owner {
  padding: 2px 7px;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
}
.onb-due {
  padding: 2px 7px;
  border-radius: 999px;
  background: hsl(var(--neutral-100));
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.onb-due.late {
  background: hsl(var(--accent-orange) / 0.14);
  color: hsl(24 80% 32%);
}

/* Retention */
.onb-retention {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin: 8px 0 12px;
}
.onb-ret-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: var(--surface);
  box-shadow: 0 1px 2px hsl(215 25% 15% / 0.03);
}
.onb-ret-card.st-ok {
  border-color: hsl(var(--secondary) / 0.35);
  background: hsl(var(--secondary) / 0.05);
}
.onb-ret-card.st-risk {
  border-color: hsl(var(--accent-orange) / 0.4);
  background: hsl(var(--accent-orange) / 0.06);
}
.onb-ret-card.st-missed {
  border-color: hsl(var(--destructive) / 0.35);
  background: hsl(var(--destructive) / 0.05);
}
.onb-ret-card.overdue:not(.st-ok) {
  box-shadow: inset 0 0 0 1px hsl(var(--accent-orange) / 0.25);
}
.onb-ret-top {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}
.onb-ret-top strong {
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
}
.onb-ret-due {
  font-size: var(--text-3xs);
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.onb-ret-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.btn.sm {
  padding: 4px 10px;
  font-size: var(--text-2xs);
  border-radius: 8px;
  /* min-height: 0 slog ut basens 38px och gav 23px höga knappar — under
     WCAG 2.5.8 (24px). ~200 knappar i appen träffades. */
  min-height: 26px;
}
.onb-ret-st { margin-top: 2px; }
.onb-actions {
  flex-wrap: wrap;
  gap: 8px;
}

/* Board rows */
.onb-board-list { gap: 8px; }
.onb-board-row { position: relative; }
.onb-board-prog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--track);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}
.onb-board-prog span {
  display: block;
  height: 100%;
  background: var(--gradient-energy);
  transition: width 0.35s ease;
}

@media (max-width: 560px) {
  .onb-hero { flex-direction: column; align-items: center; text-align: center; }
  .onb-phase-mini { grid-template-columns: 72px 1fr 28px; }
  .onb-retention { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════
   Granskning 2026-07-27 — tillägg
   ═══════════════════════════════════════════════════════ */

/* "Visa alla" — listor klipptes tidigare tyst vid 20/25 rader. */
.tt-list-more {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: hsl(var(--primary));
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.tt-list-more:hover {
  background: var(--surface-accent);
  border-style: solid;
}
.tt-cal-more {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

/* Kandidattabellen på små skärmar: 9 kolumner → staplade kort. */
@media (max-width: 780px) {
  .cand-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .cand-table,
  .cand-table tbody,
  .cand-table tr,
  .cand-table td {
    display: block;
    width: 100%;
  }
  .cand-table tr.cand-row {
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }
  .cand-table td {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    border: 0;
  }
  .cand-table td::before {
    content: attr(data-label);
    flex: 0 0 84px;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .cand-table td[data-label=""]::before { content: none; }
  .cand-table td[data-label=""] { padding-top: 8px; }
  .cand-table td[data-label=""] .btn { width: 100%; }
  .crm-global-bar { align-items: stretch; }
  .crm-search-wrap { flex: 1 1 100%; }
  .crm-global-bar .tt-filter { flex: 1 1 45%; }
  .pipeline-board { grid-auto-columns: 82vw; }
}

/* Kandidatlådan ska aldrig ligga bakom sidans scroll på små skärmar. */
@media (max-width: 560px) {
  .crm-drawer-panel { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .crm-tabs { overflow-x: auto; flex-wrap: nowrap; }
}

/* ═══════════════════════════════════════════════════════
   Dialog — ersätter alert()/confirm()/prompt()
   ═══════════════════════════════════════════════════════ */
.vr-dialog[hidden] { display: none; }
.vr-dialog {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
.vr-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: hsl(215 30% 12% / 0.5);
  backdrop-filter: blur(2px);
}
.vr-dialog-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(86vh, 780px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.vr-dialog-panel.wide { width: min(760px, 100%); }
.vr-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}
.vr-dialog-head h2 { font-size: var(--text-lg); }
.vr-dialog-head p { margin-top: 4px; }
.vr-dialog-x {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.vr-dialog-x:hover { background: var(--bg-hover); color: var(--text); }
.vr-dialog-body {
  padding: var(--space-5);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.vr-dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-5);
  border-top: 1px solid var(--border-soft);
}
.vr-dialog-foot .spacer { margin-right: auto; }
@media (max-width: 560px) {
  .vr-dialog { place-items: end center; padding: 0; }
  .vr-dialog-panel { width: 100%; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .vr-dialog-foot { flex-direction: column-reverse; }
  .vr-dialog-foot .btn { width: 100%; }
}

/* Kandidatlistan använder hela bredden — «Ny kandidat» är nu en dialog
   i stället för ett permanent formulär som åt en tredjedel av ytan. */
.crm-layout-full { display: block; }

/* Bulkfält */
.crm-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  padding: 10px 12px;
  background: var(--surface-accent);
  border: 1px solid hsl(var(--primary) / 0.3);
  border-radius: var(--radius-sm);
}
.crm-bulk-count {
  font-weight: 700;
  color: hsl(var(--primary-dark));
}
.crm-bulk-move {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
}
.crm-bulk-move .select { width: auto; min-width: 150px; }
.crm-bulk-danger { color: var(--danger); }
.crm-bulk-danger:hover { border-color: var(--danger); }

.cand-pick { width: 34px; }
.cand-check { width: 16px; height: 16px; cursor: pointer; }
tr.cand-row.is-selected { background: var(--surface-accent); }
.cand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}
.cand-link { color: inherit; text-decoration: none; }
.cand-link:hover { color: hsl(var(--primary)); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════
   Kandidatlådan — sammanfattning före formulär
   ═══════════════════════════════════════════════════════ */
.cand-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.cs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cs-danger { color: var(--danger); }
.cs-danger:hover { border-color: var(--danger); }

.cs-alert {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: hsl(var(--accent-orange) / 0.1);
  border: 1px solid hsl(var(--accent-orange) / 0.35);
  color: hsl(var(--accent-orange) / 1);
  font-size: var(--text-sm);
  font-weight: 600;
}
:root[data-theme="dark"] .cs-alert { color: hsl(28 95% 74%); }

.cs-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: 0;
  padding: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.cs-fact dt {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.cs-fact dd {
  margin: 2px 0 0;
  font-size: var(--text-base);
  font-weight: 500;
  word-break: break-word;
}
.cs-fact a { color: hsl(var(--primary)); text-decoration: none; }
.cs-fact a:hover { text-decoration: underline; }

.cs-status { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cs-pill {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--text-sm);
}
.cs-pill.late {
  background: hsl(var(--accent-orange) / 0.12);
  border-color: hsl(var(--accent-orange) / 0.4);
}
.cs-pill.missing {
  background: hsl(var(--destructive) / 0.1);
  border-color: hsl(var(--destructive) / 0.35);
}

.cs-note {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid hsl(var(--primary) / 0.4);
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.cs-note p { font-size: var(--text-base); white-space: pre-wrap; }
.cs-note cite {
  display: block;
  margin-top: 6px;
  font-size: var(--text-xs);
  font-style: normal;
  color: var(--text-muted);
}
.cs-assess { font-size: var(--text-sm); }

.cand-next,
.cand-note-quick,
.cand-score-inline {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}
.cand-all-fields {
  margin-top: var(--space-5);
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-4);
}
.cand-all-fields > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-sm);
  color: hsl(var(--primary));
  padding: 6px 0;
}
.cand-all-fields[open] > summary { margin-bottom: var(--space-3); }
.crm-more-fields > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-sm);
  color: hsl(var(--primary));
  padding: 4px 0;
}
.crm-more-fields[open] { display: flex; flex-direction: column; gap: var(--space-4); }

/* Undertabbar i Historik */
.cand-subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-4);
  padding: 4px;
  background: var(--surface-2);
  border-radius: 10px;
}
.cand-subtab {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: 7px;
  padding: 7px 10px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.cand-subtab.active {
  background: var(--surface);
  color: hsl(var(--primary-dark));
  box-shadow: var(--shadow-xs);
}
.cand-subpanel { display: none; }
.cand-subpanel.active { display: block; }

/* Toast med ångra-knapp */
.vr-toast-action {
  margin-left: 14px;
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}
.vr-toast-action:hover:not(:disabled) { background: hsl(0 0% 100% / 0.15); }
.vr-toast-action:disabled { opacity: 0.6; cursor: default; }

/* Tangentbordshjälp */
.kbd-list { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.kbd-list > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  gap: var(--space-3);
}
.kbd-list dt { margin: 0; }
.kbd-list dd { margin: 0; font-size: var(--text-sm); }
.kbd-list kbd {
  display: inline-block;
  padding: 2px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Fokus på rad/kort ska synas tydligt när man styr med tangentbord */
tr.cand-row:focus-visible,
.pipe-card:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: -2px;
  box-shadow: var(--shadow-focus);
}

/* ═══════════════════════════════════════════════════════
   Processrad — de kanoniska stegen, klickbara som filter
   ═══════════════════════════════════════════════════════ */
.stage-strip {
  list-style: none;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 1.25rem;
  padding: 0;
}
.stage-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.stage-arrow {
  color: var(--text-muted);
  font-size: 1.1rem;
  opacity: 0.5;
}
.stage-all { margin-left: auto; }
.stage-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 104px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-soft);
  font: inherit;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.stage-btn:hover { background: var(--bg-hover); }
.stage-btn.on,
.stage-item.on .stage-btn {
  background: hsl(var(--primary) / 0.12);
  border-color: hsl(var(--primary) / 0.4);
  color: hsl(var(--primary-dark));
}
.stage-n {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.stage-lab {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.muted-stage .stage-btn { opacity: 0.65; }
.muted-stage .stage-btn.on,
.stage-item.muted-stage.on .stage-btn { opacity: 1; }

/* KPI-kortens färgade kantlist bort — samma pynt som på översikten. */
.crm-kpi::before { content: none; }
.crm-kpi { border: 1px solid var(--border-soft); box-shadow: none; }

.cand-actions { white-space: nowrap; }
.cand-actions .btn + .btn { margin-left: 4px; }

@media (max-width: 700px) {
  .stage-strip { gap: 6px; }
  .stage-btn { min-width: 0; flex: 1; padding: 8px 10px; }
  .stage-arrow { display: none; }
  .stage-all { margin-left: 0; }
}

/* Tom kolumn = brus. Döljs när inget jobb är kopplat på någon rad. */
body.hide-job-col .cand-table th:nth-child(4),
body.hide-job-col .cand-table td[data-label="Jobb"] { display: none; }
@media (max-width: 780px) {
  body.hide-job-col .cand-table td[data-label="Jobb"] { display: none; }
}

/* Åtgärderna hör ihop med arbetsytan — högerställ dem i stället för att
   låta dem sväva ensamma till vänster efter att hjälten togs bort. */
.tt-top.lever-hero {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 var(--space-4);
}
.crm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
@media (max-width: 700px) {
  .tt-top.lever-hero { justify-content: stretch; }
  .crm-hero-actions { width: 100%; }
  .crm-hero-actions .btn { flex: 1; }
}

/* ═══════════════════════════════════════════════════════
   Semantiska steg — pipen ska gå att skanna med ögat
   ═══════════════════════════════════════════════════════ */
.stage-btn { background: var(--surface); border: 1px solid var(--border-soft); }
.stage-btn:hover { background: var(--surface-2); border-color: var(--border); }
.stage-n { color: var(--text); }
.stage-lab { color: var(--text-muted); }

.stage-item:nth-child(1) .stage-btn { --tone: var(--stage-inbox); }
.stage-item:nth-child(2) .stage-btn { --tone: var(--stage-screening); }
.stage-item:nth-child(3) .stage-btn { --tone: var(--stage-interview); }
.stage-item:nth-child(4) .stage-btn { --tone: var(--stage-offer); }
.stage-item:nth-child(5) .stage-btn { --tone: var(--stage-hired); }
.stage-item:nth-child(6) .stage-btn { --tone: var(--stage-rejected); }
.stage-all .stage-btn { --tone: var(--n-400); }

.stage-btn::before {
  content: "";
  display: block;
  width: 22px;
  height: 3px;
  margin-bottom: 7px;
  border-radius: 999px;
  background: hsl(var(--tone, var(--primary)));
  opacity: 0.85;
}
.stage-btn.on,
.stage-item.on .stage-btn {
  background: hsl(var(--tone, var(--primary)) / 0.1);
  border-color: hsl(var(--tone, var(--primary)) / 0.45);
}
.stage-item.on .stage-n,
.stage-btn.on .stage-n { color: hsl(var(--tone, var(--primary))); }

/* Stegchipet i listan får samma ton som steget i processraden */
.lever-stage-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-weight: 600;
}
/* Varje steg MÅSTE ange --ink. Utan det faller rad nedan tillbaka på --tone,
   alltså den mättade fyllnadsfärgen, som text ovanpå sin egen 12%-ton — mätt
   3.04:1 för "Anställd" och 3.88:1 för "Avslag". */
.lever-stage-chip[data-stage="inbox"]     { --tone: var(--stage-inbox); --ink: var(--stage-inbox-ink); }
.lever-stage-chip[data-stage="screening"] { --tone: var(--stage-screening); --ink: var(--stage-screening-ink); }
.lever-stage-chip[data-stage="interview"] { --tone: var(--stage-interview); --ink: var(--stage-interview-ink); }
.lever-stage-chip[data-stage="offer"]     { --tone: var(--stage-offer); --ink: var(--stage-offer-ink); }
.lever-stage-chip[data-stage="hired"]     { --tone: var(--stage-hired); --ink: var(--stage-hired-ink); }
.lever-stage-chip[data-stage="rejected"]  { --tone: var(--stage-rejected); --ink: var(--stage-rejected-ink); }
.lever-stage-chip[data-stage] {
  background: hsl(var(--tone) / 0.12);
  border-color: hsl(var(--tone) / 0.32);
  color: hsl(var(--ink, var(--tone)));
}

/* Kanbankolumner får stegets ton i huvudet */
.pipe-col[data-pipe-stage="inbox"]     { --tone: var(--stage-inbox); }
.pipe-col[data-pipe-stage="screening"] { --tone: var(--stage-screening); }
.pipe-col[data-pipe-stage="interview"] { --tone: var(--stage-interview); }
.pipe-col[data-pipe-stage="offer"]     { --tone: var(--stage-offer); }
.pipe-col[data-pipe-stage="hired"]     { --tone: var(--stage-hired); }
.pipe-col h4 {
  border-bottom: 2px solid hsl(var(--tone, var(--primary)) / 0.45);
  padding-bottom: 8px;
  color: var(--text);
}

/* Avatarer: stegets ton i stället för samma bleka blå överallt */
.lever-mini-av, .lever-avatar {
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary-dark));
  font-weight: 650;
}
.lever-avatar { background: var(--gradient-primary); color: #fff; }

.crm-kpi { background: var(--surface); border: 1px solid var(--border-soft); }
.crm-score-badge {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-weight: 650;
}
.pipe-card, .tt-work-item, .tt-job-card, .crm-top-item {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.pipe-card:hover, .tt-work-item:hover, .tt-job-card:hover, .crm-top-item:hover {
  border-color: var(--border);
  background: var(--surface-2);
}

/* Siffran i ett valt steg använder textvarianten, inte dekorfärgen. */
.stage-item:nth-child(1) .stage-btn { --ink: var(--stage-inbox-ink); }
.stage-item:nth-child(2) .stage-btn { --ink: var(--stage-screening-ink); }
.stage-item:nth-child(3) .stage-btn { --ink: var(--stage-interview-ink); }
.stage-item:nth-child(4) .stage-btn { --ink: var(--stage-offer-ink); }
.stage-item:nth-child(5) .stage-btn { --ink: var(--stage-hired-ink); }
.stage-item:nth-child(6) .stage-btn { --ink: var(--stage-rejected-ink); }
.stage-item.on .stage-n,
.stage-btn.on .stage-n { color: hsl(var(--ink, var(--primary))); }

/* Lista ⇄ Tavla — samma kandidater, två presentationer (Lever/Ashby-mönster) */
.crm-view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.crm-view-btn {
  border: 0;
  background: transparent;
  border-radius: 7px;
  padding: 6px 14px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.crm-view-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.cand-board[hidden] { display: none; }
.cand-board .pipeline-board { margin-top: var(--space-2); }

/* ═══════════════════════════════════════════════════════
   Inkorg — granskningskö för ansökningar via e-post
   ═══════════════════════════════════════════════════════ */
.mail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 14px;
  margin-bottom: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.mail-status { font-size: var(--text-sm); color: var(--text-soft); }
.mail-dot {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 7px;
  border-radius: 999px;
  background: hsl(var(--secondary));
}
.mail-dot.off { background: var(--text-muted); }
.mail-fail { color: var(--danger); font-weight: 600; }
.mail-filter { margin-bottom: var(--space-3); }

.mail-list {
  display: grid;
  /* minmax(0,1fr): utan nollan sizeas spåret efter innehållets minsta bredd
     och växte till 802px i en 721px behållare — 229 element hamnade utanför
     skärmen på surfplatta. Samma feltyp som .crm-layout hade. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
.mail-item { min-width: 0; }
.mail-item-top { min-width: 0; flex-wrap: wrap; }
.mail-item-top > * { min-width: 0; }
/* Långa ämnesrader och adresser ska brytas, inte skjuta ut kortet. */
.mail-item .mail-subject,
.mail-item .mail-from,
.mail-item .mail-preview { overflow-wrap: anywhere; }
.mail-item {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.mail-item.is-noise { opacity: 0.6; }
.mail-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 8px;
}
.mail-src {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.mail-src.src-direkt {
  background: hsl(var(--stage-offer) / 0.12);
  border-color: hsl(var(--stage-offer) / 0.32);
  color: hsl(var(--stage-offer-ink));
}
.mail-src.src-linkedin {
  background: hsl(var(--stage-interview) / 0.12);
  border-color: hsl(var(--stage-interview) / 0.32);
  color: hsl(var(--stage-interview-ink));
}
.mail-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.mail-subject { margin-top: 3px; font-weight: 600; }
.mail-preview {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-soft);
  white-space: pre-wrap;
  max-height: 7.5em;
  overflow: hidden;
}
.mail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: 10px;
}
.mail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
@media (max-width: 560px) { .mail-actions .btn { flex: 1; } }

/* .check-inline ärvde kolumnriktning från omgivningen — kryssrutan
   hamnade ovanför sin etikett i stället för bredvid. */
.mail-filter .check-inline,
.mail-filter label {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-soft);
  cursor: pointer;
}
.mail-filter input[type="checkbox"] {
  margin: 0;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Mappflikar */
.mail-folders {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--space-3);
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.mail-folder {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  border-radius: 7px;
  padding: 7px 13px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.mail-folder:hover { color: var(--text); }
.mail-folder.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.mail-folder-n {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
  color: var(--text-muted);
}
.mail-folder.active .mail-folder-n {
  background: hsl(var(--primary) / 0.12);
  border-color: hsl(var(--primary) / 0.3);
  color: hsl(var(--primary-dark));
}

.mail-head-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.mail-linked {
  border: 1px solid hsl(var(--primary) / 0.3);
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary-dark));
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}

/* Mejltråd på kandidaten */
.thread-msg {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border-left: 3px solid var(--border);
}
.thread-msg.out {
  background: hsl(var(--primary) / 0.06);
  border-left-color: hsl(var(--primary) / 0.5);
}
.thread-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: 4px;
}
.thread-dir { font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); }
.thread-msg p {
  margin-top: 5px;
  font-size: var(--text-sm);
  color: var(--text-soft);
  white-space: pre-wrap;
}

/* ═══════════════════════════════════════════════════════
   Kandidaten som kolumn — inte som lager över sidan
   Kritik: "pop up sido menyer". Panelen la sig ovanpå allt med
   mörkläggning bakom, och man tappade var i listan man var.
   Nu delar den ytan med listan: listan står kvar, går att scrolla
   och klicka i medan en kandidat är öppen.
   ═══════════════════════════════════════════════════════ */
/* Lådans bredd har EN sanningskälla. Tidigare stod bredden i vw med ett
   max-width-tak medan utfyllnaden på .main räknade vidare i rena vw — taket
   speglades aldrig. Vid 2560px blev lådan 720px men utfyllnaden 994px, och
   eftersom .main dessutom är kapad till 1120px kollapsade innehållet till
   98px. Nu används samma min()-uttryck på båda ställena. */
@media (min-width: 1100px) {
  :root { --drawer-w: min(40vw, 640px); }
}
@media (min-width: 1500px) {
  :root { --drawer-w: min(38vw, 720px); }
}

@media (min-width: 1100px) {
  .crm-drawer:not(.hidden) { position: fixed; inset: 0 0 0 auto; width: var(--drawer-w); }
  .crm-drawer:not(.hidden) .crm-drawer-backdrop { display: none; }
  .crm-drawer-panel {
    width: 100%;
    max-width: none;
    height: 100vh;
    border-left: 1px solid var(--border);
    border-radius: 0;
    box-shadow: -1px 0 0 var(--border-soft);
  }
  /* Ge listan plats i stället för att täcka den. Läskbredden på 1120px släpps
     medan lådan är öppen — annars dras utfyllnaden från en box som är smalare
     än den yta lådan faktiskt tar. */
  /* Borttagen: kandidaten är en sida nu, inget lager som .main behöver
     ge plats åt. Regeln sköt undan innehållet med vw-baserad utfyllnad och
     kollapsade det till 98px vid breda fönster. */
  body.cand-open .stage-btn { min-width: 84px; padding: 8px 10px; }
  body.cand-open tr.cand-row[aria-current="true"] {
    background: var(--surface-accent);
    box-shadow: inset 3px 0 0 hsl(var(--primary));
  }
}

/* Kandidaten som en sida: sektioner staplade med tydliga avgränsare. */
.cand-sections { display: flex; flex-direction: column; }
.cand-sec {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-soft);
}
.cand-sec:first-child { border-top: 0; padding-top: var(--space-3); }
.cand-sec-title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.cand-sub { margin-bottom: var(--space-5); }
.cand-sub:last-child { margin-bottom: 0; }
.cand-sub-title {
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--text-soft);
  margin-bottom: var(--space-2);
}

/* Balansera kolumnerna: panelen får inte tränga ihop listan så att
   processraden bryts i tre rader och filtren staplas. */
@media (min-width: 1100px) {
  body.cand-open .crm-global-bar { gap: 8px; }
  body.cand-open .crm-global-bar .tt-filter { flex: 1 1 120px; }
  body.cand-open .stage-strip { gap: 3px; }
  body.cand-open .stage-btn { min-width: 0; flex: 1; padding: 7px 8px; }
  body.cand-open .stage-arrow { display: none; }
  body.cand-open .stage-n { font-size: var(--text-lg); }
  body.cand-open .stage-all { margin-left: 0; }
}
@media (min-width: 1500px) {
}
/* Panelen scrollar internt, huvudet ligger kvar. */
.crm-drawer-panel { scroll-behavior: smooth; }
@media (min-width: 1100px) {
  .crm-drawer-panel .crm-drawer-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
    border-bottom: 1px solid var(--border-soft);
  }
}

/* Utfällda åtgärder i kandidatpanelen — ersätter dialogfönster. */
.cand-inline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cand-inline[hidden] { display: none; }
.cand-inline .cand-sec-title { margin: 0; }

.crm-empty-actions { margin-top: var(--space-3); display: flex; justify-content: center; gap: var(--space-2); }


/* ═══ Träffytor: kryssrutor ═══
   Webbläsarens standard är 13-16px, under WCAG 2.5.8:s 24px. Rutorna sitter
   ensamma i sina celler så det finns gott om plats att rita dem större. */
input[type="checkbox"],
input[type="radio"] {
  width: 24px;
  height: 24px;
  accent-color: hsl(var(--primary-solid));
  cursor: pointer;
}


/* ═══ Responsivt efter FAKTISK bredd, inte efter lådans tillstånd ═══
   Kolumndöljningen satt på body.cand-open, alltså på om panelen råkade vara
   öppen. Men trängseln beror lika mycket på fönsterbredden: vid 1233px med
   STÄNGD låda spillde tabellen 83px och åtgärdsknapparna hamnade utanför
   kanten utan att någon regel reagerade. Container queries mäter elementet
   självt och fångar därför båda orsakerna med samma villkor.

   Trösklarna är uppmätta, inte gissade — tabellens minsta bredd är
   7 kolumner ~1010px, 6 kolumner ~900px, 5 kolumner ~560px.
   Höjda till 1120/1000 sedan knappetiketterna blev "Tackade ja/nej" i
   stället för "Ja/Nej" — åtgärdskolumnen växte och klipptes annars. */
.crm-main-col { container-type: inline-size; container-name: kandidatkol; }
/* Stegraden är SYSKON till panelen, inte barn — den behöver en egen container. */
.view { container-type: inline-size; container-name: vy; }

@container kandidatkol (max-width: 1120px) {
  .cand-table th:nth-child(4),
  .cand-table td[data-label="Jobb"] { display: none; }
}

@container kandidatkol (max-width: 1000px) {
  .cand-table th:nth-child(3),
  .cand-table td[data-label="Kontakt"] { display: none; }
}

/* Under 5 kolumners minimibredd duger ingen kolumnhyvling — då staplas raden
   som kort. Samma regler som @media (max-width: 780px), men utlösta av
   kolumnens bredd så att de även gäller när lådan är det som tränger ihop. */
@container kandidatkol (max-width: 560px) {

  .cand-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .cand-table,
  .cand-table tbody,
  .cand-table tr,
  .cand-table td {
    display: block;
    width: 100%;
  }
  .cand-table tr.cand-row {
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }
  .cand-table td {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    border: 0;
  }
  .cand-table td::before {
    content: attr(data-label);
    flex: 0 0 84px;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .cand-table td[data-label=""]::before { content: none; }
  .cand-table td[data-label=""] { padding-top: 8px; }
  .cand-table td[data-label=""] .btn { width: 100%; }
  .crm-global-bar { align-items: stretch; }
  .crm-search-wrap { flex: 1 1 100%; }
  .crm-global-bar .tt-filter { flex: 1 1 45%; }
}

@container vy (max-width: 900px) {
  /* Stegraden bröt till två rader där "Alla" hamnade ensamt längst till
     höger med ett tomrum emellan. Hellre en rad som går att dra i sidled. */
  .stage-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .stage-all { margin-left: 0; }
  .stage-btn { min-width: 0; }
}


/* ═══ Kandidaten som SIDA ═══
   Var en fast panel som gled in över listan. Nu en panel bland de andra:
   full bredd, i flödet, med en tydlig väg tillbaka. Övriga .crm-drawer- och
   .cand-open-regler är inerta — markupen och body-klassen finns inte kvar. */
.crm-kandidatsida { display: none; }
.crm-kandidatsida.active { display: block; }

.crm-kandidat-panel {
  width: 100%;
  max-width: 1100px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.crm-kandidat-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
}

.kand-tillbaka {
  flex: 0 0 auto;
  order: -1;
  margin-bottom: var(--space-2);
}
/* "Stäng" var lådans knapp. Nu finns vägen tillbaka överst — två utgångar
   som gör samma sak är bara brus. */
.crm-kandidat-head #btn-cand-close { display: none; }

/* ═══ Kandidatsidans flikar ═══
   Allt låg tidigare utfällt i en kolumn — 6360px, drygt fem skärmars scroll,
   med "Avslå kandidaten" som första rubrik och introduktionens 24 knappar
   synliga för alla. Nu en sak i taget. */
.kand-flikar {
  display: flex;
  gap: 2px;
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.kand-flikar::-webkit-scrollbar { display: none; }

.kand-flik {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 12px var(--space-4);
  margin-bottom: -1px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
}
.kand-flik:hover { color: var(--text); }
.kand-flik.active {
  color: hsl(var(--primary));
  border-bottom-color: hsl(var(--primary));
}
.kand-flik[hidden] { display: none; }

/* Sektionerna ligger nu i flikar — inga dubbla avgränsare. */
.crm-kandidat-panel .cand-sec { padding: var(--space-5); border-top: 0; }

/* Namnet står som sidrubrik — kortets h2 behövs bara för aria-labelledby. */
.crm-kandidat-head .visuellt-dold {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Metaraden upprepade kontaktrutan nedanför och bröt e-posten mitt i ordet. */
.crm-kandidat-head .kand-meta-kort { display: none; }

/* Rubrikraden: tillbaka-knappen på egen rad, identiteten vänsterställd.
   Utan detta hamnade avataren mitt i raden mellan knappen och betygsringen. */
.crm-kandidat-head { align-items: center; }
.crm-kandidat-head .kand-tillbaka {
  /* Egen rad, men bara så bred som texten. flex-basis: 100% ensamt sträckte
     knappen över hela rubrikraden. */
  flex: 0 0 100%;
  max-width: max-content;
  align-self: flex-start;
}
.crm-kandidat-head .lever-identity {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}
.crm-kandidat-head .lever-identity-text {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.crm-kandidat-head .lever-head-right { margin-left: auto; }

/* Paginering under kandidatlistan. Vid 2000 kandidater blev tabellen
   45 000 DOM-noder och 165 000 px hög — hela kostnaden betalades om vid
   varje filtrering. */
.crm-visa-fler {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-2);
}
.crm-visa-fler:empty { display: none; }

/* Nyckeltal som går att klicka på. De var döda tal — ser man
   "Försenad uppföljning: 3" ska man kunna nå de tre. */
button.crm-kpi.klickbar {
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
button.crm-kpi.klickbar:hover {
  border-color: hsl(var(--primary) / 0.45);
  background: var(--bg-hover);
}

/* Kontaktlänkarna i tabellen var 16px höga — 60 stycken under WCAG 2.5.8:s
   24px. De ligger i tabellceller, inte i löpande text, så undantaget för
   inline-länkar gäller inte. Padding lyfter träffytan utan att flytta texten. */
.cand-link {
  display: inline-block;
  padding: 4px 0;
  min-height: 24px;
  line-height: 16px;
}

/* Verktygsraden ovanför kandidatlistan (Lista/Tavla, sortering, + Ny,
   Exportera) radbröt inte på små skärmar och sköt ut 69px utanför fönstret.
   Den var det som gav sidoscroll på mobil — inte navmenyn. */
@media (max-width: 800px) {
  .inline-tools {
    flex-wrap: wrap;
    row-gap: var(--space-2);
    max-width: 100%;
  }
  .inline-tools > * { flex: 0 1 auto; min-width: 0; }
}

/* Svarsformuläret på kundkortet. Sändningsvägen fanns på servern men gick
   inte att nå från gränssnittet. */
.mail-svar { margin-top: var(--space-5); }
.mail-svar-form { display: flex; flex-direction: column; gap: var(--space-3); }
.mail-svar-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.mail-svar-topp .input { max-width: 220px; }
.mail-svar-fot { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* Designpolish CRM — samma ytspråk som app.css */
.crm-kandidat-panel,
.crm-layout .card,
.crm-global-bar {
  border-radius: 18px;
  border: 1px solid var(--border-soft, #eef1f5);
  box-shadow: 0 1px 2px rgba(18, 25, 38, 0.04), 0 6px 18px rgba(18, 25, 38, 0.06);
}
.crm-view-btn.active,
.crm-tab-panel .active {
  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.2);
}
.cand-table th {
  font-variant-numeric: tabular-nums;
}