/**
 * Responsive Data View — reusable mobile-responsive component
 * =============================================================
 * Loaded globally via includes/header.php, so these classes are
 * available on every page without an extra include.
 *
 * Fixes two recurring mobile-width (<576px) bugs seen across the CRM:
 *   - header badge/status rows that overflow the viewport instead of
 *     wrapping (body has `overflow-x:hidden`, so overflow content is
 *     simply clipped and unreachable, not scrollable)
 *   - data tables wider than the screen that are hard to read even
 *     inside a `.table-responsive` scroll wrapper
 *
 * Does NOT touch desktop/tablet (>=576px) rendering — everything below
 * is scoped inside a max-width:575.98px media query.
 *
 * -------------------------------------------------------------------
 * 1) BADGE / ACTION ROW WRAPPING → class="rdv-badge-row"
 * -------------------------------------------------------------------
 * Add to any flex container holding badges, pills, or small action
 * buttons that currently run off the right edge on mobile.
 *
 *   <div class="d-flex align-items-center gap-2 rdv-badge-row">
 *       <span class="badge bg-light text-dark border p-2 px-3">Stock Sync: Active</span>
 *       <span class="badge bg-dark p-2 px-3">HSN 5007 / 5% GST</span>
 *   </div>
 *
 * No other markup changes needed. Below 575.98px the row wraps onto
 * multiple lines and badge font/padding shrink slightly so long badge
 * text never exceeds the viewport width on its own.
 *
 * -------------------------------------------------------------------
 * 2) RESPONSIVE TABLE → CARD LAYOUT → class="rdv-table" on <table>
 * -------------------------------------------------------------------
 * Below 575.98px, turns a standard Bootstrap table into one stacked
 * card per row, each cell rendered as a "Label   Value" line. Keep the
 * table's existing classes and its `.table-responsive` wrapper — just
 * add `rdv-table` and a `data-label` on every <td> (not <th>).
 *
 *   <div class="table-responsive">
 *     <table class="table table-hover align-middle rdv-table">
 *       <thead><tr><th>Agreement #</th><th>Client</th><th>Action</th></tr></thead>
 *       <tbody>
 *         <tr>
 *           <td data-label="Agreement #">AGR-2026-0001</td>
 *           <td data-label="Client">Acme Retail</td>
 *           <td class="rdv-cell-action"><a href="..." class="btn btn-sm btn-outline-primary">View</a></td>
 *         </tr>
 *       </tbody>
 *     </table>
 *   </div>
 *
 * Notes:
 *   - `data-label` text becomes the small uppercase caption shown to
 *     the left of the value on mobile; the <thead> itself is hidden
 *     below 575.98px since labels move inline per cell.
 *   - A `<td>` that holds only a button/link (e.g. an "Action" or
 *     "View" column) should use `class="rdv-cell-action"` instead of
 *     `data-label` — it renders as a full-width tappable button
 *     with no caption.
 *   - Empty-state rows (`<td colspan="...">No records found.</td>`)
 *     need no changes — colspan cells are auto-centered and skip the
 *     label caption.
 *   - Desktop/tablet (>=576px): `rdv-table` and `data-label` are
 *     inert, the table renders exactly as a normal Bootstrap table.
 */

@media (max-width: 575.98px) {
    /* ---- 1) Badge / action row wrapping ---- */
    .rdv-badge-row {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }
    .rdv-badge-row > .badge {
        white-space: normal;
        word-break: break-word;
        max-width: 100%;
        font-size: 0.72rem;
        padding: 0.4rem 0.6rem;
    }

    /* ---- 2) Table → card layout ---- */
    table.rdv-table thead {
        display: none;
    }
    table.rdv-table,
    table.rdv-table tbody,
    table.rdv-table tr,
    table.rdv-table td {
        display: block;
        width: 100%;
    }
    table.rdv-table tbody tr {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    table.rdv-table tbody tr:last-child {
        margin-bottom: 0;
    }
    table.rdv-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        padding: 0.35rem 0 !important;
        border: none !important;
        text-align: right;
        font-size: 0.85rem;
    }
    table.rdv-table td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #64748b;
        text-align: left;
        margin-right: auto;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }
    table.rdv-table td.rdv-cell-action {
        justify-content: stretch;
        padding-top: 0.5rem !important;
    }
    table.rdv-table td.rdv-cell-action > a,
    table.rdv-table td.rdv-cell-action > button {
        width: 100%;
        text-align: center;
    }
    table.rdv-table td[colspan] {
        display: block;
        text-align: center;
    }
    table.rdv-table td[colspan]::before {
        content: none;
    }
}

/**
 * -------------------------------------------------------------------
 * 3) TABLE CONSISTENCY (Sprint 8) — shared header/hover/empty-state
 *    styling for .rdv-table at ALL breakpoints (not just the <576px
 *    card layout above). Purely cosmetic additions on top of Bootstrap's
 *    own table classes — a page keeps using `table table-hover rdv-table`
 *    exactly as before, no markup changes required to pick these up.
 * -------------------------------------------------------------------
 */
table.rdv-table thead th {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #64748b;
    border-bottom-width: 1px;
}
table.rdv-table tbody tr:hover {
    background-color: #f8fafc;
}
table.rdv-table tbody tr td[colspan] {
    padding: 2.5rem 1rem;
    color: #94a3b8;
}
table.rdv-table tbody tr td[colspan] i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.6;
}