/* uc-table. A data table: wrap for horizontal scroll, gold hover law, mobile card-stack.
   Consumes only --uc-* (theme + brand aware).
   LAWS (from the pay console table, hard-won):
   - Row hover NEVER swaps in a grey/dark background (it disturbs reading text). Hover = background
     stays transparent, border-color + color go accent. Badges/pills keep their semantic colors:
     they carry their own color rules which beat td inheritance, so they never flip gold - do not
     "fix" them by unsetting their colors (that strips the pill AND inherits the hover gold).
   - Nested cell-text wrappers that carry their own color (e.g. a host .uc-title/.uc-text class)
     BEAT td inheritance. If a host nests colored wrappers, it must add its own deep hover rule
     (target the wrapper under tr:hover). VERIFY BY READING THE TEXT NODE'S computed color, never
     the td's - the td can be gold while every visible glyph stays grey.
   - The stack breakpoint is a constant, not a token: @media cannot read var(). 768px = fleet
     convention (pay consoles); hosts with a different grid override .uc-table--stack behavior.
   - transition is limited to border-color + color. `transition: all` on cells makes whole-row
     reflows on hover and interacts badly with the stacked-card layout. */
.uc-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}
.uc-table{width:100%;max-width:100%;border-collapse:collapse;text-align:left;font:400 13px/1.5 var(--uc-font,system-ui,sans-serif);color:var(--uc-text)}
.uc-table th{font:700 10.5px/1.2 var(--uc-font,system-ui,sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--uc-text-dim);padding:9px 12px;border-bottom:1px solid var(--uc-border);white-space:nowrap}
.uc-table td{padding:10px 12px;border-bottom:1px solid var(--uc-border);transition:border-color .15s,color .15s;vertical-align:middle}
.uc-table tbody tr:last-child td{border-bottom:0}
/* row hover law: transparent bg, accent border + text. Badges/pills with their own color rule
   (e.g. .uc-badge) already beat td inheritance and keep their semantic colors - do NOT unset
   them; only naked text and borderless wrappers take the hover accent. */
.uc-table tbody tr:hover{background-color:transparent}
.uc-table tbody tr:hover > td{border-color:var(--uc-accent);color:var(--uc-accent)}
/* opt-in sticky header. Sticky traps the header on the overflow-x axis of .uc-table-wrap; keep it
   opt-in and only use it in panels that scroll vertically as the page, not inside the wrap. */
.uc-table--sticky th{position:sticky;top:0;background:var(--uc-surface-2);z-index:1}
/* numeric + actions columns */
.uc-table .uc-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.uc-table .uc-table-actions{text-align:right;white-space:nowrap}
/* empty state: no ::before label, block-wide, dim */
.uc-table td.uc-table-empty{display:block;width:100%;text-align:center;padding:18px 0;color:var(--uc-text-dim);font-style:italic}
/* pager (v74, promoted from portal's proven .pager): <nav class="uc-table-pager"> with <a>
   links, <span class="uc-table-pager-cur"> current page, <span class="uc-table-pager-gap">
   ellipsis. Current page = solid accent fill paired with --uc-accent-contrast (dark-safe). */
.uc-table-pager{display:flex;flex-wrap:wrap;gap:5px;margin-top:18px}
.uc-table-pager a,.uc-table-pager span{padding:6px 11px;border:1px solid var(--uc-border);border-radius:var(--uc-radius);color:var(--uc-text);font-size:13px;line-height:1.2;min-width:34px;text-align:center;text-decoration:none}
.uc-table-pager a:hover{border-color:var(--uc-accent);color:var(--uc-accent)}
.uc-table-pager .uc-table-pager-cur{background:var(--uc-accent);color:var(--uc-accent-contrast);border-color:var(--uc-accent)}
.uc-table-pager .uc-table-pager-gap{border-color:transparent;color:var(--uc-text-dim)}
/* mobile card-stack. Auto-detect: tables whose cells carry data-label stack automatically below
   768px. .uc-table--stack forces the layout on (any width) for hosts without :has() or for
   always-stacked lists; .uc-table--no-stack opts a data-label table out. */
@media (max-width:768px){
  .uc-table:has(tbody td[data-label]),.uc-table--stack{display:block;width:100%}
  .uc-table:has(tbody td[data-label]) thead,.uc-table--stack thead{display:none}
  .uc-table:has(tbody td[data-label]) tbody,.uc-table--stack tbody{display:block}
  .uc-table:has(tbody td[data-label]) tr,.uc-table--stack tr{display:flex;flex-wrap:wrap;gap:2px 0;border:1px solid var(--uc-border);border-radius:var(--uc-radius);padding:12px;margin:0 0 12px}
  .uc-table:has(tbody td[data-label]) td,.uc-table--stack td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%;border:0;padding:4px 0}
  .uc-table:has(tbody td[data-label]) td[data-label]::before,.uc-table--stack td[data-label]::before{content:attr(data-label);color:var(--uc-text-dim);font:600 10.5px/1.4 var(--uc-font,system-ui,sans-serif);letter-spacing:.05em;text-transform:uppercase;flex:0 0 auto}
  .uc-table:has(tbody td[data-label]) td[data-label]:not(.uc-table-empty),.uc-table--stack td[data-label]:not(.uc-table-empty){text-align:right}
  .uc-table:has(tbody td[data-label]) tbody tr:hover,.uc-table--stack tbody tr:hover{border-color:var(--uc-accent)}
  .uc-table:has(tbody td[data-label]) tbody tr:hover > td,.uc-table--stack tbody tr:hover > td{border-color:transparent;color:inherit}
}
.uc-table--no-stack thead{display:table-header-group}
.uc-table--no-stack tr{display:table-row}
.uc-table--no-stack td{display:table-cell}