/*
 * mobile.css — Responsive overrides for tablet + phone screens.
 *
 * Load order (in index.html):
 *   <link rel="stylesheet" href="styles.css">
 *   <link rel="stylesheet" href="dashboard.css">
 *   <link rel="stylesheet" href="mobile.css">   ← LAST so it can override both
 *
 * ── Why a separate file? ───────────────────────────────────────────────────
 * Clean merge isolation: the dashboard module is being actively rebuilt on a
 * parallel workstream. Co-locating mobile rules with desktop rules in
 * styles.css would force constant conflicts. This file is meant to be folded
 * back into styles.css once the dashboard refactor settles and the mobile
 * pass is stable.
 *
 * ── What's deliberately NOT here ───────────────────────────────────────────
 * Anything targeting .dashboard-*, .dash-*, .kpi-*, .viz-*, .dm-* selectors.
 * The dashboard module owns its own responsive rules (see dashboard.css
 * @media (max-width: 752px)). The dashboard-config modal uses generic
 * .modal / .form-group / .btn-row selectors and benefits from the rules here
 * as a side effect — that is intentional and harmless.
 *
 * ── Breakpoints ────────────────────────────────────────────────────────────
 *   ≤ 768px               primary mobile pass (tablets portrait + all phones)
 *   ≤ 480px               phone-specific polish (tighter chrome, stacked btns)
 *   landscape ≤ 480px     landscape phone (short viewport, tighter padding)
 *
 * ── Conventions ────────────────────────────────────────────────────────────
 * - Desktop-first: only @media (max-width:...) — matches the rest of the codebase.
 * - 16px minimum font-size on inputs to prevent iOS Safari's zoom-on-focus.
 * - 44px minimum tap target on primary buttons (Apple HIG / Material).
 * - !important is used ONLY where inline styles force our hand. Each use is
 *   commented with the reason.
 */


/* ═══════════════════════════════════════════════════════════════════════════
 * GLOBAL — applies to all viewport sizes
 * ═══════════════════════════════════════════════════════════════════════════ */

