/* =====================================================================
 * RecruiterX — Global Mobile Responsive Layer
 * Added 2026-05-01 (claude/responsive-mobile-design-hbwka).
 *
 * Every rule lives inside a max-width media query, so desktop layouts
 * are completely untouched. We progressively shrink, stack, and scroll
 * the dense, horizontally-laid-out app pages into something usable on
 * a phone (≤768px) and tighten further on small phones (≤480px).
 *
 * Conventions:
 *   - Use !important sparingly, only to beat hard-coded inline styles
 *     and tightly-specific Tailwind classes from the page templates.
 *   - Don't introduce new colors / typography — only layout.
 *   - All targeted selectors are real classes in the codebase
 *     (verified with grep against /templates).
 * ===================================================================== */

/* =========================================================
 * 1. Tablet & phone shared rules (≤1024px)
 * ========================================================= */
@media (max-width: 1024px) {
    /* Inbox three-pane shell collapses earlier so iPads behave too. */
    .inbox-shell {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: calc(100vh - 80px);
    }
    .inbox-shell .inbox-thread-pane,
    .inbox-shell .inbox-feed-pane,
    .inbox-shell .inbox-left-rail {
        min-height: 60vh;
    }
}

/* =========================================================
 * 2. Phone rules (≤768px)
 * ========================================================= */
