/* ============================================================
   Hub surfaces (Kế hoạch · Dự báo giá trị).
   .hubtbl is .ua-table's rules promoted to a shared class — same
   padding, same rules, same sticky header. No new table style.
   Sizing is container-relative: the espresso drawer narrows the
   canvas, so viewport breakpoints fire at the wrong moment.
   ============================================================ */
.hub { container-type: inline-size; }

.hubtblwrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--surface-raised); }
.hubtbl { width: 100%; min-width: 880px; border-collapse: collapse; }
.hubtbl th, .hubtbl td { padding: 10px 14px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.hubtbl th {
  background: var(--surface-sunk); color: var(--ink-tertiary); font-weight: var(--fw-strong);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.hubtbl tbody tr:last-child td { border-bottom: none; }
.hub-row:hover td { background: var(--surface-sunk); }
.hubtbl td.hub-num { font-size: 12px; color: var(--ink-secondary); white-space: nowrap; }

.hub-namebtn {
  display: inline-flex; align-items: center; min-height: 24px;
  padding: 0; background: none; border: none; font: inherit; font-size: 13px;
  color: var(--ink-primary); text-align: left; cursor: pointer;
}
.hub-namebtn:hover { color: var(--accent-primary); text-decoration: underline; text-underline-offset: 2px; }

.hub-conf { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hub-conf--high { color: var(--state-positive); }
.hub-conf--mid  { color: var(--ink-secondary); }
.hub-conf--low  { color: var(--state-warning); }
.hub-conf--none { color: var(--ink-tertiary); }

.hub-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-soft); background: var(--surface-canvas); font-size: 11.5px; color: var(--ink-secondary); white-space: nowrap; }
.hub-chip__mark { font-family: var(--font-mono); font-size: 10px; color: var(--ink-tertiary); }

.hub-sent { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-tertiary); white-space: nowrap; }
.hub-sent__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-tertiary); }
.hub-sent.is-yes { color: var(--ink-secondary); }
.hub-sent.is-yes .hub-sent__dot { background: var(--state-positive); }

.hub-emptywrap { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--surface-raised); }
.hub-rowmeta { display: none; }
.hub-rowmeta > * + *::before { content: "·"; margin-right: 6px; color: var(--line-default); }
.hub-m-lg, .hub-m-md { display: none; }

@container (max-width: 900px) {
  .hubtbl { min-width: 0; }
  .hub-col-lg { display: none; }
  .hub-rowmeta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; font-size: 11.5px; color: var(--ink-tertiary); }
  .hub-m-lg { display: inline; }
}
@container (max-width: 640px) {
  .hub-col-md { display: none; }
  .hub-m-md { display: inline; }
  .hubtbl th, .hubtbl td { padding: 9px 10px; }
}