/* ============================================================================
   View-specific styles — dashboard, pipeline, income, tasks, settings, detail
   Populated incrementally as each view is built.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   View header polish — applies to every view's title block
--------------------------------------------------------------------------- */
.view__title {
  letter-spacing: -0.02em;
}
.view__subtitle {
  font-size: var(--fs-body);
  margin-top: var(--space-2);
}

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

/* Top stat grid: hero MRR card spans 2 columns; two secondary tiles fill the rest */
.stat-grid--with-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--card-gap);
}
.stat-grid--with-hero > .mrr-hero { grid-column: span 2; }
@media (max-width: 1024px) {
  .stat-grid--with-hero { grid-template-columns: repeat(2, 1fr); }
  .stat-grid--with-hero > .mrr-hero { grid-column: span 2; }
}
@media (max-width: 560px) {
  .stat-grid--with-hero { grid-template-columns: 1fr; }
  .stat-grid--with-hero > .mrr-hero { grid-column: span 1; }
}

/* Secondary stat grid — auto-fit so 4-or-5 cards flow naturally without
   leaving an orphan card on its own row. Min width keeps numbers readable. */
.stat-grid--secondary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--card-gap);
}

/* MRR hero card */
.mrr-hero {
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--bg-secondary);
}
.mrr-hero__label {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--text-secondary);
}
.mrr-hero__num {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  position: relative;
  padding-bottom: var(--space-3);
  color: var(--text-primary);
}
.mrr-hero__num::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.mrr-hero__caption {
  color: var(--text-tertiary);
  font-size: var(--fs-small);
}

/* Phone: shrink the MRR hero so it doesn't dominate the screen */
@media (max-width: 560px) {
  .mrr-hero {
    padding: var(--space-5) var(--space-5);
  }
  .mrr-hero__num {
    font-size: 40px;
    line-height: 48px;
  }
  .mrr-hero__num::after { width: 40px; }
}

