/**
 * mobile.css - Mobile/tablet layer for the Resume Builder.
 *
 * EVERY rule in this file lives inside a max-width media query, so the
 * desktop layout (which is already correct) is never touched. Load this
 * AFTER templates.css and after the inline <style> block in index.php.
 *
 * Breakpoint: 1024px. The desktop workspace is a hard `450px 1fr` grid;
 * below ~1024px the 450px editor leaves too little room for a 794px A4
 * page, so that is where we hand over to the single-panel tab layout.
 */

/* ==========================================================================
   1. TABLET / MOBILE  (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {

    /* --- 1a. Unstack the workspace -------------------------------------- */
    /* The 100vh panel heights + inner overflow-y are what create the
       "scroll trap" on touch: the page and the panel fight over the same
       gesture. On mobile the panels become plain, full-height blocks and
       the PAGE does all the scrolling. */
    /* minmax(0, 1fr), not 1fr. A grid item defaults to min-width:auto, which
       means it refuses to shrink below its content - and this column's
       content is a 794px A4 page. With plain `1fr` the column silently
       inflates to 794px, the body's `overflow-x: clip` crops the excess, and
       the page LOOKS broken exactly as it did before. minmax(0,...) lets the
       column obey the viewport so the scaler has a real width to work with. */
    .rb-workspace {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        padding: 1rem 0.75rem;
    }

    .rb-editor,
    .rb-preview-panel {
        height: auto;
        min-height: 0;
        min-width: 0; /* same reason: these are the grid/flex children */
    }

    .rb-canvas-container { min-width: 0; }

    .wizard-body {
        overflow-y: visible;
        flex-grow: 0;
        padding: 1rem;
    }

    .wizard-header { padding: 1rem; }
    .wizard-footer { padding: 0.85rem 1rem; }

    .rb-page { --rb-hero-h: 0px; }

    /* --- 1b. Tab switching ---------------------------------------------- */
    /* mobile.js puts .rb-mobile-view-edit / .rb-mobile-view-preview on the
       workspace. Only one panel is in the DOM flow at a time. */
    .rb-workspace.rb-mobile-view-edit .rb-preview-panel { display: none; }
    .rb-workspace.rb-mobile-view-preview .rb-editor { display: none; }

    /* --- 1c. Room for the fixed bottom bar ------------------------------ */
    body.rb-has-mobile-bar {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }
}

/* ==========================================================================
   2. PHONE  (<= 640px)
   ========================================================================== */
@media (max-width: 640px) {

    /* --- 2a. Collapse the hard-coded 2-column field grid ----------------- */
    /* This is a Tailwind utility in the markup with no responsive prefix,
       so it can only be undone here. */
    .wizard-step .grid.grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    /* --- 2b. 16px inputs: below this, iOS Safari zooms the whole page in
       on focus and the user is left stranded mid-form. ------------------- */
    .rb-input,
    .rb-textarea,
    #skill-input,
    #hobby-input,
    #qr-url,
    #qr-label {
        font-size: 16px;
    }

    .rb-form-group { margin-bottom: 1rem; }

    /* --- 2c. Photo row: stack instead of squeezing the notice text ------- */
    .wizard-step .flex.items-center.gap-4.mb-2 {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
        padding: 1rem;
    }

    /* --- 2d. Signature row ---------------------------------------------- */
    #signature-upload-trigger { width: 100%; max-width: 160px; }

    /* --- 2e. Quick Actions header wraps rather than overflows ------------ */
    .wizard-header .flex.justify-between.items-center.mb-4 {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* --- 2f. Bigger tap targets on the wizard footer --------------------- */
    #prev-step, #next-step {
        padding: 0.7rem 1.1rem;
        min-height: 44px;
    }
}

/* ==========================================================================
   3. MOBILE STEP RAIL  (built by mobile.js)
   ========================================================================== */
.rb-step-rail,
.rb-step-caption { display: none; }

