/* ============================================================ SmarTuna · 3D Load Planner (ST) ============================================================ */ /* Any rule that sets `display` beats the browser's own [hidden] rule, so a row with `display: grid` stays on screen however many times the JS sets .hidden = true. Every such case had to be patched one selector at a time; this settles it for every element, present and future. */ [hidden] { display: none !important; } @font-face { font-family: 'BITSUMIS'; src: url('BITSUMIS.TTF') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } :root { --primary: #1a6fdb; --primary-dark: #155bb2; --primary-soft: #e8f1fc; --primary-glow: rgba(26, 111, 219, 0.18); --amber: #e08a1c; --amber-soft: #fff3e0; --ink: #1a2536; --text: #2c3849; --muted: #6b7789; --line: #e5eaf0; --line-soft: #f0f3f7; --paper: #ffffff; --canvas: #f6f8fb; --ok: #12a26b; --warn: #e08a1c; --danger: #e04a4a; --font: 'Poppins', 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-brand: 'BITSUMIS', 'Poppins', sans-serif; /* Liquid glass — frosted, layered, subtly luminous */ --glass-bg: rgba(255, 255, 255, 0.62); --glass-bg-strong: rgba(255, 255, 255, 0.9); --glass-bg-dim: rgba(255, 255, 255, 0.4); --glass-tray: rgba(238, 242, 247, 0.55); --glass-border: rgba(255, 255, 255, 0.75); --glass-border-soft: rgba(200, 210, 225, 0.4); --glass-blur: blur(18px) saturate(1.4); --glass-shadow: 0 4px 14px rgba(20, 40, 70, 0.07), 0 1px 2px rgba(20, 40, 70, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9); --glass-shadow-hover: 0 8px 22px rgba(20, 40, 70, 0.12), 0 2px 4px rgba(20, 40, 70, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1); --glass-tab-active: 0 1px 3px rgba(20, 40, 70, 0.10), 0 0 0 0.5px rgba(26, 111, 219, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1); --glass-tray-inset: inset 0 1px 2px rgba(20, 40, 70, 0.04); --ease: cubic-bezier(0.4, 0, 0.2, 1); /* One width system for the whole page. The nav, the page head and the workspace all line up against this, so nothing is inset while the bar above it runs edge to edge. */ --shell-max: 1920px; --shell-pad: 28px; /* Where the shell's content actually starts: the inner padding, plus any leftover once the shell hits its cap and centres itself. The padding is inside the capped box, so it has to be added rather than max'd against. */ --shell-gutter: calc(max(0px, (100% - var(--shell-max)) / 2) + var(--shell-pad)); /* The two side columns. Kept deliberately tighter than the space available so the 3D viewport — the part people actually manipulate — takes the lion's share of any extra width. */ --col-left: clamp(260px, 15vw, 305px); --col-right: clamp(320px, 20vw, 385px); --col-rail: 46px; /* the left panel once it is collapsed */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font); background: var(--canvas); color: var(--text); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; min-width: 980px; } button, input, select { font: inherit; color: inherit; } button { cursor: pointer; } /* ============================================================ TOP NAV ============================================================ */ .top-nav { display: flex; align-items: center; gap: 24px; /* Bar runs edge to edge; its contents sit on the same gutter as the columns below, so the logo lines up with the left panel. */ padding: 12px var(--shell-gutter); background: var(--paper); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 10px; } .brand-logo { height: 32px; width: auto; display: block; } .brand-text { font-family: var(--font-brand); font-size: 22px; color: var(--primary); letter-spacing: 0.02em; line-height: 1; } .crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .crumb a { color: var(--muted); text-decoration: none; } .crumb a:hover { color: var(--primary); } .crumb-sep { color: var(--line); } .crumb-current { color: var(--ink); font-weight: 600; } .top-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; } /* Compact per-section unit switcher (cm / mm / m) */ .unit-mini { display: inline-flex; gap: 1px; padding: 2px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border-soft); border-radius: 7px; box-shadow: var(--glass-shadow); } .unit-mini .unit-btn { border: 0; background: transparent; color: var(--muted); font-size: 10px; font-weight: 700; padding: 3px 8px; min-width: 24px; border-radius: 4px; cursor: pointer; text-transform: lowercase; letter-spacing: 0.02em; transition: all 0.2s var(--ease); } .unit-mini .unit-btn:hover { color: var(--ink); } .unit-mini .unit-btn.active { color: #fff; } .section-label--with-controls { display: flex; align-items: center; justify-content: space-between; } .form-dim-header { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin-top: 2px; margin-bottom: -2px; } /* ============================================================ BUTTONS ============================================================ */ /* ============================================================ BUTTONS — Liquid Glass ============================================================ */ .btn-soft, .btn-solid, .btn-primary { border: 1px solid var(--glass-border-soft); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--text); padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: var(--glass-shadow); transition: all 0.2s var(--ease); cursor: pointer; /* these classes are used on too, e.g. the Overview link */ text-decoration: none; display: inline-flex; align-items: center; } .btn-soft:hover { background: var(--glass-bg-strong); color: var(--primary); box-shadow: var(--glass-shadow-hover); transform: translateY(-1px); } .btn-soft:active { transform: translateY(0); } .btn-solid { background: linear-gradient(180deg, rgba(45, 60, 82, 0.96), rgba(26, 37, 54, 0.98)); color: #fff; border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 14px rgba(26, 37, 54, 0.25), 0 1px 2px rgba(26, 37, 54, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .btn-solid:hover { background: linear-gradient(180deg, rgba(55, 72, 96, 0.98), rgba(37, 52, 73, 0.98)); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(26, 37, 54, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .btn-primary { background: linear-gradient(180deg, rgba(48, 132, 240, 1), rgba(26, 111, 219, 1)); color: #fff; border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 4px 14px rgba(26, 111, 219, 0.28), 0 1px 2px rgba(26, 111, 219, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .btn-primary:hover { background: linear-gradient(180deg, rgba(60, 145, 250, 1), rgba(36, 122, 230, 1)); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26, 111, 219, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .btn-primary.editing { background: linear-gradient(180deg, rgba(232, 152, 45, 1), rgba(216, 128, 20, 1)); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 4px 14px rgba(224, 138, 28, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .btn-primary.editing:hover { background: linear-gradient(180deg, rgba(240, 165, 55, 1), rgba(224, 138, 28, 1)); transform: translateY(-1px); } .btn-full { width: 100%; } /* ============================================================ PAGE HEADER ============================================================ */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 24px var(--shell-pad) 18px; max-width: var(--shell-max); margin: 0 auto; gap: 20px; } .page-title-block { flex: 1; min-width: 0; } .plan-name-input { display: block; width: 100%; padding: 4px 0; border: 0; background: transparent; color: var(--ink); font-family: inherit; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; outline: none; border-bottom: 2px solid transparent; transition: border-color 0.15s; } .plan-name-input::placeholder { color: #aab4c0; font-weight: 700; } .plan-name-input:hover { border-bottom-color: var(--line); } .plan-name-input:focus { border-bottom-color: var(--primary); } .page-head .sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; } .status-chip { padding: 8px 12px; background: var(--primary-soft); color: var(--primary); border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0; } .status-chip.dirty { background: var(--amber-soft); color: var(--amber); } .status-chip.saved { background: #d9f4e6; color: var(--ok); } .status-chip.published { background: var(--ink); color: #fff; } /* ============================================================ WORKSPACE ============================================================ */ .workspace { display: grid; /* The side columns take a share of any extra width instead of handing all of it to the viewport, so the forms stop feeling cramped on a wide screen. The clamps keep them readable at both ends: never narrower than they were, never so wide the controls look stranded. */ grid-template-columns: var(--col-left) minmax(0, 1fr) var(--col-right); gap: 16px; padding: 0 var(--shell-pad) 28px; max-width: var(--shell-max); margin: 0 auto; align-items: stretch; } /* Cargo space is a step-one panel: once the container is chosen it mostly sits there, so it folds down to a rail and hands its width to the viewport. */ .workspace.left-collapsed { grid-template-columns: var(--col-rail) minmax(0, 1fr) var(--col-right); } .workspace.left-collapsed .panel-left > :not(.panel-rail) { display: none; } .workspace.left-collapsed .panel-left { overflow: hidden; } .card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; } .panel-collapse { width: 24px; height: 24px; padding: 0; margin-left: 8px; display: grid; place-items: center; border: 1px solid var(--glass-border-soft); background: var(--glass-bg); border-radius: 7px; font-family: inherit; font-size: 15px; line-height: 1; color: var(--muted); cursor: pointer; transition: all 0.2s var(--ease); } .panel-collapse:hover { color: var(--primary); border-color: rgba(26, 111, 219, 0.4); background: var(--primary-soft); } /* The rail only exists while collapsed */ .panel-rail { display: none; } .left-collapsed .panel-rail { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; height: 100%; padding: 14px 0; border: 0; background: transparent; cursor: pointer; transition: background 0.2s var(--ease); } .left-collapsed .panel-rail:hover { background: var(--primary-soft); } .panel-rail-icon { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--glass-border-soft); background: var(--glass-bg); border-radius: 7px; font-size: 15px; line-height: 1; color: var(--muted); } .panel-rail:hover .panel-rail-icon { color: var(--primary); border-color: rgba(26, 111, 219, 0.4); } .panel-rail-text { writing-mode: vertical-rl; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .panel-rail-sum { writing-mode: vertical-rl; font-size: 10px; font-weight: 600; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 0; } .panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; } .panel-header h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); } /* Pushes the step hint and the collapse button together on the right, rather than space-between spreading three children across the row. */ .panel-header .hint { margin-left: auto; } .panel-header .hint { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } .section-label { padding: 0 18px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 8px; } .divider { height: 1px; background: var(--line); margin: 16px 18px; } /* ============================================================ LEFT PANEL ============================================================ */ .panel-left { padding-bottom: 18px; } .mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 18px; } .mode-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px; background: var(--glass-bg-dim); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border-soft); border-radius: 12px; color: var(--text); text-align: left; box-shadow: var(--glass-shadow); transition: all 0.2s var(--ease); cursor: pointer; } .mode-btn:hover { background: var(--glass-bg-strong); transform: translateY(-1px); box-shadow: var(--glass-shadow-hover); } .mode-btn.active { background: linear-gradient(180deg, rgba(232, 241, 252, 0.92), rgba(220, 235, 250, 0.88)); border-color: rgba(26, 111, 219, 0.3); box-shadow: 0 0 0 3px rgba(26, 111, 219, 0.1), 0 4px 14px rgba(26, 111, 219, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .mode-icon { font-size: 14px; color: var(--primary); } .mode-title { font-weight: 700; font-size: 12px; color: var(--ink); } .mode-btn.active .mode-title { color: var(--primary); } .mode-note { font-size: 10px; color: var(--muted); } .input-preset, .dim-field input { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 500; outline: none; transition: all 0.15s; } .input-preset:focus, .dim-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); } .input-preset { display: block; margin: 0 18px; width: calc(100% - 36px); } .dims-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 10px 18px; } .dim-field { display: flex; flex-direction: column; gap: 4px; } .dim-field span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .dim-field input { padding: 8px 6px; text-align: center; font-weight: 600; } .panel-left > .btn-primary { display: block; margin: 4px 18px 0; width: calc(100% - 36px); } /* ---- Auto-pack ---- */ .autopack-block { padding: 0 18px; display: grid; gap: 8px; } .autopack-block .btn-primary, .autopack-block .btn-soft { width: 100%; } .autopack-block .btn-primary:disabled { opacity: 0.55; cursor: default; transform: none; } .autopack-result { padding: 10px 12px; background: var(--glass-tray); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border-soft); border-radius: 10px; box-shadow: var(--glass-tray-inset); display: grid; gap: 5px; } .autopack-result[hidden] { display: none; } .pack-stat { display: flex; align-items: baseline; justify-content: space-between; font-size: 11px; color: var(--muted); } .pack-stat b { font-size: 12px; color: var(--ink); font-weight: 700; } .pack-warn { margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--glass-border-soft); font-size: 11px; color: var(--amber); font-weight: 600; } .checks { list-style: none; padding: 0 18px; margin: 0; display: grid; gap: 8px; } .checks li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); } .check-icon { width: 16px; height: 16px; display: grid; place-items: center; background: var(--line-soft); color: var(--muted); border-radius: 5px; font-size: 10px; flex-shrink: 0; transition: all 0.2s var(--ease); } .checks li.check-pass { color: var(--text); } .checks li.check-pass .check-icon { background: #d9f4e6; color: var(--ok); font-weight: 700; } .checks li.check-fail { color: var(--text); } .checks li.check-fail .check-icon { background: var(--amber-soft); color: var(--amber); font-weight: 700; } /* ============================================================ CENTER PANEL — 2D/3D Viewport ============================================================ */ .panel-center { display: flex; flex-direction: column; min-height: 640px; overflow: hidden; } .viewport-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .scene-label { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-shrink: 0; } .scene-mode { font-weight: 800; color: var(--ink); font-size: 13px; letter-spacing: 0.05em; } .scene-dims { font-size: 12px; color: var(--muted); } /* 3D/2D toggle — big segmented control */ .scene-toggle { display: flex; gap: 2px; padding: 3px; background: var(--glass-tray); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border-soft); border-radius: 11px; box-shadow: var(--glass-tray-inset); margin-left: auto; } .scene-toggle-btn { border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; padding: 7px 16px; border-radius: 8px; letter-spacing: 0.06em; transition: all 0.2s var(--ease); cursor: pointer; } .scene-toggle-btn:hover { color: var(--ink); } .scene-toggle-btn.active { color: #fff; } .view-pills { display: flex; gap: 2px; padding: 3px; background: var(--glass-tray); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border-soft); border-radius: 11px; box-shadow: var(--glass-tray-inset); } .view-pill { border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; transition: all 0.2s var(--ease); cursor: pointer; } .view-pill:hover { color: var(--ink); } .view-pill.selected { color: var(--primary); } /* `.view-pills` sets display:flex, which overrides the `hidden` attribute's default display:none — need this explicit rule so JS toggling hidden works. */ .view-pills[hidden] { display: none; } .viewport { flex: 1; position: relative; background: radial-gradient(circle at 50% 30%, #ffffff 0%, #eef3f9 100%); overflow: hidden; min-height: 480px; touch-action: none; } .viewport[data-scene-mode="2d"] { background: repeating-linear-gradient( 0deg, transparent 0, transparent 39px, rgba(197, 208, 220, 0.35) 40px ), repeating-linear-gradient( 90deg, transparent 0, transparent 39px, rgba(197, 208, 220, 0.35) 40px ), #fafcff; } #scene-canvas { display: block; width: 100%; height: 100%; } /* Resize handles (2D only) */ .resize-handles { position: absolute; inset: 0; pointer-events: none; z-index: 4; } .resize-handle { position: absolute; width: 12px; height: 12px; border: 2px solid var(--primary); background: var(--paper); border-radius: 3px; transform: translate(-50%, -50%); pointer-events: auto; box-shadow: 0 2px 6px rgba(20, 40, 70, 0.15); transition: transform 0.1s, background 0.1s; } .resize-handle:hover { background: var(--primary); transform: translate(-50%, -50%) scale(1.15); } .resize-handle.handle-nw, .resize-handle.handle-se { cursor: nwse-resize; } .resize-handle.handle-ne, .resize-handle.handle-sw { cursor: nesw-resize; } .resize-handle.handle-n, .resize-handle.handle-s { cursor: ns-resize; } .resize-handle.handle-e, .resize-handle.handle-w { cursor: ew-resize; } /* ============================================================ DIMENSION GUIDES ============================================================ */ .dim-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: visible; } .dim-overlay[hidden] { display: none; } .dim-group line { stroke-width: 1.25; stroke-linecap: round; } .dim-container line { stroke: #1a6fdb; opacity: 0.75; } .dim-item line { stroke: #e08a1c; opacity: 0.95; } .dim-group rect { rx: 5; ry: 5; fill: #ffffff; stroke: rgba(200, 210, 225, 0.8); stroke-width: 1; } .dim-group text { font-family: 'DM Sans', ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; } .dim-container text { fill: #1a6fdb; } .dim-item text { fill: #c77512; } .dim-ruler rect { fill: rgba(255, 255, 255, 0.92); stroke: rgba(26, 111, 219, 0.2); } .dim-ruler text { fill: #5a7fa8; font-size: 9px; } /* ============================================================ WARNINGS + PAIR MEASUREMENT ============================================================ */ .live-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: visible; } .warn-marker polygon { stroke-width: 1; } .warn-marker.lvl-warn polygon { fill: #f6a623; stroke: #b9741a; } .warn-marker.lvl-danger polygon { fill: #e04a4a; stroke: #a82f2f; } .warn-marker text { font-family: var(--font); font-size: 11px; font-weight: 800; fill: #fff; text-anchor: middle; } .measure-line line { stroke: #12a26b; stroke-width: 1.4; stroke-linecap: round; } .measure-line rect { rx: 5; ry: 5; fill: #ffffff; stroke: rgba(18,162,107,0.35); } .measure-line text { font-family: 'DM Sans', ui-monospace, monospace; font-size: 10px; font-weight: 700; fill: #0e8a5a; text-anchor: middle; dominant-baseline: central; } .measure-readout { position: absolute; left: 16px; bottom: 44px; z-index: 6; width: 192px; padding: 10px 12px; background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 11px; box-shadow: var(--glass-shadow-hover); } .measure-readout[hidden] { display: none; } .measure-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .measure-title { font-size: 9px; font-weight: 700; color: var(--ok); text-transform: uppercase; letter-spacing: 0.1em; } .measure-close { border: 0; background: transparent; color: var(--muted); font-size: 12px; line-height: 1; padding: 2px 4px; border-radius: 4px; cursor: pointer; pointer-events: auto; } .measure-close:hover { background: var(--line-soft); color: var(--ink); } .measure-pair { font-size: 10px; color: var(--muted); font-weight: 600; margin-bottom: 7px; line-height: 1.4; } .measure-rows { display: grid; gap: 4px; } .measure-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 11px; color: var(--muted); } .measure-row b { font-family: 'DM Sans', ui-monospace, monospace; font-size: 12px; color: var(--ink); font-weight: 700; } .measure-row.touching b { color: var(--ok); } /* Viewport settings — move precision, and grid spacing when guides are on */ .vp-settings { position: absolute; left: 16px; top: 14px; z-index: 5; display: flex; align-items: center; gap: 6px; } .vp-setting { display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 11px; background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 10px; box-shadow: var(--glass-shadow); } .vp-setting[hidden] { display: none; } .vp-setting-label { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; } .vp-setting .custom-select { width: 90px; } .vp-setting .custom-select-trigger { padding: 4px 24px 4px 9px; font-size: 11px; font-weight: 700; color: var(--primary); background-position: right 8px center; } .viewport-tools { position: absolute; right: 16px; bottom: 16px; display: grid; gap: 9px; justify-items: end; z-index: 3; } .tools-rail { display: grid; gap: 6px; } .viewport-tools button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--glass-border); background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--text); border-radius: 12px; box-shadow: var(--glass-shadow); transition: all 0.2s var(--ease); cursor: pointer; } /* The icons are line drawings on a 24 grid, so they inherit the button's colour and keep the same weight at every size. */ .viewport-tools button svg { width: 18px; height: 18px; display: block; } .viewport-tools button:hover { color: var(--primary); transform: translateY(-1px); box-shadow: var(--glass-shadow-hover); } /* The rail itself can be put away, for a clean look at the load. The handle stays in the corner so there is always a way back. */ .tools-tuck { width: 30px !important; height: 30px !important; border-radius: 10px !important; color: var(--muted) !important; opacity: 0.85; } .tools-tuck svg { width: 15px !important; height: 15px !important; } .tools-tuck:hover { opacity: 1; color: var(--primary) !important; } .viewport-tools.is-tucked .tools-rail { display: none; } /* ---- full screen: the stage takes the whole display ---- Everything around the viewport steps aside — the top bar, the plan title, the cargo-space panel and the cargo / inspector panel. What is left is the container and the view controls. This is a plain class rather than :fullscreen, so it still works when the browser refuses the real request. */ body.is-fullscreen { overflow: hidden; } body.is-fullscreen .top-nav, body.is-fullscreen .page-head, body.is-fullscreen .panel-left, body.is-fullscreen .panel-right { display: none; } body.is-fullscreen .workspace { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: none; height: 100vh; padding: 12px; } body.is-fullscreen .panel-center { max-height: none; min-height: 0; } body.is-fullscreen .viewport { min-height: 0; } .viewport-tools button.tool-toggle.active { background: linear-gradient(180deg, rgba(48, 132, 240, 1), rgba(26, 111, 219, 1)); border-color: rgba(255, 255, 255, 0.2); color: #fff; box-shadow: 0 4px 14px rgba(26, 111, 219, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .viewport-hint { position: absolute; left: 16px; bottom: 16px; font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: 0.1em; z-index: 3; pointer-events: none; max-width: 60%; } /* ============================================================ 2D VIEWPORT LABELS — dimension pills + orientation indicators ============================================================ */ .viewport-2d-labels { position: absolute; inset: 0; pointer-events: none; z-index: 3; } .viewport-2d-labels[hidden] { display: none; } .v2d-label { position: absolute; padding: 5px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); white-space: nowrap; box-shadow: 0 2px 8px rgba(20, 40, 70, 0.08); font-family: 'DM Sans', ui-monospace, monospace; } .v2d-label[hidden] { display: none; } .v2d-top { top: 20px; left: 50%; transform: translateX(-50%); } .v2d-right { right: 66px; top: 50%; transform: translateY(-50%); } /* These two only decide WHERE a label sits. Which end it names, and so how it is coloured, depends on which side you are viewing from, so that lives on the is-doors / is-back modifiers below. */ .v2d-doors { right: 66px; bottom: 66px; } .v2d-back { left: 20px; top: 50%; transform: translateY(-50%); } .v2d-label.is-doors { color: var(--amber); background: var(--amber-soft); border-color: rgba(224, 138, 28, 0.35); } .v2d-label.is-back { color: var(--muted); background: var(--line-soft); } .viewport-foot { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); background: var(--line-soft); } .stat { padding: 12px 14px; background: var(--paper); border-right: 1px solid var(--line); } .stat:last-child { border-right: 0; } .stat-label { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 2px; } .stat-value { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; } .stat-ok { color: var(--ok); } .stat-warn { color: var(--warn); } .stat-danger { color: var(--danger); } /* ============================================================ RIGHT PANEL ============================================================ */ .panel-right { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } /* Tabs double as the panel header — no separate title bar */ .panel-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; margin: 14px 16px 10px; background: var(--glass-tray); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border-soft); border-radius: 10px; box-shadow: var(--glass-tray-inset); flex-shrink: 0; } .panel-tabs[hidden] { display: none; } .panel-tab { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px; border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; border-radius: 7px; cursor: pointer; transition: all 0.2s var(--ease); } .panel-tab:hover { color: var(--ink); } .panel-tab.active { color: var(--primary); } .panel-tabs::before { content: ''; position: absolute; top: 3px; bottom: 3px; left: var(--indicator-x, 3px); width: var(--indicator-w, 0); border-radius: 7px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,1), rgba(250,252,255,0.95)); box-shadow: var(--glass-tab-active); transition: left 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); } .no-segment-anim .panel-tabs::before { transition: none !important; } .tab-count { padding: 1px 6px; border-radius: 4px; background: var(--line-soft); color: var(--muted); font-size: 10px; font-weight: 700; } .panel-tab.active .tab-count { background: var(--primary-soft); color: var(--primary); } /* A pane scrolls its body and pins its action row */ .pane { display: flex; flex-direction: column; min-height: 0; flex: 1; } .pane[hidden] { display: none; } .pane-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 12px; display: grid; gap: 10px; align-content: start; } .pane-foot { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--line); background: var(--paper); } .pane-foot .btn-primary { flex: 1; justify-content: center; } .pane-foot .btn-full { width: 100%; } /* Collapsible options */ .opt-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 11px; background: transparent; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; transition: all 0.2s var(--ease); } .opt-toggle:hover { border-color: #d0d8e2; background: var(--line-soft); } .opt-chevron { color: var(--muted); font-size: 13px; font-weight: 700; transition: transform 0.25s var(--ease); display: inline-block; line-height: 1; } .opt-toggle.open .opt-chevron { transform: rotate(90deg); } .opt-summary { font-size: 11px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .opt-word { margin-left: auto; flex-shrink: 0; font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; } .opt-body { display: grid; gap: 8px; padding: 10px; margin-top: -2px; background: var(--line-soft); border-radius: 10px; } .opt-body[hidden] { display: none; } .opt-body .template-row { padding: 0; } .shape-hint { font-size: 10px; color: var(--primary); font-weight: 600; margin-top: -4px; } .shape-hint:empty { display: none; } .kind-preset-row[hidden] { display: none; } /* Kind + shape pickers inside Options */ .kind-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; padding: 3px; background: var(--paper); border: 1px solid var(--glass-border-soft); border-radius: 9px; } .kind-tab { position: relative; padding: 7px 4px; border: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; border-radius: 6px; cursor: pointer; transition: all 0.2s var(--ease); } .kind-tab:hover { color: var(--ink); } .kind-tab.active { color: var(--primary); } .shape-row { display: grid; gap: 5px; } .shape-row[hidden] { display: none; } .shape-pick { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; background: var(--paper); border: 1px solid var(--glass-border-soft); border-radius: 9px; } .shape-pick-btn { position: relative; padding: 7px 2px; border: 0; background: transparent; color: var(--muted); font-size: 10px; font-weight: 700; border-radius: 6px; cursor: pointer; transition: all 0.2s var(--ease); } .shape-pick-btn:hover { color: var(--ink); } .shape-pick-btn.active { color: var(--primary); } .shape-pick::before { content: ''; position: absolute; top: 3px; bottom: 3px; left: var(--indicator-x, 3px); width: var(--indicator-w, 0); border-radius: 6px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,1), rgba(250,252,255,0.95)); box-shadow: var(--glass-tab-active); transition: left 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); } .kind-tabs::before { border-radius: 6px; } .no-segment-anim .shape-pick::before { transition: none !important; } /* Fields — one light label, no heavy boxes */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; } .field, .qty-picker { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .field { position: relative; } /* anchors the little ? hint buttons */ .field > span, .field-label { font-size: 10px; color: var(--muted); font-weight: 600; letter-spacing: 0.01em; } .field input, .field select, .template-select { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 500; outline: none; transition: all 0.15s var(--ease); } .field input::placeholder { color: #b6c0cc; } .field input:hover, .field select:hover, .template-select:hover { border-color: #d0d8e2; } .field input:focus, .field select:focus, .template-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); } .field-subtle > span { color: #9aa5b3; } .field-subtle input { background: var(--line-soft); } /* The shared field set. It starts as a loose child of the panel and is moved into whichever slot is active, so hide it until JS has placed it. */ #cargoFields { display: grid; gap: 10px; } .panel-right > #cargoFields { display: none; } /* Max stack load is an advanced field: always shown in the inspector, but in the Add pane only once Options is open. */ #addFieldSlot .field-subtle { display: none; } .opt-open #addFieldSlot .field-subtle { display: flex; } /* Size as one measurement, not three labelled fields */ .size-row { display: grid; gap: 5px; } .size-head { display: flex; align-items: center; justify-content: space-between; } .size-head > span { font-size: 10px; color: var(--muted); font-weight: 600; } .size-trio { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 5px; } .size-trio input { width: 100%; min-width: 0; padding: 9px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 600; text-align: center; outline: none; transition: all 0.15s var(--ease); -moz-appearance: textfield; } .size-trio input::-webkit-outer-spin-button, .size-trio input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .size-trio input::placeholder { color: #c3ccd6; font-weight: 500; } .size-trio input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); } .size-x { color: #b6c0cc; font-size: 11px; font-weight: 600; } /* Templates */ .template-row { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; } .tpl-btn { padding: 8px 11px; border: 1px solid var(--glass-border-soft); background: var(--paper); color: var(--text); border-radius: 8px; font-size: 11px; font-weight: 600; transition: all 0.2s var(--ease); white-space: nowrap; } .tpl-btn:hover { color: var(--primary); border-color: var(--primary); } .tpl-btn.danger:hover { color: var(--danger); border-color: var(--danger); } /* Quantity */ .qty-picker { flex-shrink: 0; } .qty-controls { display: flex; align-items: center; gap: 4px; } .qty-controls button { width: 28px; height: 34px; border: 1px solid var(--line); background: var(--paper); border-radius: 8px; color: var(--text); font-weight: 700; font-size: 14px; transition: all 0.2s var(--ease); } .qty-controls button:hover { color: var(--primary); border-color: var(--primary); } .qty-picker.disabled { opacity: 0.4; pointer-events: none; } #fQty { min-width: 26px; text-align: center; font-weight: 700; color: var(--ink); font-size: 13px; } /* Items list */ .cargo-list { padding: 0 12px 12px; overflow-y: auto; flex: 1; min-height: 120px; display: flex; flex-direction: column; gap: 2px; } .list-empty { padding: 28px 10px; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.6; } .cargo-row { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 8px; padding: 9px 8px; border-radius: 9px; cursor: pointer; transition: all 0.15s var(--ease); border: 1px solid transparent; } .cargo-row:hover { background: var(--line-soft); } .cargo-row.selected { background: var(--primary-soft); border-color: var(--primary); } .cargo-swatch { width: 10px; height: 10px; border-radius: 3px; } .cargo-meta { min-width: 0; } .cargo-meta b { display: block; font-size: 12px; color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cargo-meta small { display: block; font-size: 10px; color: var(--muted); margin-top: 1px; } .cargo-meta small.cargo-contents { color: var(--primary); font-weight: 600; } .row-shape { padding: 1px 5px; border-radius: 4px; background: var(--amber-soft); color: var(--amber); font-weight: 700; } .cargo-row .focus-icon { font-size: 12px; color: var(--muted); padding: 4px 6px; border-radius: 4px; } .cargo-row:hover .focus-icon { color: var(--primary); background: var(--paper); } .row-warn { width: 16px; height: 16px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-size: 10px; font-weight: 800; color: #fff; cursor: help; } .row-warn.lvl-warn { background: var(--amber); } .row-warn.lvl-danger { background: var(--danger); } /* ============================================================ INSPECTOR ============================================================ */ .insp-head { position: relative; display: flex; align-items: center; gap: 9px; padding: 14px 16px 8px; flex-shrink: 0; } .insp-back { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--line); background: var(--paper); border-radius: 8px; color: var(--muted); font-size: 17px; line-height: 1; padding-bottom: 2px; transition: all 0.2s var(--ease); } .insp-back:hover { color: var(--primary); border-color: var(--primary); } .edit-swatch { width: 18px; height: 18px; flex-shrink: 0; border-radius: 6px; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--glass-border-soft), 0 1px 3px rgba(20,40,70,0.2); cursor: pointer; padding: 0; transition: transform 0.15s var(--ease); } .edit-swatch:hover { transform: scale(1.12); } .insp-label { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .insp-chips { display: flex; gap: 5px; padding: 0 16px 10px; flex-shrink: 0; } .edit-strip-chip { padding: 3px 8px; border-radius: 5px; background: var(--line-soft); color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .color-pop { position: absolute; top: 40px; left: 44px; z-index: 40; padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(20, 40, 70, 0.2); display: grid; gap: 9px; } .color-pop[hidden] { display: none; } .color-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; } .color-dot { width: 20px; height: 20px; border-radius: 6px; border: 2px solid transparent; padding: 0; cursor: pointer; box-shadow: 0 0 0 1px var(--glass-border-soft); transition: transform 0.15s var(--ease); } .color-dot:hover { transform: scale(1.15); } .color-dot.active { border-color: var(--ink); } .color-custom { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .color-custom input[type="color"] { width: 34px; height: 24px; padding: 0; cursor: pointer; border: 1px solid var(--line); border-radius: 6px; background: none; } /* Contents of a builder-made carton */ .insp-contents { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; } .insp-contents[hidden] { display: none; } .ic-head { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 11px; background: var(--line-soft); font-size: 10px; font-weight: 700; color: var(--muted); } .ic-head b { font-size: 11px; color: var(--ink); } .ic-head b.ic-none { color: var(--muted); font-weight: 600; text-transform: none; } .ic-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; padding: 7px 11px; border-top: 1px solid var(--line-soft); font-size: 11px; } .ic-row b { color: var(--ink); font-weight: 600; } .ic-medium { color: var(--muted); font-weight: 500; } /* takes one product line back out of the carton */ .ic-del { width: 18px; height: 18px; padding: 0; align-self: center; display: grid; place-items: center; border: 1px solid transparent; background: none; border-radius: 5px; font-size: 10px; line-height: 1; color: var(--muted); cursor: pointer; transition: all 0.15s var(--ease); } .ic-del:hover { color: var(--danger); border-color: var(--danger); background: #fdeaea; } /* a hand-added carton starts with nothing recorded in it */ .ic-empty { padding: 10px 11px; border-top: 1px solid var(--line-soft); font-size: 10px; color: var(--muted); line-height: 1.5; } .ic-add { display: block; width: 100%; padding: 9px 11px; border: 0; border-top: 1px solid var(--line-soft); background: var(--paper); font-size: 10px; font-weight: 700; color: var(--primary); text-align: left; cursor: pointer; transition: background 0.15s var(--ease); } .ic-add:hover { background: var(--primary-soft); } .ic-form { padding: 10px 11px 11px; border-top: 1px solid var(--line-soft); background: var(--line-soft); display: grid; gap: 8px; } .ic-form .field span { font-size: 9px; } /* the term combo is built for a flex header; here it fills its grid cell */ .ic-form .combo { margin-left: 0; width: auto; } .ic-form .combo-menu { left: 0; right: auto; } .ic-form-foot { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: end; } .ic-form-foot button { padding: 8px 12px; font-size: 10px; } .ic-qty-field input { font-weight: 700; } .ic-lot { display: block; margin-top: 1px; font-family: 'DM Sans', ui-monospace, monospace; font-size: 10px; color: var(--primary); font-weight: 600; } .ic-qty { font-family: 'DM Sans', ui-monospace, monospace; font-size: 11px; font-weight: 700; color: var(--text); white-space: nowrap; } .ic-note { padding: 7px 11px; border-top: 1px solid var(--line-soft); font-size: 9px; color: var(--muted); line-height: 1.45; } /* Builder unit switcher in the modal head */ .builder-unit { display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 10px; } .builder-unit .unit-mini { background: var(--line-soft); } .builder-unit-label { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; } /* Load bar */ .bearing { padding: 9px 11px; background: var(--line-soft); border-radius: 9px; } .bearing[hidden] { display: none; } .bearing-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 10px; font-weight: 600; color: var(--muted); margin-bottom: 6px; } .bearing-head b { font-family: 'DM Sans', ui-monospace, monospace; font-size: 11px; color: var(--ink); } .bearing-bar { height: 5px; border-radius: 3px; background: #dde4ec; overflow: hidden; } .bearing-bar span { display: block; height: 100%; border-radius: 3px; background: var(--ok); transition: width 0.25s var(--ease), background 0.25s var(--ease); } .bearing-bar span.lvl-warn { background: var(--amber); } .bearing-bar span.lvl-danger { background: var(--danger); } .bearing-note { margin-top: 6px; font-size: 9px; color: var(--muted); line-height: 1.45; } /* Issues */ .edit-issues { display: grid; gap: 4px; } .edit-issues[hidden] { display: none; } .edit-issue { display: flex; align-items: flex-start; gap: 6px; padding: 7px 9px; border-radius: 8px; font-size: 10px; font-weight: 600; line-height: 1.45; } .edit-issue span { width: 13px; height: 13px; flex-shrink: 0; margin-top: 0.5px; display: grid; place-items: center; border-radius: 50%; font-size: 9px; font-weight: 800; color: #fff; } .edit-issue.lvl-warn { background: var(--amber-soft); color: #9a5f10; } .edit-issue.lvl-warn span { background: var(--amber); } .edit-issue.lvl-danger { background: #fdeaea; color: #9c2b2b; } .edit-issue.lvl-danger span { background: var(--danger); } /* Item actions — two rows of three, so six labels still read at panel width */ .edit-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .edit-actions button { padding: 8px 2px; border: 1px solid var(--line); background: var(--paper); border-radius: 8px; font-size: 10px; font-weight: 600; color: var(--text); transition: all 0.2s var(--ease); } .edit-actions button:hover { color: var(--primary); border-color: var(--primary); } .edit-actions button.danger:hover { color: var(--danger); border-color: var(--danger); } /* a locked carton's own button stays lit, so the state is readable at a glance */ .edit-actions button.is-locked { background: #fff6e2; border-color: #e0a63a; color: #8a5a07; } .edit-actions button.is-locked:hover { border-color: #c98c1d; color: #6f4705; } /* ============================================================ CUSTOM SELECT — full replacement for native