/* Stat tile */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 120px;
}
.stat__label {
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.stat__num {
  font-family: var(--font-sans);
  font-size: var(--fs-stat-num);
  line-height: var(--lh-stat-num);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.stat__sub {
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  margin-top: auto;
}

.pile { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Chart wrap — fixed height so the canvas resizes responsively */
.chart-wrap {
  position: relative;
  height: 280px;
  width: 100%;
}

/* Today's actions — stage-derived groups. One section per action type
   (mockups to create / outreaches to send / etc.), each containing the
   prospects that need that work. */
.actions-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
.actions-group { display: flex; flex-direction: column; gap: var(--space-1); }
.actions-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}
.actions-group__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
}
.actions-group__title {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: var(--fw-strong);
  color: var(--text-secondary);
  flex: 1;
}
.actions-group__count {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: var(--fw-strong);
  padding: 2px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  min-width: 24px;
  text-align: center;
}
.actions-group__rows { display: flex; flex-direction: column; gap: 2px; }
.actions-group__more {
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  padding: var(--space-2) var(--space-3);
}

.actions-list__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: inherit;
  transition: background-color 140ms var(--ease-out);
}
.actions-list__row:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.actions-list__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.actions-list__name {
  font-weight: 500;
  color: var(--text-primary);
  font-size: var(--fs-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.actions-list__hint { color: var(--text-tertiary); font-size: var(--fs-small); }
.actions-list__age {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Recent activity list */
.activity-list { display: flex; flex-direction: column; margin-top: var(--space-2); }
.activity-list__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.activity-list__row:last-child { border-bottom: 0; }
.activity-list__name {
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activity-list__name:hover { color: var(--accent); }
.activity-list__time {
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  min-width: 64px;
  text-align: right;
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-4);
  color: var(--text-secondary);
}
.empty-state__icon { color: var(--text-tertiary); }
.empty-state__title { font-weight: 500; color: var(--text-primary); }
.empty-state__body { color: var(--text-secondary); font-size: var(--fs-small); }

/* ---------------------------------------------------------------------------
   Pipeline (Kanban)
--------------------------------------------------------------------------- */

/* Outer wrap — bleeds out to the page margin so the horizontal scroll
   feels edge-to-edge instead of cropped within a card */
.kanban {
  overflow-x: auto;
  margin: 0 calc(var(--page-margin-desktop) * -1);
  padding: 0 var(--page-margin-desktop) var(--space-5);
}
@media (max-width: 768px) {
  /* Keep overflow-x: auto so the kanban's ~3000px column row scrolls inside
     its own container instead of stretching <body>. Letting it stretch <body>
     made every position:fixed element (cmdk, bottom-tab) anchor to the wider
     layout viewport and slide off-screen. */
  .kanban {
    margin: 0 calc(var(--page-margin-mobile) * -1);
    padding: 0 var(--page-margin-mobile) var(--space-5);
  }
}

.kanban__cols {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-width: max-content;
}

.kanban-col {
  width: 280px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-top-width: 2px;
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  overflow: hidden;
  transition: opacity 180ms var(--ease-out), border-color 180ms var(--ease-out), width 220ms var(--ease-out);
}

/* Per-stage top-border tint — keeps the column distinguishable at a glance
   without colouring the whole background. Live & Hosting gets a thicker bar
   because it's the goal state. */
.kanban-col.stage-tint--researched          { border-top-color: var(--border-strong); }
.kanban-col.stage-tint--mockup_created      { border-top-color: var(--info); }
.kanban-col.stage-tint--outreach_sent       { border-top-color: var(--accent); }
.kanban-col.stage-tint--replied_interested  { border-top-color: var(--accent); }
.kanban-col.stage-tint--call_booked         { border-top-color: var(--warning); }
.kanban-col.stage-tint--proposal_sent       { border-top-color: var(--warning); }
.kanban-col.stage-tint--won                 { border-top-color: var(--success); }
.kanban-col.stage-tint--in_build            { border-top-color: var(--success); }
.kanban-col.stage-tint--live_hosting        { border-top-color: var(--success); border-top-width: 3px; }
.kanban-col.stage-tint--lost                { border-top-color: var(--danger); }
.kanban-col.stage-tint--churned             { border-top-color: var(--danger); }

.kanban-col__head {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--bg-secondary);
  user-select: none;
}
.kanban-col--terminal .kanban-col__head { cursor: pointer; }
.kanban-col__title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--fw-strong);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kanban-col__count {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  background: var(--bg-tertiary);
  border-radius: 999px;
  padding: 2px 8px;
  min-width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.kanban-col__body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 80px;
  max-height: calc(100vh - 280px);
  overflow-y: auto;
}

/* Terminal stage de-emphasis */
.kanban-col--terminal { opacity: 0.55; }
.kanban-col--terminal:hover,
.kanban-col--terminal.is-drag-open { opacity: 1; }
.kanban-col--terminal:not(.kanban-col--collapsed) { opacity: 1; }

/* Collapsed state — header only, narrow column */
.kanban-col--collapsed {
  width: 140px;
  min-width: 140px;
}
.kanban-col--collapsed .kanban-col__body { display: none; }
.kanban-col--collapsed.is-drag-open {
  width: 280px;
  min-width: 280px;
  opacity: 1;
}
.kanban-col--collapsed.is-drag-open .kanban-col__body { display: flex; }

/* ---------------------------------------------------------------------------
   Kanban card
--------------------------------------------------------------------------- */
.kanban-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  cursor: grab;
  transition: border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
html[data-theme="light"] .kanban-card {
  background: var(--bg-secondary);
}
/* Hover lift per brief — -2px translateY + border colour shift. The
   :not(...--chosen) guard prevents the hover transform from fighting
   SortableJS's drag transform. */
.kanban-card:hover:not(.kanban-card--chosen):not(.kanban-card--ghost) {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.kanban-card:active { cursor: grabbing; }

.kanban-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.kanban-card__name {
  font-family: var(--font-sans);
  font-weight: var(--fw-strong);
  font-size: var(--fs-h3);
  line-height: 20px;
  color: var(--text-primary);
  /* keep within column even with long names */
  word-break: break-word;
}
.kanban-card__town {
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.kanban-card__pain {
  display: flex;
  gap: 3px;
  margin-top: var(--space-1);
}
.kanban-card__pain-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
}
.kanban-card__pain-dot.is-on { background: var(--accent); border-color: var(--accent); }

.kanban-card__meta {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-1);
}

/* Deal summary on cards from Proposal Sent onwards */
.kanban-card__deal {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--border);
  font-variant-numeric: tabular-nums;
}
.kanban-card__deal-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 12px;
  line-height: 16px;
}
.kanban-card__deal-tier {
  color: var(--text-secondary);
}
.kanban-card__deal-num {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}

