/* ============================================================
   MOBILE-FIRST GLOBAL OVERHAUL (<768px)
   Loaded after style.css — pure additive layer, no backend impact.
   ============================================================ */

/* ── 1. Viewport containment & anti-overflow ─────────────── */
body {
    min-height: 100dvh;
}

@media (max-width: 768px) {
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }

    .container,
    .app-root,
    .content,
    .main-content {
        max-width: 100vw;
        overflow-x: hidden;
        min-width: 0;
    }

    /* Long content must wrap, never tear the layout.
       NOTE: use break-word, NOT `anywhere` — `anywhere` collapses
       min-content width to 1ch and squishes names/titles vertically
       inside constrained cells. */
    td, th, p, li, dd, dt, label, small,
    h1, h2, h3, h4, h5, h6,
    .card, .job-card, .badge, .tag {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Names, titles and text headers keep natural word wrapping */
    .cand-name-link, .candidate-name, .job-title,
    .card h1, .card h2, .card h3,
    h1, h2, h3 {
        word-break: normal;
        overflow-wrap: normal;
        white-space: normal;
    }
    pre, code, .json-block {
        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: anywhere;
        max-width: 100%;
    }
    img, svg, video, canvas, iframe {
        max-width: 100%;
        height: auto;
    }
    /* Tables that are NOT card-transformed scroll inside their wrapper,
       never the page */
    .table-wrapper, .table-responsive, .jt-wrapper, .candidates-table {
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── 2. iOS Safari zoom & form UX ────────────────────────── */
@media (max-width: 768px) {
    input, select, textarea,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="tel"], input[type="search"],
    input[type="date"], input[type="datetime-local"], input[type="time"] {
        font-size: 16px !important; /* kills iOS auto-zoom on focus */
    }
    /* 44px touch height for standard form controls only —
       compact widget controls (support chat, inline icons) are exempt */
    .form-group input, .form-group select, .form-group textarea,
    form input[type="text"], form input[type="email"],
    form input[type="password"], form input[type="number"],
    form input[type="tel"], form input[type="search"],
    form select, form textarea,
    button[type="submit"] {
        min-height: 44px;
    }
    input[type="checkbox"], input[type="radio"] {
        min-height: 22px;
        min-width: 22px;
    }
    #support-panel input, #support-panel button,
    #support-panel select, #support-panel textarea {
        min-height: 0;
    }
}

/* Touch polish (all sizes — harmless on desktop) */
a, button, input, select, textarea, [role="button"], .btn, .btn-icon {
    -webkit-tap-highlight-color: transparent;
}
@media (max-width: 768px) {
    .btn:active, button:active, .btn-icon:active,
    [role="button"]:active, .mbn-item:active {
        transform: scale(0.98);
    }
    /* 44px touch targets for interactive controls */
    .btn, .btn-icon, .tab-btn, .page-link, .pagination a,
    .pagination button, .mdrawer-item {
        min-height: 44px;
        min-width: 44px;
    }
    .tab-btn { padding: 10px 14px; }
}

/* ── 3. Bottom-sheet modals & scroll lock ────────────────── */
body.modal-open {
    overflow: hidden !important;
    touch-action: none;
}

@media (max-width: 768px) {
    /* Overlay containers used across templates (each pairs with its
       specific sheet panel below — never target generic children) */
    .modal, .modal-overlay, .sh-overlay, .ss-modal, #submit-modal {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .modal .modal-content,
    .modal-overlay .modal-content,
    .sh-overlay .sh-modal,
    .ss-modal .ss-report,
    #submit-modal #submit-modal-box {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 85dvh !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        animation: sheet-up 0.28s cubic-bezier(0.32, 0.72, 0, 1);
        padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
        box-sizing: border-box;
    }

    /* Dragging indicator pill */
    .modal .modal-content::before,
    .modal-overlay .modal-content::before,
    .sh-overlay .sh-modal::before,
    .ss-modal .ss-report::before,
    #submit-modal #submit-modal-box::before {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: var(--color-border, #E2E8F0);
        margin: 8px auto 12px;
        flex-shrink: 0;
    }

    @keyframes sheet-up {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    /* Full-width action buttons inside sheets */
    .modal-footer .btn, .modal-actions .btn,
    .modal-footer button, .modal-actions button,
    .submit-modal-actions button {
        width: 100%;
        margin: 4px 0;
    }
    .modal-footer, .modal-actions {
        flex-direction: column;
    }
}

