/* netPlan Survey Web — dark (default) + light theme, toggled via data-theme on */ :root { --page: #0E1116; --surface: #161B22; --surface2: #232A34; --text: #E6EAF0; --dim: #9AA4B2; --accent: #1FB6A6; --accentTx: #FFFFFF; --danger: #E5484D; --success: #22C55E; --warning: #F59E0B; /* Scout status dot: "updating / waiting for startup" (amber) */ --border: #2C3542; --sel: #2563EB; --hover: #2B3442; /* button/row hover fill (theme-aware) */ --brandNet: #85A44B; --brandPlan:#FF6600; --chartBg: #0E1116; /* canvas plot backdrop — stays dark in BOTH themes (analyzer charts are dark-tuned) */ --fp-stage: #0A0E14; /* floor-plan stage backdrop (letterbox around the plan) — follows the theme */ --topbar-h: 46px; --header-h: 26px; --dock-w: 240px; /* Settings 138 (+50%) + Data 102 (Task column moved to the top bar) */ --dock-col: 92px; --botbar-h: 58px; /* phone: fixed bottom Mode tab bar height (see the responsive block at the foot of this file) */ } /* Light theme — app chrome only; the canvas charts keep their dark --chartBg backdrop */ :root[data-theme="light"] { --page: #F4F6FA; --surface: #FFFFFF; --surface2: #EAEEF4; --text: #1B2230; --dim: #5B6675; --accent: #12988B; /* slightly deeper teal for contrast on light */ --accentTx: #FFFFFF; --danger: #DC2F35; --success: #17A34A; --warning: #D97706; --border: #D3DAE4; --sel: #2563EB; --hover: #E3E8F0; --chartBg: #FFFFFF; /* charts follow the theme (matches the tile chrome); trace colours darken to suit */ --fp-stage: #E9EDF3; /* light neutral canvas so the plan/walls read on white chrome */ } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--page); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13px; overflow: hidden; } /* ---- top bar ---- */ #topbar { position: relative; /* positioning context for the centered mode chips */ /* Android/iOS edge-to-edge: the WebView draws UNDER the system status bar, so grow the bar up by safe-area-inset-top (its background fills behind the status bar) and pad the content down below it. Left/right insets keep content clear of a landscape notch. */ height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 8px; background: var(--surface); border-bottom: 1px solid var(--border); } #topbar-logo { height: 26px; width: auto; display: block; margin-right: 4px; user-select: none; -webkit-user-drag: none; } .chips { display: flex; gap: 6px; } .chip { min-width: 58px; height: 32px; border: none; border-radius: 2px; background: var(--surface2); color: var(--text); font-weight: 700; font-size: 13px; cursor: pointer; } .chip:hover { background: var(--hover); } .chip.active { background: var(--sel); color: #fff; } .chip-rec-on { background: var(--danger) !important; color: #fff; } /* Inspect / Survey mode chips — centered in the top bar's CONTENT area (below the status-bar inset) */ #chips-mode { position: absolute; left: 50%; top: calc(50% + env(safe-area-inset-top, 0px) / 2); transform: translate(-50%,-50%); } .chip.task-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 11px; border-radius: 6px; } .chip.task-btn i { font-size: 14px; } #topbar-title { margin-left: auto; color: var(--dim); font-size: 13px; font-weight: 600; } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .dot-on { background: var(--success); box-shadow: 0 0 6px var(--success); } .dot-off { background: var(--danger); box-shadow: 0 0 6px var(--danger); } .dot-warn { background: var(--warning); box-shadow: 0 0 6px var(--warning); } .chip-expand { min-width: 40px; font-size: 16px; } /* light / dark theme slider (sun ↔ moon) */ .theme-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex: 0 0 auto; } .theme-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .theme-slider { position: relative; width: 46px; height: 24px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 5px; } .theme-slider i { font-size: 11px; line-height: 1; color: var(--dim); z-index: 1; } .theme-slider::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); transition: transform .15s ease; } .theme-switch input:checked + .theme-slider::after { transform: translateX(22px); } /* ---- body / dock ---- */ #body { display: flex; height: calc(100% - var(--topbar-h) - env(safe-area-inset-top, 0px)); } #tiles { flex: 1; display: grid; gap: 4px; padding: 4px; min-width: 0; } #tiles[data-layout="single"] { grid-template-columns: 1fr; grid-template-rows: 1fr; } #tiles[data-layout="vert"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } #tiles[data-layout="horz"] { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } #tiles[data-layout="quad"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } #dock { width: var(--dock-w); flex: 0 0 var(--dock-w); display: flex; background: var(--page); transition: width .12s, flex-basis .12s; overflow: hidden; } #dock.collapsed { width: 0; flex-basis: 0; } .dock-col { width: var(--dock-col); flex: 0 0 var(--dock-col); background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; } #col-settings { width: 138px; flex-basis: 138px; } /* +50% */ #col-data { width: 102px; flex-basis: 102px; } /* +10px */ .dock-head { height: 24px; display: flex; align-items: center; padding: 0 8px; color: var(--dim); font-size: 11px; font-weight: 700; text-transform: none; border-bottom: 1px solid var(--border); } .dock-btns { display: flex; flex-direction: column; gap: 6px; padding: 6px; } .dock-btn { min-height: 44px; border: none; border-radius: 6px; background: var(--surface2); color: var(--text); font-weight: 700; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: flex-start; gap: 7px; padding: 4px 9px; line-height: 1.15; text-align: left; } .dock-btn i { font-size: 16px; flex: 0 0 auto; opacity: .9; } .dock-btn:hover { background: var(--hover); } .dock-btn.active { background: var(--sel); color: #fff; } /* disabled data-view button (e.g. GPS when a co-resident npsd owns the receiver) */ .dock-btn:disabled { opacity: .4; cursor: not-allowed; } .dock-btn:disabled:hover { background: var(--surface2); } /* Survey mode button in the Mode column — set apart from the data-view buttons above it */ .dock-survey { margin-top: 8px; border: 1px solid var(--border); } .dock-survey.active { border-color: var(--sel); } /* Clear All (destructive) — survey-only Settings action, full panel width */ .dock-clear { width: 100%; justify-content: center; margin-top: 8px; background: transparent; color: var(--danger); border: 1px solid var(--danger); } .dock-clear:hover { background: var(--danger); color: #fff; } .dock-foot { margin-top: auto; padding: 6px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; } /* Scout info button: label left, hardware-status dot pinned right */ .dock-info { width: 100%; justify-content: flex-start; } .dock-info .info-dot { margin-left: auto; } .dock-system { width: 100%; justify-content: center; } .dock-logout { width: 100%; justify-content: center; } .dock-logout:hover { background: var(--danger); color: #fff; } .dock-inner { padding: 8px; overflow-y: auto; flex: 1 1 auto; min-height: 0; } /* live capture stats pinned to the bottom of the Settings column */ .dock-stats { flex: 0 0 auto; padding: 4px 8px 6px; border-top: 1px solid var(--border); } .dock-stats:empty { display: none; } /* Analyzer controls: full-width buttons (same height as the Data column) stacked down the settings column. Reuses .dock-btn so it matches the Data/Task buttons. */ .dock-acts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .dock-btn .mk-caret { margin-left: auto; font-size: 10px; opacity: .7; } /* Marker button opens a flyout */ .dock-actions { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; } .dock-mini { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); border-radius: 6px; padding: 6px 8px; font-size: 12px; font-weight: 600; cursor: pointer; } .dock-mini:hover { background: var(--hover); } .dock-mini.active { background: var(--sel); color: #fff; border-color: var(--sel); } .dock-inner-title { font-weight: 700; font-size: 12px; margin-bottom: 8px; } .dock-kv { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--border); font-size: 12px; } .dock-kv span { color: var(--dim); } /* WiFi filter controls — moved into the Actions (Settings) dock column. The selected state is blue (var(--sel)) to match the App-column dock buttons. */ .wifi-filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .wf-lbl { color: var(--dim); font-size: 11px; font-weight: 700; margin-top: 2px; } .wf-seg { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .wf-btn { flex: 1 1 0; min-width: 0; border: none; background: var(--surface2); color: var(--text); font-size: 11px; font-weight: 600; padding: 6px 4px; cursor: pointer; white-space: nowrap; } .wf-btn + .wf-btn { border-left: 1px solid var(--border); } .wf-btn:hover { background: var(--hover); } .wf-btn.active { background: var(--sel); color: #fff; } .wf-select { width: 100%; background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 12px; font-weight: 600; cursor: pointer; outline: none; } .wf-select:focus { border-color: var(--sel); } .wf-search { width: 100%; background: var(--page); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 12px; outline: none; } .wf-search:focus { border-color: var(--sel); } .wf-search::placeholder { color: var(--dim); } /* ---- tiles ---- */ .tile { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; } .tile-head { height: var(--header-h); display: flex; align-items: center; background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 4px 0 8px; } .tile-title { font-size: 12px; font-weight: 700; color: var(--dim); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tile-dots { width: 26px; height: 26px; border: none; background: transparent; color: var(--dim); font-size: 18px; cursor: pointer; } .tile-dots:hover { color: var(--text); } .tile-body { flex: 1; position: relative; overflow: auto; min-height: 0; } .tile-body canvas { width: 100%; height: 100%; display: block; } /* analyzer / data-viz canvases keep a dark plot backdrop in BOTH themes (their draw colours are dark-tuned); the map's leaflet canvas is nested so it's not matched */ .canvas-wrap, .wf-wrap, .tile-body > canvas, .gps-sat-canvas { background: var(--chartBg); } /* drag a tile header onto another tile to swap the two panels (split views only) */ .tile-head-drag { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; } .tile-head-drag:active { cursor: grabbing; } .tile.tile-drag-src { opacity: .45; } .tile.tile-drop-target { outline: 2px solid var(--accent); outline-offset: -2px; } body.tile-dragging, body.tile-dragging * { cursor: grabbing !important; } .tile-drag-ghost { position: fixed; z-index: 200; pointer-events: none; padding: 4px 10px; border-radius: 5px; background: var(--accent); color: var(--accentTx); font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 3px 10px rgba(0,0,0,.5); } /* ---- retask menu ---- */ #scrim, #modal-scrim { position: fixed; inset: 0; z-index: 40; } #tilemenu, #submenu { position: fixed; z-index: 50; width: 200px; max-height: min(72vh, 460px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 4px; box-shadow: 0 8px 30px rgba(0,0,0,.5); } #submenu { z-index: 51; width: 190px; } /* group flyout, above the parent menu */ .menu-row { height: 30px; display: flex; align-items: center; padding: 0 8px; font-size: 13px; border-radius: 5px; cursor: pointer; color: var(--text); } .menu-row:hover { background: var(--surface2); } .menu-row .ck { width: 16px; color: var(--accent); } .menu-row .mask-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; flex: 0 0 auto; } .menu-arrow { margin-left: auto; padding-left: 10px; color: var(--dim); } /* ▸ on a group parent */ .menu-sep { height: 1px; background: var(--border); margin: 4px 6px; } .menu-label { color: var(--dim); font-size: 11px; padding: 4px 8px; } .menu-row .wf-num { background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 2px 4px; font-size: 12px; text-align: right; } /* ---- view internals ---- */ .wifi-grid { width: 100%; border-collapse: collapse; font-size: 12px; } .wifi-grid th, .wifi-grid td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; } .wifi-grid th { color: var(--dim); position: sticky; top: 0; background: var(--surface); z-index: 1; } .wifi-grid td.r, .wifi-grid th.r { text-align: right; } .wc-rssi { font-weight: 700; font-variant-numeric: tabular-nums; } /* RSSI-range colour set inline per row */ .wifi-view { display: flex; flex-direction: column; height: 100%; container-type: inline-size; } /* responsive columns: on a narrow tile/phone drop the widest optionals first, then keep only BSSID · SSID · Ch · RSSI when there isn't room for the rest */ @container (max-width: 620px) { .wifi-grid .wc-rates, .wifi-grid .wc-seen { display: none; } } @container (max-width: 470px) { .wifi-grid .wc-opt { display: none; } } .wifi-scroll { flex: 1 1 auto; overflow: auto; min-height: 0; } /* sortable headers */ .wifi-grid th.wc-sort { cursor: pointer; user-select: none; } .wifi-grid th.wc-sort:hover { color: var(--text); } .wifi-grid th.wc-sorted { color: var(--accent); } .wc-th-arw { display: inline-block; width: 10px; margin-left: 3px; font-size: 9px; color: var(--accent); } .wc-th-arw:empty { width: 0; margin-left: 0; } /* collapse when unsorted so right-aligned headers sit flush with their data */ /* IE expander column + caret */ .wifi-grid th.wc-exp, .wifi-grid td.wc-exp { width: 1%; padding-left: 6px; padding-right: 0; } .wc-exp-btn { border: none; background: transparent; color: var(--dim); cursor: pointer; padding: 0 2px; line-height: 1; font-size: 12px; } .wc-exp-btn:hover { color: var(--text); } .wc-exp-btn i { display: inline-block; transition: transform .12s ease; } .wc-exp-btn.open i { transform: rotate(90deg); color: var(--accent); } .wc-ssid { max-width: 220px; } .wc-ssid-name { display: block; overflow: hidden; text-overflow: ellipsis; } /* capability pills next to the SSID (roaming / location / MLO) */ .wc-caps { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; } .wc-caps:empty { display: none; } .wc-cap { font-size: 9px; font-weight: 700; line-height: 1.5; padding: 0 4px; border-radius: 3px; background: var(--page); color: var(--dim); border: 1px solid var(--border); letter-spacing: .3px; white-space: nowrap; } .wc-cap-hi { background: var(--accent); color: var(--accentTx); border-color: var(--accent); } .wc-cap-pp { background: #a855f7; color: #fff; border-color: #a855f7; } /* OUI vendor name shown after the BSSID's last two octets */ .wc-bssid-vendor { color: var(--dim); font-size: 10px; font-weight: 600; margin-left: 4px; } /* Grouping (WiFi table): the first row of each SSID/AP group gets a separator line */ .wifi-r.wifi-apgroup-head > td { border-top: 2px solid var(--accent); } /* expandable Information-Elements detail */ .wifi-ie-row > td { background: var(--page); border-bottom: 1px solid var(--border); padding: 0; } .wifi-ies { padding: 6px 10px 8px 34px; } .wifi-ies-h { color: var(--accent); font-weight: 700; font-size: 11px; margin-bottom: 4px; letter-spacing: .3px; } .wifi-ie-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2px; } .wifi-ie-list li { display: flex; align-items: baseline; gap: 8px; font-size: 11px; white-space: normal; } .wifi-ie-id { flex: 0 0 auto; min-width: 30px; color: var(--dim); font-variant-numeric: tabular-nums; text-align: right; } .wifi-ie-name { flex: 0 0 auto; min-width: 150px; color: var(--text); font-weight: 600; } .wifi-ie-sum { flex: 1 1 auto; color: var(--dim); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; } /* Last Seen column */ .wc-seen { color: var(--dim); font-variant-numeric: tabular-nums; } .wc-rates { font-size: 10px; color: var(--dim); max-width: 150px; white-space: normal; line-height: 1.15; font-variant-numeric: tabular-nums; } /* stale rows (not heard for > 1 min) — grayed until dropped at 2 min */ .wifi-r.wifi-stale td, .wifi-ie-row.wifi-stale > td { color: var(--dim); opacity: .5; } .wifi-r.wifi-stale .wc-ssid-name { font-style: italic; } .wifi-r.wifi-stale .wc-rssi { filter: grayscale(.6); } /* footer: AP count + segmented filters + filter box */ .wifi-foot { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; row-gap: 6px; border-top: 1px solid var(--border); padding: 5px 10px; background: var(--surface); } /* status/count sits on its own full-width line, always below the controls */ .wifi-count { flex: 1 1 100%; order: 99; min-width: 80px; color: var(--dim); font-size: 12px; font-weight: 600; } .wifi-seg { flex: 0 0 auto; display: inline-flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; } .wifi-seg-chan { max-width: 100%; overflow-x: auto; overflow-y: hidden; } .wifi-seg-btn { border: none; background: var(--page); color: var(--dim); font-size: 11px; font-weight: 600; padding: 3px 10px; cursor: pointer; white-space: nowrap; } .wifi-seg-btn + .wifi-seg-btn { border-left: 1px solid var(--border); } .wifi-seg-btn:hover { color: var(--text); } .wifi-seg-btn.active { background: var(--accent); color: var(--accentTx); } .wifi-search { flex: 0 0 auto; width: 190px; max-width: 45%; background: var(--page); color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 3px 7px; font-size: 12px; outline: none; } .wifi-search:focus { border-color: var(--accent); } .wifi-search::placeholder { color: var(--dim); } /* spectrum panel: chart fills, analyzer parameters read out underneath (formatted like the netplanweb point inspector — .cov-insp-*) */ .canvas-wrap { display: flex; flex-direction: column; height: 100%; } .canvas-wrap canvas { flex: 1 1 auto; min-height: 0; width: 100%; height: auto; display: block; } .canvas-foot { flex: 0 0 auto; border-top: 1px solid var(--border); background: var(--surface); padding: 7px 10px 8px; position: relative; } .radar-tool { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); background: var(--surface); padding: 6px 8px; } .radar-sort { flex: 0 0 auto; margin-left: auto; } /* Sort control pinned to the far right (bar mode only) */ .radar-smooth { flex: 0 0 auto; margin-left: auto; } /* Smooth toggle pinned to the far right (line mode only) */ .radar-envelope { flex: 0 0 auto; } /* Envelope toggle sits next to Smooth (line mode only) */ /* Line-mode time scrubber (5-min window; drag left to pan back, full right = live) */ .radar-scrub { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border); background: var(--surface); padding: 6px 10px; } .radar-scrub-range { flex: 1 1 auto; width: 100%; height: 6px; -webkit-appearance: none; appearance: none; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; outline: none; cursor: pointer; } .radar-scrub-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); cursor: grab; } .radar-scrub-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); cursor: grab; } .radar-scrub-lbl { flex: 0 0 auto; min-width: 56px; text-align: right; color: var(--dim); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; } /* WiFi Charts "Stats" view — scrollable set of aggregate stat cards */ .radar-stats { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px; } .rstat-none { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--dim); font-size: 13px; } .rstat-sum { margin: 0 auto 8px; max-width: 1180px; } /* Masonry-style flow: cards pack tightly into responsive columns (no ragged row-height gaps on wide monitors that a fixed grid leaves under short cards), collapsing to a single column on narrow screens. Capped + centred so a very wide monitor gets balanced whitespace rather than a left-packed block with an empty right half. column-fill:balance evens the columns. */ .rstat-grid { columns: 260px; column-gap: 8px; column-fill: balance; max-width: 1180px; margin-inline: auto; } .rstat-grid > .rstat-card { display: inline-block; width: 100%; margin: 0 0 8px; break-inside: avoid; -webkit-column-break-inside: avoid; } .rstat-card { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); overflow: hidden; } .rstat-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--page); } .rstat-h-n { color: var(--accent); font-variant-numeric: tabular-nums; } .rstat-empty { color: var(--dim); font-size: 11px; padding: 6px 8px; } .rstat-tbl { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; } .rstat-tbl td { padding: 2px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; } .rstat-tbl tr:last-child td { border-bottom: none; } .rstat-name { overflow: hidden; text-overflow: ellipsis; } .rstat-n { width: 34px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .rstat-best { width: 58px; text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; } .rstat-bar { width: 84px; position: relative; } .rstat-bar-fill { display: block; height: 12px; min-width: 2px; background: var(--accent); opacity: .32; border-radius: 3px; } .rstat-bar em { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 10px; color: var(--text); font-variant-numeric: tabular-nums; } .rstat-more td { color: var(--dim); font-size: 11px; padding: 3px 8px; text-align: center; } .rstat-weak .rstat-name, .rstat-weak .rstat-n { color: #e5484d; } .rstat-weak .rstat-bar-fill { background: #e5484d; opacity: .4; } .rstat-kvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 14px; padding: 4px 8px 6px; } .rstat-kv { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 3px 0; border-bottom: 1px dotted var(--border); } .rstat-kv span { color: var(--dim); } .rstat-kv b { font-variant-numeric: tabular-nums; } .rstat-kv.rstat-weak b { color: #e5484d; } .sp-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--dim); margin-bottom: 5px; } .sp-toggle { position: absolute; top: 6px; right: 8px; background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: 11px; font-weight: 700; padding: 3px 9px; cursor: pointer; } .sp-toggle:hover { border-color: var(--accent); } .sp-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 24px; border-top: 1px solid var(--border); padding-top: 5px; } .sp-cell { display: flex; flex-direction: column; gap: 1px; } .sp-name { font-size: 10px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .02em; } .sp-val { font-size: 13px; font-weight: 700; color: var(--text); } /* marker statistics table below the Analyzer chart (one row per enabled marker) */ .mk-table { flex: 0 0 auto; max-height: 42%; overflow: auto; border-top: 1px solid var(--border); background: var(--surface); } .mk-tbl { width: 100%; border-collapse: collapse; font-size: 11px; } .mk-tbl th, .mk-tbl td { text-align: right; padding: 2px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; font-variant-numeric: tabular-nums; } .mk-tbl th { color: var(--dim); font-weight: 600; position: sticky; top: 0; background: var(--surface); } .mk-tbl td.mk-nm, .mk-tbl th:first-child { text-align: left; font-weight: 700; } /* WebGL2 waterfall: GL canvas in the plot rect + a 2D axes overlay on top */ .wf-wrap { position: relative; height: 100%; width: 100%; overflow: hidden; } /* The generic `.tile-body canvas { width:100%; height:100% }` rule (specificity 0,1,1) forces the GL waterfall canvas to 100% of its positioned ancestor (.wf-wrap), which overrode the left/right inset and let the waterfall render full-width — 56px wider than the analyzer plot — so signals drifted rightward toward the high-frequency end. Pin it to the exact plot box with a MORE-SPECIFIC selector (.wf-wrap .wf-gl = 0,2,0, beats 0,1,1) and an explicit width/height instead of right/bottom, keeping the waterfall x-range identical to drawSpectrumTrace (mL=56, mR=8, mT=2, mB=17). */ .wf-wrap .wf-gl { position: absolute; left: 56px; top: 2px; width: calc(100% - 64px); height: calc(100% - 19px); display: block; } .wf-2d { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; } .wf-ax { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* GPS panel: fields + satellite bar chart */ .gps-view { display: flex; flex-direction: column; height: 100%; } .gps-sats { flex: 1 1 auto; min-height: 0; padding: 6px 10px 8px; display: flex; flex-direction: column; } .gps-sats-title { flex: 0 0 auto; color: var(--text); font-size: 12px; font-weight: 700; margin-bottom: 5px; } .gps-sats-title em { color: var(--dim); font-style: normal; font-weight: 500; } .gps-split { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: row; } .gps-left { flex: 0 0 50%; min-width: 0; min-height: 0; display: flex; flex-direction: column; } /* polar over map */ .gps-pane { min-width: 0; min-height: 0; position: relative; overflow: hidden; } .gps-pane-polar { flex: 0 0 50%; } .gps-pane-map { flex: 1 1 auto; } .gps-pane-sats { flex: 1 1 auto; } .gps-splitter { align-self: stretch; background: var(--border); border-radius: 4px; touch-action: none; } .gps-splitter:hover { background: var(--accent); } .gps-splitter-h { flex: 0 0 8px; cursor: col-resize; margin: 0 3px; } /* left column | bar chart */ .gps-splitter-v { flex: 0 0 8px; cursor: row-resize; margin: 3px 0; } /* polar | map */ .gps-polar-canvas, .gps-sat-canvas { width: 100%; height: 100%; display: block; background: var(--chartBg); } .gps-map { width: 100%; height: 100%; } /* 2D / 3D sky-plot toggle — pinned to the upper-right of the polar (sky) pane, floating over the canvas */ .gps-sky-seg { position: absolute; top: 6px; right: 6px; z-index: 5; background: var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,.28); } .gps-sky-seg .wifi-seg-btn { padding: 3px 9px; } /* GPS satellite hover tooltip (sky plots 2D/3D + C/N₀ bar chart) */ .gps-sat-tip { position: fixed; z-index: 4000; pointer-events: none; min-width: 168px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.45); } .gps-tip-hd { font-weight: 700; margin-bottom: 5px; padding-bottom: 4px; border-bottom: 1px solid var(--border); } .gps-tip-row { display: flex; justify-content: space-between; gap: 16px; padding: 1px 0; } .gps-tip-row span { color: var(--dim); } .gps-tip-row b { font-weight: 600; } /* GPS fix/coords table, relocated into the Actions panel */ .dock-gps { margin-bottom: 10px; } /* Map panel (Leaflet + OpenStreetMap) */ .map-wrap { position: relative; height: 100%; width: 100%; overflow: hidden; } .map-canvas { position: absolute; inset: 0; } .leaflet-container { background: #0a0e14; font: inherit; } .map-info { position: absolute; top: 8px; right: 8px; z-index: 1000; background: rgba(22,27,34,.92); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 12px; min-width: 132px; box-shadow: 0 6px 20px rgba(0,0,0,.4); color: #e6e9ee; } .mi-row { display: flex; justify-content: space-between; gap: 14px; padding: 2px 0; } /* Outdoor survey: single Start/Stop button centred over the map (above .map-info) */ .map-wrap .sm-act { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 1001; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); color: var(--text); font-weight: 600; font-size: 13px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.4); } .map-wrap .sm-act:hover { background: var(--hover); } .map-wrap .sm-act.active { background: var(--sel); color: #fff; border-color: var(--sel); } /* .map-info sits on a fixed dark panel in BOTH themes — pin light text so it stays readable in light mode */ .mi-row span { color: rgba(230,233,238,.62); } .mi-row b { font-weight: 700; color: #e6e9ee; } /* Floor-plan panel (Survey mode) */ .fp-wrap { display: flex; flex-direction: column; height: 100%; } /* floating project/band/analysis bar — pinned top-left over the plan so the stage keeps full height; dark translucent chrome (readable in both themes) */ .fp-bar { position: absolute; left: 13px; top: 13px; z-index: 4; display: flex; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 8px; background: rgba(22,27,34,.55); backdrop-filter: blur(2px); flex-wrap: wrap; max-width: calc(100% - 26px); } .fp-bar .fp-msg { color: #c9d4e0; } .fp-sel { background: var(--page); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 12px; max-width: 180px; } .fp-msg { color: var(--dim); font-size: 12px; } .fp-tabsrow { flex: 0 0 auto; display: flex; align-items: stretch; border-top: 1px solid var(--border); background: var(--surface); } .fp-tabs { flex: 0 0 auto; display: flex; gap: 3px; padding: 4px 6px 0; overflow-x: auto; } .fp-tabsrow .fp-tabs { flex: 1 1 auto; min-width: 0; } .fp-status { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 4px 12px; color: var(--dim); font-size: 12px; white-space: nowrap; } .fp-status .fp-st { display: inline-flex; align-items: center; gap: 4px; } .fp-status .fp-st b { color: var(--text); font-variant-numeric: tabular-nums; } .fp-tab { flex: 0 0 auto; appearance: none; -webkit-appearance: none; border: 1px solid var(--border); border-top: 2px solid transparent; background: var(--surface2); color: var(--dim); font-family: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 0 0 4px 4px; cursor: pointer; white-space: nowrap; } .fp-tab:hover { color: var(--text); background: var(--hover); } .fp-tab.active { color: var(--text); background: var(--page); border-top-color: var(--sel); } .fp-stage { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; background: var(--fp-stage); } .fp-scroll { position: absolute; inset: 0; overflow: auto; display: flex; align-items: safe center; justify-content: safe center; padding: 8px; } .fp-frame { position: relative; display: block; flex: 0 0 auto; cursor: crosshair; } /* sized to the contained image (px) by fpFitTile */ .fp-img { display: block; width: 100%; height: 100%; } .fp-ov { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } /* clip the growing track circle to the plan edges */ /* floating semi-opaque tool rail, pinned to the left of the plan */ .fp-tools { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: 6px; padding: 6px; background: rgba(22,27,34,.3); border-radius: 8px; backdrop-filter: blur(2px); } .fp-tool { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; appearance: none; -webkit-appearance: none; border: none; border-radius: 6px; background: rgba(35,42,52,.35); color: var(--text); font-size: 16px; cursor: pointer; opacity: .6; } .fp-tool:hover { opacity: .95; background: rgba(43,52,66,.8); } .fp-tool.active { opacity: .95; background: rgba(37,99,235,.7); color: #fff; } .fp-tool i { pointer-events: none; } /* interpolated coverage heatmap layer (below the point overlay) */ .fp-cov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; } /* RSSI colour legend — horizontal gradient bar + dBm scale, bottom-right of the plan */ .fp-legend { position: absolute; right: 13px; bottom: 15px; z-index: 3; display: flex; align-items: center; gap: 8px; background: rgba(22,27,34,.82); border-radius: 8px; padding: 6px 9px; color: #e6edf3; backdrop-filter: blur(2px); pointer-events: none; } .fp-legend-title { font-size: 11px; font-weight: 700; white-space: nowrap; } .fp-legend-scale { display: flex; flex-direction: column; gap: 2px; } .fp-legend-bar { width: 190px; height: 12px; border-radius: 2px; /* stops match rssiColor bands across -90..-40 dBm */ background: linear-gradient(to right, #ef4444 0%, #ef4444 30%, #f59e0b 30%, #f59e0b 46%, #3b82f6 46%, #3b82f6 70%, #22c55e 70%, #22c55e 100%); } .fp-legend-ticks { display: flex; justify-content: space-between; font-size: 9px; color: #e6edf3; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.7); } /* categorical swatch legend (Network issues) — sits in the same dark translucent legend chip */ .fp-legend-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; max-width: 300px; color: #e6edf3; } .fp-legend-cat { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; white-space: nowrap; } .fp-legend-cat i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: 0 0 auto; } /* centered Single / Track survey controls at the bottom of the plan */ .fp-actions { position: absolute; left: 50%; bottom: 15px; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; } .fp-act { appearance: none; -webkit-appearance: none; display: flex; align-items: center; gap: 6px; border: none; border-radius: 6px; background: rgba(35,42,52,.5); color: var(--text); font-size: 12px; font-weight: 700; padding: 7px 14px; cursor: pointer; opacity: .85; backdrop-filter: blur(2px); } .fp-act:hover { background: rgba(43,52,66,.7); opacity: 1; } .fp-act.active { background: rgba(229,72,77,.72); color: #fff; opacity: 1; } /* red while capturing */ .fp-act i { font-size: 15px; } /* measurement dot — colour set inline from the RSSI range (value shown on hover only) */ /* Single-measure 5-second countdown ring */ .fp-count { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: none; z-index: 2; } .fp-count svg { width: 100%; height: 100%; transform: rotate(-90deg); } .fp-count-bg { fill: none; stroke: rgba(0,0,0,.45); stroke-width: 3.5; } .fp-count-fg { fill: none; stroke: var(--sel); stroke-width: 3.5; stroke-linecap: round; } .fp-count-n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: #fff; text-shadow: 0 0 4px #000; } /* Track-mode walk radius — dotted circle that grows ~1 m/s until the next point */ .fp-track-circle { position: absolute; border: 2px dashed var(--sel); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; box-shadow: 0 0 8px rgba(37,99,235,.35); } .fp-pt { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--success); border: 2px solid #fff; box-shadow: 0 0 6px rgba(0,0,0,.7); transition: transform .08s ease; } /* hover-inspect: markers accept the pointer only when no survey mode is active */ .fp-inspecting .fp-pt { pointer-events: auto; cursor: pointer; } .fp-inspecting .fp-pt:hover { transform: scale(1.5); box-shadow: 0 0 0 3px rgba(255,255,255,.55), 0 0 8px rgba(0,0,0,.8); z-index: 2; } /* Track-mode Undo button — top-right of the plan */ .fp-undo { position: absolute; right: 13px; top: 13px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; appearance: none; -webkit-appearance: none; border: none; border-radius: 6px; background: rgba(35,42,52,.62); color: #fff; font-size: 12px; font-weight: 700; padding: 7px 12px; cursor: pointer; opacity: .9; backdrop-filter: blur(2px); } .fp-undo:hover { background: rgba(43,52,66,.85); opacity: 1; } .fp-undo i { font-size: 15px; } /* Requirements Pass/Fail summary — top-left of the plan, only for the Requirements layer */ .fp-reqstat { position: absolute; left: 50%; top: 13px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 8px; background: rgba(22,27,34,.55); border-radius: 8px; padding: 5px 10px; color: var(--text); font-size: 11px; font-weight: 700; backdrop-filter: blur(2px); pointer-events: none; } .fp-reqstat-name { font-weight: 800; } .fp-reqstat-seg { padding: 1px 7px; border-radius: 10px; color: #fff; font-variant-numeric: tabular-nums; } .fp-reqstat-seg.pass { background: #21A03B; } .fp-reqstat-seg.marg { background: #E6C63D; color: #1a1a1a; } .fp-reqstat-seg.fail { background: #B0201B; } .fp-reqstat-tot, .fp-reqstat-empty { opacity: .8; font-weight: 600; } /* AP-on-a-Stick control bar (top-centre of the plan) + stick markers */ .fp-apos { position: absolute; left: 50%; top: 13px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 26px); flex-wrap: wrap; justify-content: center; background: rgba(22,27,34,.62); border-radius: 10px; padding: 6px 8px; backdrop-filter: blur(3px); } /* the bar background is always dark translucent, so text/icons are pinned light (readable in both themes) */ .fp-apos-btn { display: inline-flex; align-items: center; gap: 5px; appearance: none; -webkit-appearance: none; border: none; border-radius: 7px; background: rgba(53,62,76,.85); color: #e6edf3; font-size: 12px; font-weight: 600; padding: 5px 10px; cursor: pointer; white-space: nowrap; } .fp-apos-btn:hover { background: rgba(43,52,66,.95); } .fp-apos-btn.active { background: rgba(37,99,235,.8); color: #fff; } .fp-apos-target { max-width: 260px; } .fp-apos-target .fp-apos-tname { overflow: hidden; text-overflow: ellipsis; } .fp-apos-new { background: rgba(34,197,94,.75); color: #06210f; font-weight: 700; } .fp-apos-new:hover { background: rgba(34,197,94,.95); } .fp-apos-passes { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; } .fp-apos-chip { min-width: 26px; height: 26px; padding: 0 6px; border: none; border-radius: 13px; background: rgba(53,62,76,.9); color: #e6edf3; font-size: 12px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; } .fp-apos-chip:hover { background: rgba(43,52,66,1); } .fp-apos-chip.active { background: #2563eb; color: #fff; box-shadow: 0 0 0 2px rgba(37,99,235,.35); } .fp-stick { position: absolute; z-index: 4; margin: -14px 0 0 -14px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #64748b; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.6); cursor: pointer; } .fp-stick.active { background: #2563eb; } .fp-stick i { transform: rotate(45deg); color: #fff; font-size: 14px; pointer-events: none; } .fp-stick-n { position: absolute; right: -6px; top: -6px; transform: rotate(45deg); min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #0f172a; color: #fff; font-size: 9px; font-weight: 800; line-height: 15px; text-align: center; pointer-events: none; } .fp-placing .fp-frame, .fp-placing .fp-img { cursor: crosshair; } /* APoS target picker + per-placement stats table (modal) */ .apos-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow: auto; margin: 6px 0 2px; } .apos-pick { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; appearance: none; -webkit-appearance: none; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); padding: 7px 10px; cursor: pointer; } .apos-pick:hover { border-color: #2563eb; background: rgba(37,99,235,.08); } .apos-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.5); } .apos-nm { flex: 1 1 auto; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .apos-bands { display: inline-flex; gap: 3px; flex: 0 0 auto; } .apos-band { font-size: 9px; font-weight: 800; background: rgba(148,163,184,.25); border-radius: 4px; padding: 1px 4px; } .apos-bss { font-size: 10px; opacity: .7; font-family: ui-monospace, monospace; flex: 0 0 auto; } .apos-rs { font-variant-numeric: tabular-nums; font-weight: 700; flex: 0 0 auto; min-width: 34px; text-align: right; } .apos-tblwrap { max-height: 46vh; overflow: auto; margin: 6px 0; } .apos-tbl { width: 100%; border-collapse: collapse; font-size: 12px; } .apos-tbl th, .apos-tbl td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; white-space: nowrap; } .apos-tbl th { font-weight: 700; opacity: .8; } /* Requirement-profile picker row (Settings ▸ Requirements) */ .req-prof-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; } .req-prof-bar select { flex: 0 0 auto; min-width: 130px; } .req-prof-bar input { flex: 1 1 auto; min-width: 0; } .req-prof-bar .btn { flex: 0 0 auto; } /* hover point inspector — left: AP list, right: mini spectrum */ .fp-ins { position: absolute; z-index: 6; max-width: 90vw; min-height: 156px; max-height: 80vh; display: flex; align-items: stretch; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 8px 28px rgba(0,0,0,.4); overflow: hidden; pointer-events: auto; resize: both; font-size: 12px; } .fp-ins-col { display: flex; flex-direction: column; width: 260px; min-width: 220px; max-width: 560px; flex: 1 1 auto; min-height: 0; } .fp-ins-spec { flex: 0 0 auto; width: 380px; display: flex; flex-direction: column; border-left: 1px solid var(--border); } .fp-ins-spec-h { padding: 7px 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); background: var(--surface2); border-bottom: 1px solid var(--border); } .fp-ins-canvas { flex: 1 1 auto; width: 100%; min-height: 118px; display: block; background: var(--chartBg); } .fp-ins-tp { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--border); background: var(--surface2); font-size: 11px; } .fp-ins-tp-k { color: var(--dim); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .fp-ins-tp-v { font-weight: 700; font-variant-numeric: tabular-nums; } .fp-ins-tp-v i { font-size: 13px; vertical-align: -2px; } .fp-ins-head { padding: 7px 11px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); background: var(--surface2); border-bottom: 1px solid var(--border); } .fp-ins-list { padding: 2px 11px 6px; flex: 1 1 auto; overflow-y: auto; min-height: 0; } .fp-ins-ap { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; grid-template-areas: "dot nm rs" "dot bss rs" "dot meta meta" "dot rates rates"; column-gap: 8px; row-gap: 1px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); } .fp-ins-ap:first-child { border-top: none; } .fp-ins-dot { grid-area: dot; width: 9px; height: 9px; border-radius: 50%; } .fp-ins-nm { grid-area: nm; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fp-ins-hidden { color: var(--dim); font-weight: 600; } .fp-ins-bss { grid-area: bss; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 10px; color: var(--dim); } .fp-ins-rs { grid-area: rs; align-self: start; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; padding-left: 4px; } .fp-ins-meta { grid-area: meta; font-size: 10px; color: var(--dim); } .fp-ins-rates { grid-area: rates; font-size: 9.5px; color: var(--dim); font-variant-numeric: tabular-nums; word-break: break-word; line-height: 1.25; } .fp-ins-rates i { font-size: 10px; vertical-align: -1px; opacity: .75; } .fp-ins-empty { color: var(--dim); padding: 8px 2px; text-align: center; } /* floor-plan bar: band segmented filter + analysis dropdown sizing — matched heights */ .fp-bar .fp-sel { height: 30px; } .fp-band { flex: 0 0 auto; height: 30px; } .fp-band .wifi-seg-btn { height: 100%; display: inline-flex; align-items: center; padding: 0 11px; font-size: 12px; } .fp-analysis { max-width: 150px; } .kv-pane { padding: 10px 14px; } .kv-pane .kv { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--border); } .kv-pane .kv span { color: var(--dim); } .kv-pane .kv b { font-weight: 700; } .big-num { font-size: 42px; font-weight: 800; color: var(--accent); text-align: center; margin: 6px 0 0; } .big-unit { text-align: center; color: var(--dim); font-size: 12px; margin-bottom: 8px; } .pane-note { color: var(--dim); font-size: 12px; padding: 6px 12px; } /* centre a GPS map-pane empty-state note (waiting / acquiring fix) in the middle of the pane */ .pane-note.gps-pane-msg { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; } /* full-panel centered "nothing detected" message — mirrors the analyzer's canvas notice */ .pane-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--dim); font: 700 15px sans-serif; text-align: center; padding: 12px; } /* ---- cellular view ---- */ .cell-view { display: flex; flex-direction: column; height: 100%; overflow: auto; } .cell-serving { display: flex; flex-direction: column; } .cell-neighbors { display: flex; flex-direction: column; min-height: 0; } .cell-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px 0; } .cell-badge { background: var(--accent); color: #06121f; font-weight: 800; font-size: 12px; padding: 3px 9px; border-radius: 999px; letter-spacing: .3px; } .cell-badge-sdr { background: #a855f7; color: #fff; margin-left: 6px; } /* blind SDR (no-SIM) cell provenance */ .cell-op { margin-left: auto; color: #FF8A2B; font-weight: 700; } .cell-gauge { display: block; width: 100%; max-width: 340px; height: auto; margin: 2px auto 4px; } .cell-neigh-title { color: var(--text); font-size: 12px; font-weight: 700; padding: 8px 14px 4px; border-top: 1px solid var(--border); } .cell-tbl-wrap { overflow-x: auto; } /* keep the 7-col table usable on a narrow phone */ .cell-tbl { width: 100%; border-collapse: collapse; font-size: 12px; } .cell-tbl th { text-align: left; color: var(--dim); font-weight: 600; padding: 4px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } .cell-tbl td { padding: 4px 10px; border-bottom: 1px dashed var(--border); white-space: nowrap; } /* Signals table (classified spectrum signatures) — reuses .cell-tbl; a type colour chip precedes the label */ .sig-tbl td.r, .sig-tbl th.r { text-align: right; } .sig-chip { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; vertical-align: middle; } /* Orientation-responsive rearrange on a touch device (phone/tablet): PORTRAIT -> serving summary on top, neighbour list below (the column default above). LANDSCAPE -> the two side-by-side (serving summary left, neighbour list right) so the wide-but-short screen uses its width and the neighbour list scrolls independently. */ @media (orientation: landscape) and (pointer: coarse) { .cell-view { flex-direction: row; align-items: stretch; overflow: hidden; } .cell-serving { flex: 0 0 46%; max-width: 440px; overflow-y: auto; border-right: 1px solid var(--border); } .cell-neighbors { flex: 1 1 auto; overflow-y: auto; min-width: 0; } .cell-neighbors .cell-neigh-title { border-top: none; } /* it heads a column now, not a below-divider */ .cell-gauge { max-width: 300px; } } /* ---- protocol analysis (monitor-mode 802.11 packet list + decode tree) ---- */ /* The capture status chip now sits at the top of the Actions dock (left-aligned); the Start/ Pause/Clear/Export-pcap buttons reuse .dock-acts/.dock-btn and the frame-type/filter reuse .wf-select/.wf-search, so the Protocol view matches the other views' dock. */ .proto-dockchip { display: block; margin-bottom: 4px; } .proto-chip { font-weight: 700; font-size: 11px; padding: 3px 9px; border-radius: 999px; letter-spacing: .3px; } .proto-on { background: #22c55e; color: #06121f; } .proto-idle { background: var(--border); color: var(--dim); } .proto-off { background: #7f1d1d; color: #fecaca; } /* bottom-left status line under the packet table */ .proto-foot { display: flex; align-items: center; padding: 5px 10px; border-top: 1px solid var(--border); } .proto-count { color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; } .proto-tbl-wrap { overflow: auto; height: calc(100% - 27px); } .proto-tbl { width: 100%; border-collapse: collapse; font-size: 12px; } .proto-tbl thead th { position: sticky; top: 0; background: var(--panel, #0f1621); color: var(--dim); text-align: left; font-weight: 700; font-size: 11px; padding: 5px 8px; border-bottom: 1px solid var(--border); z-index: 1; } .proto-row td { padding: 4px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; } .proto-row { cursor: pointer; } .proto-row:hover { background: rgba(255,255,255,.04); } .proto-exp { color: var(--dim); width: 16px; text-align: center; } .proto-type { font-weight: 600; } .proto-mac { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; color: var(--dim); } .proto-info { color: var(--text); white-space: normal; } .proto-alert .proto-type { color: #f87171; } /* deauth / disassoc stand out */ .proto-beacon td { color: var(--dim); } .proto-probe .proto-type { color: #38bdf8; } .proto-assoc .proto-type { color: #34d399; } .proto-open { background: rgba(255,255,255,.05); } .proto-detail-row td { background: rgba(0,0,0,.15); padding: 8px 10px 10px; border-bottom: 1px solid var(--border); white-space: normal; } .proto-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 14px; margin-bottom: 8px; } .proto-empty { text-align: center; color: var(--dim); padding: 24px; font-weight: 600; } /* ---- modal ---- */ #modal { position: fixed; z-index: 60; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 660px; max-width: 92vw; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.6); } #modal.modal-tall { height: 800px; } /* tabbed Settings modal: fixed tall layout with a scrolling tab body */ /* h2 + tabs stay at top; the active tab body scrolls; the button bar + status line pin to the bottom */ #modal > .tabpage.active { flex: 1 1 auto; overflow-y: auto; min-height: 0; } #modal > .btnbar, #modal > #cfg-out { flex: 0 0 auto; } #modal h2 { margin: 0 0 14px; font-size: 16px; } #modal .tabs { display: flex; gap: 2px; margin-bottom: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--border); } #modal .tab { padding: 7px 11px; background: none; color: var(--dim); cursor: pointer; font-size: 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; } #modal .tab:hover { color: var(--text); } #modal .tab.active { background: none; color: var(--text); border-bottom-color: var(--sel); } #modal .tab.tab-disabled { opacity: .4; cursor: not-allowed; } #modal .tab.tab-disabled:hover { color: var(--dim); } #modal label { display: block; margin: 8px 0 3px; color: var(--dim); font-size: 12px; } #modal input, #modal select, #modal textarea { width: 100%; padding: 7px 9px; background: var(--page); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; } #modal textarea { resize: vertical; font-family: inherit; } #modal .row { display: flex; gap: 10px; } #modal .row > div { flex: 1; } .btnbar { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; } /* ── Scout Info dialog (/api/sysinfo) ─────────────────────────────────────── */ #modal .si-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; margin: -4px -4px 0; padding: 0 4px; } .si-status { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin: 0 0 12px; } .si-status .dot { width: 11px; height: 11px; } .si-sec { margin: 0 0 14px; } .si-sec-h { display: flex; align-items: center; gap: 7px; color: var(--text); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); } .si-sec-h i { color: var(--accent); font-size: 14px; } /* label : value grid */ .si-grid { display: grid; grid-template-columns: 148px 1fr; gap: 3px 12px; font-size: 13px; } .si-grid .si-k { color: var(--dim); } .si-grid .si-v { color: var(--text); word-break: break-word; } .si-grid .si-v.si-ph { color: var(--dim); font-style: italic; } /* placeholder / undetermined value */ /* progress meter (CPU / memory / disk / battery) */ .si-meter { height: 7px; border-radius: 4px; background: var(--surface2); overflow: hidden; margin: 3px 0 2px; } .si-meter > span { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width .3s ease; } .si-meter.warn > span { background: var(--warning); } .si-meter.crit > span { background: var(--danger); } .si-meter.ok > span { background: var(--success); } /* battery: healthy charge (green) */ /* radio-firmware table */ .si-tbl { width: 100%; border-collapse: collapse; font-size: 12px; } .si-tbl th, .si-tbl td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; } .si-tbl th { color: var(--dim); font-weight: 600; } .si-tbl td .dot { width: 8px; height: 8px; } /* Settings ▸ Ranges rows */ .rng-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; } .rng-row .rng-sw { width: 26px; height: 26px; border-radius: 4px; border: 1px solid var(--border); flex: 0 0 auto; } .rng-row .rng-lbl { color: var(--dim); font-size: 12px; flex: 0 0 auto; } .rng-row .rng-min { width: 80px; flex: 0 0 auto; } .rng-row .rng-hex { width: 110px; flex: 0 0 auto; } /* Settings ▸ WiFi: SSID include/exclude filter (segmented control + single editable list) */ .seg { display: flex; gap: 4px; margin: 4px 0 2px; } /* WiFi settings sub-tab bar (General / Filter / Adapters) + its panes */ .seg.wsub { margin: 0 0 12px; } /* Survey Actions: Indoor/Outdoor environment toggle — joined segmented control (reuses .wf-seg/.wf-btn) */ .wf-seg.svenv { margin: 4px 0 8px; } .wf-seg.svenv .wf-btn { padding: 7px 4px; font-size: 12px; } .wsub-pane[hidden] { display: none; } .seg-btn { flex: 1; height: 30px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); color: var(--text); font-weight: 600; font-size: 12px; cursor: pointer; padding: 0; } .seg-btn:hover { background: var(--hover); } .seg-btn.active { background: var(--sel); color: #fff; border-color: var(--sel); } .ssid-list { margin: 6px 0 2px; } .ssid-list[hidden] { display: none; } .ssid-list-h { color: var(--dim); font-size: 12px; margin: 4px 0 6px; } .ssid-add { display: flex; gap: 6px; align-items: center; } .ssid-add > input, .ssid-add > select { flex: 1 1 0; min-width: 0; } .ssid-add > .btn { flex: 0 0 auto; } .ssid-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; } .ssid-row .ssid-v { flex: 1; min-width: 0; } .ssid-row .ssid-x { flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); color: var(--dim); cursor: pointer; font-size: 16px; line-height: 1; padding: 0; } .ssid-row .ssid-x:hover { background: var(--hover); color: var(--text); } /* Settings ▸ Configuration: ESP32-C5 module columns + channel matrix */ #modal input[type=checkbox] { width: auto; padding: 0; border: none; background: none; } .cfg-mods { display: flex; gap: 8px; margin: 8px 0; } .cfg-mod { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .cfg-mod-h { color: var(--dim); font-size: 11px; font-weight: 700; } .cfg-collect { display: flex; align-items: center; gap: 5px; color: var(--dim); font-size: 11px; margin: 0; } .cfg-mod-com { width: 100%; } .cfg-mod-status { font-size: 11px; margin-top: 2px; min-height: 14px; color: var(--dim); word-break: break-all; } .cfg-mod-status.ok { color: #22c55e; } .cfg-mod-status.warn { color: #f2a03d; } .cfg-mod-status.bad { color: #e0564b; } /* Settings ▸ Devices: identity-bound device cards (zero-config) */ .cfg-devlist { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; overflow-y: auto; } #tp-config .cfg-devlist { flex: 1 1 auto; min-height: 0; } /* Devices sub-tabs (Remote / Scout WiFi / Devices list): the active pane fills the tab and scrolls internally so the device list keeps its own scroll region. :not([hidden]) so the inactive panes still resolve to display:none. */ #tp-config .wsub-pane:not([hidden]) { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; } .cfg-dev { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); } .cfg-dev.absent { opacity: 0.55; } .cfg-dev-mode { width: auto; } .cfg-dev-chans { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 6px; margin-top: 4px; border-top: 1px dashed var(--border); } .cfg-dev-chans-lbl { font-size: 11px; font-weight: 700; color: var(--dim); } .cfg-dev-ch { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--dim); } .cfg-dev-ch input[type=checkbox] { width: auto; margin: 0; flex: none; } .cfg-dev-ch-btn { font-size: 11px; padding: 1px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--dim); cursor: pointer; } .cfg-dev-dot { font-size: 14px; line-height: 1; flex: none; } .cfg-dev-dot.ok { color: #22c55e; } .cfg-dev-dot.warn { color: #f2a03d; } .cfg-dev-dot.bad { color: var(--dim); } .cfg-dev-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .cfg-dev-title { font-weight: 700; font-size: 13px; color: var(--text); } .cfg-dev-src { font-weight: 600; font-size: 10px; padding: 1px 6px; border-radius: 8px; margin-left: 6px; background: rgba(56,132,255,.18); color: #6ea8ff; vertical-align: middle; } .cfg-dev-src.local { background: rgba(120,120,120,.18); color: var(--dim); } .cfg-dev.remote { border-left: 2px solid #3884ff; } .cfg-dev-sub { font-size: 11px; color: var(--dim); word-break: break-all; } .cfg-dev-ctrls { display: flex; align-items: center; gap: 12px; flex: none; flex-wrap: wrap; justify-content: flex-end; } .cfg-dev-c { display: flex; align-items: center; gap: 5px; color: var(--dim); font-size: 12px; margin: 0; } .cfg-dev-c input[type=checkbox] { width: auto; margin: 0; flex: none; } .cfg-dev-band { width: auto; } /* Settings ▸ General: host WLAN adapter include list */ .cfg-adapters { display: flex; flex-direction: column; gap: 4px; padding: 2px 12px 4px; } .cfg-adapter { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; cursor: pointer; } .cfg-adapter input[type=checkbox] { width: auto; margin: 0; flex: none; } /* Analyzer ▸ Bands — preset frequency-band checklist (grouped, scrollable) */ .spb-list { margin: 2px 12px 4px; max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); } .spb-group { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 7px; padding: 6px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--dim); background: var(--surface2); border-top: 1px solid var(--border); } .spb-list .spb-group:first-child { border-top: 0; } .spb-dot { width: 9px; height: 9px; border-radius: 2px; flex: none; } /* selectors carry #modal so they beat "#modal label { display:block }" */ #modal label.spb-row { display: grid; grid-template-columns: auto 96px 1fr auto; align-items: center; gap: 10px; padding: 3px 10px; margin: 0; font-size: 12.5px; cursor: pointer; } #modal label.spb-row:hover { background: rgba(127,127,127,.08); } #modal label.spb-row input[type=checkbox] { width: auto; margin: 0; flex: none; } .spb-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spb-svc { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .spb-rng { color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 11.5px; text-align: right; } #modal label.spb-row.spb-off { opacity: .42; cursor: not-allowed; } #modal label.spb-row.spb-off .spb-name { font-weight: 500; } /* Scout WiFi radios — associate to a network (Settings ▸ Devices) */ .cfg-swifi-sec { margin-top: 4px; } .cfg-swifi { padding: 8px 10px; border: 1px solid var(--border); border-left: 2px solid #3884ff; border-radius: 8px; background: var(--surface2); margin-bottom: 6px; } .cfg-swifi-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .cfg-swifi-name { font-weight: 700; font-size: 13px; color: var(--text); } .cfg-swifi-st { font-size: 11px; color: var(--dim); white-space: nowrap; } .cfg-swifi-st.ok { color: #22c55e; } .cfg-swifi-st.warn { color: #f2a03d; } .cfg-swifi-st.bad { color: #ef4444; } .cfg-swifi-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .cfg-swifi-ssid, .cfg-swifi-psk { flex: 1 1 140px; min-width: 110px; width: auto; } .cfg-swifi-row .btn { flex: none; padding: 4px 12px; font-size: 12px; } /* SDR power calibration (Settings ▸ Analyzer) — state badge + self-cal wizard */ .cal-badge { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); font-size: 12.5px; margin: 2px 0 4px; } .cal-badge .cal-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--dim); } .cal-badge.cal-none .cal-dot { background: #f2a03d; } .cal-badge.cal-factory .cal-dot { background: #3884ff; } .cal-badge.cal-user .cal-dot { background: #22c55e; } .cal-badge .cal-txt { flex: 1 1 auto; min-width: 0; } .cal-badge .cal-dev { color: var(--dim); font-size: 11px; } .calwiz-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.45); } .calwiz { position: fixed; z-index: 71; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 560px; max-width: 94vw; max-height: 90vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.6); color: var(--text); } .calwiz h2 { margin: 0 0 6px; font-size: 16px; } .calwiz label { display: block; margin: 8px 0 3px; color: var(--dim); font-size: 12px; } .calwiz input, .calwiz select { width: 100%; padding: 7px 9px; background: var(--page); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; } .cw-pt { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 8px; align-items: end; margin-bottom: 6px; } .cw-pt .cw-read { white-space: nowrap; } .cw-pt .cw-meas { font-size: 11px; color: var(--dim); grid-column: 1 / -1; margin: -2px 0 2px; } .cw-pt .btn { padding: 6px 10px; font-size: 12px; } .cfg-chan-wrap { max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; margin-top: 4px; } /* Configuration tab: module columns + notes stay at the top; the channel-assignment table grows to fill the rest of the dialog height (scrolls internally when taller) */ #modal > #tp-config.active { display: flex; flex-direction: column; overflow: hidden; } #tp-config .cfg-chan-wrap { flex: 1 1 auto; max-height: none; min-height: 0; } .cfg-chan { width: 100%; border-collapse: collapse; font-size: 12px; } .cfg-chan th, .cfg-chan td { text-align: center; padding: 3px 4px; border-bottom: 1px solid var(--border); } .cfg-chan thead th { position: sticky; top: 0; background: var(--surface); color: var(--dim); z-index: 1; } .cfg-chan .cfg-ch-n { color: var(--dim); font-variant-numeric: tabular-nums; } .btn { padding: 8px 16px; border: none; border-radius: 7px; font-weight: 700; cursor: pointer; font-size: 13px; } .btn-go { background: var(--success); color: #06240f; } .btn-accent { background: var(--accent); color: #043330; } .btn-sec { background: var(--surface2); color: var(--text); } .btn-danger { background: var(--danger); color: #fff; } .hidden { display: none !important; } /* ---- login gate ---- */ .login-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 600px at 50% -10%, #16202b, var(--page)); } :root[data-theme="light"] .login-overlay { background: radial-gradient(1200px 600px at 50% -10%, #FFFFFF, var(--page)); } .login-card { width: 360px; max-width: 92vw; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 26px 26px 20px; box-shadow: 0 30px 80px rgba(0,0,0,.6); } .login-brand { display: flex; align-items: center; gap: 10px; font-size: 20px; } .login-logo { color: var(--accent); font-size: 26px; } .login-brand b { color: var(--brandPlan); } .login-sub { color: var(--dim); font-size: 13px; margin: 4px 0 18px; } .login-card label { display: block; color: var(--dim); font-size: 12px; margin: 10px 0 4px; } .login-card input { width: 100%; padding: 9px 11px; background: var(--page); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-size: 14px; } .login-card input:focus { outline: none; border-color: var(--accent); } .login-btn { width: 100%; margin-top: 18px; padding: 11px; font-size: 14px; } .login-err { color: var(--danger); font-size: 12px; min-height: 16px; margin-top: 8px; } .login-or { display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin: 14px 0 0; } .login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--border); } .login-skip { margin-top: 12px; } .login-note { color: var(--dim); font-size: 11px; margin-top: 10px; line-height: 1.4; } /* Live-only (guest) mode: no server, so Survey mode + project selection are unavailable. Grey out and block every Survey trigger; the button stays visible so the reason is clear. */ body.guest-mode [data-mode="survey"] { opacity: .4; cursor: not-allowed; } .tabpage { display: none; } .tabpage.active { display: block; } /* ============================================================================ Responsive — phones (≤600px) + tablets (601–1024px). Desktop (>1024px) is untouched: every rule below is inside a media block and only OVERRIDES the desktop layout — nothing above is deleted. Layout is driven purely by these queries (works without JS); app.js only toggles the drawer. ============================================================================ */ /* ---------------------------- PHONE (≤600px) ---------------------------- */ @media (max-width: 600px) { /* top bar: the mode is now driven by the bottom tab bar, so drop the centered Inspect/Survey chips and the status words that crowd a narrow row */ #chips-mode { display: none; } #topbar { gap: 6px; padding: 0 6px; } #topbar-title { margin-left: auto; font-size: 12px; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* tiles: collapse any layout (single/vert/horz/quad) into one scrolling column — each tile keeps a usable height and the last one clears the bottom tab bar */ #tiles { grid-template-columns: 1fr !important; grid-template-rows: none !important; grid-auto-rows: minmax(72vh, 1fr); overflow-y: auto; overflow-x: hidden; padding-bottom: calc(var(--botbar-h) + env(safe-area-inset-bottom, 0px) + 4px); } /* dock → right slide-over Actions/Settings drawer. Animated with `right` (NOT a transform) so it does NOT become the containing block for the fixed bottom bar below — the tab bar stays pinned to the viewport while the drawer slides. */ #dock { position: fixed; z-index: 45; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); bottom: calc(var(--botbar-h) + env(safe-area-inset-bottom, 0px)); right: 0; width: min(320px, 86vw); flex: 0 0 auto; flex-direction: column; border-left: 1px solid var(--border); box-shadow: -8px 0 30px rgba(0,0,0,.5); transform: none; transition: right .16s ease; overflow-y: auto; } body:not(.drawer-open) #dock { right: calc(-1 * min(320px, 86vw)); box-shadow: none; } #dock.collapsed { right: 0; width: min(320px, 86vw); flex-basis: auto; } /* neutralise the desktop collapse state */ #dock-scrim { position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,.45); } /* both columns fill the drawer width and stack; inner panels flow (drawer scrolls) */ #dock .dock-col { width: 100%; flex: 0 0 auto; border-left: none; } #dock .dock-inner { flex: 0 0 auto; overflow: visible; min-height: 0; } #col-data > .dock-head { display: none; } /* "App" label is redundant beside the bottom bar */ /* Mode buttons → fixed bottom tab bar (lifted out via position:fixed; no transformed ancestor, so this pins to the viewport bottom regardless of the drawer). These are the same .dock-btn elements — their handlers are intact. */ .dock-btns { position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; flex-direction: row; gap: 0; padding: 0 0 env(safe-area-inset-bottom, 0px); background: var(--surface); border-top: 1px solid var(--border); } .dock-btns .dock-btn { flex: 1 1 0; min-width: 0; min-height: var(--botbar-h); flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 0; padding: 4px 2px; font-size: 10px; font-weight: 600; text-align: center; } /* phone = text-only buttons: drop the icons from the main-menu (Inspect/Survey), the whole Mode panel (tab bar + Settings/Logout), and the Actions-panel buttons (incl. their dropdown carets) — kept consistent across the drawer */ #chips-mode .task-btn i, #col-data .dock-btn i, #col-settings button i { display: none; } /* Survey is a permanent 6th tab on a phone: the top-bar Inspect/Survey chips are hidden here, so force it visible (syncDock inline-hides it in Inspect mode). */ .dock-btns .dock-survey { display: flex !important; margin-top: 0; border: none; border-left: 1px solid var(--border); } .dock-survey.active { border-color: var(--border); } /* bigger tap targets + readable dense type on a handset */ .menu-row { height: 40px; } #tilemenu, #submenu { width: min(220px, 92vw); } .wifi-grid { font-size: 13px; } .wifi-grid th, .wifi-grid td { padding: 6px 7px; } .wifi-seg-btn { padding: 7px 12px; } .fp-tab { padding: 8px 14px; } .fp-tool { width: 40px; height: 40px; font-size: 18px; opacity: .8; } .fp-act { padding: 9px 16px; } .fp-sel, .fp-analysis { max-width: 46vw; } } /* --------------------------- TABLET (601–1024px) --------------------------- */ /* Keeps the desktop dock + tiling (roomy enough on a tablet); just relaxes tap targets and dense spacing so touch use is comfortable. */ @media (min-width: 601px) and (max-width: 1024px) { .menu-row { height: 34px; } #tilemenu, #submenu { width: 210px; } .fp-tool { width: 38px; height: 38px; font-size: 17px; } .fp-tab { padding: 6px 13px; } .wifi-grid th, .wifi-grid td { padding: 5px 7px; } } /* ===== Walls layer (floorplan): design walls by material + field confirmation ===== */ .fp-walls { position: absolute; inset: 0; width: 100%; height: 100%; display: none; z-index: 2; } .fp-wallbar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: 12px; color: var(--text); background: rgba(22,27,34,.9); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.45); backdrop-filter: blur(2px); max-width: 94%; flex-wrap: wrap; justify-content: center; } .fp-wallbar-mat { max-width: 160px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; font-size: 12px; } .fp-wallbar-btn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; cursor: pointer; } .fp-wallbar-btn:hover { border-color: #2187c6; } .fp-wallbar-btn.active { background: #2187c6; color: #fff; border-color: #2187c6; } .fp-wallbar-counts { margin-left: 4px; white-space: nowrap; color: var(--dim); } .fp-wallpick, .fp-matform { position: absolute; z-index: 9; min-width: 190px; display: flex; flex-direction: column; gap: 6px; padding: 9px; font-size: 12px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 8px 28px rgba(0,0,0,.5); } .fp-wallpick-h { font-weight: 700; color: #7fb2e6; } .fp-wallpick-sel, .fp-matform input { background: var(--page); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; font-size: 12px; } .fp-wallpick-row { display: flex; gap: 6px; align-items: center; } .fp-wallpick-ok, .fp-mf-create { flex: 1; border: none; border-radius: 6px; padding: 6px 8px; font-weight: 700; cursor: pointer; background: #22c55e; color: #04220f; } .fp-wallpick-del { border: none; border-radius: 6px; padding: 6px 9px; cursor: pointer; background: #b91c1c; color: #fff; } .fp-wallpick-new, .fp-mf-cancel { border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; cursor: pointer; background: var(--surface); color: var(--text); } .fp-wallpick-st { color: var(--dim); font-size: 11px; } .fp-mf-row { display: flex; gap: 6px; align-items: center; } .fp-mf-row label { min-width: 74px; color: var(--dim); } .fp-mf-a24, .fp-mf-a5, .fp-mf-a6 { width: 54px; } .fp-mf-col { width: 44px; height: 26px; padding: 1px; } /* ---------- Object Groups (read-only view & filter) ---------- */ .fpg-s-filter { width: 100%; box-sizing: border-box; margin: 8px 0; padding: 8px 10px; background: var(--card, #1a1f27); border: 1px solid var(--line, #2a2f38); border-radius: 8px; color: var(--fg, #e6e9ee); font-size: 14px; outline: none; } .fpg-s-body { max-height: 52vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; } .fpg-s-card { border: 1px solid var(--line, #2a2f38); border-radius: 9px; overflow: hidden; } .fpg-s-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; background: var(--card, #1a1f27); } .fpg-s-head:hover { background: rgba(127,127,127,.1); } .fpg-s-chip { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; } .fpg-s-gname { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fpg-s-count { font-size: 12px; color: var(--dim, #9aa3af); background: rgba(127,127,127,.15); border-radius: 999px; padding: 1px 8px; } .fpg-s-mems { padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 3px; } .fpg-s-mem { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 4px; } .fpg-s-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fpg-s-type { font-size: 11px; color: var(--dim, #9aa3af); } .fpg-s-mac { font-size: 11px; color: var(--dim, #9aa3af); font-family: monospace; }