/* ═══════════════════════════════════════════════════════════════
   Mobile Optimizations — Global Quick Wins
   ──────────────────────────────────────────────────────────────
   Loaded after base.css. Targets <=767px viewport (matches
   Tailwind `md:` breakpoint). Web (≥md) layout completely
   unchanged — every rule lives inside @media (max-width: 767px)
   or affects iOS-specific behaviour that desktop ignores.
   ═══════════════════════════════════════════════════════════════ */

/* ── iOS form-zoom fix (applies on touch devices regardless of width) ──
   Safari iOS auto-zooms the viewport when a focused input has
   font-size < 16px. We pin all interactive form controls to 16px so
   iOS leaves the zoom level alone. Desktop renders are visually
   identical because text-base is 16px on most templates already. */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ── Touch-target minimums on mobile ──
   WCAG 2.5.5 + Apple HIG recommend 44×44px. Tighten only on small
   viewports — desktop hover/precision pointer doesn't need it. */
@media (max-width: 767px) {
    button,
    a.btn,
    [role="button"],
    .step-collapse-btn,
    .step-delete-btn,
    .toolbar-btn,
    .auto-var-btn,
    .suggestion-btn {
        min-height: 36px; /* close-to-44 without breaking dense toolbars */
    }

    /* Icon-only buttons get a generous tap zone via padding. */
    button.icon-only,
    [aria-label][role="button"]:empty {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ── Table horizontal scroll on small screens ──
   Most templates render tables that overflow on phones. Wrap the
   table in a scrollable parent without modifying templates by
   styling the table itself when it's the direct child of a card. */
@media (max-width: 767px) {
    /* If the page wrapped tables in a div with .table-responsive (Bootstrap
       habit) or .overflow-x-auto, no work needed. For bare tables, apply
       block + scroll directly so they don't bust the page width. */
    table:not(.no-mobile-scroll) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    /* Reset display so cell layout still works. */
    table:not(.no-mobile-scroll) > * {
        display: revert;
    }
}

/* ── Pre/code blocks: wrap instead of horizontal scroll ──
   Long JSON dumps in dev surfaces are admin-only; this rule targets
   user-visible <pre> blocks (errors, code samples in support). */
@media (max-width: 767px) {
    pre,
    code {
        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

/* ── Modal height cap ──
   Already applied to button-builder modal explicitly. Backstop rule
   for any modal that forgot to opt in: cap height + scroll body. */
@media (max-width: 767px) {
    .modal-white-glass,
    [role="dialog"] > .modal-content,
    .modal-content {
        max-height: 92vh;
        display: flex;
        flex-direction: column;
    }
}

/* ── Sidebar guarantee: off-canvas on mobile ──
   App sidebar is fixed-positioned on desktop. On phones it must
   become a drawer with a scrim. Existing JS already toggles
   .sidebar-open / #sidebarOverlay; this rule just makes sure the
   sidebar doesn't push content sideways below md. */
@media (max-width: 1023px) {
    .app-layout > .sidebar:not(.sidebar-open) {
        transform: translateX(-100%);
    }
    .app-layout > .sidebar {
        transition: transform 0.2s ease;
    }
    .sidebar-overlay {
        backdrop-filter: blur(2px);
    }
}

/* ── Content wrapper: tighter padding on phones ──
   Default spacing-6 (24px) eats horizontal real estate on 360px
   viewports. Drop to spacing-4 (16px) below md. */
@media (max-width: 767px) {
    .content-wrapper {
        padding: var(--spacing-4, 16px);
    }
}

/* ── Stack-on-mobile helper ──
   Add `.stack-mobile` to any flex/grid row that needs to switch to
   a vertical stack below md. Templates can opt in without rewriting
   their flex classes; we just override flex-direction/grid-template
   at small widths. */
@media (max-width: 767px) {
    .stack-mobile {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .stack-mobile > * {
        width: 100% !important;
    }
}

/* ── Long-text overflow guard ──
   Username/email cells often exceed phone width. Apply truncate via
   utility on any element with [data-mobile-truncate] without
   touching templates. */
@media (max-width: 767px) {
    [data-mobile-truncate] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}

/* ── Account switcher dropdown → bottom sheet on phones ──
   The header switcher uses `.absolute right-0 mt-2 min-w-[14rem]
   max-w-[20rem]` which still hugs the top-right on a 360px screen
   and forces awkward thumb travel. Convert it to a bottom sheet
   below sm without touching the template — match the dropdown by
   its enclosing structure (small absolute panel with mt-2).
   Limited blast radius: only triggers on elements explicitly
   tagged with `.account-switcher-panel` or descendants of
   `.relative` containers that include `[data-account-switcher]`. */
@media (max-width: 639px) {
    [data-account-switcher-panel],
    .account-switcher-panel {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 70vh;
        overflow-y: auto;
        z-index: 300;
    }
}

/* ── Onboarding checklist tighter on mobile ──
   Existing onboarding component renders a list of steps. Pad them
   tighter and force vertical layout below sm so the steps are
   readable without horizontal scroll. */
@media (max-width: 639px) {
    .onboarding-checklist,
    [data-onboarding-checklist] {
        padding: 1rem !important;
    }
    .onboarding-checklist .step-row,
    [data-onboarding-checklist] .step-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
}

/* ── First-time profile completion form ──
   Stacks 2-column rows to single column below sm so labels + inputs
   don't squeeze. */
@media (max-width: 639px) {
    .profile-completion-grid {
        grid-template-columns: 1fr !important;
    }
}