/* =====================================================================
 * Mobile-preview view (testing aid)
 * ---------------------------------------------------------------------
 * When QA toggles `html.view-mobile`, the page renders inside a 420px
 * phone-frame band so they can sanity-check narrow-viewport layouts
 * without resizing the window or opening devtools' device toolbar.
 *
 * IMPORTANT: This is a *visual* preview. Real CSS @media queries still
 * key off the actual browser viewport, so this won't be 1:1 with a real
 * phone. For final mobile sign-off, use devtools or a real device.
 * ===================================================================== */

/* ----- View-toggle button (sits next to the theme toggle) ----- */
.app-view-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; color: #cbd5e1;
    border: 1px solid #475569; border-radius: 6px;
    padding: 6px 10px; font-size: 0.78rem; cursor: pointer;
    font-family: inherit;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.app-view-toggle:hover { border-color: #38bdf8; color: #38bdf8; }
html.view-desktop .app-view-toggle .view-icon-mobile,
html.view-desktop .app-view-toggle .view-toggle-label-mobile { display: none; }
html.view-mobile  .app-view-toggle .view-icon-desktop,
html.view-mobile  .app-view-toggle .view-toggle-label-desktop { display: none; }

/* Light-mode variant matches the theme toggle's light styling. */
html.theme-light .app-view-toggle {
    background: #ffffff; color: #686868; border-color: #E5E5E5;
}
html.theme-light .app-view-toggle:hover { border-color: #0369A1; color: #0369A1; }
html.theme-light .mfr-header .app-view-toggle {
    background: transparent !important; color: #cbd5e1 !important;
    border-color: #475569 !important;
}
html.theme-light .mfr-header .app-view-toggle:hover {
    border-color: #38bdf8 !important; color: #38bdf8 !important;
}

/* ===== MOBILE PREVIEW FRAME =====
   Constrains the visible body to a phone-ish width and floats it on a
   dark backdrop so the framed region is obvious. */
html.view-mobile {
    background: #0a0f1a !important;
}
html.view-mobile body {
    max-width: 420px !important;
    margin: 0 auto !important;
    min-height: 100vh !important;
    border-left: 1px solid #334155 !important;
    border-right: 1px solid #334155 !important;
    box-shadow: 0 0 60px rgba(0,0,0,0.6) !important;
    overflow-x: hidden !important;
    position: relative;
}
/* "MOBILE PREVIEW" badge so it's obvious you're in preview mode. */
html.view-mobile body::before {
    content: "📱 MOBILE PREVIEW (420px)";
    position: fixed; top: 4px; left: 50%; transform: translateX(-50%);
    background: #1e293b; color: #38bdf8;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    padding: 3px 10px; border-radius: 0 0 6px 6px;
    border: 1px solid #334155; border-top: none;
    z-index: 99999; pointer-events: none;
}

/* ===== Card grids collapse to 1 column ===== */
html.view-mobile .mfr-cards,
html.view-mobile .mfr-cards-2,
html.view-mobile .mfr-cards-3,
html.view-mobile .mfr-cards-4,
html.view-mobile .ctr-detail-grid,
html.view-mobile .grid-2,
html.view-mobile .grid-3,
html.view-mobile .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

/* ===== Headers / top-bars wrap instead of horizontal overflow ===== */
html.view-mobile .mfr-header,
html.view-mobile header.top,
html.view-mobile header.header,
html.view-mobile #top-bar,
html.view-mobile .app-header {
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 10px 12px !important;
    gap: 8px !important;
}
html.view-mobile .header-spacer,
html.view-mobile .top-bar-center { flex-basis: 100%; }
html.view-mobile .header-actions { flex-wrap: wrap !important; gap: 4px !important; }
html.view-mobile .btn-sm,
html.view-mobile header .btn { font-size: 0.72rem !important; padding: 3px 8px !important; }
html.view-mobile .top-link { font-size: 0.72rem !important; padding: 3px 8px !important; }

/* ===== Layouts collapse to single-column in mobile ===== */
html.view-mobile .layout,
html.view-mobile #app-layout,
html.view-mobile main:not(.mfr-main) {
    grid-template-columns: 1fr !important;
    display: block !important;
}

/* System Builder's #sidebar is a *form-panel* sidebar (Room Properties,
   Heat Load, etc.), NOT a tab navigation — it stacks vertically below
   the canvas, no sticky-strip transform. */
html.view-mobile #app-layout > aside#sidebar {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    margin: 0 0 12px 0 !important;
    border-right: none !important;
    border-bottom: 1px solid #334155 !important;
}

/* Section navigations: vertical sidebar -> sticky horizontal pill strip.
   Applies to Project Tracker (nav.sidebar) and the "On this page" TOCs
   in Freight Planner / Heat Load / Estimator (aside.toc). The strip stays
   pinned at the top of the content area so tapping into a section never
   costs the user access to the other tabs. */
html.view-mobile nav.sidebar,
html.view-mobile aside.toc {
    position: sticky !important;
    top: 0 !important;
    z-index: 50;
    width: 100% !important;
    max-height: none !important;
    margin: 0 0 12px 0 !important;
    border-radius: 0 0 8px 8px !important;
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    padding: 8px 10px !important;
}
/* Hide the vertical "VIEWS" / "ON THIS PAGE" labels in horizontal mode. */
html.view-mobile nav.sidebar > .toc-label,
html.view-mobile aside.toc .toc-label { display: none !important; }
/* Each nav item becomes a horizontal pill that scrolls horizontally. */
html.view-mobile nav.sidebar .nav-item,
html.view-mobile aside.toc a {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    border-left: none !important;                 /* drop the left-rail */
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    font-size: 0.82rem !important;
}
html.view-mobile nav.sidebar .nav-item.active,
html.view-mobile nav.sidebar .nav-item:hover,
html.view-mobile aside.toc a.is-active,
html.view-mobile aside.toc a:hover {
    border-left: none !important;
    border-bottom-color: #38bdf8 !important;
    background: transparent !important;
}
/* Counts in tracker nav-items: keep them but slightly tighter */
html.view-mobile nav.sidebar .nav-item .count {
    margin-left: 6px !important; padding: 0 5px !important;
}
/* Freight Planner's TOC uses <ul><li> wrappers — flatten them into the
   horizontal row so they don't break the flex layout. */
html.view-mobile aside.toc ul {
    display: contents !important;
}
html.view-mobile aside.toc li { margin: 0 !important; flex-shrink: 0; }
/* Bid-builder TOC takes too much room in a phone frame — hide it. */
html.view-mobile .ctr-bid-toc { display: none !important; }

/* ===== Tables become horizontally scrollable ===== */
html.view-mobile .ctr-compare-table-wrap,
html.view-mobile .ctr-mfr-summary-wrap,
html.view-mobile .equipment-table-wrap,
html.view-mobile main table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}
html.view-mobile table { font-size: 0.78rem !important; }
html.view-mobile table th,
html.view-mobile table td { padding: 6px 8px !important; }