/* ── 4. Navigation & layout geometry ─────────────────────── */
@media (max-width: 768px) {
    /* Sticky slim header (56px bar itself defined in style.css) */
    .header {
        position: sticky;
        top: 0;
        z-index: 900;
    }

    /* Sub-header alignment: back link stays on one line, long job/page
       titles truncate gracefully instead of crowding the toggles */
    .header-left {
        min-width: 0;
        flex-wrap: nowrap;
        align-items: center;
    }
    .header-left .back-link {
        white-space: nowrap;
        flex-shrink: 0;
    }
    .header-left h1 {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .header-left .badge-ref { display: none; }

    /* Bottom nav: translucent + safe-area (base in style.css; reinforce spacing) */
    .mobile-bottom-nav {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    /* Floating elements sit above the bottom nav, never over content/tabs */
    #support-bubble {
        bottom: calc(65px + env(safe-area-inset-bottom) + 12px) !important;
        right: 16px !important;
        width: 48px !important;
        height: 48px !important;
    }
    #support-panel {
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 85dvh !important;
        border-radius: 16px 16px 0 0 !important;
        z-index: 10001 !important;
    }

    /* Every scrollable page keeps its last elements above the bottom nav */
    .container, .content, .main-content {
        padding-bottom: 100px !important;
    }
}

/* ── 5. Candidate profile: transcript chat bubbles ───────── */
@media (max-width: 768px) {
    .transcript {
        padding: 12px 8px;
    }
    /* Bubbles fill the natural width — no more 60px side margins
       squeezing text into narrow columns.
       Scoped to .transcript: web_chat/demo_chat use .message differently */
    .transcript .message {
        width: 100% !important;
        max-width: 92% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 12px 14px;
        box-sizing: border-box;
    }
    /* Keep the speaker-side alignment via auto margins (RTL-safe) */
    .transcript .message-assistant { margin-inline-end: auto !important; }
    .transcript .message-user     { margin-inline-start: auto !important; }

    /* Header row: name + timestamp + badges wrap neatly, never squish */
    .message-header {
        flex-wrap: wrap;
        row-gap: 2px;
        gap: 6px 8px;
        font-size: 12px;
    }
    .message-header strong { font-size: 13px; }
    .message-content {
        font-size: 14px;
        line-height: 1.55;
        word-break: normal;
        overflow-wrap: break-word;
    }
}

/* ── 6. Sub-navigation tabs: horizontal scrollable pill bar ─ */
@media (max-width: 768px) {
    .tabs-nav, #doc-subtabs {
        display: flex;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding: 8px 4px;
        scrollbar-width: none;      /* Firefox */
        scroll-snap-type: x proximity;
    }
    .tabs-nav::-webkit-scrollbar,
    #doc-subtabs::-webkit-scrollbar { display: none; }
    .tabs-nav .tab-btn, #doc-subtabs button {
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: start;
    }
}

/* ── 7. Universal grid & split-pane collapse ─────────────── */
@media (max-width: 768px) {
    /* Any inline-styled multi-column grid stacks to one column
       (CSS !important beats non-important inline styles) */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    .form-row, .form-grid, .content-grid, .settings-grid,
    .stats-grid, .two-col, .split-pane {
        grid-template-columns: 1fr !important;
    }
    /* Side-by-side desktop panes stack vertically */
    .content-grid, .two-col, .split-pane, .split-layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* Form controls: full width, comfortable padding */
    .form-group input:not([type="checkbox"]):not([type="radio"]),
    .form-group select,
    .form-group textarea,
    .form-row input:not([type="checkbox"]):not([type="radio"]),
    .form-row select,
    .form-row textarea {
        width: 100%;
        box-sizing: border-box;
        padding: 12px;
    }
}

/* ── 8. Header & hamburger lock ──────────────────────────── */
@media (max-width: 768px) {
    /* Header pinned to the very top; hamburger stays inside its band */
    .header {
        position: sticky;
        top: 0;
        z-index: 1100;
    }
    #mobile-menu-btn {
        position: fixed;
        top: 8px;
        inset-inline-end: 10px;
        z-index: 1101;
    }
}