/* SortableJS state classes */
.kanban-card--ghost {
  opacity: 0.45;
  background: var(--bg-secondary);
  border-style: dashed;
}
.kanban-card--chosen { cursor: grabbing; }
.kanban-card--drag {
  transform: scale(1.02) rotate(0.5deg);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  border-color: var(--border-strong);
}

/* "Just moved" glow per brief — 450ms total, fade-in 200ms, fade-out 250ms */
@keyframes kanban-glow {
  0%   { box-shadow: 0 0 0 0    var(--accent-glow); border-color: var(--accent); }
  44%  { box-shadow: 0 0 0 12px var(--accent-glow); border-color: var(--accent); }
  100% { box-shadow: 0 0 0 0    transparent;        border-color: var(--border-strong); }
}
.kanban-card--just-moved {
  animation: kanban-glow 450ms var(--ease-out);
}

/* ---------------------------------------------------------------------------
   Mobile: stack columns vertically (per brief)
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .kanban__cols {
    flex-direction: column;
    min-width: 0;
    gap: var(--space-3);
  }
  .kanban-col,
  .kanban-col--collapsed {
    width: 100%;
    min-width: 0;
  }
  .kanban-col__body {
    max-height: none;
  }
  .kanban-col--terminal { opacity: 1; }
  /* Disable the drag pointer on mobile — Sortable touch behaviour is finicky;
     tap-to-open the detail panel and use the stage dropdown instead. */
  .kanban-card { cursor: pointer; }
}

/* ---------------------------------------------------------------------------
   Income
--------------------------------------------------------------------------- */

/* 3- and 4-col grids used by Income's projection / comparison rows */
.stat-grid--3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap);
}
.stat-grid--4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--card-gap);
}
@media (max-width: 1024px) {
  .stat-grid--3col { grid-template-columns: repeat(3, 1fr); }
  .stat-grid--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .stat-grid--3col { grid-template-columns: 1fr; }
  .stat-grid--4col { grid-template-columns: 1fr; }
}

/* Income chart card needs more height than the dashboard's mini chart */
.chart-wrap--tall { height: 360px; }

/* What-if scenario panel ----------------------------------------- */
.scenario-panel { display: flex; flex-direction: column; gap: var(--space-5); }
.scenario-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.scenario-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
}
.scenario-row__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scenario-row__title {
  font-weight: var(--fw-strong);
  font-size: var(--fs-body);
  color: var(--text-primary);
}
.scenario-row__sub { color: var(--text-tertiary); }

