/*
 * Responsive fixes shared by every admin page (tracker #79 follow-up): the panel
 * has to work on phones, tablets and narrow laptop windows without sideways
 * scrolling. Loaded globally from includes/head.blade.php, after night-mode.css.
 * Wide desktop windows render as before.
 */

/* ---- Filter forms ------------------------------------------------------
   The Filter and Reset buttons share one narrow grid column (col-lg-2 or
   col-lg-3). Around 1024 px that column is narrower than the two buttons,
   which then stuck out of the page; let them wrap onto two lines instead. */
.d-flex:has(> .js-filter-reset) {
    flex-wrap: wrap;
}

/* ---- Folding DataTables in a .table-responsive box ---------------------
   The Responsive plugin (2.3.0) adds up column widths in whole pixels, so
   with many columns a folded table can come out 1-3 px wider than its box
   (Bana list at 1366 px: 1037.7 px in 1036 px) and the box shows a sideways
   scrollbar for nothing. While the plugin is folding columns (`collapsed`)
   anything left over is that rounding, so the box clips it instead. */
.table-responsive:has(table.dataTable.collapsed) {
    overflow-x: hidden;
}

/* ---- Folded columns in a page's own detail row ------------------------
   County, Host Organization, Bana and Quiz open a detail row from their own
   expand button; adminDataTable.showDetail() lists the columns Responsive
   folded away at the top of it. Same look as the plugin's own "+" rows
   (responsive.bootstrap5.css plus Meno's overrides in styles.css). */
.dt-child-folded ul.dtr-details {
    list-style-type: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.dt-child-folded ul.dtr-details > li {
    padding: 0.5em 0;
    border-block-end: 1px solid var(--default-border);
}

.dt-child-folded ul.dtr-details > li:first-child {
    padding-block-start: 0;
}

.dt-child-folded span.dtr-title {
    display: inline-block;
    min-width: 4.688rem;
    font-weight: 600;
}

/* ---- Plain tables on phones -------------------------------------------
   A static table (not a DataTable) marked `.table-stack` turns into one
   small card per row below 576 px: each cell becomes a "label  value" line,
   the label taken from its `data-label`. The header row is hidden visually
   but stays readable for screen readers. Cells without `data-label` (the
   empty-state row) span the full width. */
@media (max-width: 575.98px) {
    .table-stack > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .table-stack,
    .table-stack > tbody,
    .table-stack > tbody > tr {
        display: block;
        width: 100%;
    }

    .table-stack > tbody > tr {
        padding: 0.5rem 0;
        border-block-end: 1px solid var(--default-border);
    }

    .table-stack > tbody > tr > td {
        display: flex;
        gap: 0.75rem;
        width: 100%;
        max-width: none !important; /* beats inline max-widths meant for wide screens */
        padding: 0.25rem 0.75rem;
        border: 0;
        white-space: normal;
        text-align: start;
        overflow-wrap: anywhere;
    }

    .table-stack > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 38%;
        font-weight: 600;
    }

    .table-stack > tbody > tr > td:not([data-label]) {
        display: block;
        text-align: center;
    }
}