html {
    /* Prevent iOS Safari from inflating text after device rotation. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Use dynamic viewport units on supported browsers (iOS Safari 15.4+, Chrome 108+).
   dvh accounts for the collapsing/expanding URL bar — without this, full-height
   layouts get clipped or leave dead space under the toolbar. Older browsers fall
   back to the existing 100vh declarations in styles.css. */
@supports (height: 100dvh) {
    body,
    .app,
    .login-screen,
    .chat-screen {
        height: 100dvh;
    }
}

/* Tap behaviour for coarse pointers (touch devices) — removes the grey iOS
   highlight flash and the 300ms double-tap-zoom delay. Limited to
   pointer:coarse so a desktop with a touchscreen still gets normal hovers. */
@media (hover: none) and (pointer: coarse) {
    a,
    button,
    [role="button"],
    .nav-tab,
    .suggestion,
    .knowledge-step,
    .knowledge-doc-list-item,
    .knowledge-conn-card-header {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * ≤ 768px — TABLET + PHONE
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ────────────────────────────────────────────────────────────────────────
     * CHROME — header
     * ──────────────────────────────────────────────────────────────────────── */

    .header {
        padding: 12px 16px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .header h1 {
        font-size: 13px;
        letter-spacing: 1px;
    }

    /* User info subtitle — accessible via the Account modal, hide on mobile. */
    .subtitle {
        display: none;
    }

    .header-right {
        gap: 6px;
        margin-left: auto;
    }

    /* "Ready" status text takes too much room — keep the dot, drop the text. */
    .header-status #status-text {
        display: none;
    }

    /* Admin badge is implied by access to admin tabs — drop on mobile. */
    .badge {
        display: none;
    }

    .btn-logout {
        padding: 6px 10px;
        font-size: 11px;
        min-width: 0;
    }


    /* ────────────────────────────────────────────────────────────────────────
     * CHROME — nav tabs (horizontal scroll strip)
     * ────────────────────────────────────────────────────────────────────────
     * 6 desktop tabs (Chat / Data / Knowledge / Queries / Dashboard / Workflows)
     * don't fit on a phone. Hamburger menus need JS and a state machine;
     * horizontal scroll is touch-native and zero-JS.
     * ──────────────────────────────────────────────────────────────────────── */

    .nav-tabs {
        padding: 0 16px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-tab {
        flex-shrink: 0;
        scroll-snap-align: start;
        padding: 12px 14px;
        font-size: 11px;
        min-height: 44px;
    }


    /* ────────────────────────────────────────────────────────────────────────
     * PANELS — global padding crunch (32px → 16px)
     * ──────────────────────────────────────────────────────────────────────── */

    .chat-container,
    .team-panel {
        padding: 16px;
    }

    .welcome-message {
        padding: 32px 12px;
    }

    .team-header {
        gap: 8px;
        flex-wrap: wrap;
    }

    /* Dashboard panel header: h2 + action buttons wrap to two lines on narrow
       phones. The inner div uses an inline style so we can't rely on the
       generic flex-wrap rule that only covers .modal children. */
    .dashboard-header {
        flex-wrap: wrap;
        margin-bottom: 12px;
    }
    .dashboard-header > div[style*="display: flex"] {
        flex-wrap: wrap;
    }

    /* Dashboard tab bar: comfortable touch target height */
    .dashboard-tab-bar .nav-tab {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 0 14px;
    }


    /* ────────────────────────────────────────────────────────────────────────
     * CHAT — messages + input + iOS safe-area
     * ──────────────────────────────────────────────────────────────────────── */

    .message {
        max-width: 95%;
        font-size: 14px;
        padding: 10px 14px;
    }

    .input-container {
        padding: 10px 12px;
        /* Respect the iPhone home indicator. env() is no-op on non-notched devices. */
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    .input-wrapper {
        padding: 6px 10px;
    }

    /* iOS Safari zooms any input with font-size < 16px on focus. Forcing 16px on
       the chat textarea (and all form inputs below) prevents the entire UI
       from re-laying-out every time the user taps to type. */
    textarea,
    .input-wrapper textarea {
        font-size: 16px;
    }

    #send-btn {
        width: 40px;
        height: 40px;
    }


    /* ────────────────────────────────────────────────────────────────────────
     * FORMS — iOS zoom prevention + comfortable tap padding
     * ──────────────────────────────────────────────────────────────────────── */

    .form-group input,
    .form-group textarea,
    .form-group select,
    .modal select,
    .modal input,
    .modal textarea {
        font-size: 16px;
        padding: 12px 14px;
    }

    /* Form labels stay tiny and uppercase — they're not focusable, no zoom risk. */


    /* ────────────────────────────────────────────────────────────────────────
     * BUTTONS — 44×44 touch targets on primary actions
     * ──────────────────────────────────────────────────────────────────────── */

    .btn-primary,
    .btn-secondary,
    .btn-invite,
    .btn-danger,
    .suggestion {
        min-height: 44px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* .btn-logout already tightened above (chrome row). .btn-ai stays small —
       it's a tiny inline accent, not a primary CTA. */


    /* ────────────────────────────────────────────────────────────────────────
     * MODALS — full-width, scroll-from-top, stacked buttons
     * ──────────────────────────────────────────────────────────────────────── */

    .modal-overlay.active {
        /* Top-align so long modals scroll naturally instead of being centred
           and clipping the title above the viewport. */
        align-items: flex-start;
        padding: 16px 12px;
    }

    .modal,
    .modal.modal-wide {
        max-width: 100%;
        width: 100%;
        padding: 20px 18px;
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
    }

    /* Inline 2-column grids (`style="display: grid; grid-template-columns: 1fr 1fr"`)
       used in workflows editor, dashboard config modal, queries join modal, etc.
       must collapse to single column on mobile. !important is required because
       these declarations are inline — there is no way around it without editing
       every call site, which would conflict with the parallel dashboard work. */
    .form-group[style*="grid-template-columns"],
    .form-group > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Inline flex rows inside .form-group OR inside .modal — wrap their children
       so the Port+Database row in the data conn modal, the Run/Add buttons in
       queries, etc., stack instead of squashing. */
    .form-group > div[style*="display: flex"][style*="gap"],
    .modal div[style*="display: flex"][style*="gap"] {
        flex-wrap: wrap;
    }

    /* Flex children that explicitly wrap should each take full width. */
    .modal div[style*="display: flex"][style*="gap"] > .form-group {
        flex: 1 1 100% !important;
        min-width: 0;
    }

    /* Action button row — wrap so 3-button rows (Cancel + Test + Save) reflow. */
    .btn-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .btn-row > button {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        min-height: 44px;
    }

    .confirm-actions {
        flex-wrap: wrap;
    }

    .confirm-actions button {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }


    /* ────────────────────────────────────────────────────────────────────────
     * DATA TAB — connection cards
     * ──────────────────────────────────────────────────────────────────────── */

    .connection-card-header {
        flex-wrap: wrap;
        gap: 6px;
    }

    .connection-card-actions {
        flex-wrap: wrap;
    }


    /* ────────────────────────────────────────────────────────────────────────
     * KNOWLEDGE TAB — two-pane wizard collapses to stacked
     * ────────────────────────────────────────────────────────────────────────
     * The list-on-left / detail-on-right pattern (used by step 3 docs, step 4
     * preprocessing, business rules, joins, and ALSO by the Queries tab's
     * Datamarts and Reporting sub-tabs) becomes: list as a short scrollable
     * region above, detail pane below.
     * ──────────────────────────────────────────────────────────────────────── */

    .knowledge-doc-wrap {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .knowledge-doc-list {
        max-height: 220px;
    }

    /* Column documentation rows: name + description stack so the textarea gets
       full width instead of being squeezed into ~50% of a 375px screen. */
    .knowledge-col-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 10px 0;
    }

    /* Knowledge accordion (one per connection): header wraps so the meta tag
       and chevron don't push the title to a single character per line. */
    .knowledge-conn-card-header {
        flex-wrap: wrap;
        padding: 12px 14px;
    }

    .knowledge-conn-card-meta {
        margin-left: 0;
    }

    /* Step pills wrap to multiple rows on narrow viewports. Sticky behaviour
       from desktop is preserved (the dots stay pinned to the top). */
    .knowledge-step-dots {
        flex-wrap: wrap;
        padding: 10px 0 !important;  /* overrides the inline-styled padding from JS */
    }

    /* Business context editor: shorter min-height so the Save button is in view
       without a long scroll on phones. */
    #knowledge-step-1 textarea {
        min-height: 35vh;
    }

    /* Coverage grid: 2 cols on mobile so cards aren't comically wide. */
    .knowledge-coverage {
        grid-template-columns: 1fr 1fr;
    }


    /* ────────────────────────────────────────────────────────────────────────
     * QUERIES TAB — joins row + action rows
     * ──────────────────────────────────────────────────────────────────────── */

    /* Joins row: expr + arrow + expr + source-tag + description stack instead
       of squashing into an unreadable single line. */
    .knowledge-join-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .knowledge-join-desc {
        flex: 1 1 100%;
        order: 5;  /* push description below the expr+source on the wrapped row */
    }

    /* Sub-tab action rows: `+ Add manually` / `Suggest with AI` / `Import FKs`
       buttons stack on narrow phones instead of overflowing the panel. */
    #queries-sub-joins > div[style*="display: flex"],
    #queries-sub-marts > div[style*="display: flex"],
    #queries-sub-reports > div[style*="display: flex"] {
        flex-wrap: wrap;
    }


    /* ────────────────────────────────────────────────────────────────────────
     * RESULTS TABLES — safety-net horizontal scroll
     * ────────────────────────────────────────────────────────────────────────
     * Most table containers already wrap with overflow-x:auto inline. This is
     * a safety net for any <table> inside the chat/team panels that doesn't.
     * ──────────────────────────────────────────────────────────────────────── */

    .results-table {
        font-size: 12px;
    }

    .results-table td {
        max-width: 140px;
    }


    /* ────────────────────────────────────────────────────────────────────────
     * WORKFLOWS TAB — editor form + preview iframe
     * ──────────────────────────────────────────────────────────────────────── */

    /* Data source picker: select stretches full width when wrapped, "+ Add card"
       button drops to the next row. Already handled by the generic
       form-group > div[style*="display: flex"] wrap rule. */

    /* Preview iframe: a 420px-tall iframe dominates a phone — cap at 60vh. */
    #workflows-preview-iframe {
        /* !important required — height is set via inline style="height: 420px". */
        height: 60vh !important;
    }


    /* ────────────────────────────────────────────────────────────────────────
     * ACCOUNT MODAL — stat grid
     * ──────────────────────────────────────────────────────────────────────── */

    /* The auto-fit minmax(140px, 1fr) already adapts; nudge to a stricter 2-col
       so cards stay visually balanced even on the narrowest viewports. */
    .account-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* account-usage-windows already collapses to 1fr at ≤700px in styles.css —
       no override needed here. */


    /* ────────────────────────────────────────────────────────────────────────
     * SCROLLBARS — invisible on touch, native scroll behaviour
     * ──────────────────────────────────────────────────────────────────────── */

    @media (hover: none) and (pointer: coarse) {
        ::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * ≤ 480px — PHONE-SPECIFIC POLISH
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

    .header {
        padding: 10px 12px;
    }

    /* All three header buttons use compact padding and drop the min-width:72px
       shared by .btn-invite / .btn-logout so they don't overflow on narrow screens.
       Tighter gap finishes the job. */
    #header-account-btn,
    #theme-toggle,
    #logout-btn {
        padding: 6px 10px;
        min-width: 0;
    }

    .header-right {
        gap: 8px;
    }

    .nav-tab {
        padding: 12px 12px;
    }

    /* Login card: tighter padding on small phones so the form doesn't overflow. */
    .login-card {
        padding: 36px 24px;
    }

    /* Buttons in action rows stack one-per-row on the narrowest phones. */
    .btn-row > button {
        flex: 1 1 100%;
    }

    .confirm-actions button {
        flex: 1 1 100%;
    }

    /* Account grid: single column at this size — 2 cols was getting cramped. */
    .account-grid {
        grid-template-columns: 1fr;
    }

    /* Account list rows — space-between without flex-wrap clips long emails/names
       against the right-side action area on narrow phones. */
    .account-list li {
        flex-wrap: wrap;
        gap: 4px;
        align-items: flex-start;
    }
    .account-list li > div:first-child {
        min-width: 0;
    }
    .account-list-meta {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* ── Dashboard header: compact on phones ────────────────────────────── */

    /* Refresh + Configure are header-utility buttons, not primary CTAs —
       44px tall would bloat the header on a phone. Drop to 36px. */
    #dashboard-refresh-btn,
    #dashboard-configure-btn {
        min-height: 36px;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    /* "Updated X min ago" meta text wraps to its own row below the buttons
       so the buttons stay on a clean single line without being squeezed. */
    .dashboard-header-meta {
        width: 100%;
        order: 3;
        margin-top: 2px;
    }

    /* ── Account modal: usage windows to 1 col on phones ───────────────── */
    .account-usage-windows {
        grid-template-columns: 1fr;
    }

    .knowledge-coverage {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * LANDSCAPE PHONE — short viewport (eg. iPhone in landscape)
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-height: 480px) and (orientation: landscape) {

    .welcome-message {
        padding: 16px 12px;
    }

    .login-card {
        padding: 24px 28px;
    }

    /* Knowledge wizard list pane: shorter in landscape so the detail pane
       isn't squeezed off-screen. */
    .knowledge-doc-list {
        max-height: 140px;
    }
}