/* =====================================================================
   NMR monthly-report data-entry grids  (_MamU5, _HrmamU5, _IpdsamU5,
   _OpdsamU5, _Supplyimam — every table with class .mam-table)
   ---------------------------------------------------------------------
   These are wide numeric entry matrices (13+ columns). The right responsive
   model for them is the Excel one — FREEZE + SCROLL, not reflow:

     * the header row stays pinned to the top,
     * the "Age band / Category" label column stays pinned to the left,
     * the numeric columns scroll horizontally inside .table-responsive.

   We deliberately do NOT collapse or restack these into cards on small
   screens: the autosave JS is bound to the grid cells, and filling a 13-column
   numeric matrix is a laptop/tablet task, not a phone one.

   This file is the single source of truth for the grid; it replaces the
   near-identical CSS that used to be copy-pasted into all five partials.
   Purely presentational — no JS, bindings or save paths are affected.
   ===================================================================== */

.mam-table {
    border-collapse: separate; /* required for position:sticky on cells */
    border-spacing: 0;
}

/* ---- Frozen header row(s) ---- */
.mam-table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

/* ---- Frozen first column (the row label) ---- */
.mam-table .sticky-first {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #fff;
    /* The edge shadow is what makes the column READ as frozen while the
       numbers scroll underneath it. Without it the table just looks broken. */
    box-shadow: 6px 0 6px -6px rgba(15, 23, 42, .28);
}

/* The header/label corner must sit above both the sticky row and column. */
.mam-table thead th.sticky-first {
    z-index: 6;
    background: #f8fafc;
}

/* Section bands (Girls / Boys) pin left as well. */
.mam-table .bg-section th {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #f3f4f6;
    font-weight: 600;
}

.mam-table .bg-sub th {
    background: #eef2f7;
    font-weight: 500;
}

.mam-table td,
.mam-table th {
    vertical-align: middle;
    white-space: nowrap;
}

.mam-table tbody tr:not(.bg-section):hover td {
    background: #fcfcff;
}

/* ---------------------------------------------------------------------
   Tablet compression (< 992px): shrink the label column and the numeric
   cells so meaningfully more columns fit before you have to scroll.
   `!important` is required because the column widths are set inline on
   the <colgroup> (<col style="width:260px">) in the markup.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .mam-table > colgroup > col:first-child {
        width: 150px !important;
    }

    .mam-table > colgroup > col + col {
        width: 72px !important;
    }

    .mam-table td,
    .mam-table th {
        padding-left: .3rem !important;
        padding-right: .3rem !important;
        font-size: .82rem;
    }

        .mam-table td .form-control,
        .mam-table td input {
            padding: .15rem .3rem;
            font-size: .82rem;
        }
}