/* Shared mobile spacing, including pages without charts. Desktop rules stay in Tabler/page CSS. */
@media (max-width: 768px) {
    html[data-client-layout="mobile"] body {
        --qh-mobile-page-padding: 8px;
        --qh-mobile-content-padding: 8px;
    }

    html[data-client-layout="mobile"] .page-body,
    html[data-client-layout="mobile"] .qh-page-heading,
    html[data-client-layout="mobile"] .page-wrapper > .page-header,
    html[data-client-layout="mobile"] .page-wrapper > #pageNav {
        padding-left: var(--qh-mobile-page-padding) !important;
        padding-right: var(--qh-mobile-page-padding) !important;
    }

    html[data-client-layout="mobile"] .page-body > .container,
    html[data-client-layout="mobile"] .page-body > .container-fluid,
    html[data-client-layout="mobile"] .page-body > .container-normal,
    html[data-client-layout="mobile"] .page-wrapper > .page-header > .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html[data-client-layout="mobile"] .page > .navbar > .container,
    html[data-client-layout="mobile"] .page > .navbar > .container-fluid,
    html[data-client-layout="mobile"] .page > .navbar > .container-xl {
        padding-left: var(--qh-mobile-page-padding);
        padding-right: var(--qh-mobile-page-padding);
    }

    html[data-client-layout="mobile"] .page-body .card {
        --tblr-card-spacer-x: var(--qh-mobile-content-padding);
        --tblr-card-cap-padding-x: var(--qh-mobile-content-padding);
    }

    /* Opt-in wide content scrolls locally without stretching the mobile page. */
    html[data-client-layout="mobile"] .page-body [data-mobile-scroll] {
        min-width: 0;
        overflow-x: auto;
    }

    /* Full-width sections on text-only landing pages use the same horizontal rhythm. */
    html[data-client-layout="mobile"] .page-body > .container-fluid > .container-fluid {
        padding-left: var(--qh-mobile-content-padding) !important;
        padding-right: var(--qh-mobile-content-padding) !important;
    }

    /* Do not change table cell spacing, row heights, buttons or compact charts. */
    html[data-client-layout="mobile"] [data-chart-layout] {
        min-height: 0 !important;
        max-width: 100%;
        height: var(--qh-chart-height) !important;
    }

    html[data-client-layout="mobile"] .qh-chart-heading,
    html[data-client-layout="mobile"] .qh-chart-legend {
        padding: 4px var(--qh-mobile-content-padding);
        overflow-wrap: anywhere;
    }
    html[data-client-layout="mobile"] .qh-chart-heading { font-size: 14px; }
    html[data-client-layout="mobile"] .qh-chart-heading small { display: block; color: var(--tblr-secondary-color, #667382); }
    html[data-client-layout="mobile"] .qh-chart-legend { display: flex; flex-wrap: wrap; gap: 6px; }
    html[data-client-layout="mobile"] .qh-chart-legend button { min-height: 32px; padding: 4px 8px; }
    html[data-client-layout="mobile"] .qh-chart-legend button[aria-pressed="false"] { opacity: 0.5; }
    html[data-client-layout="mobile"] .qh-chart-data { overflow: auto; max-height: 60vh; }
    html[data-client-layout="mobile"] #pattern-archive main { padding-left: 8px; padding-right: 8px; }
}