/* * RackMapper-EP — canvas-first application shell (v2) * ----------------------------------------------------------------------- * Replaces the old three-column "settings page next to a small preview" * shell (formerly in app-shell.css) for warehouse.html and racking.html. * That shell read as a CAD tool wrapped in nicer CSS. This one is built * from a different premise: one dominant canvas per page, a minimal * permanent chrome, and everything else — project details, fine-tune * numbers, layer toggles — surfaced only when asked for, as a floating * inspector or a bottom sheet, never as a fixed sidebar competing with * the canvas for space. * * Reused unchanged from style.css: .nav / .brand / .theme-toggle / .btn / * .icon / .hud-chip / .layer-check / .tool-rail(-compact) / mock-* SVG * label classes. Reused unchanged from app-shell.css: .suite-label / * .status-pill / .panel-title / .field-grid / .choice-group+chip. * * Backs the real, live application — every control here drives * RMProject state through the shared calculation/geometry engine * (js/layout.js, js/racking.js, js/install-calc.js etc.) and autosaves * via js/project-storage.js, not a static or presentation-only mockup. */ /* --------------------------------------------------------------------- Page shell — full viewport, non-scrolling. Header keeps its own height; everything below (.canvas-stepper-bar, .canvas-stage, .canvas-actions) shares the rest. --------------------------------------------------------------------- */ body.canvas-body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } body.canvas-body .nav { flex: none; } .nav-inner-edge { width: 100%; padding: 0 var(--space-5); } /* ======================================================================= Shared application shell — sidebar + top bar + main workspace column ----------------------------------------------------------------------- Master-reference shell (Pic/RackMapper-UI-MASTER-REFERENCE.png): a full-height left navigation rail (brand at its top, module links, Settings/Help pinned at the bottom) beside a per-page column of [.app-topbar, workspace content]. Racking is the reference implementation this gets built against first; every other workspace page adopts the same classes. ======================================================================= */ .app-shell-body { flex: 1; min-height: 0; display: flex; flex-direction: row; overflow: hidden; } .app-shell-main { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } /* ---- left application sidebar — collapsed to icon-only by default on every workspace page (Warehouse/Racking/Layout/3D/Install/Report — visual-correction pass), expandable to icon+label via the toggle for anyone who wants the full labelled rail. Collapses via a CSS-only checkbox (#sidebarCollapse, a preceding sibling of .app-shell-body — same convention as .sheet-toggle elsewhere in this app), no JS required. ---- */ .app-sidebar { flex: none; width: 208px; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-4) var(--space-3); border-right: 1px solid var(--border); background: var(--bg-elevated); transition: width var(--duration-fast) var(--ease-out); overflow: hidden; } .app-sidebar-toggle-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } .app-sidebar-brand { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex: none; padding: 0 4px; } .app-sidebar-brand-link { display: flex; align-items: center; gap: 8px; text-decoration: none; overflow: hidden; min-width: 0; } /* Compact lockup for the sidebar (vs. the 24x24 header/footer default in css/style.css) — same fixed-pixel-slot pattern, just a smaller slot. */ .app-sidebar-brand-link .brand-mark { flex: none; display: flex; width: 20px; height: 20px; } .app-sidebar-brand-word { font-family: var(--font-display); font-size: 1.02em; font-weight: 700; color: var(--text); white-space: nowrap; } .app-sidebar-brand-word strong { color: var(--accent); font-weight: 700; } .app-sidebar-toggle { display: flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; border-radius: var(--radius-sm); color: var(--text-faint); cursor: pointer; flex: none; } .app-sidebar-toggle:hover { background: var(--bg-elevated-2); color: var(--text); } /* The real focusable element is the hidden #sidebarCollapse checkbox (this label just triggers it) — style the visible label when the checkbox itself has keyboard focus, same sibling-combinator technique already used for its :checked state above. */ #sidebarCollapse:focus-visible ~ .app-shell-body .app-sidebar-toggle { outline: 2px solid var(--accent); outline-offset: 2px; } .app-sidebar-toggle-icon { width: 1em; height: 1em; transform: rotate(180deg); transition: transform var(--duration-fast) var(--ease-out); } .app-sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; } .app-sidebar-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); font-size: 0.82em; font-weight: 600; color: var(--text-muted); text-decoration: none; white-space: nowrap; flex: none; } .app-sidebar-link .icon { width: 1.15em; height: 1.15em; flex: none; } .app-sidebar-link:hover { background: var(--bg-elevated-2); color: var(--text); } .app-sidebar-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .app-sidebar-link.is-active { background: var(--accent); color: #fff; font-weight: 700; } .app-sidebar-link-label { overflow: hidden; text-overflow: ellipsis; } .app-sidebar-bottom { display: flex; flex-direction: column; gap: 2px; flex: none; border-top: 1px solid var(--border); padding-top: var(--space-3); } /* Settings/Help (Aug 2026) — real buttons now (js/app-settings.js, js/app-help.js), reusing .app-sidebar-link's own look exactly. The only addition needed is a plain button reset, since every other .app-sidebar-link is an . */ .app-sidebar-link-btn { background: none; border: none; width: 100%; text-align: left; font: inherit; -webkit-appearance: none; appearance: none; cursor: pointer; } /* Kept for any old markup still using it — a fully inert, unclickable row. */ .app-sidebar-link-disabled { color: var(--text-faint); opacity: 0.55; cursor: default; } .app-sidebar-link-disabled:hover { background: none; color: var(--text-faint); } /* Collapsed state (checkbox checked = collapsed; unchecked/default = the full expanded rail shown in the reference). */ #sidebarCollapse:checked ~ .app-shell-body .app-sidebar { width: 60px; } #sidebarCollapse:checked ~ .app-shell-body .app-sidebar-brand-word, #sidebarCollapse:checked ~ .app-shell-body .app-sidebar-link-label { display: none; } #sidebarCollapse:checked ~ .app-shell-body .app-sidebar-brand, #sidebarCollapse:checked ~ .app-shell-body .app-sidebar-link { justify-content: center; padding: 0; } #sidebarCollapse:checked ~ .app-shell-body .app-sidebar-toggle-icon { transform: rotate(0deg); } /* layout.html's Layers and Project Health sheets — bug fix. Both toggles (#layersSheetToggle/#healthSheetToggle) sit at body level, same as every other page's sheet toggle, but on this page their own .sheet-backdrop/.canvas-sheet markup lives inside .app-shell-body (nested under the sidebar/topbar shell only this page has), so the shared ".sheet-toggle:checked ~ .canvas-sheet" rule above — a plain sibling combinator — never matched them: .canvas-sheet wasn't a direct sibling of the checkbox, it was a sibling's descendant. This silently broke opening either sheet (Project Health button included) even though the checkbox itself toggled correctly. Same fix already used for #sidebarCollapse just above: reach through the shared .app-shell-body ancestor with an ordinary descendant combinator instead of relying on direct adjacency. */ #layersSheetToggle:checked ~ .app-shell-body .sheet-backdrop[for="layersSheetToggle"], #healthSheetToggle:checked ~ .app-shell-body .sheet-backdrop[for="healthSheetToggle"] { display: block; } #layersSheetToggle:checked ~ .app-shell-body .layers-canvas-sheet, #healthSheetToggle:checked ~ .app-shell-body .health-canvas-sheet { transform: translate(-50%, 0); } @media (max-width: 900px) { /* The top bar's own controls carry the page at phone widths, and the sidebar's module links would otherwise eat most of a small screen — hide it rather than squeeze the canvas further. */ .app-sidebar { display: none; } } /* --------------------------------------------------------------------- Application top bar — one compact row per the master reference: workspace title + autosave status on the left, Undo/Redo/Save/primary action on the right. Replaces the old header-nav + stepper-bar pair; the RackMapper wordmark now lives once, at the top of .app-sidebar. --------------------------------------------------------------------- */ .app-topbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--border); background: var(--bg-elevated); min-height: 64px; } .app-topbar-left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .app-topbar-title { font-family: var(--font-display); font-size: 1.15em; font-weight: 700; color: var(--text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-topbar-right { display: flex; align-items: center; gap: var(--space-2); flex: none; } .app-topbar-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; } .app-topbar-icon-btn:hover:not(:disabled) { background: var(--bg-elevated-2); color: var(--text); } .app-topbar-icon-btn:disabled { color: var(--text-faint); opacity: 0.4; cursor: default; } .app-topbar-icon-btn .icon { width: 1.1em; height: 1.1em; } .app-topbar-sep { width: 1px; height: 24px; background: var(--border); margin: 0 4px; flex: none; } .status-pill-success { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.4); color: #22c55e; } .status-pill-success .status-pill-dot { background: #22c55e; } @media (max-width: 640px) { .app-topbar { padding: var(--space-3) var(--space-4); flex-wrap: wrap; gap: var(--space-3); } .app-topbar-title { font-size: 1em; } /* .app-topbar-right alone (theme/details/undo/redo icon buttons + Save + the long-text primary action) is wider than any phone in portrait — on a 320px-wide screen its own controls measure ~534px. The parent's flex-wrap above only moves the whole left/right groups onto separate rows; it can't stop a single group from overflowing its own row. Each group is given the full row width and allowed to wrap internally, so controls that don't fit drop to a second line instead of clipping or forcing the page to scroll horizontally. */ .app-topbar-left, .app-topbar-right { width: 100%; } .app-topbar-right { flex-wrap: wrap; justify-content: flex-start; row-gap: var(--space-2); } /* Title truncation fix — .app-topbar-left's own later siblings (the "Auto-saved" status pill, the Stage Guide chip) are fixed-width flex items competing with the title for the same single row; since the title's min-width:0 (inherited) lets it shrink before those siblings do, on a phone-width row it was squeezed down to "Wareh...". The classic flex trick — give the FIRST item that should start a new row flex-basis:100% — pushes the status pill (and the Stage Guide chip after it in DOM order) onto their own row, so line 1 is just the Home/Back icon button(s) + the title, which is what actually needs the width. Scoped to .app-topbar-left's own status pill only, not the shared .status-pill class used elsewhere on these pages. Title keeps its existing ellipsis rule as a safety net only, for a name too long to fit even that freed-up row. */ .app-topbar-left { flex-wrap: wrap; row-gap: var(--space-2); } .app-topbar-left .status-pill { flex-basis: 100%; } } /* --------------------------------------------------------------------- Stepper bar — replaces the old cramped workflow row. Larger step circles, a connecting line, and the current step's name spelled out; done/future steps stay quiet numbers so the eye goes straight to where you are. Project identity sits on the right, not wedged into the middle. --------------------------------------------------------------------- */ .canvas-stepper-bar { flex: none; display: flex; align-items: center; gap: var(--space-6); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); background: var(--bg-elevated); } .canvas-stepper { display: flex; align-items: center; gap: var(--space-2); } .canvas-step { display: flex; align-items: center; gap: 8px; font-size: 0.86em; font-weight: 700; color: var(--text-faint); text-decoration: none; } /* Non-active steps are real links to that stage — genuine destinations, so they navigate rather than sitting there as inert progress dots. */ a.canvas-step { cursor: pointer; } a.canvas-step:hover { color: var(--text); } a.canvas-step:hover .canvas-step-dot { border-color: var(--accent-line); color: var(--accent); } .canvas-step-dot { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 0.78em; font-weight: 800; background: var(--bg-sunken); border: 1.5px solid var(--border-strong); color: var(--text-faint); flex: none; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .canvas-step.is-done .canvas-step-dot { background: var(--bg-elevated-2); border-color: var(--border-strong); color: var(--text-muted); } .canvas-step.is-active .canvas-step-dot { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); } .canvas-step.is-active { color: var(--text); } .canvas-step-label { white-space: nowrap; } /* UX clarity pass: the stage journey (Warehouse -> Racking -> Layout -> RM Install) must be permanently obvious, the way production's own always-labelled wizard bar is — labels no longer hide on inactive steps at desktop/laptop widths. Still collapses to numbers-only on tablet/phone (see the max-width:900px override below) where width is genuinely scarce. */ .canvas-step-line { width: 28px; height: 2px; background: var(--border-strong); flex: none; } .canvas-identity { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); } .canvas-identity-name { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 0.95em; font-weight: 700; color: var(--text); white-space: nowrap; } .canvas-identity-name .icon { color: var(--accent); } .canvas-identity-dims { font-size: 0.82em; font-weight: 600; color: var(--text-faint); white-space: nowrap; } .canvas-details-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--bg-elevated-2); color: var(--text); font-size: 0.84em; font-weight: 700; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); } .canvas-details-btn:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); } .canvas-details-btn .icon { width: 1em; height: 1em; } /* --------------------------------------------------------------------- The stage — one dominant, full-bleed canvas. Same dot-grid ground as the old .preview-canvas, kept because it reads as "drawing surface" without saying so in words. --------------------------------------------------------------------- */ .canvas-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; padding: var(--space-7); background: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 34px 34px; background-position: center; overflow: hidden; } .canvas-stage svg { position: relative; z-index: 1; width: auto; height: 100%; max-width: 100%; max-height: 100%; } /* Batch 2 (Warehouse UX): a plain crosshair while any placement tool is armed (Column/Door/Fire Exit/Walkway/Obstacle), so it's visually obvious the next click/drag on the canvas places something. Toggled by js/warehouse.js's armTool(). */ .canvas-stage.is-placing svg { cursor: crosshair; } /* --------------------------------------------------------------------- warehouse.html workspace — master-reference structure: left Tools + Site Survey, centre dominant drawing, right Warehouse Dimensions / Selected Object. Three-column row instead of the old canvas-first/ floating-rail approach; the canvas still gets the majority of the width (flex:1 on the centre column, the two side columns fixed). --------------------------------------------------------------------- */ .wh-workspace { flex: 1; min-height: 0; display: flex; overflow: hidden; } .wh-tools-rail { flex: none; /* Widened from 220px — this rail now also carries the Warehouse Dimensions fields (moved from the old right-hand rail) above the placement tools, so it needs the extra room those inputs need. */ width: 300px; overflow-y: auto; padding: var(--space-5); border-right: 1px solid var(--border); background: var(--bg-elevated); display: flex; flex-direction: column; } /* Compact list rows, not full-height pill buttons — matches the approved reference's Tools list (icon + label, ~34px rows, active item picked out with a soft fill, everything else flush against the rail edge). Scoped to .wh-tool-list so the shared floating-pill .canvas-dock-btn used elsewhere (its own zoom pill, Racking's dock) is untouched. */ .wh-tool-list { display: flex; flex-direction: column; gap: 1px; margin-top: var(--space-3); } .wh-tool-list .canvas-dock-btn { width: 100%; justify-content: flex-start; min-height: 34px; padding: 0 10px; border-radius: var(--radius-sm); } /* Site Survey counts — a compact icon+label+value list (reference's own presentation) instead of wrapped pill chips, so 5 categories cost ~150px instead of two wrapped rows of oversized chips. */ .wh-survey-counts { display: flex; flex-direction: column; gap: 1px; margin: var(--space-3) 0; } .wh-survey-count-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--radius-sm); font-size: 0.78em; font-weight: 600; color: var(--text-muted); } .wh-survey-count-row .icon { width: 15px; height: 15px; flex: none; color: var(--text-faint); } .wh-survey-count-row-label { flex: 1; min-width: 0; } .wh-survey-count-row-value { font-family: var(--font-display); font-weight: 700; color: var(--text); } /* Compact expand-on-focus notes field, replacing the old fixed 3-row textarea — collapsed it reads as one clean input row; focusing it grows the writing area instead of permanently reserving the space. Same #siteSurveyNotes id/data binding as before, styling only. */ .wh-notes-textarea { width: 100%; min-height: 40px; max-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-sunken); color: var(--text); font: inherit; font-size: 0.8em; line-height: 1.35; resize: none; overflow: hidden; box-sizing: border-box; transition: max-height var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .wh-notes-textarea::placeholder { color: var(--text-faint); } .wh-notes-textarea:hover { border-color: var(--border-strong); } .wh-notes-textarea:focus { max-height: 130px; overflow-y: auto; outline: none; background: var(--bg-elevated); border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); } /* Live preview rect while drawing a Walkway by click+drag (Batch 2, Part 5) — dashed accent outline, semi-transparent fill, purely visual (pointer-events off so it never intercepts its own drag). */ .wh-walkway-preview { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 3; pointer-events: none; } /* Subtle, app-styled scrollbars for the tools rail + the Site Survey list — if content genuinely overflows a short viewport, it should read as a slim internal scroll affordance, never a fat OS-default scrollbar dominating the side of the screen. */ .wh-tools-rail, .survey-list { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .wh-tools-rail::-webkit-scrollbar, .survey-list::-webkit-scrollbar { width: 6px; } .wh-tools-rail::-webkit-scrollbar-track, .survey-list::-webkit-scrollbar-track { background: transparent; } .wh-tools-rail::-webkit-scrollbar-thumb, .survey-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); } @media (max-width: 1180px) { .wh-tools-rail { width: 260px; } } @media (max-width: 900px) { .wh-workspace { flex-direction: column; overflow-y: auto; } /* max-height + this rail's own overflow-y:auto (base rule above) used to give it a second, nested scroll region inside .wh-workspace's own scroll — on a touch screen the drag naturally scrolls whichever region is under the finger first, so swiping over this rail scrolled IT to its own bottom (Site Survey, its last section) without ever reaching the rest of the page, making the Warehouse Dimensions fields above Site Survey seem to disappear. Letting the rail size to its full content height removes the inner scroll region entirely, so .wh-workspace is the only scroller and one swipe reaches everything in order: canvas, dimensions, Site Survey. */ .wh-tools-rail { width: auto; max-height: none; overflow-y: visible; border-left: none; border-right: none; border-top: 1px solid var(--border); order: 2; } /* flex:1 on .canvas-stage inside a now content-driven (not viewport- bound) scroll column had no upper limit, so it could inflate to fill most of the screen and push the dimensions fields further down than necessary. A fixed viewport-relative height keeps the canvas usefully sized without starving the fields/Site Survey below it. Scoped to .wh-workspace specifically — .canvas-stage is the same class layout.html's drawing canvas uses, and that page has no competing content below it fighting for room the way Warehouse's dimension fields + Site Survey do, so it should keep its original flex:1 (full available height) rather than inherit this 45vh cap. */ .wh-workspace .canvas-stage { order: 1; flex: none; height: 45vh; min-height: 280px; } } /* --------------------------------------------------------------------- Layout & Design — visual-correction pass. Left compact labelled tool rail + dominant centre canvas + bottom CAD status bar, replacing the old floating pill dock / scattered readout chips / floating zoom pill. Same structural family as .wh-workspace/.wh-tools-rail above, parameterised for Layout's own tool set. --------------------------------------------------------------------- */ .layout-workspace { flex: 1; min-height: 0; display: flex; overflow: hidden; } .layout-tools-rail { flex: none; width: 196px; overflow-y: auto; padding: var(--space-4) var(--space-3); border-right: 1px solid var(--border); background: var(--bg-elevated); display: flex; flex-direction: column; gap: var(--space-4); } .layout-tool-group { display: flex; flex-direction: column; gap: 2px; } .layout-tool-group-label { font-size: 0.66em; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); padding: 0 10px 2px; } .layout-tool-btn { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: var(--radius-sm); font-size: 0.82em; font-weight: 700; /* Grey background + accent (purple in dark mode) text at rest — the previous dimmed off-white-on-off-white treatment (--text at 0.55 opacity) was hard to read until hovered. A solid grey surface with full-strength accent-coloured text reads clearly at rest, matching the rest of the app's button language. */ background: var(--bg-elevated-2); border: 1px solid transparent; color: var(--accent); opacity: 1; cursor: pointer; white-space: nowrap; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .layout-tool-btn .icon { width: 1.1em; height: 1.1em; flex: none; } .layout-tool-btn:hover { background: var(--accent-soft); color: var(--accent); } .layout-tool-btn:active:not(:disabled) { transform: scale(0.97); } .layout-tool-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .layout-tool-btn.is-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); } .layout-tool-btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } /* Secondary view utilities (Pan/Fit/Reset/Paste/Health/Report) — a compact icon-only row pinned to the rail's bottom, still reachable but not competing with the labelled primary tools above for space. */ .layout-tool-rail-bottom { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 4px; } .layout-tool-rail-bottom button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); color: var(--text-faint); cursor: pointer; transition: transform var(--duration-fast) var(--ease-out); } .layout-tool-rail-bottom button .icon { width: 1.05em; height: 1.05em; } .layout-tool-rail-bottom button:hover { background: var(--bg-elevated-2); color: var(--text); } .layout-tool-rail-bottom button:active:not(:disabled) { transform: scale(0.97); } .layout-tool-rail-bottom button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .layout-tool-rail-bottom button.is-active { background: var(--accent-soft); color: var(--accent); } .layout-tool-rail-bottom button:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } /* ---- bottom CAD status bar — compact, always the same height, replaces the old floating top-left readout chips + floating bottom-right zoom pill with one calm strip of real numbers, the way a real planning application reports model/view state. ---- */ .layout-status-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); background: var(--bg-elevated); } .layout-status-group { display: flex; align-items: center; gap: var(--space-5); } .layout-status-item { display: flex; align-items: baseline; gap: 8px; } /* Readout stats (Aug 2026: enlarged for readability) — bumped up from 0.92em/0.68em; the bar's own padding and the separator height grow to match so the larger text still sits centred and neatly aligned rather than looking cramped inside the same-height strip. */ .layout-status-item strong { font-family: var(--font-display); font-size: 1.28em; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } .layout-status-item label { font-size: 0.78em; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-faint); } .layout-status-sep { width: 1px; height: 28px; background: var(--border-strong); flex: none; } /* Zoom control reused inline in the status bar instead of its own floating pill — same buttons/ids/behaviour, just not overlapping the drawing any more. Sized up (Aug 2026) well beyond the shared .canvas-zoom-btn/.canvas-zoom-value base (34px btn / 0.78em value, still used by the floating pill on Warehouse/Racking) — scoped to this inline variant only so those other pages are untouched. */ .canvas-zoom-inline { position: static; border: none; box-shadow: none; background: none; backdrop-filter: none; padding: 0; gap: 4px; } .canvas-zoom-inline .canvas-zoom-btn { width: 44px; height: 44px; font-size: 1.3em; } .canvas-zoom-inline .canvas-zoom-value { min-width: 4.6ch; font-size: 1.05em; font-weight: 700; color: var(--text); } @media (max-width: 1180px) { .layout-tools-rail { width: 172px; } } @media (max-width: 900px) { .layout-workspace { flex-direction: column; overflow-y: auto; } .layout-status-group-zoom { width: 100%; justify-content: center; } .layout-tools-rail { width: auto; flex-direction: row; align-items: center; gap: var(--space-3); max-height: none; padding: var(--space-2) var(--space-4); border-right: none; border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; order: 2; } .layout-tool-group { flex-direction: row; gap: 4px; } .layout-tool-group-label { display: none; } /* 44px is this app's own established minimum touch target (see the iPhone-fix block further down this file) — the icon-only rail row was still using its desktop 40px height. */ .layout-tool-btn { padding: 0 10px; min-height: 44px; } .layout-tool-btn span { display: none; } .layout-tool-rail-bottom { margin-top: 0; padding-top: 0; border-top: none; border-left: 1px solid var(--border); padding-left: var(--space-3); } .layout-tool-rail-bottom button { width: 44px; height: 44px; } .canvas-stage { order: 1; min-height: 320px; } /* Root-cause fix (Layout mobile redesign pass): .layout-workspace switches to a plain scrolling column here, so .canvas-stage no longer sits inside a fixed-height flex row — it has no definite height of its own, just the min-height above. #layoutSvg's own `height: 100%` (see .canvas-stage svg, shared rule) only resolves against a DEFINITE parent height per the CSS spec; min-height alone doesn't count, so the drawing itself was sized unpredictably (often far smaller than the 320px box around it) instead of filling it. Same fix already proven for warehouse.html's structurally identical .wh-workspace .canvas-stage just above (45vh/280px) — a real vh height gives the SVG something definite to fill against, and keeps the warehouse drawing usefully visible above the tool rail/status bar rather than collapsing. Scoped to .layout-workspace so it can't affect the shared bare .canvas-stage rule other pages may still rely on. */ .layout-workspace .canvas-stage { flex: none; height: 48vh; min-height: 320px; } .layout-status-bar { flex-wrap: wrap; gap: var(--space-3); order: 3; } } @media (max-width: 640px) { .layout-status-group { flex-wrap: wrap; gap: var(--space-3); } .layout-status-item label { display: none; } } /* --------------------------------------------------------------------- layout.html — reuses .canvas-stage/.canvas-readout for the shell; these are the page's own bits: the run-label text style, and the two states (generated / nothing generated yet). --------------------------------------------------------------------- */ .layout-canvas-wrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } #layoutSvg .layout-run-label { font-family: var(--font-body, inherit); font-size: 11px; font-weight: 700; fill: var(--text); pointer-events: none; } /* CAD-quality rack geometry — Batch 4 visual-redesign pass. Colour language now matches the Racking Configurator's own frame/beam palette (Batch 3) so a run looks like the same physical product whether you're looking at the plan (Layout) or the elevation (Racking): uprights are the same structural blue, beams the same structural orange. Both are deliberately colour-blind-safe, distinct from purple (accent/selection only) and from the red/amber/green already used for clash/relocated/ fire-exit — uprights and beams read as real structure, not another status colour. Opacity composition (Part 5 scale-aware detail + locked-run dimming): --layout-lod-opacity is written on #layoutSvg itself by updateLodOpacity() (js/layout.js), on every render AND on every zoom/ pinch step (zoom alone never re-runs render(), so this has to be able to update independently — see the comment beside that function) — a single continuous 0-1 value for how much secondary rack detail the current zoom level warrants. --lock is set per-element only on runs that are actually locked. Composing them with calc() rather than two separate opacity rules is required: opacity rules don't stack, the most specific one simply wins, so end posts (always fully visible structure) only ever see --lock, while intermediate posts and bay- division lines (genuinely secondary at far zoom) see both. */ #layoutSvg .layout-run-beam { stroke: #c2540d; stroke-width: 1.4; opacity: 0.9; pointer-events: none; } #layoutSvg .layout-run-upright { fill: #2f6fed; stroke: #1d4ed8; stroke-width: 0.5; pointer-events: none; opacity: var(--lock, 1); } #layoutSvg .layout-run-upright.is-end-post { fill: #1d4ed8; } #layoutSvg .layout-run-upright.is-lod-detail { opacity: calc(var(--lock, 1) * var(--layout-lod-opacity, 1)); } #layoutSvg .layout-run-bay-line { pointer-events: none; } #layoutSvg .layout-run-bay-line.is-lod-detail { opacity: calc(0.4 * var(--layout-lod-opacity, 1)); } #layoutSvg .layout-run-protection { fill: var(--warn-soft); stroke: var(--warn); stroke-width: 1; pointer-events: none; } #layoutSvg .layout-run-dim-label { font-family: var(--font-body, inherit); font-size: 9px; font-weight: 700; fill: var(--text-faint); pointer-events: none; } .layout-empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 360px; position: relative; z-index: 1; } .layout-empty-state .icon { width: 40px; height: 40px; color: var(--text-faint); margin-bottom: 4px; } .layout-empty-title { font-size: 1.1em; font-weight: 800; margin: 0; } .layout-empty-body { font-size: 0.88em; color: var(--text-muted); margin: 0 0 6px; line-height: 1.5; } /* --------------------------------------------------------------------- layout.html — Phase D1 core run editing. Reuses .canvas-dock/ .canvas-inspector/.canvas-readout unchanged from the shared canvas shell above (same components warehouse.html/racking.html already use) — these are just the run-drawing states those components react to: selected/locked/shaking, plus the resize handles and lock badge drawn directly into the SVG by js/layout.js's render(). --------------------------------------------------------------------- */ #layoutSvg { touch-action: none; } /* #whSvg has the same pointer-drag gestures (resize handles, obstacle drag) as #layoutSvg above — found missing its touch-action:none during the Phase D6 cleanup pass, which on iOS Safari lets the browser's own scroll/pan gesture fight with a drag in progress. */ #whSvg { touch-action: none; } .layout-run { cursor: grab; } .layout-run.is-locked { cursor: default; } .layout-run-lock-icon { color: var(--warn); pointer-events: none; } .layout-resize-handle { fill: var(--bg-elevated); stroke: var(--accent); stroke-width: 1.5; cursor: nwse-resize; } /* A locked run that was just clicked/dragged/rotated/deleted gets a brief shake rather than a silent no-op, so "why didn't that work" never has to be guessed at — the inline message underneath explains why. */ @keyframes layoutRunShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } } .layout-run.is-shake { animation: layoutRunShake 0.4s ease-in-out; } /* Inline feedback strip for rejected actions — floats just above the dock, never a browser alert(). No auto-dismiss (matches production's own equivalent message area): stays until the next message replaces it or the page state moves on. */ .layout-action-message { position: absolute; left: 50%; bottom: calc(var(--space-6) + 64px); transform: translateX(-50%); align-items: center; gap: 8px; max-width: min(560px, calc(100% - var(--space-6) * 2)); padding: 9px 18px; border-radius: var(--radius-pill); background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-md); font-size: 0.82em; font-weight: 700; color: var(--text); text-align: center; z-index: 5; } .layout-action-message.is-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); } .layout-action-message.is-success { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } /* Dock buttons disabled when there's no selection to act on (Rotate/ Lock/Delete/Paste/Undo/Redo) — same visual language as .segmented-btn[aria-disabled] elsewhere: clearly inert, never silently unresponsive. */ .canvas-dock-btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } /* Same treatment, span-compatible — warehouse.html's dock tools/Add Item are s (no native :disabled), locked via .is-disabled until valid Length/Width exist (js/warehouse.js's syncPlacementToolsAvailability()). */ .canvas-dock-btn.is-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } /* --------------------------------------------------------------------- layout.html — Phase D2 run property editor + context menu. The inspector is the same floating .canvas-inspector card from D1, just wider and scrollable so it can hold every production run field without ever squeezing the canvas into a narrow strip. --------------------------------------------------------------------- */ /* Widened from 300px and given a hard overflow-x guard — a real customer's browser showed horizontal scroll inside the selected-run inspector at the old width, which reads as unfinished on what should feel like a Figma/Apple-grade property panel. 320px keeps two-column field rows (.ep-field-grid) comfortably clear of their content at every zoom level without crowding the canvas it floats over. */ /* Widened substantially (380px -> 520px -> 620px) so the Run Inspector's two-column field grids (DIMENSIONS/STORAGE/SPACING/EQUIPMENT & PROTECTION) have real horizontal room and never need their own scrollbar just to fit, and taller (720px -> 820px max-height) so more of a run's fields are visible without scrolling on a full-height desktop window. Capped against the viewport so it can never overflow narrower/shorter windows, and extra padding to match the larger card. Selector bumped to the compound .canvas-inspector.canvas-inspector-wide (was plain .canvas-inspector-wide) — with equal specificity, the base .canvas-inspector rule further down the file (width:240px, the small generic popup size) was winning the cascade on width/padding purely by coming later in source order, silently capping every "wide" instance back down to 240px regardless of the values here. This is the actual fix for "the run inspector looks too small" — the wide variant simply wasn't applying. */ .canvas-inspector.canvas-inspector-wide { width: min(620px, calc(100vw - 64px)); max-height: min(90vh, 820px); padding: var(--space-5); display: flex; flex-direction: column; overflow-x: hidden; } .canvas-inspector-wide .ep-inspector-body { overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; /* Same subtle app-styled scrollbar as the workspace rails (see .wh-tools-rail/.rack-spec-rail above) instead of the OS-default bar, now that the panel itself is wide enough that content rarely needs to scroll sideways at all. */ scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .canvas-inspector-wide .ep-inspector-body::-webkit-scrollbar { width: 6px; } .canvas-inspector-wide .ep-inspector-body::-webkit-scrollbar-track { background: transparent; } .canvas-inspector-wide .ep-inspector-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); } .ep-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .ep-field-label { font-size: 0.76em; font-weight: 700; color: var(--text-faint); display: flex; flex-direction: column; gap: 1px; } .ep-field-hint { font-size: 0.92em; font-weight: 500; color: var(--text-faint); opacity: 0.85; } .ep-field input, .ep-field select, .ep-field textarea { min-height: 34px; padding: 5px 8px; font-family: var(--font-sans); font-size: 0.86em; font-weight: 700; color: var(--text); background: var(--bg-sunken); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); width: 100%; } .ep-field textarea { min-height: 52px; font-weight: 500; resize: vertical; } .ep-field input:disabled, .ep-field select:disabled { opacity: 0.5; cursor: not-allowed; } .ep-field input:focus, .ep-field select:focus, .ep-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .ep-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .ep-field-grid .ep-field { margin-bottom: 10px; } .ep-lock-note { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn); font-size: 0.78em; font-weight: 600; line-height: 1.4; } .ep-lock-note .icon { width: 1.1em; height: 1.1em; flex: none; margin-top: 1px; } .ep-action-row { display: flex; gap: 6px; margin-bottom: 8px; } .ep-action-row .btn { flex: 1; justify-content: center; padding: 0 8px; font-size: 0.78em; } .ep-action-row .btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Selected-run action row's "More" flyout — Copy/Delete, one tap behind the four primary actions (Rotate/Duplicate/Lock/More). Anchored to its own wrapper (not a modal) so it never blocks the rest of the panel; dismissed on outside click same as the canvas context menu. */ .ep-more-menu-wrap { position: relative; flex: 1; display: flex; } .ep-more-menu-wrap > .btn { width: 100%; } .ep-more-menu { display: none; position: absolute; top: calc(100% + 4px); right: 0; width: 160px; flex-direction: column; padding: 6px; border-radius: var(--radius-md); background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-xl); z-index: 20; } .ep-more-menu.is-open { display: flex; } .ep-more-menu button { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: var(--radius-sm); font-size: 0.85em; font-weight: 600; color: var(--text); background: none; border: none; text-align: left; cursor: pointer; } .ep-more-menu button:hover { background: var(--accent-soft); color: var(--accent); } .ep-more-menu button:hover .icon { color: var(--accent); } .ep-more-menu button .icon { width: 1.1em; height: 1.1em; flex: none; color: var(--text-muted); } .ep-more-menu button:disabled { opacity: 0.4; cursor: not-allowed; background: none; color: var(--text); } .ep-more-menu-danger { color: #dc2626 !important; } .ep-more-menu-danger .icon { color: #dc2626 !important; } .ep-more-menu-danger:hover { background: rgba(220, 38, 38, 0.08) !important; } .ep-more-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 34px; margin: 4px 0 10px; border-radius: var(--radius-sm); border: 1px dashed var(--border-strong); background: none; color: var(--text-muted); font-size: 0.78em; font-weight: 700; cursor: pointer; } .ep-more-toggle:hover { color: var(--accent); border-color: var(--accent-line); } .ep-more-toggle .icon { width: 1em; height: 1em; transition: transform var(--duration-fast) var(--ease-out); } .ep-more-body { padding-top: 2px; border-top: 1px solid var(--border); } .ep-section-title { font-family: var(--font-display); font-size: 0.72em; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); margin: 14px 0 8px; } .ep-section-title:first-child { margin-top: 4px; } .ep-section-title .ep-field-hint { text-transform: none; letter-spacing: 0; font-size: 1em; } /* Context menu — a small anchored popover (not a modal), same pattern as .type-chooser elsewhere: fixed position, dismiss on outside click or Escape, disabled items greyed rather than hidden. */ .context-menu { position: fixed; width: 200px; flex-direction: column; padding: 6px; border-radius: var(--radius-md); background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-xl); z-index: 60; } .context-menu.is-open { display: flex; } .context-menu button { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: var(--radius-sm); font-size: 0.85em; font-weight: 600; color: var(--text); background: none; border: none; text-align: left; cursor: pointer; } .context-menu button:hover { background: var(--accent-soft); color: var(--accent); } .context-menu button:hover .icon { color: var(--accent); } .context-menu button .icon { width: 1.1em; height: 1.1em; flex: none; color: var(--text-muted); } .context-menu button:disabled { opacity: 0.4; cursor: not-allowed; background: none; color: var(--text); } .context-menu button:disabled .icon { color: var(--text-faint); } .context-menu-divider { height: 1px; background: var(--border); margin: 4px 6px; } .context-menu-danger { color: #dc2626 !important; } .context-menu-danger .icon { color: #dc2626 !important; } .context-menu-danger:hover { background: rgba(220, 38, 38, 0.08) !important; } /* --------------------------------------------------------------------- Phase D3 — layers, view controls, measurements --------------------------------------------------------------------- */ /* Reused .canvas-zoom/.canvas-zoom-btn (defined below, previously unused) now hold real