/*
 * Table — always inside a .table-wrap so wide tables scroll inside the
 * card and the page never does. Sticky header, row hover, no zebra.
 *
 *   <div class="table-wrap">
 *     <table class="table">
 *       <thead><tr><th>Provider</th><th class="table__num">p95 ms</th></tr></thead>
 *       <tbody><tr><td class="table__truncate" title="…">…</td><td class="table__num">412</td></tr></tbody>
 *     </table>
 *   </div>
 *
 * Log-row severity modifiers (`.log-row--error` + legacy `.logrow--*`)
 * are pinned lowercase by LogLevelClassHookLowercasedTest.
 */
.table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.table-wrap--tall { max-height: 60vh; overflow-y: auto; }
/* A table directly in a padded card body gets the card's own edge. */
/* A table that is the whole card body bleeds to the card edges; one that
   follows other content keeps its border and sits in the normal flow. A
   `.card--flush` body has no padding, so there is nothing to bleed into. */
.card__body > .table-wrap:only-child { border: 0; border-radius: 0; margin: calc(-1 * var(--sp-4)); width: auto; max-width: none; }
.card--flush .card__body > .table-wrap:only-child { margin: 0; }
.card__body > .table-wrap:not(:only-child) { margin-top: var(--sp-3); }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.table th, .table td {
    text-align: left;
    vertical-align: middle;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--color-border);
    /* The card body sets `overflow-wrap: anywhere` so prose never escapes
       its card. Inside a table that shatters atomic values — an IP renders
       one character per line and the row grows to fit. Cells wrap at word
       boundaries instead; anything unbreakable widens the table and the
       .table-wrap scrolls, which is what it is for. */
    overflow-wrap: normal;
}
/* Values that must never break mid-token, whatever the column width. */
.table td.table__num, .table td .mono, .table td .num, .table td time { white-space: nowrap; }
.table th {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: var(--fs-xxs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
.table--dense th, .table--dense td { padding: var(--sp-1) var(--sp-2); }

/* Cell helpers */
.table__num      { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.table__mono     { font-family: var(--font-mono); }
.table__truncate { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table__truncate--wide { max-width: 48ch; }
.table__nowrap   { white-space: nowrap; }
.table__actions  { white-space: nowrap; text-align: right; }
.table__actions .btn + .btn { margin-left: var(--sp-1); }
.table__cell--code  { font-family: var(--font-mono); font-weight: 700; }
.table__cell--muted { color: var(--color-text-muted); font-size: var(--fs-xs); display: inline-block; }
.table__row--flagged th[scope="row"] { border-left: 3px solid var(--color-state-failed); }
/* Row-as-link: whole row navigates (tasks, sessions). */
.table__row--link { cursor: pointer; }

/* Log tables */
.table--logs td { font-family: var(--font-mono); font-size: var(--fs-xs); }
.log-row--error    td:nth-child(2),
.logrow--error    td:nth-child(2) { color: var(--color-danger); }
.log-row--warning  td:nth-child(2),
.logrow--warning  td:nth-child(2) { color: var(--color-warning); }
.log-row--critical td:nth-child(2),
.logrow--critical td:nth-child(2) { color: var(--color-danger); font-weight: 600; }

/* "Show 50 more" footer for client-paginated lists. */
.table-more { display: flex; justify-content: center; padding: var(--sp-3); border-top: 1px solid var(--color-border); }