/* ============================================================
   Northwind components — reusable, tokenised UI pieces built on
   theme.css. Every rule scoped under .app-ui so it cannot reach the
   63 documents. Presentation only. Grows per phase:
     Phase 1: .kpi-strip
     Phase 2: .data-table + .status-pill--*
     Phase 3: .rail / .filter-tab
   ============================================================ */

/* ---- KPI strip (page-top metric row) ---- */
.app-ui .kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--surface);
  border: 1px solid var(--border-1);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .app-ui .kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.app-ui .kpi { padding: 13px 16px; border-right: 1px solid var(--border-3); }
.app-ui .kpi:last-child { border-right: 0; }
.app-ui .kpi__label {
  font-size: var(--fs-th); font-weight: var(--fw-semi); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-light);
}
.app-ui .kpi__value {
  font-family: var(--font-mono); font-size: var(--fs-kpi); font-weight: var(--fw-semi);
  color: var(--text-strong); margin-top: 7px; letter-spacing: var(--ls-tight);
}
.app-ui .kpi__delta {
  display: flex; align-items: center; gap: 5px; margin-top: 6px;
  font-size: var(--fs-delta); font-weight: var(--fw-med);
}
.app-ui .kpi__delta--up   { color: var(--st-active-fg); }
.app-ui .kpi__delta--down { color: var(--st-expiring-fg); }
.app-ui .kpi__delta--flat { color: var(--text-muted); }
/* triangle glyphs for the delta (decorative) */
.app-ui .kpi__delta--up::before   { content: ""; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid currentColor; }
.app-ui .kpi__delta--down::before { content: ""; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 5px solid currentColor; }
.app-ui .kpi__delta--flat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---- Data table (reusable card table for new/migrated tables) ---- */
.app-ui .data-table { background: var(--surface); border: 1px solid var(--border-1); border-radius: var(--r-card); overflow: hidden; }
.app-ui .data-table table { width: 100%; border-collapse: collapse; }
.app-ui .data-table thead th { height: var(--h-th); text-align: left; padding: 0 14px; background: var(--surface-faint); border-bottom: 1px solid var(--border-2); font-size: var(--fs-th); font-weight: var(--fw-semi); letter-spacing: var(--ls-caps-table); text-transform: uppercase; color: var(--text-muted); }
.app-ui .data-table tbody td { padding: 0 14px; height: var(--row-h); border-bottom: 1px solid var(--border-4); font-size: var(--fs-body); color: var(--text-cell); }
.app-ui .data-table tbody tr:last-child td { border-bottom: 0; }
.app-ui .data-table tbody tr:hover td { background: var(--row-hover); }
.app-ui .data-table tbody tr.is-selected td { background: var(--accent-tint-07); box-shadow: inset 3px 0 0 var(--accent); }
.app-ui .data-table .cell-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; letter-spacing: var(--ls-tight); }

/* ---- Reusable status pills (BEM modifiers, self-contained) ---- */
.app-ui [class*="status-pill--"] { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: var(--fw-semi); line-height: 17px; border: 1px solid transparent; white-space: nowrap; }
.app-ui [class*="status-pill--"]::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.app-ui .status-pill--active   { color: var(--st-active-fg);   background: var(--st-active-bg);   border-color: var(--st-active-bd); }
.app-ui .status-pill--pending  { color: var(--st-pending-fg);  background: var(--st-pending-bg);  border-color: var(--st-pending-bd); }
.app-ui .status-pill--expiring { color: var(--st-expiring-fg); background: var(--st-expiring-bg); border-color: var(--st-expiring-bd); }
.app-ui .status-pill--renewal  { color: var(--st-renewal-fg);  background: var(--st-renewal-bg);  border-color: var(--st-renewal-bd); }
.app-ui .status-pill--executed { color: var(--st-executed-fg); background: var(--st-executed-bg); border-color: var(--st-executed-bd); }
.app-ui .status-pill--draft    { color: var(--st-draft-fg);    background: var(--st-draft-bg);    border-color: var(--st-draft-bd); }

/* ---- Right rail (reusable; place on a data screen with real summary data) ---- */
/* .main-rail hosts a content column + the 320px rail side by side; stacks ≤1100px */
.app-ui .main-rail { display: grid; grid-template-columns: minmax(0, 1fr) var(--w-rail); gap: 18px; align-items: start; }
.app-ui .main-rail > .rail { width: auto; }
@media (max-width: 1100px) { .app-ui .main-rail { grid-template-columns: 1fr; } }
.app-ui .rail { display: flex; flex-direction: column; gap: 14px; width: var(--w-rail); flex: none; }
.app-ui .rail-card { background: var(--surface); border: 1px solid var(--border-1); border-radius: var(--r-card); overflow: hidden; }
.app-ui .rail-card__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border-3); font-size: var(--fs-base); font-weight: var(--fw-semi); color: var(--text-cell); }
.app-ui .rail-card__body { padding: 14px; }
.app-ui .rail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.app-ui .rail-metric__label { font-size: var(--fs-th); font-weight: var(--fw-semi); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-light); }
.app-ui .rail-metric__value { font-family: var(--font-mono); font-size: var(--fs-rail-val); font-weight: var(--fw-semi); color: var(--text-cell); margin-top: 4px; }
.app-ui .activity-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-5); }
.app-ui .activity-row:last-child { border-bottom: 0; }
.app-ui .activity-row .amt { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-semi); white-space: nowrap; }

/* ---- Toolbar buttons (opt-in kit; in 0 templates until deployed — provably inert) ---- */
.app-ui .btn-tb            { height: 32px; padding: 0 14px; font-weight: var(--fw-semi); border-radius: var(--r-btn); background: var(--accent); color: var(--accent-fg); border: 1px solid var(--accent); }
.app-ui .btn-tb--secondary { background: var(--surface); color: var(--text-2); border-color: var(--border-1); font-weight: var(--fw-med); padding: 0 12px; }
.app-ui .btn-tb:hover      { background: var(--accent-hover); }

/* ---- Filter tabs (reusable) ---- */
.app-ui .filter-tab { display: inline-flex; align-items: center; gap: 7px; height: var(--h-tab); padding: 0 11px; border-radius: var(--r-btn); font-size: var(--fs-body); font-weight: var(--fw-med); cursor: pointer; border: 1px solid transparent; color: var(--text-3); background: transparent; }
.app-ui .filter-tab:hover { background: var(--accent-tint-07); }
.app-ui .filter-tab.is-active { color: var(--accent); background: var(--accent-tint-07); border-color: var(--accent-tint-22); font-weight: var(--fw-semi); }
.app-ui .filter-tab__count { font-family: var(--font-mono); font-size: 10.5px; font-weight: var(--fw-semi); padding: 0 5px; min-width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-badge); color: var(--text-light); background: var(--border-5); }
.app-ui .filter-tab.is-active .filter-tab__count { color: var(--accent); background: var(--accent-tint-11); }