@media (max-width: 720px) {
  .scenario-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* Segmented control (used inside scenario rows) ----------------- */
.segmented {
  display: inline-flex;
  align-items: stretch;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  gap: 2px;
}
.segmented__btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 14px;
  min-width: 80px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 140ms var(--ease-out), color 140ms var(--ease-out);
  font-feature-settings: "tnum" 1;
}
.segmented__btn:hover { color: var(--text-primary); background: var(--bg-secondary); }
.segmented__btn.is-active {
  background: var(--accent);
  color: #FFFFFF;
}
.segmented__btn.is-active:hover { background: var(--accent-hover); }
.segmented__main {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.1;
}
.segmented__sub {
  font-size: 11px;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
.segmented__btn.is-active .segmented__sub { opacity: 0.9; }

/* Allow the segmented control to wrap on narrow screens */
@media (max-width: 720px) {
  .segmented {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    width: 100%;
  }
  .segmented__btn { min-width: 0; }
}

/* Year-1 income totals card ------------------------------------- */
.income-totals {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.income-totals__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.income-totals__row:last-child { border-bottom: 0; }
.income-totals__row--total {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-strong);
}
.income-totals__label {
  color: var(--text-secondary);
  font-size: var(--fs-body);
}
.income-totals__row--total .income-totals__label {
  color: var(--text-primary);
  font-weight: var(--fw-strong);
}
.income-totals__num {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
  font-size: 20px;
  color: var(--text-primary);
}
.income-totals__num--big {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 36px;
  font-weight: var(--fw-display-strong);
  letter-spacing: -0.02em;
}

/* Active scenario card highlight in the comparison row */
.stat--scenario-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.stat--scenario-active .stat__label {
  color: var(--accent);
  font-weight: var(--fw-strong);
}

/* Row with a labelled head + a stat-grid below it (used for the
   "Actual MRR baseline" and "Projected MRR (what-if)" rows). */
.row-with-caption {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.row-with-caption__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.row-with-caption__title {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: var(--fw-strong);
}
.row-caption {
  color: var(--text-tertiary);
}

/* Slight visual differentiation for projected-MRR cards so the row reads as
   "the optimistic / what-if version" of the baseline row above it. */
.stat--accent {
  border-left: 2px solid var(--accent);
}
.stat--accent .stat__num {
  color: var(--text-primary);
}

/* ---------------------------------------------------------------------------
   Tasks
--------------------------------------------------------------------------- */

/* Generic progress bar — reused by overall summary + per-phase rows */
.progress-bar {
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 999px;
  overflow: hidden;
  margin-top: var(--space-2);
}
.progress-bar--slim { height: 4px; }
.progress-bar__fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 320ms var(--ease-out);
}

/* Overall summary card body */
.tasks-summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.tasks-summary__num {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 40px;
  font-weight: var(--fw-display-strong);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.tasks-summary__pct {
  color: var(--text-secondary);
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
}

/* Phase block */
.phase {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-card);
}
.phase__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.phase__title {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: var(--fw-strong);
}
.phase__meta {
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.phase__tasks {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-2);
}

/* Task row */
.task-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
  transition: opacity 220ms var(--ease-out);
}
.task-row:last-child { border-bottom: 0; }
.task-row--done { opacity: 0.55; }
.task-row--done .task-row__title {
  text-decoration: line-through;
  color: var(--text-tertiary);
}

.task-row__check {
  display: flex;
  align-items: center;
  padding-top: 2px;
  cursor: pointer;
  user-select: none;
}

/* Phone: enlarge the tap-area around the 18px checkbox to the iOS 44px guide
   without changing the visible checkbox size. The label gets the extra padding
   so the user can reliably tap it. */
@media (max-width: 768px) {
  .task-row__check {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding-top: 0;
  }
  .task-row { gap: var(--space-2); }
}

.task-row__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.task-row__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  line-height: 20px;
}
.task-row__desc {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: var(--lh-small);
}
.task-row__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-1);
}
.task-row__category {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.task-row__hours {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.task-row__done-time {
  font-size: 11px;
  color: var(--success);
  font-variant-numeric: tabular-nums;
}

/* Custom checkbox */
.task-check {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color 140ms var(--ease-out), background-color 140ms var(--ease-out);
  flex-shrink: 0;
}
.task-check:hover { border-color: var(--accent); }
.task-check:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.task-check:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.task-check:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  transform: rotate(45deg);
}

/* Priority badge */
.priority-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: var(--fw-strong);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 16px;
}
.priority-badge--critical { background: rgba(239, 68, 68, 0.16); color: var(--danger); }
.priority-badge--high     { background: rgba(245, 158, 11, 0.18); color: var(--warning); }
.priority-badge--medium   { background: rgba(31, 75, 82, 0.20); color: var(--accent); }
html[data-theme="light"] .priority-badge--medium { background: rgba(31, 75, 82, 0.12); color: var(--accent); }
.priority-badge--low      { background: var(--bg-tertiary); color: var(--text-tertiary); }

/* ---------------------------------------------------------------------------
   Contacts
--------------------------------------------------------------------------- */

.contacts-view {
  /* The table is wide; let it bleed the page margin a bit */
  max-width: none;
}
.view__header-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* Stat strip — 4 small pills above the filter bar */
.contacts-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--card-gap);
}
.contacts-stat-pill {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contacts-stat-pill__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  font-weight: var(--fw-strong);
}
.contacts-stat-pill__value {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Toolbar — filter bar only (search lives in the static header now) */
.contacts-toolbar {
  display: block;
  position: sticky;
  top: 56px;
  background: var(--bg-primary);
  z-index: var(--z-sticky);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

/* Persistent search input — lives in the page header, never re-rendered */
.contacts-search-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px var(--space-3);
  min-width: 320px;
  color: var(--text-tertiary);
  transition: border-color 140ms var(--ease-out);
}
.contacts-search-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.contacts-search-input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 6px 0;
  font-size: var(--fs-body);
  color: var(--text-primary);
}
.contacts-search-input:focus {
  outline: 0;
  box-shadow: none;
}

