/* ============================================================
   dashboard.css — the overview page (Step 4).
   Layout + dashboard-specific pieces; cards come from components.css.
   ============================================================ */

.dash { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-4) var(--sp-7); }

.dash-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap;
}
.dash-header h1 { font-size: var(--fs-xl); }
.dash-header .clock { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-muted); }

/* ── KPI strip ─────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
@media (max-width: 760px) { .kpis { grid-template-columns: repeat(2, 1fr); } }

.stat-card {
  background: var(--surface); border: var(--bw) solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
}
.stat-card .label {
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.stat-card .label svg { width: 14px; height: 14px; color: var(--accent); }
.stat-card .value { font-family: var(--font-mono); font-size: 26px; line-height: 1; color: var(--text); }
.stat-card .value small { font-size: 14px; color: var(--text-muted); }
.stat-card .hint { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-top: 8px; }

/* ── Two-column body ───────────────────────────────────────── */
.dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-4); align-items: start; }
.dash-grid .col { display: flex; flex-direction: column; gap: var(--sp-4); }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }

/* ── Node board (fleet) ────────────────────────────────────── */
.node { display: flex; align-items: center; gap: var(--sp-3); padding: 11px 0; border-top: var(--bw) solid var(--border); }
.node:first-child { border-top: none; }
.node .host { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text); min-width: 116px; }
.node .tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tag-chip {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
  background: var(--surface-inset); border: var(--bw) solid var(--border);
  border-radius: 4px; padding: 1px 6px;
}
.node .metrics { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); }
.node .metric { display: flex; align-items: center; gap: 7px; }
.node .metric .mlabel { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
.mbar { width: 52px; height: 5px; border-radius: 3px; background: var(--surface-inset); overflow: hidden; }
.mbar i { display: block; height: 100%; width: 0; background: var(--accent); }
.node .metric.empty .mlabel { color: var(--text-faint); }
@media (max-width: 560px) { .node .metrics { display: none; } }

.card-foot { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: var(--bw) solid var(--border);
  font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }

/* ── Module launcher ───────────────────────────────────────── */
.mod-tiles { display: flex; flex-direction: column; gap: var(--sp-2); }
.mod-tile {
  display: flex; align-items: center; gap: var(--sp-3); padding: 12px 14px;
  background: var(--surface-inset); border: var(--bw) solid var(--border); border-radius: var(--r-md);
  color: var(--text); text-decoration: none; transition: border-color var(--t-fast), transform var(--t-fast);
}
.mod-tile:hover { border-color: var(--accent); transform: translateX(2px); }
.mod-tile .ico { color: var(--accent); display: flex; }
.mod-tile .ico svg { width: 18px; height: 18px; }
.mod-tile .name { font-family: var(--font-display); font-weight: var(--fw-medium); }
.mod-tile .arrow { margin-left: auto; color: var(--text-faint); }
.mod-tile.soon { opacity: .45; pointer-events: none; }
.mod-tile.soon .arrow { font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  border: var(--bw) solid var(--border); border-radius: 3px; padding: 2px 5px; }

/* ── Activity feed ─────────────────────────────────────────── */
.activity { list-style: none; }
.activity li { display: flex; gap: var(--sp-3); padding: 8px 0; border-top: var(--bw) solid var(--border); font-size: var(--fs-sm); }
.activity li:first-child { border-top: none; }
.activity .when { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); min-width: 64px; }
.activity .what { color: var(--text-muted); }