/*
 * Mobile layout.
 *
 * The template already handles the chrome — off-canvas sidebar, viewport meta,
 * padding. What it does not handle is this application's tables: eleven columns
 * of ledger do not fit a phone, and three of the screens are tables of form
 * controls, which a horizontal scrollbar makes almost unusable.
 *
 * So below the large breakpoint every marked table stops being a grid and
 * becomes one card per row, each cell carrying its own heading from the
 * data-label attribute in the markup. Nothing is hidden and nothing has to be
 * scrolled sideways to be read.
 *
 * The tables have since moved to Vue and each component carries its own card
 * layout, so the rules that did that here have gone with them. What remains is
 * the chrome around the tables, which is still the template's and still needs it.
 */

@media (max-width: 991.98px) {

    /* The off-canvas sidebar sits at left:-300px; without this it can still
       drag a horizontal scrollbar onto the page on some phones. */
    body {
        overflow-x: hidden;
    }

    .pagetitle h1 {
        font-size: 1.4rem;
    }

    /* ---- Everything else ------------------------------------------------ */

    /* Two stat tiles across rather than one, so a summary stays a summary. */
    .statement-summary {
        grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    }

    .statement-summary .value {
        font-size: 0.95rem;
    }

    /* Filter bars: full-width fields instead of a cramped inline row. */
    .statement-filter .col-sm-auto {
        width: 100%;
    }

    .statement-filter .btn {
        width: 100%;
        margin-bottom: 0.3rem;
    }

    .quick-ranges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
    }

    .quick-ranges a {
        margin-left: 0;
    }

    /* Action buttons in a card header stack to full width rather than
       squeezing four onto one line. */
    .card-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
        width: 100%;
    }

    .card-actions .btn {
        width: 100%;
    }

    .batch-total {
        flex-direction: column;
        gap: 0.2rem !important;
    }

    .last-remark {
        max-width: 100% !important;
        white-space: normal !important;
    }

    /* The picker is 17.5rem wide; on a 320px screen that has to give. */
    .dp-popup {
        max-width: calc(100vw - 1rem);
    }
}

@media (max-width: 575.98px) {

    /* One tile per row once two no longer fit without wrapping the figure. */
    .statement-summary {
        grid-template-columns: 1fr 1fr;
    }

    .card-actions {
        grid-template-columns: 1fr;
    }

    .card-body {
        padding: 0.9rem;
    }
}