/* ============================================================================
   RP2 REPORT — CARDS BALANCE LAYER  (cards.css)
   ----------------------------------------------------------------------------
   Load LAST (after style.css + leader.css + liquidglass.css / enterprise.css).
   GEOMETRY / SPACING / ALIGNMENT ONLY — no colors, no backgrounds, no blur,
   no shadows, no motion. The liquid-glass frosted skin stays untouched.
   Goal: every card family renders "cân đối gọn gàng" — equal heights,
   uniform padding, aligned pills/badges/stats, consistent grid gaps.
   ----------------------------------------------------------------------------
   SECTIONS
     1. KPI stat-cards        .kpi-grid .kpi
     2. Brand cards           .brand-grid .brand-card
     3. Matrix table          .matrix-wrap table.matrix
     4. Brandsum + fraud      .brandsum-grid .brandsum .fraud-item
     5. Pills / badges / chips uniform metrics
     6. Shared card rhythm    .card .domain-row .channel-item
   ============================================================================ */

:root {
  /* single source of truth for card geometry */
  --cardgap: var(--s3, 12px);            /* 12px — one gap everywhere */
  --pillh: 24px;                   /* uniform pill/badge height */
  --chip-h: 26px;                  /* uniform stat-chip height */
  --kpi-minh: 108px;               /* KPI card equal height */
  --brand-minh: 92px;              /* brand card equal height */
  --sumcard-minh: 148px;           /* brandsum/fraud equal height */
  --row-h: 52px;                   /* matrix row height */
}

/* ========================= 1. KPI STAT-CARDS ========================= */
/* Fixed even columns so the card count (renderKpi emits 6 or 9) always tiles a full
   rectangle — 9 → 3×3, 6 → 2×3 — with NO ragged orphan row. auto-fit used to wrap 9
   into a 7+2 pile on wide screens (big empty gap right of the 2 leftovers). */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cardgap);
  align-items: stretch;
}

/* equal height + identical padding + strict number/label column alignment */
.kpi {
  min-height: var(--kpi-minh);
  padding: var(--s4, 16px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  text-align: left;
}
.kpi__val {
  font-size: 28px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
  margin: 0 0 2px;
  min-height: 32px;                 /* number row always same height */
  display: flex;
  align-items: flex-end;
}
.kpi__label {
  font-size: 12px;
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.kpi__sub {
  font-size: 11px;
  line-height: 1.3;
  margin-top: auto;                 /* sub-line pinned to card bottom → labels align */
  padding-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========================= 2. BRAND CARDS ========================= */
/* 1-up mobile → 2-up tablet → 3-up desktop, equal heights via stretch */
.brand-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cardgap);
  align-items: stretch;
}
@media (min-width: 720px)  { .brand-grid { grid-template-columns: repeat(2, 1fr); gap: var(--cardgap); } }
@media (min-width: 1024px) { .brand-grid { grid-template-columns: repeat(3, 1fr); gap: var(--cardgap); } }

.brand-card {
  min-height: var(--brand-minh);
  height: 100%;                     /* fill grid track → row heights equal */
  padding: var(--s4, 16px);
  display: flex;
  align-items: center;
  gap: var(--s3, 12px);
}
.brand-card__logo {                 /* icon tile: fixed square, never squashed */
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  font-size: 12px;
}
.brand-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.brand-card__name {
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;                    /* tight uniform gaps between pill + stats */
  margin-top: 0;
  min-height: var(--pillh);         /* meta row same height even when pill absent */
}
.brand-card__meta .stat { line-height: var(--pillh); }
.brand-card__chev {
  flex: 0 0 auto;
  align-self: center;
  line-height: 1;
}

/* stat inline metric: baseline-locked number + unit */
.stat { align-items: baseline; gap: 4px; white-space: nowrap; }
.stat b { font-variant-numeric: tabular-nums; }

/* ========================= 3. MATRIX TABLE ========================= */
.matrix-wrap { overflow-x: auto; }
table.matrix { border-spacing: 0; }
table.matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 40px;
  padding: 0 var(--s3, 12px);
  vertical-align: middle;
  white-space: nowrap;
}
table.matrix tbody td {
  height: var(--row-h);             /* every row identical height */
  padding: var(--s2, 8px) var(--s3, 12px);
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.3;
}
table.matrix tbody td.td-left { max-width: 260px; }
/* name cell: avatar + two text lines vertically centered, no ragged wrap */
.nv-cell { display: flex; align-items: center; gap: var(--s3, 12px); min-width: 0; }
.nv-cell > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nv-avatar { width: 34px; height: 34px; flex: 0 0 34px; }
.nv-name { line-height: 1.25; }
.nv-code { line-height: 1.25; }
/* numbers: tabular + centered so digit columns line up */
table.matrix .num-strong,
table.matrix .num-zero,
table.matrix .cell-alert,
table.matrix .submit-time { font-variant-numeric: tabular-nums; }
/* pills inside table never stretch the row */
table.matrix .pill { margin: 0; }