/* Filter bar */
.filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.filter-bar__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.filter-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 0 var(--space-2);
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: border-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
.filter-pill:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.filter-pill__label { font-weight: var(--fw-medium); color: var(--text-primary); }
.filter-pill__count {
  background: var(--accent);
  color: #FFFFFF;
  border-radius: 999px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: var(--fw-strong);
  min-width: 16px;
  text-align: center;
}
.filter-pill__hint { color: var(--text-tertiary); font-size: 11px; }

.filter-input {
  height: 32px;
  padding: 4px var(--space-2);
  font-size: var(--fs-small);
  width: 140px;
}
.filter-date-field { width: 140px; }
.filter-date-sep { font-size: var(--fs-small); color: var(--text-tertiary); }

.filter-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.filter-range__label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-weight: var(--fw-strong);
}
.filter-range__values {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  min-width: 32px;
  text-align: right;
}
.range--mini {
  width: 64px;
  height: 16px;
}

.filter-tristate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.filter-tristate__label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-weight: var(--fw-strong);
}
.segmented--mini { padding: 2px; }
.segmented--mini .segmented__btn {
  padding: 4px 8px;
  min-width: 0;
  font-size: 11px;
}

/* Popover (used for filter dropdowns, columns, row actions) */
.popover {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
  z-index: var(--z-modal);
  padding: var(--space-2);
}
.popover__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
}
.popover__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-body);
  color: var(--text-primary);
}
.popover__row:hover { background: var(--bg-tertiary); }
.popover__row input[type="checkbox"] { margin: 0; }

.popover--actions { padding: 4px; }
.popover__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  color: var(--text-primary);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: var(--fs-body);
}
.popover__item:hover { background: var(--bg-tertiary); }
.popover__item .icon { color: var(--text-tertiary); }

