/*
 * SaaS mobile layout.
 * Applied below the Tailwind mobile breakpoint. Desktop styles remain untouched.
 */
@media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    #app {
        width: 100%;
        min-width: 0;
    }

    #app [class*="max-w-"] {
        max-width: 100% !important;
    }

    #app [class*="min-w-"] {
        min-width: 0 !important;
    }

    #app .grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
    }

    #app .grid > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Stack the public header rows, including desktop-only navigation links. */
    #app > nav > div > div,
    #app > header > div,
    #app > footer > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto !important;
        min-height: auto !important;
        padding: 1rem !important;
        gap: .75rem;
    }

    #app > nav > div > div > div:nth-child(n+2) {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100%;
    }

    /* User-center headers group brand and links inside one wrapper. */
    #app > nav > div > div > div:first-child {
        display: block !important;
        width: 100%;
    }

    #app > nav > div > div > div > div + div {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100%;
    }

    #app > nav > div > div > div:nth-child(n+2) > * + *,
    #app > nav > div > div > div:nth-child(n+2) [class*="space-x-"] > * + *,
    #app > nav > div > div > div > div + div > * + *,
    #app > nav > div > div > div > div + div [class*="space-x-"] > * + * {
        margin-left: 0 !important;
        margin-top: .625rem !important;
    }

    /* Stack primary action groups and keep long CTA text readable. */
    #app .flex.space-x-3,
    #app .flex.space-x-4,
    #app .flex.space-x-8 {
        flex-wrap: wrap;
    }

    #app .flex.space-x-3 > * + *,
    #app .flex.space-x-4 > * + *,
    #app .flex.space-x-8 > * + * {
        margin-left: 0 !important;
        margin-top: .75rem !important;
    }

    /* Dashboard tab groups and section headers become vertical blocks. */
    #app > main > .flex {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Section headers put the title above its action buttons. */
    #app main .flex.justify-between.items-center {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #app main .flex.justify-between.items-center .flex.space-x-3 {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* The admin screen changes from a fixed side-by-side shell to one column. */
    #app > .flex.h-screen {
        display: block !important;
        height: auto !important;
        min-height: 100dvh;
        overflow: visible !important;
    }

    #app > .flex.h-screen > .w-64 {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        flex: none !important;
    }

    #app > .flex.h-screen > .flex-1 {
        width: 100%;
        height: auto !important;
        overflow: visible !important;
    }

    #app .sidebar-item span.flex {
        display: flex !important;
        align-items: center;
    }

    #app main.overflow-y-auto {
        overflow: visible !important;
        padding: 1rem !important;
    }

    #app .overflow-x-auto {
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    h1,
    h2,
    h3,
    p,
    li,
    label,
    span,
    button,
    input,
    select,
    textarea {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    #app h1 {
        font-size: clamp(2rem, 9vw, 2.75rem) !important;
        line-height: 1.15 !important;
    }

    #app h2 {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
        line-height: 1.25 !important;
    }

    img,
    svg,
    video {
        max-width: 100%;
        height: auto;
    }

    pre,
    code {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    /* Keep this sheet in document coordinates so mobile full-page capture
       does not repeat a fixed panel at every captured viewport. */
    #app .float-panel {
        position: absolute !important;
        inset: 4.5rem .75rem auto !important;
        transform: none !important;
        width: auto;
        max-height: calc(100dvh - 6rem);
        overflow: auto;
        z-index: 100;
    }

    #app .float-panel > div {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 7rem);
        overflow: auto;
    }

    #app [class*="fixed inset-0"] {
        padding: .75rem !important;
    }

    #app [class*="fixed inset-0"] > div {
        width: 100% !important;
        max-width: calc(100vw - 1.5rem) !important;
        max-height: min(88dvh, 56rem);
        overflow: auto !important;
    }
}