/*
 * ss-table — Data tables
 *
 * The signature Supply Solution table: mono numbers, subtle dividers, right-aligned totals.
 *
 * Mobile-first: rows STACK as cards.
 * ≥900px:      real table.
 *
 * Cell modifiers (BEM element with modifier):
 *   .ss-table__cell--num     right-aligned monospace numeric
 *   .ss-table__cell--sku     monospace, accent-colored SKU pill
 *   .ss-table__cell--label   uppercase small caps section label (mobile-only visible)
 *   .ss-table__cell--wide    the primary column (name, product)
 *   .ss-table__cell--hide-mobile   hidden on stacked view
 *   .ss-table__cell--hide-desktop  hidden on real-table view
 *
 * Row modifiers:
 *   .ss-table__row--muted   dimmed row (cancelled/expired)
 *   .ss-table__row--active  accent border-left
 */

/* ── Mobile-first: rows are stacked cards ─────────────────────── */

.ss-table {
    display: block;
    width: 100%;
    border-collapse: collapse;
}

.ss-table thead { display: none; }

.ss-table tbody { display: block; }

.ss-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-auto-rows: min-content;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-divider);
}

.ss-table tr:last-child { border-bottom: none; }

.ss-table td {
    display: block;
    padding: 0;
    border: none;
    font-size: var(--text-base);
    color: var(--text-primary);
    line-height: var(--leading-base);
    min-width: 0; /* allow ellipsis */
}

/* On mobile, each cell can be labeled via [data-label] pseudo-content */
.ss-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--text-section);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}

/* ── Cell type modifiers ──────────────────────────────────────── */

.ss-table__cell--num {
    font-family: var(--font-mono);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ss-table__cell--sku {
    font-family: var(--font-mono);
    color: var(--accent-text);
    background: var(--accent-soft);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    display: inline-block;
    line-height: 1.4;
}

.ss-table__cell--wide { grid-column: 1 / -1; }

.ss-table__cell--hide-mobile { display: none; }
.ss-table__cell--hide-desktop { display: block; }

/* ── Row modifiers ────────────────────────────────────────────── */

.ss-table__row--muted { opacity: 0.5; }

.ss-table__row--active {
    border-left: 3px solid var(--accent);
    padding-left: calc(var(--space-4) - 3px);
}

/* ── Desktop: real table (≥900px) ─────────────────────────────── */

@media (min-width: 900px) {
    .ss-table { display: table; }
    .ss-table thead {
        display: table-header-group;
        background: var(--bg-card-dim);
    }
    .ss-table tbody { display: table-row-group; }
    .ss-table tr {
        display: table-row;
        padding: 0;
        column-gap: 0;
        row-gap: 0;
    }

    .ss-table th {
        text-align: left;
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-xs);
        font-weight: var(--weight-bold);
        color: var(--text-section);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        border-bottom: 1px solid var(--border-divider);
        white-space: nowrap;
    }

    .ss-table td {
        display: table-cell;
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px solid var(--border-divider);
        vertical-align: middle;
    }

    .ss-table tr:last-child td { border-bottom: none; }

    .ss-table tr:hover td { background: var(--bg-row-hover); }

    /* Mobile-only labels hidden on desktop */
    .ss-table td[data-label]::before { display: none; }

    /* Cell visibility flips on desktop */
    .ss-table__cell--hide-mobile { display: table-cell; }
    .ss-table__cell--hide-desktop { display: none; }

    .ss-table__cell--wide { grid-column: auto; }
    .ss-table__cell--num { text-align: right; }
    .ss-table__row--active { border-left: none; padding-left: 0; }
    .ss-table__row--active td:first-child { border-left: 3px solid var(--accent); }

    /* Right-align header of numeric columns */
    .ss-table th.ss-table__cell--num { text-align: right; }
}

/* ── Scroll wrapper (fallback for very wide tables) ───────────── */

.ss-table__wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}