/* ============================================================================
   SPURA HUB v3 - Table Components
   ============================================================================ */

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead th {
    padding: 0.625rem 1rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    background: var(--table-header-bg);
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    white-space: nowrap;
}

.data-table tbody td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    color: var(--text-primary);
}

.data-table tbody tr { transition: background var(--transition-fast); }
.data-table tbody tr:last-child td { border-bottom: none; }

.data-table tbody tr.table-row-warning td {
    background: var(--glass-warning-12);
}

.data-table tbody tr.table-row-warning:hover td {
    background: var(--glass-warning-12);
}

.data-table tbody tr.table-row-danger td {
    background: var(--glass-danger-12);
}

.data-table tbody tr.table-row-danger:hover td {
    background: var(--glass-danger-12);
}

.data-table tbody tr.table-row-subtle td {
    background: var(--glass-white-92);
}

.data-table tbody tr.table-row-subtle:hover td {
    background: var(--glass-white-92);
}

.data-table-scroll {
    width: 100%;
    overflow-x: auto;
}

.table-wrap,
.data-table-scroll {
    overscroll-behavior-x: contain;
}

.data-table-scroll > .data-table {
    width: max-content;
    min-width: 100%;
}

.premium-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.premium-table th {
    padding: 0.75rem 1rem;
    background: var(--table-header-bg);
    color: var(--ink-400);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
}

.premium-table td {
    padding: 0.9375rem 1rem;
    border-top: 1px solid var(--sp-bg-1);
    color: var(--ink-950);
    font-size: 0.875rem;
    vertical-align: middle;
}

.premium-table tbody tr {
    transition: background var(--transition-fast);
}

.premium-table__progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.supplier-ppd-table,
.cfdi-detail-table,
.supplier-statement-ppd-table,
.idt-logs-table {
    min-width: 800px;
}

.sat-table,
.bank-transactions-table {
    min-width: 900px;
}

.supplier-ppd-table td,
.sat-table td,
.cfdi-detail-table td {
    vertical-align: middle;
}

.bank-transactions-table .badge {
    padding: 0.1rem 0.32rem;
}

.order-edit-lines-table {
    min-width: 720px;
}

.platforms-sales-ledger-table {
    min-width: 68rem;
}

.platforms-settlements-pending-table {
    min-width: 52rem;
}

.platforms-violations-table {
    min-width: 44rem;
}

.platforms-settlements-table {
    min-width: 76rem;
}

.platforms-settlement-sales-table {
    min-width: 48rem;
}

.platforms-settlement-linked-orders-table {
    min-width: 42rem;
}

.platforms-settlement-movements-table {
    min-width: 44rem;
}

.suppliers-payment-report-table {
    min-width: 64rem;
}

.order-edit-col-index {
    width: 32px;
}

.order-edit-col-sku {
    width: 130px;
}

.order-edit-col-qty {
    width: 82px;
}

.order-edit-col-price {
    width: 115px;
}

.order-edit-col-tax {
    width: 90px;
}

.order-edit-col-courtesy {
    width: 110px;
}

.order-edit-col-subtotal {
    width: 105px;
}

.order-edit-col-actions {
    width: 88px;
}

.order-edit-actions-cell {
    vertical-align: middle;
    text-align: right;
    white-space: nowrap;
}

