/* U5: dashboard mission control — greeting, KPI row, projects table,
   weekly hours chart, triage feed (export screen 1). */

.dash-header { margin-bottom: var(--space-6); }

.dash-greeting {
  margin: 0 0 4px;
  font-size: var(--text-display-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
}

.dash-date {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-lg);
}

/* KPI row — 1.5fr then four equal cards (export §2.2). */
.kpi-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@media (max-width: 1100px) { .kpi-row { grid-template-columns: 1.5fr 1fr 1fr; } }
@media (max-width: 760px) { .kpi-row { grid-template-columns: 1fr 1fr; } }

.kpi-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-xl);
}

.kpi-card--timer {
  background: linear-gradient(160deg, rgba(34, 211, 238, 0.12), rgba(34, 211, 238, 0.02));
  border-color: var(--accent-border);
}

.kpi-card--link { color: inherit; text-decoration: none; transition: border-color 0.12s; }
.kpi-card--link:hover { border-color: var(--border-strong); }

.kpi-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-dim);
}

.kpi-label--accent { color: var(--accent); }

.kpi-value {
  font-size: var(--text-display-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  white-space: nowrap;
}

.kpi-value--dim { color: var(--text-ghost); }

.kpi-sub {
  font-size: var(--text-md);
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* One block per parallel lane, stacked (Task #90). */
.kpi-timers {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.kpi-timer { display: flex; flex-direction: column; }
.kpi-timer + .kpi-timer {
  border-top: 1px solid var(--accent-border);
  padding-top: var(--space-3);
}
.kpi-timers .kpi-value { font-size: var(--text-2xl); }

.kpi-timer-count {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-border);
  color: var(--accent);
  font-size: var(--text-xs);
}

.kpi-timer-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.kpi-timer-task {
  color: var(--text-secondary);
  font-size: var(--text-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-timer-task:hover { color: var(--accent); }

.kpi-timer-money { color: var(--accent); font-size: var(--text-lg); font-weight: 600; }

.kpi-timer-stop { margin-top: var(--space-2); align-self: flex-start; height: 32px; }

/* Dashboard body — projects table + right aside. */
.dash-body {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 1000px) { .dash-body { grid-template-columns: 1fr; } }

.dash-table-head,
.dash-row {
  display: grid;
  grid-template-columns: 1fr 150px 78px 108px 78px;
  gap: var(--space-3);
  align-items: center;
  padding: 12px 18px;
}

.dash-table-head {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-ghost);
  font-weight: 600;
  border-bottom: 1px solid var(--border-mid);
}

.dash-table-num { text-align: right; }

.dash-row {
  border-bottom: 1px solid var(--border-faint);
  color: inherit;
  text-decoration: none;
  transition: background 0.12s;
}
.dash-row:last-child { border-bottom: none; }
.dash-row:hover { background: var(--surface-hover); }

.dash-project-name { display: flex; align-items: center; gap: 9px; min-width: 0; }

.dash-project-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: var(--text-lg);
  font-weight: 500;
}

.dash-project-client { font-size: var(--text-md); font-weight: 400; color: var(--text-dim); }

.dash-status-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.dash-status-dot--active { background: var(--accent); }
.dash-status-dot--review { background: var(--warning); }
.dash-status-dot--done { background: var(--success); }

.dash-progress { display: flex; align-items: center; gap: 9px; }

.dash-progress-bar {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--border-mid);
  overflow: hidden;
}

.dash-progress-fill { display: block; height: 100%; border-radius: 3px; background: var(--accent); }

.dash-progress-pct { width: 34px; text-align: right; font-size: var(--text-xs); color: var(--text-secondary); }

.dash-num { text-align: right; font-size: var(--text-md); color: var(--text-secondary); }

.dash-deadline { color: var(--text-dim); }
.dash-deadline--overdue { color: var(--danger); font-weight: 600; }

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

/* Weekly hours chart — pure CSS bars. */
.dash-chart-total { margin-left: auto; font-size: var(--text-sm); color: var(--text-secondary); }

.dash-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
}

.dash-chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  height: 100%;
}

.dash-chart-bar-track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  overflow: hidden;
}

.dash-chart-bar {
  width: 100%;
  min-height: 2px;
  border-radius: var(--radius-sm);
  background: var(--border-strong-2);
}

.dash-chart-bar--today { background: var(--accent); }

.dash-chart-day {
  font-size: var(--text-2xs);
  color: var(--text-faint);
  text-transform: capitalize;
}

/* Triage feed. */
.dash-feed-link { margin-left: auto; font-size: var(--text-sm); color: var(--accent); }

.dash-feed-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border-faint);
  color: inherit;
  text-decoration: none;
}
.dash-feed-row:last-child { border-bottom: none; }
.dash-feed-row:hover { background: var(--surface-hover); }

.dash-feed-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.dash-feed-title {
  font-size: var(--text-lg);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-feed-meta { font-size: var(--text-sm); color: var(--text-dim); }

/* Audit 2026-07-17 (#3): "Awaiting you" rows hold two links (task + PR), so the
   row itself is a div — the title link restyles itself back to feed-row look. */
a.dash-feed-title { color: inherit; text-decoration: none; }
a.dash-feed-title:hover { color: var(--accent); }
.dash-feed-pr { font-size: var(--text-xs); color: var(--accent); white-space: nowrap; }

.dash-feed-empty { margin: 0; padding: 16px 18px; font-size: var(--text-md); color: var(--text-muted); }

/* Fleet PR board: two-line "Awaiting you" rows — task/PR links on top, a
   lazy-loaded chip strip (CI / lifecycle / conflicts / review / comments)
   plus the inline Claude-review action underneath. */
.dash-pr-row { display: block; }
.dash-pr-main { display: flex; align-items: center; gap: 10px; }
.dash-pr-status { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.dash-pr-status turbo-frame { display: contents; }

.pr-chip {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.pr-chip--ok { background: rgba(52, 211, 153, 0.15); color: var(--success-chip); }
.pr-chip--bad { background: rgba(242, 109, 109, 0.15); color: var(--danger-chip); }
.pr-chip--warn { background: rgba(244, 183, 64, 0.15); color: var(--warning-chip); }
.pr-chip--dim { background: var(--surface-chip); color: var(--neutral-chip); }

.pr-review-form { margin-left: auto; }
.pr-review-btn {
  font-size: var(--text-xs);
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-faint);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}
.pr-review-btn:hover { border-color: var(--accent); }

/* U7 (R20–R25): the Needs You panel. Reuses the feed-row / pr-chip / pill
   families — a badge strip per row, chain blocks grouped with a "approve in
   sequence" head, and a single view-all link. No new visual system. */
.needs-you .card-header { display: flex; align-items: center; gap: 8px; }

.needs-you-row .dash-feed-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; }

.needs-you-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-left: auto; }
.needs-you-badge { white-space: nowrap; }

/* Dependency-chained parked PRs: one indented block Ali approves top-down. */
.needs-you-chain { border-bottom: 1px solid var(--border-faint); }
.needs-you-chain:last-child { border-bottom: none; }
.needs-you-chain .dash-feed-row { border-bottom: none; padding-left: 26px; }
.needs-you-chain .dash-feed-row:not(:last-child) { border-bottom: 1px dashed var(--border-faint); }
.needs-you-chain-head {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  padding: 8px 18px 2px;
}

.needs-you-view-all {
  display: block;
  padding: 11px 18px;
  font-size: var(--text-sm);
  color: var(--accent);
  text-decoration: none;
}
.needs-you-view-all:hover { background: var(--surface-hover); }

.needs-you-page { display: flex; flex-direction: column; gap: 16px; }