/* Table */
.contacts-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}
.contacts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.contacts-th {
  text-align: left;
  padding: var(--space-3) var(--space-3);
  font-weight: var(--fw-strong);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  position: sticky;
  top: 0;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.contacts-th--checkbox {
  width: 36px;
  cursor: default;
}
.contacts-th.is-sorted { color: var(--text-primary); }
.contacts-th .icon { vertical-align: middle; margin-left: 4px; }

.contacts-tr {
  cursor: pointer;
  transition: background-color 120ms var(--ease-out);
}
.contacts-tr:hover { background: var(--bg-tertiary); }
.contacts-td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text-primary);
}
.contacts-tr:last-child .contacts-td { border-bottom: 0; }
.contacts-td--checkbox { width: 36px; }
.contacts-td--actions { width: 44px; text-align: right; }
.contacts-td--business_name { font-weight: var(--fw-medium); }
.contacts-cell-name { white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.contacts-link { color: var(--text-secondary); }
.contacts-link:hover { color: var(--accent); }
.tabular { font-variant-numeric: tabular-nums; }
.t-tertiary { color: var(--text-tertiary); }

.contacts-actions-btn { padding: 0; width: 28px; height: 28px; min-height: 28px; }

/* Mobile cards (hidden on desktop) */
.contacts-cards { display: none; }
.contacts-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  cursor: pointer;
  transition: border-color 140ms var(--ease-out);
}
.contacts-card:hover { border-color: var(--border-strong); }
.contacts-card + .contacts-card { margin-top: var(--space-2); }
.contacts-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.contacts-card__name { font-weight: var(--fw-strong); color: var(--text-primary); font-size: var(--fs-h3); line-height: 20px; }
.contacts-card__town { font-size: var(--fs-small); color: var(--text-secondary); }
.contacts-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.contacts-card__days {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Bulk action bar — sticky at the bottom of the viewport when 1+ selected */
.bulk-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: -100%;
  display: flex;
  justify-content: center;
  padding: var(--space-3);
  z-index: var(--z-toast);
  pointer-events: none;
  transition: bottom 220ms var(--ease-out);
}
.bulk-bar.is-visible {
  bottom: env(safe-area-inset-bottom, 0px);
  pointer-events: auto;
}
.bulk-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  box-shadow: var(--shadow-panel);
  max-width: calc(100vw - 32px);
  flex-wrap: wrap;
}
.bulk-bar__count {
  font-weight: var(--fw-strong);
  color: var(--text-primary);
  padding-right: var(--space-3);
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.bulk-bar__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Mobile responsive — table → cards, filter bar collapses */
@media (max-width: 768px) {
  .contacts-table-wrap { display: none; }
  .contacts-cards { display: block; }
  .contacts-toolbar {
    position: relative; /* don't compete with topbar on mobile */
    top: 0;
  }
  /* Header on mobile: stack search above, then the action buttons */
  .contacts-header {
    flex-direction: column;
    align-items: stretch;
  }
  .view__header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .contacts-search-wrap {
    min-width: 0;
    width: 100%;
    order: -1; /* search appears first */
    flex: 1 1 100%;
  }
  /* Buttons (Columns / Export) compact on phones */
  .view__header-actions .btn:not(.contacts-search-wrap .btn) span { display: none; }
  .view__header-actions .btn:not(.contacts-search-wrap) {
    width: 36px;
    padding: 0;
    justify-content: center;
  }
  /* Filter bar reflows into rows of full-width controls. The pills (Stage,
     Tier, Type, Website tier, Hosting tier) stay in a single wrap-friendly
     row at the top; the pain range, Yes/No tristates, and date pickers each
     get their own row so labels and inputs don't collide. */
  .filter-bar__row { gap: var(--space-2); }
  .filter-pill, .filter-input, .filter-range, .filter-tristate {
    font-size: 11px;
  }
  .filter-divider { display: none; }

  .filter-pill { padding: 8px var(--space-3); }
  .filter-range { flex: 1 1 100%; justify-content: space-between; padding: 8px var(--space-3); }
  .filter-range .range--mini { flex: 1 1 0; min-width: 0; width: auto; }

  /* Tristates fill the full row width and split into 2 columns: label + 3-button group */
  .filter-tristate {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: minmax(72px, auto) 1fr;
    align-items: center;
    gap: var(--space-3);
  }
  .filter-tristate .segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }
  .filter-tristate .segmented__btn { min-width: 0; padding: 6px 4px; }

  /* Date row: select on its own line, then from + to side-by-side */
  .filter-date-field { width: 100%; flex: 1 1 100%; }
  .filter-date-sep { font-size: 11px; }
  .filter-input[type="date"] { flex: 1 1 0; min-width: 0; width: auto; }

  .filter-bar .btn--ghost { width: 100%; justify-content: center; margin-top: var(--space-1); }

  .bulk-bar.is-visible { bottom: calc(var(--bottom-tab-height) + env(safe-area-inset-bottom, 0px) + 8px); }
}

/* ---------------------------------------------------------------------------
   Settings
--------------------------------------------------------------------------- */

.settings-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Generic row: label/desc on the left, control on the right */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}
.settings-row:first-of-type { border-top: 0; padding-top: 0; }
.settings-row__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-row__title { font-weight: var(--fw-strong); color: var(--text-primary); }
.settings-row__value { color: var(--text-secondary); font-size: var(--fs-small); }

/* Pricing tiers — two side-by-side subsections */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 768px) { .pricing-grid { grid-template-columns: 1fr; } }

.pricing-subsection {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pricing-subsection__head {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: var(--fw-strong);
}
.pricing-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.pricing-row__label { color: var(--text-primary); }
.pricing-row__input {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.pricing-row__currency {
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.pricing-row__suffix {
  color: var(--text-tertiary);
  font-size: var(--fs-small);
}
.price-input {
  width: 100px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* List of editable rows (palettes, headlines) */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.settings-list__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  align-items: center;
}
html[data-theme="light"] .settings-list__row {
  background: var(--bg-primary);
}

/* Palette row: name input, colors input, swatches preview, delete */
.palette-row__inputs {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-2);
  align-items: center;
}
.palette-row__inputs > .swatch-row { grid-column: span 2; }
.swatch-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.swatch {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
@media (max-width: 720px) {
  .palette-row__inputs { grid-template-columns: 1fr; }
  .palette-row__inputs > .swatch-row { grid-column: span 1; }
}

/* Headline row: name input, template input, action icons */
.headline-row__inputs {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-2);
  align-items: center;
}
.headline-row__actions {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}
@media (max-width: 720px) {
  .headline-row__inputs { grid-template-columns: 1fr; }
}