/*
 * Card #1948 — ONE mobile inset budget for all four dashboards.
 *
 * Root cause of the recurring "page is too narrow on a phone" bug: padding
 * stacked at four independent layers (theme site-main gutter, dashboard
 * container, card, borders) that no layer could see the sum of. This file is
 * the single place that budget is declared and consumed.
 *
 * THE BUDGET: --bb-mobile-inset is the distance from the viewport edge to the
 * OUTER edge of a dashboard's cards, below 480px. Change it here and all four
 * dashboards move. Each layer takes its share OF the budget instead of adding
 * to it: the theme gutter and every intermediate wrapper go to 0 and exactly
 * one layer (the dashboard container) carries the inset.
 *
 * 14px = the Member Dashboard's existing result (#1416: 10px dashboard
 * padding + 4px container margin) which John already accepted, and materially
 * less than the Admin dashboard's old 26px to card edge / 48px to content.
 * Card-internal padding (20-22px) is component styling, not page budget, and
 * is untouched (spacing-only card, no redesign).
 *
 * Scoping: everything is gated on body.bb-dashboard-page (added by
 * bb_dashboard_inset_body_class() in battersbox-roadmap.php for exactly the
 * four dashboard pages), so the theme's .site-main padding is NOT changed
 * for any ordinary page. Tablet/desktop are untouched (max-width:479px).
 * Specificity `html body.bb-dashboard-page ...` beats hello-elementor's
 * `body:not([class*=elementor-page-]) .site-main` (0,2,1) and the in-page
 * <style> blocks each dashboard prints after this file.
 */
@media (max-width: 479px) {
    :root { --bb-mobile-inset: 14px; }

    /* Theme gutter: neutralised on dashboard pages only. */
    html body.bb-dashboard-page .site-main {
        padding-left: 0;
        padding-right: 0;
        padding-inline: 0;
    }

    /* Admin / Coach / Instructor: the one layer that carries the inset. */
    html body.bb-dashboard-page .bb-ad-container,
    html body.bb-dashboard-page .bb-cd-container,
    html body.bb-dashboard-page .bb-id-container {
        padding-left: var(--bb-mobile-inset);
        padding-right: var(--bb-mobile-inset);
    }

    /* Member: .gymmaster-dashboard keeps #1415's -35px ancestor cancel (not
       budget, Elementor wrappers) and carries the inset; the container's own
       margin/padding drop to 0 so nothing stacks on top. */
    html body.bb-dashboard-page .gymmaster-dashboard {
        padding-left: var(--bb-mobile-inset);
        padding-right: var(--bb-mobile-inset);
    }
    html body.bb-dashboard-page .dashboard-container {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* Page background follows the active theme so no light strip shows in
       the overscroll area. --bb-dash-bg-cN are declared by
       wp_add_inline_style() in battersbox-roadmap.php (Card #1116 forbids
       off-brand hex literals in assets/*.css) and mirror each dashboard's
       own page background. */
    html:has(.bb-ad.theme-c1), body.bb-dashboard-page:has(.bb-ad.theme-c1),
    html:has(.bb-cd-theme-c1), body.bb-dashboard-page:has(.bb-cd-theme-c1),
    html:has(.bb-id), body.bb-dashboard-page:has(.bb-id),
    html:has(.gymmaster-dashboard.gm-color-v1-c1), body.bb-dashboard-page:has(.gymmaster-dashboard.gm-color-v1-c1) {
        background-color: var(--bb-dash-bg-c1) !important;
    }
    html:has(.bb-ad.theme-c2), body.bb-dashboard-page:has(.bb-ad.theme-c2),
    html:has(.bb-cd-theme-c2), body.bb-dashboard-page:has(.bb-cd-theme-c2),
    html:has(.gymmaster-dashboard.gm-color-v1-c2), body.bb-dashboard-page:has(.gymmaster-dashboard.gm-color-v1-c2) {
        background-color: var(--bb-dash-bg-c2) !important;
    }
    html:has(.bb-ad.theme-c3), body.bb-dashboard-page:has(.bb-ad.theme-c3),
    html:has(.bb-cd-theme-c3), body.bb-dashboard-page:has(.bb-cd-theme-c3),
    html:has(.gymmaster-dashboard.gm-color-v1-c3), body.bb-dashboard-page:has(.gymmaster-dashboard.gm-color-v1-c3) {
        background-color: var(--bb-dash-bg-c3) !important;
    }
}