/* ============================================================
 *  cnc/mobile.css — phone pane-stack for the CNC tab (≤768px)
 *
 *  HAND-WRITTEN companion to the AUTO-GENERATED picking-list.css
 *  (never edit that file; this one is safe). Loaded after it.
 *
 *  Two levels, driven by a class on the tab root (#cnc-tab):
 *    (default)      — "Lists": machine tab strip + Currently Cutting +
 *                     Queue stacked full-width (.left-col only).
 *    .cncm-detail   — "Detail": #centerPane with #rightPanel (failed
 *                     parts) stacked below it in one scroll; .cncm-backbar
 *                     shown. Set/cleared by js/cnc-mobile.js, which
 *                     delegates taps on .pl-card in the two lists.
 *
 *  Geometry uses !important deliberately: the desktop splitters write
 *  inline widths on .left-col/.right-panel that must never leak into
 *  the phone layout. Desktop (>768px) is completely untouched.
 * ============================================================ */

/* The back bar is injected unconditionally by js/cnc-mobile.js — hidden
   everywhere by default, shown only on the phone Detail level below. */
#cnc-tab .cncm-backbar { display: none; }

@media (max-width: 768px) {

    /* ── shared ─────────────────────────────────────────────── */
    #cnc-tab .v-splitter,
    #cnc-tab .h-splitter { display: none !important; }

    /* topbar: compact, single-line title; ⌘K hint is meaningless on a phone */
    #cnc-tab .cnc-topbar { flex-wrap: nowrap; gap: 8px; }
    #cnc-tab .cnc-topbar h1 { font-size: 14px; white-space: nowrap; flex-shrink: 0; }
    #cnc-tab .cnc-topbar .kbd { display: none; }
    #cnc-tab .cnc-search { flex: 1 1 auto; min-width: 0; }
    #cnc-tab .cnc-search .placeholder {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }

    /* ── Bottom tab bar ──────────────────────────────────────────
       The machine strip (Rover 1 / Rover 2 + EOM) docks to the very bottom
       of the screen, app-style. #cnc-tab is a 100vh flex column, so order:99
       pins the strip last IN-FLOW — the scrolling .body (flex:1) ends right
       above it, nothing is ever hidden underneath. The strip container
       persists across the prototype's re-renders, so this is re-render-safe. */
    #cnc-tab .tab-strip {
        order: 99;
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--line, var(--border-color, #2C2C2C));
        border-bottom: none;
        background: var(--bg-1, var(--bg-secondary, #171717));
        position: relative;
        z-index: 5;
    }
    #cnc-tab .tab-strip .tab {
        flex: 1 1 0;
        min-width: 0;
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border-radius: 10px;
        font-size: 14px;
    }
    #cnc-tab .tab-strip .tab .tab-name { white-space: nowrap; }
    #cnc-tab .ts-grow { display: none; }
    /* EOM entry compressed to a short segment — the full "Open end-of-machine
       screen" label can't share a phone-width bar with two rover tabs. The
       button text is hidden (font-size:0) and replaced presentationally; the
       live-dot and title attribute are untouched. Selector matches the ported
       `#cnc-tab .tab-strip .top-eom-btn` so it actually wins the cascade. */
    #cnc-tab .tab-strip .top-eom-btn {
        flex: 0 0 auto;
        min-height: 52px;
        margin: 0 !important;
        padding: 6px 14px;
        font-size: 0;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    #cnc-tab .tab-strip .top-eom-btn::after {
        content: 'EOM';
        font-size:var(--fs-sm);
        font-weight: 700;
        letter-spacing: .4px;
    }
    #cnc-tab .tab-strip .top-eom-btn .arrow { display: none; }

    /* #cnc-tab's inline height:100vh ignores the 48px mobile page-title strip
       above it — the bottom bar hung 48px off-screen. Size to the real
       remaining viewport (dvh handles phone browser toolbars; vh fallback). */
    #cnc-tab.active {
        height: calc(100vh - 48px) !important;
        height: calc(100dvh - 48px) !important;
    }

    /* The AI-assistant FAB (fixed bottom-right, z 9000) lands on top of the
       EOM segment — lift it above the bottom tab bar while CNC is the active tab. */
    body:has(#cnc-tab.active) #aiAssistantBtn {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* the .body owns vertical scrolling on both levels — panes must not
       self-cap (same lesson as the inventory material screen cutoff) */
    #cnc-tab .body {
        display: block !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        flex: 1 1 auto;
        min-height: 0;
    }

    /* ── Level 1: Lists ─────────────────────────────────────── */
    #cnc-tab .left-col {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        animation: cncmIn .22s ease;
    }
    #cnc-tab .left-half {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: none !important;
    }
    #cnc-tab .left-list {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    #cnc-tab .center-pane,
    #cnc-tab .right-panel { display: none !important; }

    /* ── Level 2: Detail ────────────────────────────────────── */
    #cnc-tab.cncm-detail .left-col { display: none !important; }
    #cnc-tab.cncm-detail .center-pane,
    #cnc-tab.cncm-detail .right-panel {
        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: cncmIn .22s ease;
    }
    #cnc-tab.cncm-detail .right-panel {
        border-top: 2px solid var(--line, var(--border-color, #2C2C2C));
        margin-top: 4px;
    }

    /* detail head: desktop puts .head-left (crumbs / PL id / pills / progress)
       beside .head-right (sheet preview + label nav), and the preview's
       intrinsic width crushes the text column to one word per line on a phone.
       Stack everything vertically instead — title block first at full width
       (text wraps naturally), then the sheet preview, then the label block. */
    #cnc-tab.cncm-detail .detail-head { display: block !important; }
    #cnc-tab.cncm-detail .detail-head .head-left {
        width: 100%;
        max-width: 100%;
    }
    #cnc-tab.cncm-detail .detail-head .head-right {
        display: block !important;
        width: 100%;
        max-width: 100%;
        margin-top: 12px;
    }
    #cnc-tab.cncm-detail .head-sheet-preview { max-width: 100%; }
    #cnc-tab.cncm-detail .head-sheet-svg,
    #cnc-tab.cncm-detail .head-sheet-svg svg {
        max-width: 100% !important;
        height: auto;
    }
    #cnc-tab.cncm-detail .head-sheet-meta { flex-wrap: wrap; }
    #cnc-tab.cncm-detail #labelNavWrap {
        max-width: 100% !important;
        margin-top: 12px;
    }
    #cnc-tab.cncm-detail .label-nav { flex-wrap: wrap; row-gap: 6px; }
    #cnc-tab.cncm-detail .label-nav .nav-counter { white-space: nowrap; }
    #cnc-tab.cncm-detail .label-nav .nav-btn { min-width: 40px; min-height: 40px; }
    #cnc-tab.cncm-detail .label-sticker,
    #cnc-tab.cncm-detail .ls-bmp { max-width: 100% !important; }
    #cnc-tab.cncm-detail .ls-bmp img { max-width: 100%; height: auto; }
    /* breadcrumb + pills: wrap as lines, never shrink-to-vertical */
    #cnc-tab.cncm-detail .crumb { flex-wrap: wrap; line-height: 1.5; }
    #cnc-tab.cncm-detail .id-row { flex-wrap: wrap; }
    #cnc-tab.cncm-detail .pl-id { word-break: break-all; }
    #cnc-tab.cncm-detail .pills { flex-wrap: wrap; }

    /* sheets/failed-parts split (2fr/1fr on desktop): stack on a phone */
    #cnc-tab.cncm-detail .sheets-split { display: block !important; }

    /* ── Sheets list: table → cards ─────────────────────────────
       Six table columns crushed every cell into one-word-per-line wrapping
       at phone width. Re-flow each row as a card instead:
         line 1 — #num · status · Expand button
         line 2 — material description (dominant, wraps naturally)
         line 3 — material code (single line, ellipsized)
         line 4 — cix file · part names (small meta, ellipsized)
       The expanded layout row (.expand-row) spans full width below its card. */
    #cnc-tab.cncm-detail .sheets-col { max-width: 100%; overflow: visible; }
    #cnc-tab.cncm-detail .sheets-table,
    #cnc-tab.cncm-detail .sheets-table tbody { display: block; width: 100%; }
    #cnc-tab.cncm-detail .sheets-table thead { display: none; }
    #cnc-tab.cncm-detail .sheets-table tr.sheet-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 10px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--line, var(--border-color, #2C2C2C));
    }
    #cnc-tab.cncm-detail .sheets-table tr.sheet-row td {
        display: block;
        padding: 0 !important;
        border: none !important;
        width: auto;
    }
    /* line 1 */
    #cnc-tab.cncm-detail tr.sheet-row .sheet-num { order: 1; font-weight: 700; }
    #cnc-tab.cncm-detail tr.sheet-row td:nth-child(3) { order: 2; white-space: nowrap; }
    #cnc-tab.cncm-detail tr.sheet-row .act-cell { order: 3; margin-left: auto; }
    #cnc-tab.cncm-detail tr.sheet-row .row-action { min-height: 38px; padding: 6px 12px; }
    /* line 2+3: material block full width; desc wraps, code ellipsizes */
    #cnc-tab.cncm-detail tr.sheet-row .mat { order: 4; flex: 1 1 100%; min-width: 0; }
    #cnc-tab.cncm-detail tr.sheet-row .mat .mat-desc { white-space: normal; }
    #cnc-tab.cncm-detail tr.sheet-row .mat .mat-code {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* line 4: small meta */
    #cnc-tab.cncm-detail tr.sheet-row .cix { order: 5; font-size:var(--fs-overline); white-space: nowrap; }
    #cnc-tab.cncm-detail tr.sheet-row .parts-cell {
        order: 6;
        flex: 1 1 auto;
        min-width: 0;
        font-size:var(--fs-overline);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* expanded sheet layout row spans full width under its card */
    #cnc-tab.cncm-detail .sheets-table tr.expand-row { display: block; }
    #cnc-tab.cncm-detail .sheets-table tr.expand-row > td {
        display: block;
        width: 100%;
        padding: 0 !important;
        border: none !important;
    }
    #cnc-tab.cncm-detail .sheet-expand svg { max-width: 100%; height: auto; }

    /* ── Back bar (injected by js/cnc-mobile.js) ────────────── */
    #cnc-tab .cncm-backbar { display: none; }
    #cnc-tab.cncm-detail .cncm-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));
    }
    #cnc-tab .cncm-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;
    }
    #cnc-tab .cncm-back:active { background: var(--bg-2, rgba(127, 174, 157, .12)); }
    #cnc-tab .cncm-title {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 700;
    }

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