@media (max-width: 1024px) {
    .rb-step-rail {
        display: flex;
        align-items: center;
        gap: 0;
        padding: 0.9rem 1rem;
        border-bottom: 1px solid #e2e8f0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .rb-step-rail::-webkit-scrollbar { display: none; }

    .rb-step-node {
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: none;
        background: #e2e8f0;
        color: #94a3b8;
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-family: inherit;
        transition: background 0.2s, color 0.2s, transform 0.2s;
        padding: 0;
    }
    .rb-step-node:focus-visible { outline: 2px solid #00bcd4; outline-offset: 2px; }

    /* Steps already passed */
    .rb-step-node.is-done {
        background: #cffafe;
        color: #0891b2;
    }

    /* Current step */
    .rb-step-node.is-active {
        background-image: linear-gradient(to right, #0066cc, #00bcd4);
        color: #fff;
        transform: scale(1.12);
        box-shadow: 0 4px 12px rgba(0, 102, 204, 0.35);
    }

    .rb-step-link {
        flex: 1 1 auto;
        min-width: 10px;
        height: 2px;
        background: #e2e8f0;
        transition: background 0.2s;
    }
    .rb-step-link.is-done { background: #67e8f9; }

    .rb-step-caption {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.75rem 1rem 0;
    }
    .rb-step-caption-title {
        font-size: 0.95rem;
        font-weight: 700;
        color: #1e293b;
    }
    .rb-step-caption-count {
        font-size: 0.72rem;
        font-weight: 600;
        color: #94a3b8;
        white-space: nowrap;
    }
}

/* ==========================================================================
   4. PREVIEW PANEL ON MOBILE
   ========================================================================== */
@media (max-width: 1024px) {

    /* Toolbar sticks under the site header while scrolling a long resume. */
    .customization-toolbar {
        position: sticky;
        top: 0;
        z-index: 40;
        padding: 0.6rem;
    }

    /* --- 4a. The A4 page --------------------------------------------------
       .a4-paper is a fixed 793.7px (210mm). We scale it down with a
       transform rather than changing its width, because changing the width
       would reflow the resume itself and the on-screen preview would stop
       matching the PDF. The transform is purely visual: layout, fonts and
       line breaks stay identical to desktop.

       mobile.js sets --rb-a4-scale and pins the container height, because a
       transform does not shrink the element's layout box - without that we
       would be left with hundreds of pixels of dead space underneath. */
    .rb-canvas-container {
        padding: 0.75rem;
        overflow: visible;
        flex-grow: 0;
        align-items: flex-start;
    }
}

/* ==========================================================================
   4b. THE A4 SCALER  (NOT in a media query - deliberately)
   --------------------------------------------------------------------------
   These rules are width-agnostic and gated on .rb-a4-scaled, which mobile.js
   adds ONLY when the page genuinely cannot fit its column at full size.

   Why not restrict it to mobile? The workspace needs
       450 (editor) + 32 (gap) + 48 (padding) + 64 (canvas padding) + 794 (A4)
       = ~1388px
   before the A4 fits unscaled. Below that - an iPad Air in landscape (1180),
   a 1366 laptop - the ORIGINAL layout overflows and the body's
   `overflow-x: clip` silently crops the right edge off the resume. Same bug
   as the phone, just less obvious.

   At >= 1388px the computed scale is exactly 1, the class is never added, and
   nothing below applies: a genuine no-op on a normal desktop.
   ========================================================================== */

/* The desktop grid is `450px 1fr`. A grid item defaults to min-width:auto, so
   that `1fr` column can never be narrower than its 794px content: below
   ~1388px it pushes the workspace wider than the screen and the overflow is
   clipped. minmax(0, 1fr) lets it obey the viewport instead, at which point
   the scaler takes over. Above ~1388px the 1fr share already exceeds 794px,
   so this computes to exactly the same column width as before. */
@media (min-width: 1025px) {
    .rb-workspace { grid-template-columns: 450px minmax(0, 1fr); }
    .rb-preview-panel { min-width: 0; }
}

/* Global, and load-bearing: .rb-canvas-container is display:flex, so the page
   is a flex item defaulting to flex-shrink:1. As soon as the column is
   allowed to be narrower than 794px, the browser squashes the page to its
   ~542px min-content width. That REFLOWS the resume - different line breaks,
   different page count, and a preview that no longer matches the PDF. The
   page must always keep its true 210mm width and only ever be scaled
   visually. */
.rb-canvas-container .a4-paper { flex: 0 0 auto; }

.rb-canvas-container.rb-a4-scaled {
    /* flex-start, not the desktop default of center: the page's layout box is
       wider than the container, and `center` would put its left edge at a
       negative offset. Since the transform scales from top-left, the resume
       would be dragged off the left of the screen. */
    justify-content: flex-start;
}

.rb-canvas-container.rb-a4-scaled .a4-paper {
    transform: scale(var(--rb-a4-scale, 1));
    transform-origin: top left;
    margin: 0;
}

/* --- Export escape hatch --------------------------------------------------
   html2pdf rasterises the live element. Handing it a transformed node risks a
   scaled, blurred or cropped PDF, so application.js flips this class on for
   the duration of the export and the page renders at its true 210mm - a phone
   produces the same PDF as a desktop. */
body.rb-exporting .rb-canvas-container .a4-paper { transform: none !important; }
body.rb-exporting .rb-canvas-container {
    height: auto !important;
    overflow: visible !important;
}
body.rb-exporting .rb-mobile-bar { display: none !important; }

/* ==========================================================================
   5. BOTTOM TAB BAR  (built by mobile.js)
   ========================================================================== */
.rb-mobile-bar { display: none; }

@media (max-width: 1024px) {
    .rb-mobile-bar {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1010;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(10px);
        /* Remove the old solid border */
        /* border-top: 1px solid #e2e8f0; */
        box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Add this new block right below .rb-mobile-bar */
    .rb-mobile-bar::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background-image: linear-gradient(to right, #0066cc, #00bcd4);
    }

    .rb-mobile-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 64px;
        border: none;
        background: none;
        cursor: pointer;
        font-family: inherit;
        font-size: 0.68rem;
        font-weight: 600;
        color: #94a3b8;
        transition: color 0.15s;
        -webkit-tap-highlight-color: transparent;
        padding: 0;
    }
    .rb-mobile-tab i { font-size: 1.05rem; }
    .rb-mobile-tab:focus-visible { outline: 2px solid #00bcd4; outline-offset: -2px; }
    .rb-mobile-tab.is-active { color: #0066cc; }
    .rb-mobile-tab.rb-tab-download { color: #10b981; }
    .rb-mobile-tab:disabled { opacity: 0.55; cursor: default; }
}

/* ==========================================================================
   6. MODAL STACKING FIX
   --------------------------------------------------------------------------
   Pre-existing bug, not strictly mobile: the site header is z-index 1000 but
   these modals were 60/70/80, so a sticky header painted straight over the
   top of them. Raised above both the header and the new tab bar.
   ========================================================================== */
#cropper-modal { z-index: 1100; }
.rb-ai-modal-backdrop { z-index: 1100; }
.rb-share-backdrop { z-index: 1100; }
#rb-toast-container { z-index: 1200; }

/* ==========================================================================
   7. MODAL SIZING ON SMALL SCREENS
   ========================================================================== */
@media (max-width: 640px) {

    /* --- 7a. Cropper -----------------------------------------------------
       The crop canvas has a 320px backing store and cropper.js does all of
       its pan/zoom maths in those canvas pixels (panX = clientX - startX).
       CSS-resizing the canvas would break the 1:1 mapping and every drag
       would track slower than the finger. So the canvas is left at exactly
       320px and the DIALOG padding is trimmed instead:
           320 + 2*13.6px padding = 347px  ->  fits any screen >= 348px.
       360px is the narrowest phone in real use, so this covers the field;
       the backdrop scrolls as a safety net on anything smaller. */
    #cropper-modal {
        padding: 0.5rem;
        overflow: auto;
        justify-content: flex-start;
    }
    .cropper-dialog {
        padding: 0.85rem !important;
        margin: auto;
    }

    /* --- 7b. AI suggestions + share: bottom-sheet feel ------------------- */
    .rb-ai-modal-backdrop,
    .rb-share-backdrop {
        padding: 0;
        align-items: flex-end;
    }
    .rb-ai-modal-dialog,
    .rb-share-dialog {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .rb-ai-modal-header,
    .rb-ai-modal-body,
    .rb-ai-modal-footer { padding-left: 1rem; padding-right: 1rem; }
    .rb-share-body { padding: 1rem; }

    .rb-share-tile { flex: 0 0 calc(33.333% - 0.4rem); }
    .rb-share-copy-row { flex-direction: column; }
    .rb-share-copy-btn { justify-content: center; }

    #rb-toast-container {
        top: 0.75rem;
        left: 0.75rem;
        right: 0.75rem;
        max-width: none;
    }
}


/* ==========================================================================
    TOOLBAR POPOVER POSITIONING
   --------------------------------------------------------------------------
   The inline mobile block in index.php pins every popover's right edge to
   the trigger's right edge (`left: auto; right: 0`). That works for the
   Colour picker - which sits on the right of the toolbar - but breaks the
   Template picker, which sits on the LEFT: a 342px popover anchored right
   of a trigger 40px from the viewport's left edge is guaranteed to slide
   off-screen to the left. Override per-dropdown so each one opens toward
   the interior of the viewport.
   ========================================================================== */
@media (max-width: 640px) {

    /* Template picker is the leftmost trigger. Anchor its popover to the
       trigger's LEFT edge and let it expand right. Its own inline max-width
       (`min(420px, 100vw - 3rem)`) already caps it at the viewport. */
    #template-dropdown .rb-popover {
        left: 0;
        right: auto;
    }

    /* Colour picker: keep the existing right-anchor behaviour (240px popover,
       always fits) but add an explicit max-width in case flex-wrap in the
       toolbar leaves it closer to the left of the viewport than expected. */
    #color-dropdown .rb-popover {
        max-width: calc(100vw - 1.5rem);
    }
}


@media (prefers-reduced-motion: reduce) {
    .rb-step-node { transition: none; }
    .rb-step-node.is-active { transform: none; }
}