@media (max-width: 768px) {

    /* ------ Global text sizing & overflow guard ------ */
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }
    body {
        font-size: 15px;
    }

    /* Prevent oversized hero text from blowing out the viewport. */
    h1 { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; line-height: 1.2 !important; }
    h2 { font-size: clamp(1.3rem, 5.5vw, 1.9rem) !important; line-height: 1.25 !important; }
    h3 { font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important; line-height: 1.3 !important; }

    /* ------ Containers / max-widths ------ */
    .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl,
    .container, .features-content, .stats-section,
    .header-content, .trust-content, .hero,
    .nav-inner, .footer-grid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* ------ Tailwind grid → single column on mobile ------ */
    /* Any explicit md/lg multi-column grid should collapse to 1 column
     * on phones. We only override classes that target ≥md anyway, so
     * desktop is unchanged. */
    .grid.grid-cols-2,
    .grid.grid-cols-3,
    .grid.grid-cols-4,
    .grid.grid-cols-5,
    .grid.grid-cols-6 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    /* Stat / KPI strips stay 2-up — single-column makes the dashboard
     * feel like an endless ribbon. */
    .grid.grid-cols-2.md\:grid-cols-3,
    .grid.grid-cols-3.lg\:grid-cols-6,
    #progress-gauges,
    #stats-gauges {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Inline grids hand-rolled in template <style> blocks. */
    .pricing-grid,
    .features-grid,
    .stats-grid,
    .search-form,
    .hero-grid,
    .problem-grid,
    .solution-grid,
    .steps-grid,
    .faq-grid,
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* ------ Navbar (base_modern.html) ------ */
    nav.glass {
        padding: 0.65rem 0.85rem !important;
    }
    /* The right-side action cluster (theme/notifs/profile) should
     * collapse spacing so it doesn't push the logo off-screen. */
    nav .flex.items-center.space-x-4 {
        gap: 0.35rem !important;
    }
    nav .flex.items-center.space-x-4 > * + * {
        margin-left: 0 !important;
    }
    /* Theme toggle "Light"/"Dark" label is dead weight on phones. */
    #theme-text { display: none !important; }
    /* Notification bell chrome fits but reduce hit-area only. */
    nav button { min-height: 40px; min-width: 40px; }

    /* Mobile slide-in menu.
     *
     * Bug we're working around: nav.glass has `transform: translateZ(0)`
     * (and backdrop-filter), which makes it the containing block for
     * `position: fixed` descendants. That breaks `h-full` (height: 100%
     * resolved against the nav, ~60px tall) and traps `top:0/left:0`
     * inside the nav box — so the panel's white background only covered
     * the navbar, and menu items spilled below with the page showing
     * through. Force viewport-relative height, an explicit opaque
     * background, and stack above everything. */
    #mobile-menu.mobile-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: min(82vw, 320px) !important;
        height: 100vh !important;
        height: 100dvh !important; /* iOS Safari URL bar */
        background: #ffffff !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding-bottom: env(safe-area-inset-bottom);
    }
    [data-theme="dark"] #mobile-menu.mobile-menu,
    .dark #mobile-menu.mobile-menu {
        background: #1c1c1e !important;
    }
    /* Backdrop overlay so the rest of the page is visibly dimmed
     * while the menu is open. */
    #mobile-menu.mobile-menu.active::after {
        content: '';
        position: fixed;
        top: 0;
        left: min(82vw, 320px);
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: -1;
        pointer-events: none;
    }

    /* ------ Footer ------ */
    footer.glass {
        margin-top: 3rem !important;
        padding: 1.5rem 0 !important;
    }
    footer .flex.flex-col.md\:flex-row {
        text-align: center;
    }
    footer .flex.space-x-6 {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    /* ------ Tables: horizontal scroll instead of squeezed cells ------ */
    /* Wrap tables in their natural overflow container; if a table has
     * no wrapper, allow horizontal scroll on the table itself. */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        white-space: nowrap;
    }
    /* Tables that are explicitly wrapped already handle scroll — keep
     * normal table layout inside their container. */
    .overflow-x-auto > table,
    .table-wrap > table {
        display: table;
        white-space: normal;
    }

    /* ------ Modals: full-screen on phones ------ */
    .modal,
    .modal-content,
    [role="dialog"] > div,
    .fixed.inset-0 > .glass,
    .fixed.inset-0 .max-w-2xl,
    .fixed.inset-0 .max-w-3xl,
    .fixed.inset-0 .max-w-4xl {
        max-width: 100vw !important;
        width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* ------ Buttons grouped in a row stack vertically when crowded ------ */
    .hero-btns,
    .cta-btns {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .hero-btns .btn,
    .cta-btns .btn,
    .btn-group .btn { width: 100%; }

    /* Form inputs full width by default */
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        max-width: 100%;
        font-size: 16px; /* prevents iOS Safari zoom-on-focus */
    }

    /* ------ Cards / glass panels — tighter padding ------ */
    .glass {
        border-radius: 14px;
    }
    main {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    /* ------ Page-specific: Search ------ */
    /* search_modern.html flips its results into a 3-col grid; keep that
     * for desktop but stack on phones. */
    #results-grid {
        grid-template-columns: 1fr !important;
    }

    /* ------ Page-specific: Inbox three-pane ------ */
    .inbox-shell {
        padding: 0.5rem !important;
        gap: 0.5rem !important;
    }
    .inbox-pane-header {
        padding: 0.7rem 0.85rem !important;
        font-size: 0.95rem;
    }
    /* Mobile inbox uses a "drawer" pattern: feed by default, thread
     * slides over when a row is opened. The template's existing
     * `.open-thread` JS (set on row click, cleared by #thread-close)
     * already does the work — we just need the same display rules to
     * apply at phone widths. */
    .inbox-shell:not(.open-thread) .inbox-thread-pane { display: none !important; }
    .inbox-shell.open-thread .inbox-left-rail,
    .inbox-shell.open-thread .inbox-feed-pane { display: none !important; }
    .inbox-shell.open-thread .inbox-thread-pane { display: flex !important; }
    /* Force the existing Back button visible on phones whenever a
     * thread is open. Inline `display:none` is the page default; the
     * JS shows it via inline-flex once a thread loads, but covering
     * it here means a hard refresh on a phone with a thread already
     * open still works. */
    .inbox-shell.open-thread #thread-close { display: inline-flex !important; }

    /* ------ Page-specific: Campaign Manager (campaigns_pro) ------ */
    /* Common pattern: 300px sidebar + 1fr main → stack vertically. */
    [style*="grid-template-columns: 300px 1fr"],
    [style*="grid-template-columns:300px 1fr"] {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns: repeat(5, 1fr)"],
    [style*="grid-template-columns:repeat(4,1fr)"],
    [style*="grid-template-columns:repeat(5,1fr)"] {
        grid-template-columns: 1fr !important;
    }
    /* Inline 2-col stat strips remain useful at 2-up. */
    [data-mobile-keep-2col] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ------ Drilldown / right-side panels become bottom sheets ------ */
    .drilldown-panel,
    .side-panel,
    .right-panel,
    aside.fixed.right-0 {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 80vh !important;
        border-radius: 16px 16px 0 0 !important;
        overflow-y: auto !important;
    }

    /* ------ Profile / dropdown menus full-width ------ */
    #profile-menu,
    .nav-dropdown-menu {
        right: 0.5rem !important;
        left: 0.5rem !important;
        width: auto !important;
        max-width: calc(100vw - 1rem) !important;
    }

    /* ------ Toasts ------ */
    .fixed.bottom-4.right-4 {
        left: 0.75rem !important;
        right: 0.75rem !important;
        bottom: 0.75rem !important;
        max-width: calc(100vw - 1.5rem);
    }

    /* ------ Hide cosmetic-only desktop adornments on phones ------ */
    .hero-visual,
    .glow,
    .desktop-only {
        display: none !important;
    }

    /* ------ Tap target floor: 40px on anything clickable ------ */
    a, button, input[type="submit"], input[type="button"], .btn {
        min-height: 40px;
    }
    /* Skip the floor for inline icon-only links in dense lists. */
    .icon-only, .nav-dropdown-menu a, td a, th a {
        min-height: 0;
    }
}

/* =========================================================
 * 3. Small phone rules (≤480px)
 * ========================================================= */
@media (max-width: 480px) {
    .grid.grid-cols-2,
    .grid.grid-cols-2.md\:grid-cols-3,
    .grid.grid-cols-3.lg\:grid-cols-6,
    #progress-gauges,
    #stats-gauges {
        grid-template-columns: 1fr !important;
    }

    /* Hide the `recruiterX` wordmark — keep only the logo mark. */
    nav.glass .font-semibold.text-xl { display: none !important; }

    /* Squeeze nav further. */
    nav.glass {
        padding: 0.5rem 0.6rem !important;
    }

    /* Footer copyright wraps, keep it readable. */
    footer p { font-size: 0.8rem; }
}

/* =========================================================
 * 4. Landscape phones — keep the inbox usable
 * ========================================================= */
@media (max-width: 900px) and (orientation: landscape) {
    .inbox-shell {
        height: auto !important;
        min-height: 100vh;
    }
}

/* =========================================================
 * 5. Print — let everything be its natural width
 * ========================================================= */
@media print {
    nav, footer, #mobile-menu { display: none !important; }
}