/* ========================= 4. BRANDSUM + FRAUD CARDS ========================= */
.brandsum-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cardgap);
  align-items: stretch;
}
@media (min-width: 720px)  { .brandsum-grid { grid-template-columns: repeat(2, 1fr); gap: var(--cardgap); } }
@media (min-width: 1024px) { .brandsum-grid { grid-template-columns: repeat(3, 1fr); gap: var(--cardgap); } }

.brandsum,
.fraud-item {
  min-height: var(--sumcard-minh);
  height: 100%;
  padding: var(--s4, 16px);
  display: flex;
  flex-direction: column;
}
.brandsum__head {
  display: flex;
  align-items: center;
  gap: var(--s3, 12px);
  margin-bottom: var(--s3, 12px);
  min-height: 38px;                 /* logo-tile height → heads align across cards */
}
.brandsum__head .brand-card__logo { width: 38px; height: 38px; flex: 0 0 38px; font-size: 11px; }
.brandsum__head .badge { margin-left: auto; }   /* status badge pinned right, aligned */
.brandsum__name {
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brandsum__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--s3, 12px);
  align-items: center;
}
.cover-line { margin-top: auto; padding-top: var(--s2, 8px); gap: 6px; }  /* pinned bottom */
.gap-domain { margin-top: var(--s2, 8px); align-items: center; }

/* fraud card: severity row + reason aligned to same top line as brandsum head */
.fraud-item { gap: 0; flex-direction: row; align-items: flex-start; }
.fraud-item__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fraud-item__top {
  align-items: center;
  gap: 6px 8px;
  margin-bottom: 6px;
  min-height: var(--pillh);         /* matches pill height → tops align */
}
.fraud-item__reason { line-height: 1.45; margin-top: 0; }
.fraud-item__who { line-height: var(--pillh); white-space: nowrap; }
.thumb-row { margin-top: auto; padding-top: var(--s2, 8px); gap: 6px; }

/* ========================= 5. PILLS / BADGES / CHIPS — one metric ========================= */
/* identical height + vertical centering everywhere → no more misaligned capsules */
.pill,
.badge,
.count-badge,
.sev,
.cover-tag {
  height: var(--pillh);
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.sev, .cover-tag { height: 22px; }  /* micro-tags one step smaller, still uniform */
.stat-chip {
  height: var(--chip-h);
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
}
.stat-chip b { font-variant-numeric: tabular-nums; }
.badge .dot { flex: 0 0 auto; }

/* ========================= 6. SHARED CARD RHYTHM ========================= */
/* one padding scale for generic cards; heads aligned */
.card { padding: var(--s4, 16px) var(--s5, 20px); }
.card--tight { padding: var(--s4, 16px); }
.card--pad-lg { padding: var(--s5, 20px) var(--s6, 24px); }
.card__head { min-height: 34px; align-items: center; margin-bottom: var(--s3, 12px); }

/* domain rows: uniform head/body padding */
.domain-row__head { padding: var(--s4, 16px); align-items: center; }
.domain-row__body { padding: 0 var(--s4, 16px) var(--s4, 16px); }
.domain-row__title { line-height: 1.3; }

/* channel checklist rows: same height, centered content */
.channel-item { min-height: 56px; align-items: center; padding: var(--s2, 8px) var(--s3, 12px); }
.channel-item__sla { flex: 0 0 auto; white-space: nowrap; }

/* countdown: number never jitters width */
.countdown__clock { font-variant-numeric: tabular-nums; }

/* section stacks: same vertical rhythm between blocks */
.stack > * + * { margin-top: var(--cardgap); }