.order-edit-actions-inner {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.order-edit-total-row {
    background: var(--color-bg-secondary, var(--sp-bg-0));
}

.order-edit-total-label {
    padding: 0.75rem 0.75rem 0.75rem 0;
    text-align: right;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.order-edit-total-value {
    padding: 0.75rem;
    text-align: right;
    font-size: 0.9rem;
}

.purchase-order-table--compact {
    min-width: 640px;
}

.sales-order-table {
    min-width: 900px;
}

.sales-order-table th {
    white-space: nowrap;
}

.sales-order-table td {
    vertical-align: middle;
}

.sales-order-table .text-right {
    text-align: right;
}

.sales-order-line {
    border-bottom: 1px solid var(--color-border);
}

.sales-order-line:last-child {
    border-bottom: none;
}

.sales-order-line-qty {
    width: 80px;
    text-align: right;
}

.sales-order-line-price {
    width: 110px;
    text-align: right;
}

.sales-order-line-total {
    width: 110px;
    text-align: right;
    font-weight: 600;
}

/* Wide tables (order-edit-lines-table, bank-transactions-table, etc.) keep
   horizontal scroll on mobile — see tables-accessible.css + app.js. */

.table-responsive:focus-visible,
.data-table-scroll.table-mobile-scroll:focus-visible {
    outline: 2px solid var(--brand-500, var(--brand-500));
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Desktop table rhythm (A5): zebra, hover, keyboard row focus.
   ≥769px only — mobile card tables (≤768px) stay in tables-accessible.css.
   -------------------------------------------------------------------------- */

@media (min-width: 769px) {
    :root {
        --table-row-stripe-bg: color-mix(in srgb, var(--sp-bg-1) 42%, transparent);
        --table-row-hover-bg: var(--bg-secondary);
        --table-row-hover-bg-premium: var(--glass-brand-06);
        --table-row-focus-accent: var(--brand-500);
    }

    :root[data-theme='dark'] {
        --table-row-stripe-bg: var(--glass-white-04);
        --table-row-hover-bg: var(--glass-white-06);
        --table-row-hover-bg-premium: var(--glass-white-06);
    }

    .data-table tbody tr:not(.table-row-warning):not(.table-row-danger):not(.table-row-subtle):not(.order-edit-total-row):nth-child(even) td,
    .premium-table:not(.ui-mobile-table-cards) tbody tr:not(.table-row-warning):not(.table-row-danger):not(.table-row-subtle):not(.order-edit-total-row):nth-child(even) td {
        background: var(--table-row-stripe-bg);
    }

    .data-table tbody tr:not(.table-row-warning):not(.table-row-danger):not(.table-row-subtle):not(.order-edit-total-row):hover td,
    body.app-body .data-table tbody tr:not(.table-row-warning):not(.table-row-danger):not(.table-row-subtle):not(.order-edit-total-row):hover td {
        background: var(--table-row-hover-bg);
    }

    .premium-table:not(.ui-mobile-table-cards) tbody tr:not(.table-row-warning):not(.table-row-danger):not(.table-row-subtle):not(.order-edit-total-row):hover td,
    body.app-body .premium-table:not(.ui-mobile-table-cards) tbody tr:not(.table-row-warning):not(.table-row-danger):not(.table-row-subtle):not(.order-edit-total-row):hover td {
        background: var(--table-row-hover-bg-premium);
    }

    .data-table tbody tr:not(.table-row-warning):not(.table-row-danger):not(.table-row-subtle):not(.order-edit-total-row):focus-within td,
    .premium-table:not(.ui-mobile-table-cards) tbody tr:not(.table-row-warning):not(.table-row-danger):not(.table-row-subtle):not(.order-edit-total-row):focus-within td {
        background: color-mix(in srgb, var(--table-row-focus-accent) 10%, var(--table-row-hover-bg));
        box-shadow: inset 3px 0 0 var(--table-row-focus-accent);
    }

    .premium-table:not(.ui-mobile-table-cards) tbody tr:not(.table-row-warning):not(.table-row-danger):not(.table-row-subtle):not(.order-edit-total-row):focus-within td {
        background: color-mix(in srgb, var(--table-row-focus-accent) 10%, var(--table-row-hover-bg-premium));
    }

    .table-no-zebra tbody tr:nth-child(even) td {
        background: transparent;
    }

    .table-no-zebra tbody tr:hover td,
    .table-no-zebra tbody tr:focus-within td {
        box-shadow: var(--shadow-none, none);
    }
}

@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
    .data-table tbody tr,
    .premium-table tbody tr {
        transition: none;
    }
}