/* Dashboard.

   Tokens from app.css only, per docs/design-system.md. One section card per
   block (rows divided by rules, never a box per row), numbers that are read
   against each other in mono, the accent spent only where something is
   happening or can be done, and no total anywhere. Light only.

   Any rule here that sets `display` on an element the script hides is covered
   by the global `[hidden] { display: none !important }` at the end of app.css. */

.dash-card { --pad: 24px; margin-bottom: 22px; }
.dash-cta { flex-shrink: 0; }

.dash-note {
  margin: 0 0 20px; padding: 12px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-field);
  font-size: 13px; line-height: 1.5; color: var(--muted);
}

/* ---- the five tiles ---- */

.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-width: 0; padding: 16px 18px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-field);
  transition: border-color .15s, box-shadow .15s;
}
.kpi:hover { border-color: #a9adbf; }
.kpi[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.kpi-label { font-size: 12px; font-weight: 600; color: var(--text); }
.kpi-value {
  font: 600 30px/1.1 var(--mono); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.kpi-sub { font-size: 11.5px; line-height: 1.4; color: var(--faint); min-height: 1.4em; overflow-wrap: anywhere; }

.dash-empty-line { margin: 0; padding: 18px 0 6px; font-size: 13px; color: var(--muted); }

/* ---- toolbar and filters ---- */

.dash-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 18px 0 6px; }
.dash-search { flex: 1 1 260px; min-width: 0; }
.dash-search input, .dash-sort select {
  width: 100%; height: 40px; padding: 0 14px;
  font: 400 13px var(--sans); color: var(--text);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-field);
}
.dash-search input::placeholder { color: var(--faint); }
.dash-sort { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.dash-sort select { width: auto; padding-right: 8px; }
.dash-samples { font-size: 12.5px; }

.dash-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
  padding: 12px 0 16px; border-bottom: 1px solid var(--line-soft);
}
.chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip-label { margin-right: 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.chip {
  height: 30px; padding: 0 12px;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 12.5px; font-weight: 500;
  transition: border-color .15s, color .15s;
}
.chip:hover { color: var(--text); border-color: #a9adbf; }
/* A filter is not an action, so "on" is ink, not accent. */
.chip[aria-pressed="true"] { color: var(--text); background: var(--card); border-color: var(--text); font-weight: 600; }
.chip[aria-pressed="true"]::before { content: '\2713'; margin-right: 6px; font-size: 11px; }

#dash-status:not(:empty) { margin-top: 12px; }

/* ---- the table ----
   It bleeds to the card edge and scrolls sideways inside itself, so the page
   never does. Columns are removed, not squeezed, as the width falls. */

.dash-table-wrap { margin: 0 calc(var(--pad) * -1); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dash-table-wrap:focus-visible { outline-offset: -2px; }
.deals { width: 100%; border-collapse: collapse; font-size: 13px; }
.deals th, .deals td {
  padding: 13px 10px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
.deals th:first-child, .deals td:first-child { padding-left: var(--pad); }
.deals th:last-child, .deals td:last-child { padding-right: var(--pad); }
.deals thead th {
  padding-top: 10px; padding-bottom: 10px; vertical-align: bottom;
  font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--faint);
  background: var(--card); border-bottom: 1px solid var(--line);
}
.deals tbody th { font-weight: 400; }
.deals tbody tr:last-child > * { border-bottom: 0; }
.deals tbody tr:hover > * { background: var(--panel); }

.deals td { vertical-align: middle; }
.deals th.col-f, .deals td.col-f { width: 84px; min-width: 64px; padding-left: 6px; padding-right: 6px; text-align: center; }
.deals thead th.col-f { text-align: center; }
.col-status { width: 96px; }
.col-report { width: 168px; text-align: right; }
.deals th.col-report, .deals td.col-report { text-align: right; }

/* The first column is the name and one short line, nothing more. */
.co { display: flex; flex-direction: column; gap: 2px; min-width: 200px; max-width: 360px; }
.co-name { font-size: 14px; font-weight: 600; letter-spacing: -.15px; color: var(--text); overflow-wrap: anywhere; }
.co-line {
  font-size: 12.5px; line-height: 1.4; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.deals tbody th.col-company { vertical-align: middle; }

/* Status is colored text, not a pill. Passed is green, Failed is red, and the
   two in-flight states stay quiet so the finished decks carry the eye. Each
   pair meets AA on white. */
.st { display: inline-block; font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.st-passed { color: #1e6b3a; }
.st-failed { color: var(--bad); }
.st-analyzing { color: var(--accent-deep); }
.st-waiting { color: var(--muted); }

/* A factor is its score on its own scale, and nothing else. Red marks one
   under the pass mark. Scores are never added together. */
.fcell { font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.fcell-of { font-size: 11px; font-weight: 400; color: var(--faint); }
.fcell.is-under { color: var(--bad); }

/* ---- row actions ---- */

.deals .btn { height: 32px; padding: 0 12px; font-size: 12.5px; }
.deals .btn { white-space: nowrap; }
.btn[aria-disabled="true"] { color: var(--muted); background: var(--plate); border-color: var(--line); cursor: default; box-shadow: none; }
.btn[aria-disabled="true"]:hover { background: var(--plate); border-color: var(--line); }
/* Busy is said in words. No spinner, no timer: the design system forbids both. */
.btn[aria-busy="true"][aria-disabled="true"] { color: var(--accent-deep); background: var(--accent-soft); border-color: #dcd6f7; }

.act-error { margin: 6px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--bad); }

/* ---- empty states, more, legend ---- */

.dash-empty {
  margin: 18px 0 4px; padding: 44px 24px; text-align: center;
  font-size: 13px; line-height: 1.55; color: var(--muted);
  border: 1px dashed #d8d2ec; border-radius: 16px;
}
.dash-table-wrap > .dash-empty { margin: 18px var(--pad) 4px; }
.dash-empty p { margin: 0 auto 6px; max-width: 46ch; }
.dash-empty .dash-empty-title { font-size: 15px; font-weight: 600; color: var(--text); }
.dash-empty .btn { margin-top: 14px; }
a.btn.btn-sm { height: 38px; }
.dash-more { display: flex; align-items: center; gap: 14px; padding-top: 14px; }
.dash-more .status { min-height: 0; }
.dash-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  margin: 16px 0 4px; font-size: 11.5px; color: var(--faint);
}
.dash-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dash-legend-under { color: var(--bad); }

/* ---- width ---- */

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .dash-card { --pad: 20px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi { padding: 14px; }
  .kpi-value { font-size: 26px; }
  .dash-sort { width: 100%; }
  .dash-sort select { flex: 1; }
  .chip-group { gap: 6px; }
  .chip-label { width: 100%; margin: 2px 0 0; }
  /* The company stays in view while the other columns scroll past it. */
  .deals .col-company { position: sticky; left: 0; z-index: 1; background: var(--card); box-shadow: 1px 0 0 var(--line-soft); }
  .deals thead .col-company { z-index: 2; }
  .co { min-width: 168px; max-width: 200px; }
  .deals th.col-report, .deals td.col-report { text-align: left; }
}