/* ============================================
   TABLES — proposed canonical (.table-next)
   Replaces two divergent table systems with one base
   + flavor / density modifiers, plus a card-shaped wrap
   that handles overflow-x and provides a polished
   container border. Cell-content helpers (is-mono /
   is-numeric / is-center) align the data-shape without
   inline styles.

   Replaces:
     - .comparison-table / .config-table / .commands-table (docs.css)
     - .tools-ref-table (tools.css)
   Specialised data tables (.bgp-table, .ip-latency-table,
   pricing comparison overlay) stay catalogued separately
   alongside their data-vis cousins.
   ============================================ */

/* ============================================
   Wrap — overflow + bordered card container
   ============================================ */
.table-next-wrap {
    margin: var(--space-xl) 0;
    overflow-x: auto;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    -webkit-overflow-scrolling: touch;
}

/* Borderless wrap — pure overflow container, no card frame.
   Use when the table sits inside another bordered surface. */
.table-next-wrap--flush {
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* ============================================
   Base table
   ============================================ */
.table-next {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-md);
    color: var(--color-text-secondary);
    line-height: var(--line-normal);
}

.table-next th,
.table-next td {
    padding: var(--space-md);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
}

.table-next thead th {
    background: var(--color-bg-card);
    color: var(--color-text);
    font-weight: 600;
    white-space: nowrap;
}

.table-next tbody tr:last-child td {
    border-bottom: 0;
}

.table-next tbody tr {
    transition: background-color 0.15s ease;
}

.table-next tbody tr:hover td {
    background: rgba(255, 255, 255, 0.025);
}

/* When sitting inside the bordered wrap, inset the bottom border
   on the last row so it sits flush against the wrap's bottom. */
.table-next-wrap > .table-next tbody tr:last-child td {
    border-bottom: 0;
}

/* ============================================
   Flavor: --ref — reference flavor (sticky head,
   uppercase tracked headers, primary-tinted hover)
   Captures the .tools-ref-table look for protocol /
   port / record-type reference grids.
   ============================================ */
.table-next--ref thead th {
    background: var(--color-bg-elevated);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--font-sm);
    color: var(--color-text);
    position: sticky;
    top: 0;
    z-index: 1;
}

.table-next--ref tbody tr:hover td {
    background: rgba(var(--color-primary-rgb), 0.04);
}

/* ============================================
   Density modifiers: --sm / --lg
   ============================================ */
.table-next--sm th,
.table-next--sm td {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-sm);
}

.table-next--lg th,
.table-next--lg td {
    padding: var(--space-lg);
}

/* ============================================
   Cell-content alignment helpers
   Apply on individual <th> / <td> to align the data
   shape without inline styles.
   ============================================ */
.table-next .is-mono {
    font-family: var(--font-mono);
}

.table-next .is-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.table-next .is-center {
    text-align: center;
}

.table-next .is-tight {
    /* For columns where the content shouldn't wrap (e.g. status
       badges, version pills) — keeps the column width minimal. */
    width: 1%;
    white-space: nowrap;
}

/* ============================================
   Selected / highlighted row
   For "this is the row I'm pointing at" UX (e.g. the
   server you have open in a side panel).
   ============================================ */
.table-next tr.is-selected td,
.table-next tr.is-selected:hover td {
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-text);
}

.table-next tr.is-selected td:first-child {
    box-shadow: inset 2px 0 0 var(--color-primary);
}

/* ============================================
   Reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .table-next tbody tr { transition: none; }
}

/* ============================================
   .bar-cell — reusable horizontal-bar cell primitive
   ============================================
   Lifted from .bgp-table .power-cell so the same shape can
   serve BGP power column AND IP latency timing column AND any
   future tabular bar visualisation. Layout: bar track on the
   left (with inner fill scaled via inline width), monospace
   numeric value on the right.

   Markup:
     <div class="bar-cell">
       <div class="bar-cell-track">
         <div class="bar-cell-fill" style="width: 90%;"></div>
       </div>
       <div class="bar-cell-value">90%</div>
     </div>

   Tone via --bar-color CSS variable on the wrapper:
     <div class="bar-cell" style="--bar-color: var(--color-warning);">…</div>
   ============================================ */
.bar-cell {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    --bar-color: var(--color-primary);
}

.bar-cell-track {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.bar-cell-fill {
    height: 100%;
    background: var(--bar-color);
    border-radius: 3px;
    min-width: 2px;
    transition: width var(--transition-base);
}

.bar-cell-value {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    color: var(--color-text-muted);
    min-width: 50px;
    text-align: right;
    flex-shrink: 0;
}