/* hub-kit.css — shared hub-tabs + kpi-strip components.
 *
 * Ported from the SecurityAlert layout system (2026-07-26). Token-pure:
 * inherits ServiceAlert's own hues from modern-base.css (--accent stays
 * blue). Page CSS adds content styles only, never its own tab/kpi chrome.
 *
 *   <div class="hub-tabs-clip">
 *     <nav class="hub-tabs" role="tablist">
 *       <a class="hub-tab on" href="…">Label <span class="hub-tab-pip">3</span></a>
 *       …
 *     </nav>
 *   </div>
 *
 *   <div class="kpi-strip">
 *     <div class="kpi-item"><div class="kpi-val">42</div><div class="kpi-lbl">Monitors</div></div>
 *     …
 *   </div>
 */

/* ── KPI strip: joined stat cells in one bordered card ─────────────── */
.kpi-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0; margin-bottom: 18px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
}
.kpi-item { padding: 18px 20px; border-right: 1px solid var(--line-2); }
.kpi-item:last-child { border-right: 0; }
.kpi-val {
  font: 600 20px/1.2 var(--sans);
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.kpi-lbl {
  font: 600 0.66rem/1.4 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-top: 6px;
}
.kpi-val.danger { color: var(--danger); }
.kpi-val.warn   { color: var(--warn); }
.kpi-val.ok     { color: var(--ok); }
@media (max-width: 720px) {
  .kpi-item { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .kpi-item:last-child { border-bottom: 0; }
}

/* ── Hub tabs: underline tab row with optional count pips ──────────── */
.hub-tabs-clip { position: relative; margin-bottom: 22px; }
.hub-tabs-clip::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 1px;
  width: 34px;
  background: linear-gradient(90deg, transparent, var(--bg));
  pointer-events: none;
}
@media (min-width: 1200px) { .hub-tabs-clip::after { display: none; } }
.hub-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.hub-tabs::-webkit-scrollbar { display: none; }
.hub-tab {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 15px;
  white-space: nowrap;
  color: var(--ink-3);
  font: 600 0.86rem/1 var(--sans);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.hub-tab:hover { color: var(--ink); }
.hub-tab.on, .hub-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.hub-tab-pip {
  display: inline-block;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-3);
  font: 600 10px/1.6 var(--mono);
  vertical-align: middle;
}
.hub-tab-pip:empty { display: none; }
.hub-tab.on .hub-tab-pip, .hub-tab.active .hub-tab-pip {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.hub-tab-pip.badge-danger {
  background: color-mix(in srgb, var(--danger) 8%, var(--bg-1));
  color: var(--danger);
}
/* Sticky variant: stays below the site navbar. */
.hub-tabs--sticky { position: sticky; top: 0; z-index: 5; background: var(--bg); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
/* Wrap variant for hubs with many tabs: multi-row instead of
   hidden-scrollbar overflow (sticky prevents the clip fade). */
.hub-tabs--wrap { flex-wrap: wrap; overflow-x: visible; }