/* ===== Type scale shrinks slightly so headings don't dominate ===== */
html.view-mobile body { font-size: 14px !important; }
html.view-mobile h1, html.view-mobile .mfr-h1 { font-size: 1.25rem !important; }
html.view-mobile h2 { font-size: 1.05rem !important; }
html.view-mobile h3 { font-size: 0.95rem !important; }

/* ===== System Builder phase indicator: shrink ===== */
html.view-mobile #phase-indicator {
    transform: scale(0.65);
    transform-origin: center;
}
html.view-mobile .phase-step .phase-label { display: none; }

/* ===== Project setup modal becomes a stacked form ===== */
html.view-mobile .project-setup-row { flex-direction: column !important; }
html.view-mobile .project-setup-field { flex-basis: auto !important; }

/* ===== Bid builder line items: stack the spec pairs ===== */
html.view-mobile .ctr-line-selection,
html.view-mobile .ctr-line-selection-wide {
    grid-template-columns: 1fr !important;
}

/* ===== Compare-view: reduce horizontal pressure ===== */
html.view-mobile .ctr-compare-table th,
html.view-mobile .ctr-compare-table td { min-width: 110px !important; }

/* ===== Iframe-mode (tools embedded in portal): hide the constraint
         because the parent portal already provides the phone frame. */
html.embedded.view-mobile body {
    max-width: none !important;
    border: none !important;
    box-shadow: none !important;
}
html.embedded.view-mobile body::before { display: none !important; }