/* ════════════════════════════════════════
   tables.css
   ════════════════════════════════════════ */
.tbl-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Contain scroll within tbl-wrap only, not the whole page */
    max-width: 100%;
}
.tbl-wrap table { min-width: 560px; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    /* Prevent table from causing page-level horizontal scroll */
    max-width: 100%;
}

thead th {
    background: var(--gray-50); padding: 10px 10px;
    text-align: center; font-weight: 700; color: var(--primary);
    border-bottom: 2px solid var(--gray-200); white-space: nowrap;
    font-size: 0.79rem; letter-spacing: 0.3px;
}

tbody td {
    padding: 9px 10px; text-align: center;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
    /* Prevent cell content from forcing table wider than container */
    max-width: 0; /* trick: combined with overflow:hidden lets table-layout:auto work */
}

tbody tr:hover td { background: var(--gray-50); }
tbody tr:last-child td { border-bottom: none; }

.empty-row td {
    padding: 48px; color: var(--gray-400);
    font-size: 0.9rem; text-align: center;
    max-width: none; /* reset for empty state */
}

td strong { color: var(--primary); }

/* ── Action buttons in table ── */
.actions { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }

/* ── Mobile: card table removes all scroll constraints ── */
@media (max-width: 640px) {
    .tbl-wrap {
        overflow-x: visible !important;
        background: transparent;
        padding: 0;
        max-width: 100%;
    }
    .tbl-wrap table,
    .mobile-cards-table {
        min-width: unset !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }
    tbody td { max-width: none; } /* reset for mobile cards */
}