/* =====================================================
   Responsive tables — shared utility (mobile Phase 2)

   Apply to a table's scroll wrapper:
     .rt-wrap          scroll container (required)
     .rt-cards         stack rows into cards below 640px (avoid on tables
                       whose thead holds controls — filters, select-all —
                       since card mode hides the thead)
     .rt-freeze-first  keep first column visible during x-scroll
     .rt-freeze-2      keep first two columns visible (checkbox + id
                       tables); col 1 width via --rt-col1-w (default 36px)

   js/responsive-tables.js adds .rt-sticky (the freeze-header toggle,
   on by default), injects a .rt-toolbar sibling with the pin button,
   sets data-label attributes for card mode, and measures
   --rt-head2-top for two-row theads.
   ===================================================== */

.rt-wrap {
    overflow: auto;
    --rt-col1-w: 36px;
}

/* Sticky header: the wrapper becomes its own vertical viewport so the
   thead can pin to its top. Header rows are pinned per-row so a second
   thead row (e.g. a filter row) stacks below the first instead of
   overlapping it. */
.rt-wrap.rt-sticky {
    max-height: min(72vh, 900px);
}

.rt-wrap.rt-sticky thead tr:first-child th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #16233f; /* solid — rows scroll underneath */
    box-shadow: 0 1px 0 rgba(0, 183, 255, 0.25);
}

.rt-wrap.rt-sticky thead tr:nth-child(2) th {
    position: sticky;
    top: var(--rt-head2-top, 2.75rem);
    z-index: 3;
    background: #16233f;
    box-shadow: 0 1px 0 rgba(0, 183, 255, 0.25);
}

/* Frozen identifier columns (useful from tablet width up).
   [colspan] cells (full-width "no results" / gap rows) are excluded so
   they keep their own row styling. */
.rt-freeze-first th:first-child,
.rt-freeze-first td:first-child:not([colspan]),
.rt-freeze-2 th:nth-child(-n+2),
.rt-freeze-2 td:nth-child(-n+2):not([colspan]) {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #111b30; /* solid — cells scroll underneath */
}

.rt-freeze-2 th:nth-child(2),
.rt-freeze-2 td:nth-child(2):not([colspan]) {
    left: var(--rt-col1-w);
}

/* Frozen header cells that are also frozen columns sit above both */
.rt-wrap.rt-sticky.rt-freeze-first thead th:first-child,
.rt-wrap.rt-sticky.rt-freeze-2 thead th:nth-child(-n+2) {
    z-index: 4;
}

/* Freeze-header toggle (injected by responsive-tables.js as a sibling
   immediately before the wrapper, so it never overlaps header content) */
.rt-toolbar {
    text-align: right;
    margin-bottom: 0.25rem;
}

.rt-pin {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(26, 43, 76, 0.92);
    border: 1px solid rgba(0, 183, 255, 0.3);
    border-radius: 999px;
    cursor: pointer;
}

.rt-pin:hover {
    color: #00b7ff;
    border-color: #00b7ff;
}

.rt-pin[aria-pressed="false"] {
    opacity: 0.55;
}

@media screen and (max-width: 768px) {
    .rt-pin {
        min-height: 44px; /* touch target, matches the global guardrail */
    }
}

/* Card mode: below phone width each row becomes a stacked card and the
   header row (plus the freeze-header machinery) goes away */
@media screen and (max-width: 640px) {
    .rt-toolbar {
        display: none;
    }

    .rt-cards.rt-wrap,
    .rt-cards.rt-wrap.rt-sticky {
        max-height: none;
        overflow: visible;
    }

    .rt-cards table,
    .rt-cards tbody,
    .rt-cards tr,
    .rt-cards td {
        display: block;
        width: 100%;
    }

    /* Stacked cards never need a scroll-width floor — override module CSS
       like expense's `table { min-width: 860px }` which would otherwise
       overflow the viewport once the wrapper stops scrolling */
    .rt-wrap.rt-cards table {
        min-width: 0;
    }

    .rt-cards thead {
        display: none;
    }

    .rt-cards td:first-child,
    .rt-cards td:nth-child(-n+2) {
        position: static; /* undo column freeze inside cards */
        background: transparent;
    }

    .rt-cards tr {
        background: rgba(26, 43, 76, 0.45);
        border: 1px solid rgba(0, 183, 255, 0.18);
        border-radius: 10px;
        margin-bottom: 0.75rem;
        padding: 0.35rem 0.75rem;
    }

    .rt-cards td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0.25rem 1rem;
        padding: 0.45rem 0;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        text-align: right;
        white-space: normal;
    }

    .rt-cards td:last-child {
        border-bottom: none;
    }

    .rt-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        color: rgba(255, 255, 255, 0.55);
        text-align: left;
        flex-shrink: 0;
    }

    /* Full-width cells (e.g. "no results" rows) keep their own layout */
    .rt-cards td[colspan] {
        display: block;
        text-align: left;
    }

    .rt-cards td[colspan]::before {
        content: none;
    }
}

/* Print: undo the screen machinery. Sticky mode is on by default, and its
   max-height viewport would clip long tables to one page in Ctrl/Cmd+P
   (timeclock and expense reports are browser-printed); the solid dark
   header/column backgrounds would also print as dark bars on the modules'
   white print themes. */
@media print {
    .rt-toolbar {
        display: none !important;
    }

    .rt-wrap,
    .rt-wrap.rt-sticky {
        max-height: none;
        overflow: visible;
    }

    .rt-wrap.rt-sticky thead tr:first-child th,
    .rt-wrap.rt-sticky thead tr:nth-child(2) th {
        position: static;
        background: transparent;
        box-shadow: none;
    }

    .rt-freeze-first th:first-child,
    .rt-freeze-first td:first-child:not([colspan]),
    .rt-freeze-2 th:nth-child(-n+2),
    .rt-freeze-2 td:nth-child(-n+2):not([colspan]) {
        position: static;
        background: transparent;
    }
}