/* ============================================================
 *  wo-setup/mobile.css — phone pane-stack for WO Setup (≤768px)
 *
 *  HAND-WRITTEN companion to the AUTO-GENERATED tripane.css (never
 *  edit that file; this one is safe). Loaded after it.
 *
 *  Two levels, driven by a class on the mount root (#qv-queue-tripane):
 *    (default)     — "Jobs": Smart Views + Jobs tree full-width. The
 *                    prototype's own jobs↔WOs directory slide inside
 *                    #jobsTree already behaves like a phone drill.
 *    .wom-detail   — "Workspace": #centerCol (WO tasks) with #rightCol
 *                    (material pool) stacked below in one scroll;
 *                    .wom-backbar shown. Set/cleared by
 *                    js/wo-setup-mobile.js (delegated taps on .wo-row).
 *
 *  Desktop (>768px) untouched.
 * ============================================================ */

/* The back bar is injected unconditionally by js/wo-setup-mobile.js — hidden
   everywhere by default, shown only on the phone Workspace level below. */
#qv-queue-tripane .wom-backbar { display: none; }

@media (max-width: 768px) {

    /* .body owns vertical scrolling on the Workspace level; panes must
       not self-cap (inventory material-screen cutoff lesson).
       Desktop lays the tri-pane out as grid-template-columns:320px 1fr 320px —
       collapse to a single column so the visible pane gets the full width. */
    #qv-queue-tripane .body {
        grid-template-columns: 1fr !important;
        overflow-x: hidden !important;
        min-height: 0;
    }

    /* ── Level 1: Jobs ──────────────────────────────────────── */
    #qv-queue-tripane .left-col {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        animation: womIn .22s ease;
    }
    #qv-queue-tripane .center-col,
    #qv-queue-tripane .right-col { display: none !important; }

    /* ── Level 2: Workspace ─────────────────────────────────── */
    #qv-queue-tripane.wom-detail .left-col { display: none !important; }
    #qv-queue-tripane.wom-detail .body {
        display: block !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        flex: 1 1 auto;
    }
    #qv-queue-tripane.wom-detail .center-col,
    #qv-queue-tripane.wom-detail .right-col {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        flex: none !important;
        animation: womIn .22s ease;
    }
    #qv-queue-tripane.wom-detail .right-col {
        border-top: 2px solid var(--line, var(--border-color, #2C2C2C));
        margin-top: 4px;
    }

    /* center sub-tabs (Pool / Tasks / On Rover / Additional) — wrap and
       compress so the strip never crosses the screen edge */
    #qv-queue-tripane.wom-detail .subtabs {
        flex-wrap: wrap;
        row-gap: 4px;
        max-width: 100%;
    }
    #qv-queue-tripane.wom-detail .subtabs .tab {
        padding: 7px 10px;
        font-size:var(--fs-caption);
        min-height: 40px;
    }

    /* ── Back bar (injected by js/wo-setup-mobile.js) ───────── */
    #qv-queue-tripane .wom-backbar { display: none; }
    #qv-queue-tripane.wom-detail .wom-backbar {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 46px;
        padding: 4px 8px;
        border-bottom: 1px solid var(--line, var(--border-color, #2C2C2C));
        background: var(--bg-1, var(--bg-secondary, #171717));
    }
    #qv-queue-tripane .wom-back {
        display: flex;
        align-items: center;
        gap: 2px;
        min-height: 40px;
        padding: 6px 12px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--accent, var(--accent-green, #3E8E72));
        font-size:var(--fs-body);
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
    }
    #qv-queue-tripane .wom-back:active { background: var(--bg-2, rgba(127, 174, 157, .12)); }
    #qv-queue-tripane .wom-title {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 700;
    }

    @keyframes womIn {
        from { opacity: .35; transform: translateX(4%); }
        to   { opacity: 1;   transform: none; }
    }
}