/* taste-secondary.css — shared pieces of the secondary screens (Settings, email,
   finance, fleet, catalogue and admin lists). Framed-sheet style from
   .taste-skill/app-sheet.md: tokens only (tokens.css), no shadow at rest, no
   gradient, no tracked capitals, colour only on data, status and the one
   primary action. The shell and the global components live in dashboard.css
   and shared.css; nothing here restyles them globally, every class is ts-*.
   Grid arithmetic: the sheet's content box is the canvas; every block below
   spans it (1fr) or splits it on one 24px gutter. */

/* ── Figures ──────────────────────────────────────────────────────────────── */
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-unit  { color: var(--text-secondary); font-size: 12px; margin-left: 2px; }
.ts-dash  { color: var(--text-secondary); }
.ts-id    { font-family: var(--font-mono); font-size: 13px; }
.ts-muted { color: var(--text-secondary); }

/* ── Status pills: pale tint, dark text of the same hue ──────────────────── */
.ts-pill {
  display: inline-flex; align-items: center; flex: none; white-space: nowrap;
  height: 22px; padding: 0 8px; border-radius: 4px;
  font-size: 12px; font-weight: 500; line-height: 1;
  background: var(--off-bg); color: var(--off);
}
.ts-pill--ok   { background: var(--ok-bg);   color: color-mix(in srgb, var(--ok) 82%, #000); }
.ts-pill--warn { background: var(--warn-bg); color: color-mix(in srgb, var(--warn) 82%, #000); }
.ts-pill--bad  { background: var(--bad-bg);  color: color-mix(in srgb, var(--bad) 88%, #000); }
[data-theme="dark"] .ts-pill--ok   { color: var(--ok); }
[data-theme="dark"] .ts-pill--warn { color: var(--warn); }
[data-theme="dark"] .ts-pill--bad  { color: var(--bad); }
.ts-pill--off  { background: var(--off-bg);  color: var(--off); }
.ts-pill--info { background: var(--off-bg);  color: var(--text); }

/* ── KPI strip: one container split by 1px dividers, label over value ─────── */
.ts-kpis {
  display: grid; grid-template-columns: repeat(var(--ts-kpi-cols, 4), minmax(0, 1fr));
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--sheet); margin: 0 0 24px;
}
.ts-kpis[hidden] { display: none; }
.ts-kpi { padding: 14px 20px 16px; min-width: 0; }
.ts-kpi + .ts-kpi { border-left: 1px solid var(--border); }
.ts-kpi-label { display: block; font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.ts-kpi-value {
  display: block; margin-top: 4px; font-size: var(--fs-kpi); font-weight: 400; line-height: 1.2;
  color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ts-kpi-note { display: block; margin-top: 4px; font-size: 12px; color: var(--text-secondary); }
.ts-kpi--lead .ts-kpi-value { font-weight: 500; }
.ts-kpi-value.is-bad { color: var(--bad); }

/* ── List toolbar: search left, count right ──────────────────────────────── */
.ts-count { margin-left: auto; font-size: 14px; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Framed empty state ──────────────────────────────────────────────────── */
.ts-empty {
  border: 1px dashed var(--control-border); border-radius: 8px;
  padding: 14px 16px; font-size: 14px; color: var(--text-secondary);
  background: var(--sheet);
}
.ts-empty strong { color: var(--text); font-weight: 500; }
td.ts-empty-cell { padding: 16px 0 !important; }
td.ts-empty-cell > .ts-empty { text-align: left; }

/* ── Section heading inside a screen ─────────────────────────────────────── */
.ts-section-title { font-size: var(--fs-section); font-weight: 600; color: var(--text); margin: 0; }
.ts-section-sub   { font-size: 14px; color: var(--text-secondary); margin: 4px 0 0; }
.ts-section-head  { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 32px 0 12px; }

/* ── Settings: label column beside a panel ───────────────────────────────── */
.ts-settings { display: block; }
.ts-set-row {
  display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 24px 48px;
  padding: 28px 0; border-top: 1px solid var(--rule);
}
.ts-set-row:first-child { border-top: 0; padding-top: 8px; }
.ts-set-label h2, .ts-set-label h3 { font-size: var(--fs-section); font-weight: 500; color: var(--text); margin: 6px 0 0; }
.ts-set-label p  { font-size: 14px; line-height: 20px; color: var(--text-secondary); margin: 6px 0 0; }
.ts-set-panel {
  background: var(--raised); border-radius: var(--sheet-radius); padding: 20px;
  min-width: 0;
}
.ts-set-panel--bare { background: none; padding: 0; }
.ts-set-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.ts-set-row--danger .ts-set-label h2 { color: var(--bad); }

/* ── Settings hub: rows of destinations ──────────────────────────────────── */
.ts-dest-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.ts-dest {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: start; gap: 2px 12px;
  padding: 10px 12px; border-radius: 8px; color: var(--text); text-decoration: none;
  border: 1px solid transparent; transition: border-color .12s, background .12s;
}
.ts-dest:hover { background: var(--sheet); border-color: var(--border); }
.ts-dest:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.ts-dest svg { width: 16px; height: 16px; margin-top: 2px; color: var(--text-secondary); stroke-width: 1.5; }
.ts-dest-name { font-size: 14px; font-weight: 500; line-height: 20px; }
.ts-dest-desc { grid-column: 2 / 4; font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.ts-dest-count { font-size: 13px; line-height: 20px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-dest-count.is-due { color: var(--bad); font-weight: 500; }

/* ── Two-line cells ──────────────────────────────────────────────────────── */
.ts-sub { display: block; font-size: 12px; line-height: 18px; color: var(--text-secondary); margin-top: 2px; }

/* ── Text actions in rows ────────────────────────────────────────────────── */
.ts-link { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--control-border); cursor: pointer; }
.ts-link:hover { text-decoration-color: currentColor; }

/* ── Visually hidden label ───────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Text buttons in a row's trailing column ─────────────────────────────── */
.ts-row-actions { display: flex; justify-content: flex-end; gap: 4px; white-space: nowrap; }
.ts-act {
  height: 28px; padding: 0 8px; border-radius: var(--radius-control);
  background: none; border: 1px solid transparent; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--text);
}
a.ts-act { display: inline-flex; align-items: center; text-decoration: none; }
.ts-act:hover { border-color: var(--control-border); background: var(--sheet); }
.ts-act:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.ts-act--danger { color: var(--text-secondary); }
.ts-act--danger:hover { color: var(--bad); }

/* ── Phone ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ts-set-row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 24px 0; }
  .ts-dest-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ts-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-kpi { padding: 12px 14px; }
  .ts-kpi + .ts-kpi { border-left: 0; }
  .ts-kpi:nth-child(even) { border-left: 1px solid var(--border); }
  .ts-kpi:nth-child(n+3) { border-top: 1px solid var(--border); }
  .ts-kpis > .ts-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ts-kpi-value { font-size: 22px; }
  .ts-set-panel { padding: 16px; }
  .ts-count { margin-left: 0; }
}