:root{ --titlebar:#2b2b2b; --activity:#252526; --sidebar:#252526; --sidebar-border:#3c3c3c; --editor:#1e1e1e; --panel:#1f1f1f; --panel-border:#2a2a2a; --text:#d4d4d4; --muted:#9fa3a9; --muted-2:#6b7179; --blue:#007acc; --blue-secondary:#1c415b80; --blue-secondary-border:#00427173; --green:#89d185; --row-hover:#2a2d2e; --row-select:#094771; --input:#3c3c3c; --input-border:#555; --statusbar-bg:#181818; --statusbar-text:#ffffff; --target-icon-wrapper-size:24px; --target-base-icon-size:20px; --target-focus-icon-size:30px; --shadow: 0 0 0 1px var(--sidebar-border), 0 8px 20px rgba(0,0,0,.35); --left-w: 360px; --right-w: 420px; --gutter: 6px; --activity-w: 56px; /* width of left activity bar (custom) */ --act-size: 56px; /* size of each activity button */ --act-icon: 26px; /* icon size inside button */ } /* Light theme overrides */ body.theme-light{ --titlebar:#f2f2f2; --activity:#f6f6f6; --sidebar:#ffffff; --sidebar-border:#e3e3e3; --editor:#fafafa; --panel:#ffffff; --panel-border:#e9e9e9; --text:#1e1e1e; --muted:#616161; --muted-2:#8a8a8a; --blue:#0066b8; --blue-secondary:#00579673; --blue-secondary-border:#00427173; --green:#2aa198; --row-hover:#f0f7ff; --row-select:#d0e7ff; --input:#ffffff; --input-border:#c9c9c9; --statusbar-bg:#f2f2f2; --statusbar-text:#1e1e1e; --shadow: 0 0 0 1px var(--sidebar-border), 0 8px 20px rgba(0,0,0,.15); } :root{ --titlebar-border:#1b1b1b; --tb-user-border:rgba(255,255,255,.2); --tb-btn-border:#3a3a3a; --tb-btn-bg:#2a2a2a; --tb-btn-text:#fff; --activity-act-color:#c7c7c7; --activity-act-active:#fff; --activity-icon-filter:none; --toolbar-icon-filter:none; --input-focus:#7a7a7a; --switch-track:#555; --switch-thumb:#fff; --primary-border:#0e639c; --ghost-hover:var(--row-hover); --hl-bg:rgba(255, 187, 70, 0.28); --hl-text:#FFBB46; --map-tool-active-bg:rgba(0,122,204,0.15); --spotter-dot:#10B981; --landmark-dot:#FACC15; --gun-dot:#FF5D5D; --gun-label:#FF5D5D; --target-focus-bg:rgba(22,22,24,.3); --scale-hud-bg:rgba(0,0,0,.45); --scale-hud-fg:#fff; --scale-hud-bar:#fff; --scale-hud-mark:#000; --table-selected-text:#d7eaff; --kv-value:#cfe8ff; --stage-title:#c6c6c6; --corr-table-meta:#8a8f96; --status-offline-bg:#FFBB46; --status-offline-fg:#000; --status-dot-shadow:rgba(0,0,0,.4); --status-success:#2ad67d; --status-success-shadow:rgba(42,214,125,.5); --status-error:#ff7b7b; --status-error-shadow:rgba(255,123,123,.5); --status-warning:#f8d66d; --status-warning-shadow:rgba(248,214,109,.45); --status-select-bg:#171717; --status-select-fg:#e7e7e7; --status-select-border:#333; --auth-overlay-bg:rgba(0,0,0,.85); --auth-panel-bg:#222; --auth-panel-border:#444; --auth-panel-title:#fff; --auth-panel-msg:#FFBB46; --active-target-meta:#d4d4d4; --active-target-meta-ok:#a6e3a1; --active-target-meta-err:#FFBB46; --sidebar-fade:linear-gradient(180deg, rgba(37,37,38,0) 0%, rgba(37,37,38,1) 10%); --columns-title:#c6c6c6; --columns-close:#a8a8a8; --ctx-submenu-bg:#1f1f1f; --ctx-submenu-border:#2a2a2a; --ctx-separator:#2a2a2a; --danger:#a40000; --danger-hover:rgba(164, 0, 0, 0.15); --progress-bg:rgba(255,255,255,0.08); --progress-fill:linear-gradient(90deg,#1ea7fd,#7bdcf5); --progress-glow:rgba(255,255,255,0.08); --beaufort-default:#ddd; } body[data-theme="light"]{ --titlebar:#f2f2f2; --activity:#f6f6f6; --sidebar:#ffffff; --sidebar-border:#e3e3e3; --editor:#fafafa; --panel:#ffffff; --panel-border:#e9e9e9; --text:#1e1e1e; --muted:#616161; --muted-2:#8a8a8a; --blue:#0066b8; --blue-secondary:#00579673; --blue-secondary-border:#00427173; --green:#2aa198; --row-hover:#f0f7ff; --row-select:#d0e7ff; --input:#ffffff; --input-border:#c9c9c9; --statusbar-bg:#f2f2f2; --statusbar-text:#1e1e1e; --titlebar-border:#d9d9d9; --tb-user-border:rgba(0,0,0,.15); --tb-btn-border:#d1d1d1; --tb-btn-bg:#fff; --tb-btn-text:#1e1e1e; --activity-act-active:var(--text); --activity-icon-filter:invert(1) hue-rotate(180deg) saturate(0.6); --toolbar-icon-filter:invert(1) hue-rotate(180deg) saturate(0.6); --ghost-hover:rgba(0,0,0,0.04); --target-focus-bg:rgba(255,255,255,.45); --scale-hud-bg:rgba(255,255,255,.82); --scale-hud-fg:#111827; --scale-hud-bar:#111827; --scale-hud-mark:#fff; --table-selected-text:var(--text); --kv-value:#2b6cb0; --stage-title:#6c7783; --active-target-meta:#35506b; --active-target-meta-ok:#1d6b3a; --active-target-meta-err:#a54818; --sidebar-fade:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%); --columns-title:#4f5d6b; --columns-close:#6b7280; --progress-bg:rgba(15,23,42,0.08); --shadow: 0 0 0 1px var(--sidebar-border), 0 8px 20px rgba(0,0,0,.15); } body[data-theme="e-ink"]{ --titlebar:#ffffff; --activity:#f7f7f7; --sidebar:#ffffff; --sidebar-border:#000000; --editor:#ffffff; --panel:#ffffff; --panel-border:#000000; --text:#000000; --muted:#444444; --muted-2:#666666; --blue:#000000; --blue-secondary:#d9d9d9; --blue-secondary-border:#000000; --green:#000000; --row-hover:#f2f2f2; --row-select:#e9e9e9; --input:#ffffff; --input-border:#000000; --statusbar-bg:#ffffff; --statusbar-text:#000000; --titlebar-border:#000000; --tb-user-border:#000000; --tb-btn-border:#000000; --tb-btn-bg:#ffffff; --tb-btn-text:#000000; --activity-act-color:#000000; --activity-act-active:#000000; --activity-icon-filter:invert(1) brightness(0); --toolbar-icon-filter:invert(1) brightness(0); --input-focus:#000000; --switch-track:#9b9b9b; --switch-thumb:#ffffff; --primary-border:#000000; --ghost-hover:#efefef; --hl-bg:#d9d9d9; --hl-text:#000000; --map-tool-active-bg:#e7e7e7; --spotter-dot:#000000; --landmark-dot:#666666; --gun-dot:#000000; --gun-label:#000000; --target-focus-bg:#f0f0f0; --scale-hud-bg:#ffffff; --scale-hud-fg:#000000; --scale-hud-bar:#000000; --scale-hud-mark:#ffffff; --table-selected-text:#000000; --kv-value:#000000; --stage-title:#333333; --corr-table-meta:#555555; --status-offline-bg:#dcdcdc; --status-offline-fg:#000000; --status-dot-shadow:rgba(0,0,0,.2); --status-success:#000000; --status-success-shadow:rgba(0,0,0,.2); --status-error:#000000; --status-error-shadow:rgba(0,0,0,.2); --status-warning:#000000; --status-warning-shadow:rgba(0,0,0,.2); --status-select-bg:#ffffff; --status-select-fg:#000000; --status-select-border:#000000; --auth-overlay-bg:rgba(255,255,255,.92); --auth-panel-bg:#ffffff; --auth-panel-border:#000000; --auth-panel-title:#000000; --auth-panel-msg:#000000; --active-target-meta:#000000; --active-target-meta-ok:#000000; --active-target-meta-err:#000000; --sidebar-fade:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%); --columns-title:#000000; --columns-close:#444444; --ctx-submenu-bg:#ffffff; --ctx-submenu-border:#000000; --ctx-separator:#000000; --danger:#000000; --danger-hover:#ececec; --progress-bg:#e0e0e0; --progress-fill:linear-gradient(90deg,#000,#666); --progress-glow:rgba(0,0,0,0.06); --beaufort-default:#000000; --shadow:none; } body.theme-eink .primary, body.theme-eink .secondary{ background:#fff; color:#000; border-color:#000; } body.theme-eink .primary:hover, body.theme-eink .secondary:hover{ background:#f2f2f2; color:#000; } body.theme-eink .primary:disabled, body.theme-eink .secondary:disabled{ background:#fff; color:#000; opacity:.55; } body[data-icon-scale="50"]{--target-icon-scale:0.5} body[data-icon-scale="60"]{--target-icon-scale:0.6} body[data-icon-scale="70"]{--target-icon-scale:0.7} body[data-icon-scale="80"]{--target-icon-scale:0.8} body[data-icon-scale="90"]{--target-icon-scale:0.9} body[data-icon-scale="100"]{--target-icon-scale:1} body[data-icon-scale="110"]{--target-icon-scale:1.1} body[data-icon-scale="120"]{--target-icon-scale:1.2} body[data-icon-scale="130"]{--target-icon-scale:1.3} body[data-icon-scale="140"]{--target-icon-scale:1.4} body[data-icon-scale="150"]{--target-icon-scale:1.5} body[data-icon-scale="160"]{--target-icon-scale:1.6} body[data-icon-scale="170"]{--target-icon-scale:1.7} body[data-icon-scale="180"]{--target-icon-scale:1.8} body[data-icon-scale="190"]{--target-icon-scale:1.9} body[data-icon-scale="200"]{--target-icon-scale:2} body[data-icon-scale="210"]{--target-icon-scale:2.1} body[data-icon-scale="220"]{--target-icon-scale:2.2} body[data-icon-scale="230"]{--target-icon-scale:2.3} body[data-icon-scale="240"]{--target-icon-scale:2.4} body[data-icon-scale="250"]{--target-icon-scale:2.5} body[data-icon-scale="260"]{--target-icon-scale:2.6} body[data-icon-scale="270"]{--target-icon-scale:2.7} body[data-icon-scale="280"]{--target-icon-scale:2.8} body[data-icon-scale="290"]{--target-icon-scale:2.9} body[data-icon-scale="300"]{--target-icon-scale:3} body[data-icon-scale="310"]{--target-icon-scale:3.1} body[data-icon-scale="320"]{--target-icon-scale:3.2} body[data-icon-scale="330"]{--target-icon-scale:3.3} body[data-icon-scale="340"]{--target-icon-scale:3.4} body[data-icon-scale="350"]{--target-icon-scale:3.5} body[data-icon-scale="360"]{--target-icon-scale:3.6} body[data-icon-scale="370"]{--target-icon-scale:3.7} body[data-icon-scale="380"]{--target-icon-scale:3.8} body[data-icon-scale="390"]{--target-icon-scale:3.9} body[data-icon-scale="400"]{--target-icon-scale:4} *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--editor); color:var(--text); display:grid; grid-template-rows: var(--titlebar-h, 36px) minmax(0, 1fr) auto; min-height:100vh; min-height:100dvh; overflow:hidden; font: 13px/1.5 'JetBrains Mono','JetBrainsMono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace; } body.overlay-mode{ font-size:12px } body.auth-pending, body.auth-locked{ overflow:hidden; } body.auth-pending .titlebar, body.auth-locked .titlebar, body.auth-pending .app-frame, body.auth-locked .app-frame, body.auth-pending .statusbar, body.auth-locked .statusbar, body.auth-pending #activeTargetTitle, body.auth-locked #activeTargetTitle{ display:none !important; } .auth-gate{ --auth-gate-bg:#222; --auth-gate-border:#444; --auth-gate-title:#fff; --auth-gate-text:#d4d4d4; --auth-gate-muted:#9fa3a9; --auth-gate-input:#3c3c3c; --auth-gate-input-border:#555; --auth-gate-input-focus:#7a7a7a; --auth-gate-link:#9fa3a9; --auth-gate-link-hover:#ffffff; --auth-gate-message:#FFBB46; position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:24px; background: radial-gradient(circle at top, rgba(0,122,204,.18), transparent 35%), linear-gradient(180deg, rgba(12,12,13,.96), rgba(22,22,24,.98)); } body.auth-pending .auth-gate, body.auth-locked .auth-gate{ display:flex; } body.auth-pending .auth-gate-form{ pointer-events:none; } body.auth-pending .auth-gate-field, body.auth-pending #authGateSubmit, body.auth-pending #authGateModeSwitch{ display:none; } .auth-gate-card{ width:min(100%, 420px); padding:28px; border:1px solid var(--auth-gate-border); border-radius:18px; background:var(--auth-gate-bg); box-shadow:var(--shadow); } .auth-gate-brand{ display:flex; align-items:center; gap:14px; margin-bottom:22px; } .auth-gate-logo{ width:42px; height:42px; flex:0 0 auto; } .auth-gate-title{ color:var(--auth-gate-title); font-size:20px; letter-spacing:.16em; } .auth-gate-subtitle{ color:var(--auth-gate-muted); font-size:12px; } .auth-gate-form{ display:flex; flex-direction:column; gap:14px; } .auth-gate-field{ display:flex; flex-direction:column; gap:6px; } .auth-gate-field span{ color:var(--auth-gate-muted); font-size:12px; } .auth-gate-field input{ width:100%; min-height:38px; padding:8px 10px; border:1px solid var(--auth-gate-input-border); border-radius:10px; background:var(--auth-gate-input); color:var(--auth-gate-text); font:inherit; } .auth-gate-field input:focus{ outline:none; border-color:var(--auth-gate-input-focus); } .auth-gate-form .primary{ min-height:40px; } .auth-gate-switch{ align-self:flex-start; padding:0; border:0; background:transparent; color:var(--auth-gate-link); cursor:pointer; font:inherit; font-size:12px; text-decoration:underline; text-underline-offset:2px; } .auth-gate-switch:hover{ color:var(--auth-gate-link-hover); } .auth-gate-message{ min-height:20px; color:var(--auth-gate-message); font-size:12px; } body.auth-pending .auth-gate-message{ margin-top:4px; } /* Default bars sizes (overridable) */ :root{ --titlebar-h: 36px; --statusbar-h: 22px } /* Title bar */ .titlebar{height:var(--titlebar-h, 36px); background:var(--panel); color:var(--text); display:flex; align-items:center; justify-content:space-between; padding:0 10px; border-bottom:1px solid var(--titlebar-border); gap:10px} .overlay-mode{ --titlebar-h: 30px } .titlebar .title{letter-spacing:.1em; display:inline-flex; align-items:center; gap:8px} .tb-leftbox{display:flex; align-items:self-end} .tb-user{display:flex; align-items:flex-end; margin-left:8px; padding-left:8px; border-left:1px solid var(--tb-user-border); color:var(--muted); font-size:12px; opacity:.8} .tb-user-name{max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .tb-center{flex:1; display:flex; align-items:center; justify-content:center} .overlay-mode .tb-center{ display:none } .tb-rightbox{display:flex; align-items:center; gap:8px} .tb-build-version{margin-right:8px; font-size:12px; color:var(--muted); opacity:.8; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .tb-install{ display:none; height:28px; padding:0 10px; border:1px solid var(--sidebar-border); background:var(--input); color:var(--text); border-radius:8px; cursor:pointer; align-items:center; justify-content:center; white-space:nowrap; font:inherit; font-size:12px; } .tb-install:hover{filter:brightness(1.05)} .tb-install:disabled{opacity:.5; cursor:default} .tb-btn{display:none; width:28px; height:28px; border:1px solid var(--tb-btn-border); background:var(--tb-btn-bg); color:var(--tb-btn-text); border-radius:6px; cursor:pointer; align-items:center; justify-content:center; line-height:1} .tb-btn:hover{filter:brightness(1.05)} .tb-icon{display:inline-flex; width:28px; height:28px; border:1px solid var(--sidebar-border); background:var(--input); color:var(--text); border-radius:6px; cursor:pointer; align-items:center; justify-content:center; line-height:1} .overlay-mode .tb-icon{ width:24px; height:24px } .tb-icon img{width:18px; height:18px; opacity:.9} .tb-icon:hover{filter:brightness(1.05)} .titlebar .title .logo{width:18px; height:18px; display:inline-block; opacity:.95} /* Search count next to search input */ .search-count{color:var(--muted); font-size:12px; margin-left:8px; min-width:90px; text-align:left; white-space:nowrap} /* App frame layout: fills the middle grid row between titlebar and statusbar */ .app-frame{ display:grid; grid-template-columns:var(--activity-w) var(--left-w) var(--gutter) 1fr var(--gutter) var(--right-w); grid-auto-rows:1fr; height:auto; min-height:0; padding-bottom: env(safe-area-inset-bottom, 0); } .app-frame.left-collapsed{ --left-w: 0px } .app-frame.left-collapsed .sidebar.left{ display:none } .app-frame.left-collapsed .r-left{ display:none } .app-frame.right-collapsed{ --right-w: 0px } .app-frame.right-collapsed .sidebar.right{ display:none } .app-frame.right-collapsed .r-right{ display:none } /* Activity bar */ .activity-bar{background:var(--activity); display:flex;flex-direction:column;gap:4px;align-items:center;padding:8px 6px;border-right:1px solid var(--sidebar-border); grid-column:1; min-height:0; overflow-y:auto; overflow-x:hidden} .overlay-mode{ --act-size: 44px; --act-icon: 22px } .activity-bar .act{position:relative;width:var(--act-size);height:var(--act-size);border:0;border-radius:12px;background:transparent;color:var(--activity-act-color);display:flex;align-items:center;justify-content:center} .activity-bar .act::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:2px; background:transparent} .activity-bar .act.active::before{background:var(--blue)} .activity-bar .act img{width:var(--act-icon);height:var(--act-icon);opacity:.9; transition:opacity .15s ease} .activity-bar .act:hover img{opacity:.9} .activity-bar .act.active img{opacity:1} .activity-bar .act.inactive img{opacity:.6} .activity-bar .act.disabled img{opacity:.1} .activity-bar .act:hover{background:var(--row-hover)} .activity-bar .act.active{background:transparent;color:var(--activity-act-active)} .activity-bar .spacer{flex:1} /* Light theme: invert monochrome icons to fit light background */ body[data-theme="light"] .activity-bar .act img, body[data-theme="light"] .titlebar .title .logo, body[data-theme="e-ink"] .activity-bar .act img, body[data-theme="e-ink"] .titlebar .title .logo{ filter: var(--activity-icon-filter); } body[data-theme="light"] .tb-icon img, body[data-theme="e-ink"] .tb-icon img{ filter: var(--toolbar-icon-filter); } body[data-theme="light"] .activity-bar .act.active, body[data-theme="e-ink"] .activity-bar .act.active{ color: var(--activity-act-active) } /* Sidebars */ .sidebar{background:var(--sidebar); border-right:1px solid var(--sidebar-border); display:flex; flex-direction:column; min-width:260px; min-height:0} .sidebar.left{grid-column:2} .sidebar.right{border-left:1px solid var(--sidebar-border); border-right:none} .sidebar.right{grid-column:6} .sidebar-header{padding:12px 14px; border-bottom:1px solid var(--sidebar-border); display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; background:var(--sidebar); z-index:5} .sidebar.left .sidebar-header{padding-bottom:0} .overlay-mode .sidebar-header{ padding:8px 10px } .overlay-mode .sidebar.left .sidebar-header{padding-bottom:0} .sidebar-header .project-name{font-weight:600; color:var(--text); letter-spacing:.04em} .sidebar-header .breadcrumbs{color:var(--muted-2)} .sidebar-header .header-actions{display:flex; align-items:center; gap:10px; margin-left:auto} .sidebar-header .muted{color:var(--muted); font-size:11px} .sidebar-footer{margin-top:auto; padding:10px; border-top:1px solid var(--sidebar-border); display:flex; gap:8px; background:var(--sidebar)} .sidebar-footer.row{justify-content:space-between} .sidebar-footer[hidden]{display:none !important} /* Panels and inputs */ .panel{border-bottom:1px solid var(--sidebar-border); padding:10px 10px} .panel-title{font-size:14px; color:var(--text); margin:4px 0 10px; display:flex; align-items:center; gap:8px} .info-island { padding: 2px; background: rgba(var(--panel), 0.5); border-radius: 6px; box-sizing: border-box; pointer-events: auto; position: relative; z-index: 500; } #scaleInfo{ position:absolute; right:12px; bottom:12px; min-width: 250px; width: fit-content; /* max-width:25%; */ display:flex; flex-direction:column; gap:2px; padding:4px 6px; border-radius:4px; background:color-mix(in srgb, var(--editor) 30%, transparent); /* backdrop-filter:blur(5px); */ z-index:500; pointer-events:none; } #scaleMain{ display:flex; align-items:center; gap:4px; } #scaleBar{ height:4px; min-width:40px; background:var(--text); border-radius:9999px; box-shadow:0 0 0 1px rgba(15,23,42,0.7); } #rulerIsland{ display:none; flex-direction:column; gap:2px; align-items:flex-start; } .overlay-mode .panel-title{ font-size:12px } details.panel>summary{list-style:none; cursor:pointer} details.panel>summary::-webkit-details-marker{display:none} details.panel[open]>summary .chev{transform:rotate(90deg)} .chev{width:14px; height:14px; display:inline-block; transition:transform .15s ease; opacity:.9; background:currentColor; -webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,') center/contain no-repeat} .inputs{display:grid; gap:8px} .inputs.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} .inputs.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .inputs.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} .left-tab[data-tab="tools"] .inputs.grid-2{grid-template-columns:minmax(0,1fr)} .inputs.coord-grid.grid-4{grid-template-columns:1.6fr 1.6fr 1.2fr 1.6fr} .inputs.compact{gap:6px} .input{display:flex; flex-direction:column; gap:6px; position:relative} .input.checkbox-inline{flex-direction:row; align-items:center; gap:6px; grid-column:1 / -1} .input>label{font-size:11px;color:var(--muted); display:block; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} .input.inline-toggle{flex-direction:row; align-items:center; gap:8px} .input.inline-toggle>label{flex:1 1 auto; margin-right:8px} .input.inline-toggle>.switch{flex:0 0 auto; margin-left:auto} .input.inline-toggle{flex-direction:row; align-items:center; justify-content:space-between} .input.inline-toggle>label{flex:1; margin-right:8px} .input.inline-toggle>.switch{margin-left:8px} /* In-field prefix marker (e.g., X/Y/Z inside inputs) */ /* In-field prefix anchored to a dedicated .field wrapper so label height doesn't affect centering */ .input.infield .field{position:relative} .input.infield .field::before{content:attr(data-prefix); position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; opacity:.9; line-height:1} .input.infield .field input{padding-left:28px} .input.infield .field:focus-within::before{opacity:0} /* Computed (read-only) inputs styled like chips */ .input.computed .field input[readonly]{ background: var(--panel); border: 1px solid var(--panel-border); color: #cfe8ff; cursor: default; } .input.computed .field input[readonly]:focus{ border-color: var(--panel-border); box-shadow: none; } /* Keep X/Y/Z prefix visible for read-only fields */ .input.computed .field:focus-within::before{ opacity: .9 } /* Apply ellipsis to any inline labels used as input descriptions (e.g., schematic controls) */ .schematic-controls label{max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} input, select, textarea{background:var(--input); color:var(--text); border:1px solid var(--input-border); border-radius:4px; padding:8px 8px; outline:none; width:100%; min-width:0; font-family:'JetBrains Mono','JetBrainsMono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace} input[type="checkbox"], input[type="radio"]{width:auto; height:auto; padding:0} .overlay-mode input, .overlay-mode select, .overlay-mode textarea{ padding:6px 8px; font-size:12px } button, .filepicker .file-btn{ font-family:'JetBrains Mono','JetBrainsMono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace } input::placeholder, textarea::placeholder{ font-family:'JetBrains Mono','JetBrainsMono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace } input:focus, select:focus, textarea:focus{border-color:var(--input-focus); box-shadow:0 0 0 1px var(--input-focus) inset} textarea{resize:vertical} /* Target character selector */ .character-select{position:relative; display:flex; align-items:center} .character-select input{padding-left:40px; padding-right:34px} .character-selected-icon{position:absolute; left:10px; top:50%; transform:translateY(-50%); width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; pointer-events:none; z-index:1} .character-selected-icon img{display:block; width:20px; height:20px; object-fit:contain} .character-clear{position:absolute; right:8px; top:50%; transform:translateY(-50%); background:transparent; border:0; color:var(--muted); font-size:18px; line-height:1; cursor:pointer; padding:2px 4px} .character-clear:hover{color:var(--text)} .character-dropdown{position:absolute; left:0; right:0; top:calc(100% + 6px); background:var(--panel); border:1px solid var(--input-border); border-radius:6px; max-height:260px; overflow:auto; z-index:3; box-shadow:0 10px 30px rgba(0,0,0,0.25)} .character-item, .character-group{padding:6px 10px; font-size:13px} .character-item{cursor:pointer} .character-item:hover{background:rgba(255,255,255,0.06)} .character-group{color:var(--muted); text-transform:uppercase; letter-spacing:0.04em} .character-item-content{display:flex; align-items:center; gap:8px; min-width:0} .character-item-icon{width:18px; height:18px; flex:0 0 18px; object-fit:contain} .character-item-label{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .character-depth-0{padding-left:10px} .character-depth-1{padding-left:22px} .character-depth-2{padding-left:34px} .character-depth-3{padding-left:46px} .character-depth-4{padding-left:58px} .character-depth-5{padding-left:70px} .character-depth-6{padding-left:82px} /* Units overlay */ .input[data-unit] input{padding-right:8px} .input[data-unit]::after{display:none} /* Formatting hint for xx-xx fields */ .input[data-format="xx-xx"] input{font-variant-numeric: tabular-nums; letter-spacing:.02em} /* Switch */ .switch{position:relative; display:inline-block; width:38px; height:20px} .switch input{opacity:0; width:0; height:0} .switch span{position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:var(--switch-track); transition:.2s; border-radius:999px} .switch span:before{content:""; position:absolute; height:16px;width:16px;left:2px;top:2px;background:var(--switch-thumb);border-radius:50%; transition:.2s} .switch input:checked + span{background:var(--blue)} .switch input:checked + span:before{transform:translateX(18px)} /* Buttons */ button{font:inherit} .ghost{background:transparent; color:var(--text); border:1px solid var(--sidebar-border); padding:8px 10px; border-radius:6px} .ghost:hover{background:var(--ghost-hover)} .primary{background:var(--blue); color:#fff; border:1px solid var(--primary-border); padding:8px 14px; border-radius:6px} .primary:hover{filter:brightness(1.08)} .secondary{background:var(--blue-secondary, var(--blue)); color:#fff; border:1px solid var(--blue-secondary-border, var(--primary-border)); padding:8px 14px; border-radius:6px;} .secondary:hover{filter:brightness(1.08)} button:disabled{ opacity:.45; cursor:default; } .ghost:disabled, .primary:disabled, .secondary:disabled{ filter:none; } .ghost:hover:disabled, .primary:hover:disabled, .secondary:hover:disabled{ background:inherit; } /* Console users list (Журнал → Терминал управления) */ .console-users-list{ display:flex; flex-direction:column; gap:4px; max-height:220px; overflow-y:auto; } .console-user-row{ display:flex; align-items:center; justify-content:space-between; padding:4px 4px; border-radius:4px; cursor:default; } .console-user-row:hover{ background:var(--row-hover); } .console-user-main{ display:flex; align-items:center; gap:6px; min-width:0; } .console-user-name{ flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .console-user-role{ margin-left:8px; white-space:nowrap; } .user-status-dot{ width:8px; height:8px; border-radius:50%; background:#555; margin-right:6px; flex:0 0 auto; } .user-status-dot.online{ background:var(--green); } body.theme-eink .user-status-dot, body[data-theme="e-ink"] .user-status-dot{ background:#ffffff; border:1px solid #000000; } body.theme-eink .user-status-dot.online, body[data-theme="e-ink"] .user-status-dot.online{ background:#000000; border-color:#000000; } .settings-session-list{ display:flex; flex-direction:column; gap:2px; } .settings-session-line{ display:flex; align-items:center; gap:6px; min-width:0; padding:1px 0; } .settings-session-line.is-current{ background:color-mix(in srgb, var(--blue) 12%, transparent); } .settings-session-text{ flex:1 1 auto; font-size:11px; color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .settings-session-badge{ flex:0 0 auto; font-size:10px; line-height:1; padding:3px 6px; border-radius:999px; border:1px solid color-mix(in srgb, var(--blue) 55%, transparent); background:color-mix(in srgb, var(--blue) 18%, transparent); color:var(--text); } /* Editor */ .editor{background:var(--editor); display:flex; flex-direction:column; grid-column:4; min-width:0; min-height:0; overflow:hidden} .editor-header{/*min-height:42px; */height:auto; border-bottom:1px solid var(--panel-border); display:flex; align-items:center; gap:12px; padding:8px 14px; overflow:visible; flex-wrap:wrap} /* Hide header scrollbar but keep scrolling */ /* header no longer scrolls; scrollbar hiding moved to .editor-controls */ .overlay-mode .editor-header{ min-height:36px; height:auto } .editor-title{font-weight:600; color:var(--text); letter-spacing:.04em} .view-tabs{display:flex; gap:8px; margin-left:20px; align-items:center; flex:0 1 auto; flex-wrap:nowrap; order:1} .view-tab{background:transparent; border:0; color:var(--muted); padding:6px 10px; border-bottom:2px solid transparent; cursor:pointer; height:28px; line-height:28px; display:inline-flex; align-items:center; justify-content:center} .overlay-mode .view-tab{ height:24px; line-height:24px; padding:4px 8px } .view-tab.active{color:var(--text); border-color:var(--blue)} .editor-search{flex:1; display:flex; justify-content:center} .search-input{width:100%; max-width:380px; background:var(--input); border:1px solid var(--input-border); color:var(--text); padding:4px 10px; border-radius:6px; outline:none} .search-input:focus{border-color:#5a5a5a} .editor-controls{ display:flex; gap:10px; color:var(--text); margin-left:0; align-items:flex-start; flex:0 0 auto; flex-wrap:wrap; white-space:normal; order:2; overflow-x:hidden; overflow-y:auto; max-height:180px; -webkit-overflow-scrolling:touch; touch-action: pan-y; } .editor-controls > *{ flex: 0 0 auto } .editor-controls{ -ms-overflow-style:auto; scrollbar-width:auto } .editor-controls::-webkit-scrollbar{ width:8px; height:8px } .editor-controls::-webkit-scrollbar-thumb{ background:var(--muted-2); border-radius:8px } .editor-controls::-webkit-scrollbar-track{ background:transparent } .schematic-controls{ display:flex; gap:4px; align-items:flex-start; flex-wrap:wrap; min-width:0; max-width:100%; overflow-x:hidden; overflow-y:auto; row-gap:8px; } .schematic-controls label{display:flex; gap:4px; align-items:center; color:var(--muted); margin:0} .schematic-controls label > img{ width:28px; height:28px; padding:4px 6px; border-radius:6px; border:1px solid transparent; background:transparent; color:var(--muted); flex:0 0 auto; } .schematic-controls select{ height:28px; font-size:11px; background:var(--input); border:1px solid var(--input-border); color:var(--text); padding:2px 6px; } .overlay-mode .schematic-controls select{ height:24px } .schematic-controls input[type="range"]{height:22px; margin:0} #opacitySlider{width:96px} /* Themed range slider */ input[type="range"]{ -webkit-appearance:none; appearance:none; background:transparent } /* Inline inputs row (e.g., координаты позиции) */ .coord-row > input{ flex:1 1 auto; min-width:0; } .coord-row > select{ flex:0 0 auto; width:90px; } .statusbar select{ height:var(--statusbar-h, 22px); padding:0 8px; font-size:12px; } /* Inline input + unit selector (e.g., давление) */ .unit-selectors{ display:flex; align-items:center; gap:6px; } .unit-selectors input{ flex:1 1 auto; min-width:0; } .unit-selectors select{ flex:0 0 auto; width:90px; } input[type="range"]:focus{ outline:none } input[type="range"]::-webkit-slider-runnable-track{ height:4px; background:var(--input-border); border-radius:999px } input[type="range"]::-moz-range-track{ height:4px; background:var(--input-border); border-radius:999px } input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--blue); border-radius:50%; border:2px solid #fff; margin-top:-5px } input[type="range"]::-moz-range-thumb{ width:14px; height:14px; background:var(--blue); border-radius:50%; border:2px solid #fff } body.theme-light input[type="range"]::-webkit-slider-thumb, body.theme-eink input[type="range"]::-webkit-slider-thumb{ border-color:#fff } body.theme-light input[type="range"]::-moz-range-thumb, body.theme-eink input[type="range"]::-moz-range-thumb{ border-color:#fff } /* Style map select like the "Колонки" button */ .columns-like{appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer; background:transparent; border:1px solid transparent; color:var(--muted); opacity:.9; padding:6px 28px 6px 10px; border-radius:6px; line-height:1} .columns-like:hover,.columns-like:focus{background:var(--input); border-color:var(--input-border); color:var(--text); opacity:1; outline:none} .columns-like{background-image: url('data:image/svg+xml;utf8,'); background-repeat:no-repeat; background-position:right 8px center} body.theme-light .columns-like, body.theme-eink .columns-like{background-image: url('data:image/svg+xml;utf8,')} .columns-like{height:28px} .dropdown{background:var(--input); border:1px solid var(--input-border); padding:6px 8px; border-radius:6px; color:var(--text)} /* Make the columns button subtle by default */ .columns-btn{background:transparent; border:1px solid transparent; color:var(--muted); opacity:.9; height:28px; line-height:1} .columns-btn:hover{background:var(--input); border-color:var(--input-border); color:var(--text); opacity:1} /* Columns checklist align left inside */ .columns-menu label{cursor:pointer; width:100%} .columns-menu input{accent-color: var(--blue)} /* Search highlight */ .hl{background:var(--hl-bg); color:var(--hl-text); border-radius:3px; padding:0; line-height:inherit; font-weight:inherit; letter-spacing:inherit} .table-wrap{overflow:hidden; flex:1 1 auto; min-height:0; height:auto; position:relative; display:flex; flex-direction:column} .table-wrap{--table-sticky-offset:0px} .table-wrap[hidden]{display:none !important} .table-sticky-group{ position:relative; z-index:6; display:flex; align-items:center; min-height:32px; padding:2px 10px; background:var(--editor); border-bottom:1px solid var(--panel-border); } .table-sticky-group .columns-btn{ position:relative; left:auto; z-index:auto; display:block; width:max-content; margin:0; padding-top:0; background:transparent; box-shadow:none; } .table-scroll{ flex:1 1 auto; min-height:0; overflow:auto; } /* Schematic / map canvas containers share layout */ .schematic-wrap{position:relative; flex:1 1 auto; min-height:0; height:auto; display:flex; flex-direction:column} #schematicView[hidden], #mapView[hidden]{display:none !important} .schematic-wrap{position:relative; flex:1 1 auto; min-height:0; height:auto; display:flex; flex-direction:column} #schematicView[hidden], #mapView[hidden]{display:none !important} #schematicCanvas, #mapLeaflet, #schematicView #map{width:100%; height:100%; flex:1 1 auto; min-height:0; display:block; background:var(--editor); touch-action:none; overscroll-behavior:contain} #schematicView .schematic-controls{order:0} #schematicView #map{order:1} #mapToolsBar{display:none} .schematic-controls .map-tool-button{ display:inline-flex; align-items:center; justify-content:center; padding:4px 6px; border-radius:6px; border:1px solid transparent; background:transparent; color:var(--muted); } .schematic-controls .map-tool-button.active{ border-color:var(--blue); color:var(--blue); background:var(--map-tool-active-bg); } .schematic-controls .map-tool-button.disabled{ opacity:0.4; cursor:default; } .schematic-controls .map-tool-button img{ width:18px; height:18px; } .leaflet-container.selector-active{ cursor:crosshair; } .map-selection-rect{ position:absolute; z-index:500; pointer-events:none; border:1px dashed var(--blue); background:rgba(0,122,204,0.14); } .map-selection-handle{ position:absolute; z-index:501; width:8px; height:8px; margin-left:-4px; margin-top:-4px; pointer-events:none; border:1px solid var(--blue); background:rgba(0,122,204,0.5); } body.theme-eink .map-selection-handle, body[data-theme="e-ink"] .map-selection-handle{ border-color:#000000; background:#ffffff; } body.theme-light .map-selection-handle, body[data-theme="light"] .map-selection-handle{ border-color:#000000; background:#000000; } .map-drawing-panel{ position:absolute; top:12px; right:12px; z-index:700; display:flex; flex-wrap:nowrap; align-items:center; gap:6px; max-width:calc(100% - 24px); padding:8px; background:rgba(20, 20, 20, 0.9); border:1px solid var(--panel-border); border-radius:8px; box-shadow:var(--shadow); overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; backdrop-filter:blur(8px); } .map-drawing-panel::-webkit-scrollbar{ display:none; } .map-drawing-panel-actions{ display:flex; align-items:center; gap:6px; margin-left:4px; padding-left:8px; border-left:1px solid var(--input-border); flex:0 0 auto; } .map-draw-mode-button, .map-draw-action-button{ height:28px; padding:0 10px; border-radius:6px; border:1px solid var(--input-border); background:var(--panel); color:var(--text); cursor:pointer; font:inherit; white-space:nowrap; } .map-draw-mode-button{ display:inline-flex; align-items:center; justify-content:center; width:32px; min-width:32px; padding:0; } .map-draw-action-button{ display:inline-flex; align-items:center; justify-content:center; width:32px; min-width:32px; padding:0; } @media (max-width: 900px){ .map-drawing-panel{ left:12px; right:12px; max-width:none; padding:6px; gap:4px; } .map-drawing-panel-actions{ margin-left:2px; padding-left:6px; gap:4px; } } .map-draw-action-button:disabled{ opacity:.4; cursor:default; } .map-draw-action-button:disabled img{ opacity:.65; } .map-draw-mode-button img, .map-draw-action-button img, .map-draw-glyph{ width:16px; height:16px; display:block; } .map-draw-glyph.text{ width:auto; height:auto; font-size:13px; line-height:1; font-weight:700; } .map-draw-mode-button img, .map-draw-action-button img{ object-fit:contain; } .map-draw-glyph.polygon{ background:currentColor; -webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; } .map-drawing-color-field{ position:relative; display:flex; align-items:center; gap:0; padding:0; color:var(--text); white-space:nowrap; } .map-drawing-color-field > span{ display:none; } .map-drawing-color-field span{ font-size:12px; color:var(--muted); } .map-drawing-color-trigger{ display:inline-flex; align-items:center; justify-content:center; height:28px; width:28px; min-width:28px; padding:0; border-radius:6px; border:2px solid var(--input-border); background:var(--panel); color:var(--text); cursor:pointer; } .map-drawing-color-trigger#drawingStrokeTrigger{ border-color:var(--trigger-border-color, var(--input-border)); background-color:var(--trigger-color, var(--panel)); background-image:none; } .map-drawing-color-trigger#drawingFillTrigger{ border-color:var(--input-border); background-color:var(--trigger-color, var(--panel)); background-image:none; } .map-drawing-color-swatch{ display:none; } .map-drawing-color-swatch::after{ content:""; position:absolute; inset:0; background:var(--swatch-color, var(--panel)); } .map-drawing-alpha-value{ min-width:34px; text-align:right; color:var(--text) !important; } .map-drawing-color-popover{ position:absolute; top:0; left:0; z-index:710; display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:8px; border:1px solid var(--input-border); border-radius:8px; background:var(--panel); box-shadow:var(--shadow); } .map-drawing-color-popover-row{ display:flex; align-items:center; gap:8px; } .map-drawing-color-popover-label{ min-width:52px; font-size:12px; color:var(--muted); } .map-drawing-color-popover input[type="color"]{ width:28px; height:28px; padding:0; border:1px solid var(--input-border); border-radius:6px; background:var(--panel); cursor:pointer; } .map-drawing-color-popover input[type="color"]::-webkit-color-swatch-wrapper{ padding:2px; } .map-drawing-color-popover input[type="color"]::-webkit-color-swatch{ border:none; border-radius:4px; } .map-drawing-color-popover input[type="range"]{ width:72px; } .map-draw-mode-button.active{ border-color:var(--blue); color:var(--blue); background:var(--map-tool-active-bg); } .map-drawing-panel-actions{ display:flex; gap:6px; margin-left:auto; } .leaflet-container.drawing-active{ cursor:crosshair; } .map-drawing-text-label{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--text-line-clamp, 1); padding:4px 6px; box-sizing:border-box; overflow:hidden; white-space:pre-wrap; word-break:break-word; font:400 14px/1.2 'JetBrains Mono','JetBrainsMono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace; color:var(--text); background:transparent; border:none; pointer-events:none; user-select:none; text-shadow:0 1px 1px rgba(0,0,0,0.35); text-overflow:ellipsis; } .map-drawing-text-input{ position:absolute; z-index:700; padding:0; margin:0; border:none; background:transparent; pointer-events:none; } .map-drawing-text-input textarea{ width:100%; height:100%; min-width:100%; max-width:100%; min-height:100%; max-height:100%; resize:none; padding:4px 6px; border:1px dashed var(--blue); border-radius:4px; background:rgba(0,0,0,0.08); color:var(--text); box-sizing:border-box; pointer-events:auto; overflow:hidden; white-space:pre-wrap; word-break:break-word; font:400 14px/1.2 'JetBrains Mono','JetBrainsMono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace; } body.theme-eink .map-drawing-panel, body[data-theme="e-ink"] .map-drawing-panel{ background:#ffffff; border-color:#000000; backdrop-filter:none; } body.theme-eink .map-draw-mode-button.active, body[data-theme="e-ink"] .map-draw-mode-button.active{ background:#000000; color:#ffffff; border-color:#000000; } body.theme-light .map-draw-mode-button img, body.theme-eink .map-draw-mode-button img, body[data-theme="light"] .map-draw-mode-button img, body[data-theme="e-ink"] .map-draw-mode-button img{ filter:var(--toolbar-icon-filter); } body.theme-light .map-drawing-panel, body[data-theme="light"] .map-drawing-panel{ background:rgba(255, 255, 255, 0.96); } body.theme-light .schematic-controls .map-tool-button img, body.theme-eink .schematic-controls .map-tool-button img{ filter:var(--toolbar-icon-filter); } body.theme-light .schematic-controls label > img, body.theme-eink .schematic-controls label > img{ filter:var(--toolbar-icon-filter); } body:not(.theme-light):not(.theme-eink) .schematic-controls .map-tool-button img{ filter:none; } body:not(.theme-light):not(.theme-eink) .schematic-controls label > img{ filter:none; } .schematic-controls .map-tool-button.disabled img{ opacity:0.5; } .spotter-marker .spotter-dot, .landmark-marker .landmark-dot{ width:8px; height:8px; border-radius:50%; } .spotter-marker .spotter-dot{ background:var(--spotter-dot); } .landmark-marker .landmark-dot{ background:var(--landmark-dot); } .gun-marker .gun-dot{ width:8px; height:8px; border-radius:50%; background:var(--gun-dot); } .gun-marker .target-marker-inner{ display:inline-flex; width:auto; height:auto; align-items:center; gap:4px; } .gun-marker .target-label{ color:var(--gun-label); position:static; transform:none; margin-left:calc((var(--target-icon-scale,1) - 1) * 10px); white-space:nowrap; } .spotter-marker .target-label, .landmark-marker .target-label{ white-space:nowrap; } .target-marker{display:inline-flex; align-items:center; justify-content:flex-start} .target-marker.box-selected{ filter:drop-shadow(0 0 6px rgba(14,99,156,0.95)); } .target-marker.box-selected .target-label{ background:rgba(14,99,156,0.18); border-radius:2px; padding:2px; } .target-marker.box-selected .target-label-content{ background:rgba(14,99,156,0.18); } body.theme-eink .target-marker.box-selected, body[data-theme="e-ink"] .target-marker.box-selected{ filter:none; } body.theme-light .target-marker.box-selected, body[data-theme="light"] .target-marker.box-selected{ filter:none; } body.theme-light .target-marker.box-selected .target-label, body[data-theme="light"] .target-marker.box-selected .target-label, body.theme-light .target-marker.box-selected .target-label-content, body[data-theme="light"] .target-marker.box-selected .target-label-content{ background:#000000; color:#ffffff; border:1px solid #000000; border-radius:2px; } body.theme-eink .target-marker.box-selected .target-label, body[data-theme="e-ink"] .target-marker.box-selected .target-label, body.theme-eink .target-marker.box-selected .target-label-content, body[data-theme="e-ink"] .target-marker.box-selected .target-label-content{ background:#ffffff; color:#000000; border:1px solid #000000; border-radius:2px; } .target-marker-inner{position:relative; display:inline-flex; align-items:center; gap:4px; overflow:visible} .target-icon-wrapper{position:relative; width:24px; height:24px; display:flex; align-items:center; justify-content:center} .target-base-icon{width:20px; height:20px; transform:scale(var(--target-icon-scale,1)); transform-origin:center} .target-focus-icon{position:absolute; width:30px; height:30px; left:50%; top:50%; transform:translate(-50%,-50%) scale(var(--target-icon-scale,1)); transform-origin:center; pointer-events:none} .target-marker-inner{position:relative; display:block; width:24px; height:24px; overflow:visible} .target-label{ position:absolute; left:calc(100% + 6px); top:50%; transform:translateY(-0.58em); margin-left:0; line-height:1.15; font-family:'JetBrains Mono','JetBrainsMono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace; font-variant-numeric:tabular-nums; } .target-marker-focused .target-marker-inner{display:block; width:24px; height:24px} .target-label-content{ display:flex; flex-direction:column; gap:3px; padding:2px; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; } .target-marker-focused .target-label-content{ background:var(--target-focus-bg); } .target-label-main{white-space:nowrap; text-align:left; min-height:18px; display:flex; align-items:center} .target-fire-params{white-space:nowrap; text-align:left; line-height:1.15} .target-table-icon{width:18px; height:18px; display:block} /* Activity log */ .activity-log{background:var(--panel); border:1px solid var(--panel-border); border-radius:6px; padding:8px; max-height:320px; overflow:auto; white-space:pre-wrap; font-variant-numeric: tabular-nums} .activity-log .log-date{color:var(--muted); text-align:center; margin:6px 0} .activity-log .log-date::before,.activity-log .log-date::after{content:""; display:inline-block; height:1px; background:var(--sidebar-border); width:24px; margin:0 8px; vertical-align:middle} .activity-log .log-line{color:var(--text)} .activity-log .time{color:var(--muted); margin-right:6px} /* Scale + coordinates indicator (bottom-right) */ .scale-hud{position:absolute; right:8px; bottom:8px; background:var(--scale-hud-bg); color:var(--scale-hud-fg); padding:4px 8px; border-radius:6px; font-size:12px; display:flex; align-items:center; gap:8px; pointer-events:none} .scale-hud .bar{height:6px; background:var(--scale-hud-bar); border-radius:3px; min-width:40px; position:relative} .scale-hud .bar::before,.scale-hud .bar::after{content:""; position:absolute; top:0; bottom:0; width:2px; background:var(--scale-hud-mark); opacity:.5} .scale-hud .bar::before{left:0} .scale-hud .bar::after{right:0} /* Make table horizontally scrollable when columns overflow */ table.grid{width:max-content; min-width:100%; border-collapse:separate; border-spacing:0} /* Sticky first column (ID) */ .grid td:first-child{ position:sticky; left:0; z-index:2; background:var(--panel); box-shadow: 2px 0 0 0 var(--panel-border); } .grid th:first-child{ position:sticky; top:var(--table-sticky-offset); left:0; z-index:7; background:var(--panel); box-shadow: 2px 0 0 0 var(--panel-border); } table.grid thead th{position:sticky; top:var(--table-sticky-offset); z-index:4; background:var(--panel); background-clip:padding-box; font-weight:500; color:var(--text); text-align:left; padding:10px 10px; border-bottom:1px solid var(--panel-border); white-space:nowrap} table.grid tbody td{padding:10px 10px; border-bottom:1px solid var(--panel-border); color:var(--text); white-space:nowrap} table.grid tbody tr:hover{background:var(--row-hover)} table.grid tbody tr.selected{background:var(--row-select)} table.grid tbody tr:hover td:first-child{background:var(--row-hover)} table.grid tbody tr.selected td:first-child{background:var(--row-select)} table.grid tbody tr.selected td{color:var(--table-selected-text)} table.grid thead th.sortable:hover{background:var(--row-hover)} /* Destroyed target row: make semi-transparent */ table.grid tbody tr.status-destroyed{ opacity: .5 } /* Key-value list in right panel */ .kv{display:grid; grid-template-columns:1fr 1fr; gap:0 14px} .kv.kv-list{grid-template-columns:1fr} .kv > div{display:flex; align-items:center; justify-content:space-between; background:var(--panel); border:1px solid var(--panel-border); border-radius:6px; padding:8px 10px} .kv em{color:var(--muted); font-style:normal} .kv span{color:#cfe8ff} /* Topo stages timeline */ .stages{display:grid; gap:16px; position:relative; padding-left:0} .stages::before{display:none} .stage{position:relative} .stage::before{display:none; content:none} .stage:last-child::before{display:none; content:none} /* ASCII connectors for topo stages */ .topo-stages{padding-left:0} .topo-stages .stage{padding:6px 0} .topo-stages .stage:not(:last-child){margin-bottom:6px} .topo-stages .stage-title{margin-left:0} .topo-stages .stage:not(:last-child) .kv > div{position:relative} .topo-stages .stage:not(:last-child) .kv > div::before{display:none; content:none} .stage-title{color:#c6c6c6; font-size:12px; margin:0 0 6px; padding-left:10px} /* Corrections table */ .corr-table{display:grid; gap:6px; padding:0 10px} .corr-table .row{display:grid; grid-template-columns:100px 100px 100px 1fr; align-items:center; background:var(--panel); border:1px solid var(--panel-border); border-radius:6px; padding:8px 10px; color:var(--text)} .corr-table .row.head{background:transparent; border:0; color:#8a8f96} .corr-table .row.stamp{background:transparent; border:0; color:#8a8f96; grid-template-columns:1fr} /* Right readouts */ .readouts{display:flex; flex-direction:column; gap:10px; padding:12px 10px; border-bottom:1px solid var(--sidebar-border)} .readouts-primary{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px} .readouts-primary.is-two-cols, .readouts-primary.is-three-cols{gap:2px} .readouts-primary.is-two-cols{grid-template-columns:repeat(2,minmax(0,1fr))} .readouts-primary.is-three-cols{grid-template-columns:repeat(3,minmax(0,1fr))} .readouts-extra{display:flex; flex-direction:column; gap:6px} .readouts-extra-toggle{ width:100%; height:18px; display:flex; align-items:center; justify-content:center; padding:0; background:transparent; border:none; border-radius:0; color:var(--muted); cursor:pointer; gap:10px; margin-top:6px; } .readouts-extra-toggle:hover{color:var(--text)} .readouts-extra-toggle-line{ display:none; } .readouts-extra-toggle-icon{ width:12px; height:12px; background:center / contain no-repeat url("/icons/Chevron_up.svg"); transform:rotate(180deg); transition:transform .16s ease; flex:0 0 auto; opacity:.9; } .readouts-extra:not(.is-collapsed) .readouts-extra-toggle-icon{ transform:rotate(0deg); } .readouts-extra-body[hidden]{display:none !important} .readouts-secondary{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 14px} .readouts-secondary .readout{min-width:0} .readouts-secondary .readout .label, .readouts-secondary .readout .value{white-space:nowrap} /* Remove visual gap between right header and readouts */ .sidebar.right .sidebar-header{border-bottom:0} .sidebar.right .readouts{padding-top:0; margin-top:0; border-top:0} .readout{background:transparent; border:none; border-radius:0; padding:4px 2px} .readout .label{color:var(--muted); font-size:10px; margin-bottom:2px} .readout .value{font-size:15px; line-height:1.2; color:var(--text); font-variant-numeric:tabular-nums} .overlay-mode .readout .value{ font-size:14px } /* Keep Anglemeter, Elevation and Sight Level large as before */ #roAnglemeterVal, #roElevationVal, #roSightLevelVal{ font-size:24px; line-height:1; white-space:nowrap; } .overlay-mode #roAnglemeterVal, .overlay-mode #roElevationVal, .overlay-mode #roSightLevelVal{ font-size:18px; white-space:nowrap; } /* Restore legacy card style for Anglemeter, Elevation and Sight Level */ .readouts .readout:has(#roAnglemeterVal), .readouts .readout:has(#roElevationVal), .readouts .readout:has(#roSightLevelVal){ background: var(--panel); border: 1px solid var(--panel-border); border-radius: 8px; padding: 12px 14px; } .readouts .readout:has(#roAnglemeterVal) .label, .readouts .readout:has(#roElevationVal) .label, .readouts .readout:has(#roSightLevelVal) .label{ font-size: 11px; margin-bottom: 6px; } .readouts .readout:has(#roAnglemeterVal) .value, .readouts .readout:has(#roElevationVal) .value, .readouts .readout:has(#roSightLevelVal) .value{ font-size: 24px; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } .overlay-mode .readouts .readout:has(#roAnglemeterVal) .value, .overlay-mode .readouts .readout:has(#roElevationVal) .value, .overlay-mode .readouts .readout:has(#roSightLevelVal) .value{ font-size: 18px; white-space: nowrap; } /* Render Charge/Shell/Trajectory as a compact vertical list */ .readouts .readout:has(#roChargeVal), .readouts .readout:has(#roShellVal), .readouts .readout:has(#roTrajectoryVal), .readouts .readout:has(#roFuseVal){ background: transparent; border: none; border-radius: 0; padding: 2px 0; grid-column: auto; display: flex; align-items: baseline; gap: 8px; } .readouts .readout:has(#roWeaponVal){ background: transparent; border: none; border-radius: 0; padding: 2px 0; grid-column: auto; display: flex; align-items: baseline; gap: 8px; } .readouts .readout:has(#roToFVal){ background: transparent; border: none; border-radius: 0; padding: 2px 0; grid-column: auto; display: flex; align-items: baseline; gap: 8px; } /* Align labels to a common width for compact horizontal pairs */ .readouts .readout:has(#roChargeVal) .label, .readouts .readout:has(#roShellVal) .label, .readouts .readout:has(#roTrajectoryVal) .label, .readouts .readout:has(#roFuseVal) .label, .readouts .readout:has(#roWeaponVal) .label, .readouts .readout:has(#roToFVal) .label, .readouts .readout:has(#roDistanceVal) .label, .readouts .readout:has(#roAzimuthVal) .label, .readouts .readout:has(#roAngleSiteVal) .label, .readouts .readout:has(#roHeightDiffVal) .label{ margin-bottom: 0; /* no vertical offset in flex row */ min-width: var(--readout-label-w, 110px); /* align value columns */ } .readouts .readout:has(#roDistanceVal), .readouts .readout:has(#roAzimuthVal), .readouts .readout:has(#roAngleSiteVal), .readouts .readout:has(#roHeightDiffVal){ background: transparent; border: none; border-radius: 0; padding: 2px 0; grid-column: auto; display: flex; align-items: baseline; gap: 8px; } .readouts .readout:has(#roChargeVal) .label, .readouts .readout:has(#roShellVal) .label, .readouts .readout:has(#roTrajectoryVal) .label, .readouts .readout:has(#roFuseVal) .label{ color: var(--muted); font-size: 10px; margin: 0; min-width: 58px; /* align labels, slightly narrower */ } .readouts .readout:has(#roDistanceVal) .label, .readouts .readout:has(#roAzimuthVal) .label, .readouts .readout:has(#roAngleSiteVal) .label, .readouts .readout:has(#roHeightDiffVal) .label{ color: var(--muted); font-size: 10px; margin: 0; min-width: 58px; } .readouts .readout:has(#roChargeVal) .value, .readouts .readout:has(#roShellVal) .value, .readouts .readout:has(#roTrajectoryVal) .value, .readouts .readout:has(#roFuseVal) .value{ font-size: 13px; line-height: 1.2; } .readouts .readout:has(#roDistanceVal) .value, .readouts .readout:has(#roAzimuthVal) .value, .readouts .readout:has(#roAngleSiteVal) .value, .readouts .readout:has(#roHeightDiffVal) .value{ font-size: 13px; line-height: 1.2; } .readouts .readout:has(#roWeaponVal) .value{ font-size: 13px; line-height: 1.2; } .readouts .readout:has(#roToFVal) .value{ font-size: 13px; line-height: 1.2; } .overlay-mode .readouts .readout:has(#roChargeVal) .value, .overlay-mode .readouts .readout:has(#roShellVal) .value, .overlay-mode .readouts .readout:has(#roTrajectoryVal) .value{ font-size: 12px; } .overlay-mode .readouts .readout:has(#roDistanceVal) .value, .overlay-mode .readouts .readout:has(#roAzimuthVal) .value, .overlay-mode .readouts .readout:has(#roAngleSiteVal) .value{ font-size: 12px; } .overlay-mode .readouts .readout:has(#roWeaponVal) .value{ font-size: 12px; } .overlay-mode .readouts .readout:has(#roToFVal) .value{ font-size: 12px; } /* Force Weapon to exactly match other horizontal readouts */ .readouts .readout:has(#roWeaponVal){ background: transparent; border: none; border-radius: 0; padding: 2px 0; grid-column: auto; display: flex; flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: nowrap; /* keep label and value on one line */ } .readouts .readout:has(#roToFVal){ background: transparent; border: none; border-radius: 0; padding: 2px 0; grid-column: auto; display: flex; flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: nowrap; } .readouts .readout:has(#roWeaponVal) .label{ color: var(--muted); font-size: 10px; margin-bottom: 0; /* match compact rows */ min-width: 58px; /* match others' tabular label width, narrower */ flex: 0 0 auto; } .readouts .readout:has(#roToFVal) .label{ color: var(--muted); font-size: 10px; margin-bottom: 0; min-width: 58px; flex: 0 0 auto; } .readouts .readout:has(#roWeaponVal) .value{ font-size: 13px; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; flex: 1 1 auto; white-space: nowrap; /* do not wrap value under the label */ } .readouts .readout:has(#roToFVal) .value{ font-size: 13px; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; flex: 1 1 auto; white-space: nowrap; } .overlay-mode .readouts .readout:has(#roWeaponVal) .value{ font-size: 12px; } .overlay-mode .readouts .readout:has(#roToFVal) .value{ font-size: 12px; } /* Make Anglemeter and Elevation span full width (top row) */ .readouts .readout:has(#roAnglemeterVal), .readouts .readout:has(#roElevationVal), .readouts .readout:has(#roSightLevelVal){ grid-column: auto } /* Extra-compact labels for mobile/overlay mode on the right panel */ .overlay-mode .readouts .readout:has(#roChargeVal), .overlay-mode .readouts .readout:has(#roShellVal), .overlay-mode .readouts .readout:has(#roTrajectoryVal), .overlay-mode .readouts .readout:has(#roFuseVal), .overlay-mode .readouts .readout:has(#roWeaponVal), .overlay-mode .readouts .readout:has(#roToFVal), .overlay-mode .readouts .readout:has(#roDistanceVal), .overlay-mode .readouts .readout:has(#roAzimuthVal), .overlay-mode .readouts .readout:has(#roAngleSiteVal), .overlay-mode .readouts .readout:has(#roHeightDiffVal){ gap: 6px; } .overlay-mode .readouts .readout:has(#roChargeVal) .label, .overlay-mode .readouts .readout:has(#roShellVal) .label, .overlay-mode .readouts .readout:has(#roTrajectoryVal) .label, .overlay-mode .readouts .readout:has(#roFuseVal) .label, .overlay-mode .readouts .readout:has(#roWeaponVal) .label, .overlay-mode .readouts .readout:has(#roToFVal) .label, .overlay-mode .readouts .readout:has(#roDistanceVal) .label, .overlay-mode .readouts .readout:has(#roAzimuthVal) .label, .overlay-mode .readouts .readout:has(#roAngleSiteVal) .label, .overlay-mode .readouts .readout:has(#roHeightDiffVal) .label{ min-width: 50px; /* keep consistent grid column */ max-width: 50px; /* compact but aligned labels */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sticky-top{position:sticky; top:calc(var(--readouts-offset, 48px) - 1px); z-index:4; background:var(--sidebar)} .readouts.sticky-top{padding-top:6px; padding-bottom:0} /* Status bar */ .statusbar{ height:var(--statusbar-h, 22px); min-height:var(--statusbar-h, 22px); background:var(--statusbar-bg,#181818); color:var(--statusbar-text,#fff); display:flex; justify-content:space-between; align-items:center; gap:4px 12px; padding:0 10px; font-size:12px } .overlay-mode{ --statusbar-h: 18px } .statusbar.offline{ background:var(--status-offline-bg); color:var(--status-offline-fg) } .statusbar .left,.statusbar .right,.statusbar-left,.statusbar-right{display:flex; gap:12px; align-items:center} .statusbar-left{ flex:1 1 280px; min-width:0; } .statusbar .status-item { opacity: .95; display: flex; align-items: center; gap: 4px; white-space: nowrap; } .statusbar-right{ display:flex; align-items:center; gap:6px; margin-left:auto; flex:0 0 auto; } .statusbar-right #regionDeleteBtn{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; padding:2px; border-radius:4px; border:1px solid var(--input-border); background:var(--input); color:var(--text); flex:0 0 auto; } .statusbar-right #regionDeleteBtn img{ width:14px; height:14px; opacity:.9; } .statusbar-right #regionDeleteBtn:hover:not(:disabled){ filter:brightness(1.05); } .statusbar-right #regionDeleteBtn:disabled{ opacity:.45; cursor:default; } body.theme-light .statusbar-right #regionDeleteBtn, body.theme-eink .statusbar-right #regionDeleteBtn{ background:var(--input); border-color:var(--input-border); } body.theme-light .statusbar-right #regionDeleteBtn img, body.theme-eink .statusbar-right #regionDeleteBtn img{ filter:var(--toolbar-icon-filter); } .status-message{ display:inline-flex; align-items:center; gap:8px; padding:0; border-radius:0; color:var(--text); min-height:18px; cursor:default; transition:background .15s ease, border-color .15s ease, color .15s ease; } .status-message .status-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media (max-width: 900px){ :root{ --statusbar-h: 64px } .auth-gate{ padding:16px; } .auth-gate-card{ padding:22px 18px; border-radius:14px; } .auth-gate-title{ font-size:18px; } .tb-build-version{ display:none; } .tb-install{ display:inline-flex; max-width:42vw; overflow:hidden; text-overflow:ellipsis; } body.overlay-mode{ --statusbar-h: 64px } .app-frame.overlay-mode{ --statusbar-h: 64px } .statusbar{ height:var(--statusbar-h, 64px); min-height:var(--statusbar-h, 64px); flex-direction:column; align-items:stretch; justify-content:center; gap:2px; padding:4px 10px; overflow:hidden; } .statusbar select{ height:28px; min-height:28px; padding:0 8px; } .statusbar-left{ order:1; flex:1 1 auto; min-width:0; } .statusbar-right{ order:2; margin-left:0; justify-content:flex-start; flex:0 0 auto; min-width:0; } .statusbar-right #regionDeleteBtn{ width:28px; height:28px; min-height:28px; } .sidebar-footer, .sidebar.left .sidebar-footer.row, .sidebar.right .sidebar-footer{ min-height:48px; padding:8px 10px; align-items:center; } .sidebar.left{ scroll-padding-bottom:52px; } .sidebar.left .left-tab, .calc-tab-expanded{ padding-bottom:52px; } } .status-message .status-dot{ width:8px; height:8px; border-radius:50%; background:var(--muted); box-shadow:0 0 0 1px var(--status-dot-shadow); } .status-message--info{ color:var(--text); } .status-message--success{ color:var(--status-success); } .status-message--success .status-dot{ background:var(--status-success); box-shadow:0 0 0 1px var(--status-success-shadow); } .status-message--error{ color:var(--status-error); } .status-message--error .status-dot{ background:var(--status-error); box-shadow:0 0 0 1px var(--status-error-shadow); } .status-message--warning{ color:var(--status-warning); } .status-message--warning .status-dot{ background:var(--status-warning); box-shadow:0 0 0 1px var(--status-warning-shadow); } .statusbar .status-select { font-size: 10px; line-height: 1; height: 14px; padding: 0 6px; background: var(--status-select-bg); color: var(--status-select-fg); border: 1px solid var(--status-select-border); border-radius: 4px; } .statusbar .blue { font-weight: 600; } /* Small error note under readouts */ .error-note.small{ font-size:10px; color:var(--text); padding:8px 0px; margin-top:0px; margin-bottom:-12px } .error-note.small.err{ color:var(--active-target-meta-err) } .error-note.small.ok{ color:#a6e3a1 } .error-note.small.none{ color:#ffffff } /* Reserve one line for inline status above form buttons to avoid jumps */ .error-note.small._msgline{ min-height: 14px; visibility: hidden } /* Tools: Beaufort scale */ .tools-beaufort-wrap{ overflow:hidden; border:1px solid var(--panel-border); border-radius:8px; background:var(--panel); } .tools-beaufort-table{ width:100%; min-width:0; table-layout:fixed; border-collapse:separate; border-spacing:0; font:inherit; font-size:12px; line-height:1.25; font-variant-numeric:tabular-nums; } .tools-beaufort-table th, .tools-beaufort-table td{ padding:7px 8px; border-right:1px solid var(--panel-border); border-bottom:1px solid var(--panel-border); color:var(--text); white-space:normal; word-break:break-word; overflow-wrap:anywhere; } .tools-beaufort-table thead th{ position:static; background:var(--input); color:var(--text); font-weight:600; text-align:left; } .tools-beaufort-table th:nth-child(1), .tools-beaufort-table td:nth-child(1){ width:54px; } .tools-beaufort-table th:nth-child(2), .tools-beaufort-table td:nth-child(2){ width:34%; } .tools-beaufort-table th:nth-child(3), .tools-beaufort-table td:nth-child(3), .tools-beaufort-table th:nth-child(4), .tools-beaufort-table td:nth-child(4), .tools-beaufort-table th:nth-child(5), .tools-beaufort-table td:nth-child(5){ width:18%; } .tools-beaufort-table thead th:first-child{border-top-left-radius:8px} .tools-beaufort-table thead th:last-child{border-top-right-radius:8px} .tools-beaufort-table tbody tr:last-child td:first-child{border-bottom-left-radius:8px} .tools-beaufort-table tbody tr:last-child td:last-child{border-bottom-right-radius:8px} .tools-beaufort-table th:last-child, .tools-beaufort-table td:last-child{border-right:0} .tools-beaufort-table tbody tr:last-child td{border-bottom:0} .tools-beaufort-score{ background:transparent; text-align:center; font-weight:700; font-size:18px; color:var(--text); border-left:4px solid var(--beaufort-color, #ddd); } .tools-beaufort-label{ background:transparent; } .tools-beaufort-range{ background:transparent; text-align:center; } .tools-beaufort-avg{ background:var(--row-hover); text-align:center; font-weight:600; } .tools-location-actions{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; align-items:stretch; } .tools-location-actions[hidden]{ display:none !important; } .tools-location-actions .mini{ height:34px; min-height:34px; width:100%; padding:6px 10px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:11px; line-height:1.2; white-space:nowrap; color:#e6e6e6; background:#4a4a4a; border-color:#626262; } .tools-location-actions .mini:hover{ background:#5a5a5a; border-color:#7a7a7a; } .tools-location-actions .mini:disabled{ background:#3a3a3a; border-color:#4c4c4c; color:#9f9f9f; } @media (max-width: 900px){ .tools-beaufort-table th, .tools-beaufort-table td{ padding:6px 7px; font-size:11px; } .tools-beaufort-score{ font-size:16px; } } /* Auth lock overlay */ .auth-overlay{ position:fixed; inset:0; background:var(--auth-overlay-bg); color:var(--text); display:flex; align-items:center; justify-content:center; z-index:99999 } .auth-panel{ background:var(--auth-panel-bg); border:1px solid var(--auth-panel-border); padding:20px 16px; border-radius:10px; min-width:280px; box-shadow: var(--shadow) } .auth-panel h3{ margin:0 0 10px 0; font-size:16px; color:var(--auth-panel-title) } .auth-panel .row{ display:flex; gap:8px; align-items:center } .auth-panel input{ flex:1; background:var(--input); border:1px solid var(--input-border); border-radius:6px; color:var(--text); padding:8px 10px; outline:none } .auth-panel button{ background:var(--blue); color:#fff; border:1px solid var(--primary-border); padding:8px 12px; border-radius:6px; cursor:pointer } .auth-panel .msg{ margin-top:8px; color:var(--auth-panel-msg); font-size:12px; min-height:14px } .locked .app-frame{ filter: blur(2px); pointer-events:none; user-select:none } /* Right header layout: left column (ЦЕЛЬ + статус) + right actions (тумблер) */ .sidebar.right .sidebar-header{ display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start; padding:6px 16px; border-bottom:1px solid var(--sidebar-border); } .sidebar.right .sidebar-header .header-left{ display:flex; flex-direction:column; gap:4px; flex:1; } .sidebar.right .sidebar-header .header-actions{ display:flex; flex-direction:row; align-items:center; gap:6px; margin-left:auto; } /* Legacy active-target header: hidden when solutions UI is active */ /* .sidebar.right .active-target-header{ display:none; padding:0; border:0 } */ .sidebar.right .active-target-title{ font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; } .sidebar.right .active-target-meta-row{ display:flex; align-items:center; gap:8px; margin-top:2px; } .sidebar.right .active-target-meta{ margin:0; font-size:10px; } .sidebar.right #copySolutionBtn, .sidebar.right #downloadSolutionBtn { margin:0; padding:2px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; } .sidebar.right #copySolutionBtn img, .sidebar.right #downloadSolutionBtn img { width:18px; height:18px; } .sidebar.right #ballisticsDetailsBtn{ margin:0; padding:2px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; } .sidebar.right #ballisticsDetailsBtn img{ width:18px; height:18px; } .sidebar.right .ballistics-details-btn{ margin:0; padding:4px 8px; height:24px; font-size:10px; line-height:1; border-radius:6px; white-space:nowrap; } @keyframes copy-blink{ 0%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.15); opacity:0.7; } 100%{ transform:scale(1); opacity:1; } } .sidebar.right #copySolutionBtn.copied{ animation: copy-blink 0.25s ease-out; } /* Compact status line for solutions under header */ .sidebar.right .active-target-meta.error-note.small{ padding:2px 0; margin-top:2px; margin-bottom:0; } .manual-mode-row{ padding-top:2px; } .manual-mode-toggle{ display:flex; align-items:center; justify-content:flex-start; gap:8px; width:100%; } .manual-mode-toggle .muted.small{ min-width:120px; text-align:left; } .sidebar.right .active-target-meta, .sidebar.right .active-target-meta.muted, .sidebar.right .active-target-meta.small{ color:var(--active-target-meta); } .sidebar.right .active-target-meta.error-note.small.ok{ color:var(--active-target-meta-ok); } .sidebar.right .active-target-meta.error-note.small.err{ color:var(--active-target-meta-err); } .stage-title{ color:var(--stage-title); font-weight:600; } .kv span{ color:var(--kv-value); font-weight:600; } /* Scrollbars (webkit) to feel like VSCode) */ *::-webkit-scrollbar{height:12px;width:12px} :root{ --scroll-thumb:#3f3f46; --scroll-track:#1e1e1e } body.theme-light{ --scroll-thumb:#c7c7d1; --scroll-track:#efefef } body.theme-eink{ --scroll-thumb:#8a8a8a; --scroll-track:#ffffff } *::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:10px;border:2px solid var(--scroll-track)} *::-webkit-scrollbar-track{background:var(--scroll-track)} *::-webkit-scrollbar-corner{background:var(--scroll-track)} /* Responsive tweak: reduce right sidebar on small widths */ @media (max-width: 1600px){ :root{ --left-w: 320px; --right-w: 360px } } /* Overlay mode for small screens / tablets */ @media (max-width: 1600px){ .app-frame.overlay-mode{ grid-template-columns: var(--activity-w) 0 var(--gutter) 1fr var(--gutter) 0; } .app-frame.overlay-mode .resizer{ display:none } .app-frame.overlay-mode .sidebar.left, .app-frame.overlay-mode .sidebar.right{ position: fixed; top: var(--titlebar-h, 36px); bottom: var(--statusbar-h, 22px); box-shadow: var(--shadow); } .app-frame.overlay-mode .sidebar.left{ z-index: 1201; left: var(--activity-w); width: min(var(--left-w), calc(100vw - var(--activity-w) - 8px)); transform: translateX(-110%); transition: transform .2s ease; } .app-frame.overlay-mode .sidebar.right{ z-index: 1200; right: 0; width: min(var(--right-w), calc(100vw - var(--activity-w) - 8px)); transform: translateX(110%); transition: transform .2s ease; } .app-frame.overlay-mode:not(.left-collapsed) .sidebar.left{ transform: translateX(0) } .app-frame.overlay-mode:not(.right-collapsed) .sidebar.right{ transform: translateX(0) } } /* Resizers */ .resizer{background:transparent; height:100%; width:var(--gutter); grid-row:1; z-index:10} .r-left{grid-column:3; cursor:col-resize} .r-right{grid-column:5; cursor:col-resize} .resizer:hover{background:color-mix(in srgb, var(--tb-btn-border) 40%, transparent)} /* Sidebars scroll internally so footer is always visible */ .sidebar{overflow:auto} .sidebar.left{ overflow:hidden; } .sidebar.left .left-tab{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; } .sidebar.left #leftTabCalc{ overflow:hidden; } .sidebar.right{overflow-y:auto; overflow-x:hidden} .sidebar.right .sidebar-footer{position:sticky; bottom:0; background:var(--sidebar-fade); border-top:1px solid var(--sidebar-border);} .sidebar.left .sidebar-footer.row{ position:static; margin-top:0; background:var(--sidebar); border-top:1px solid var(--sidebar-border); flex:0 0 auto; } .calc-tab-expanded{ display:flex !important; flex:1 1 auto; flex-direction:column; min-height:0; } .calc-tab-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding-bottom:8px; } .calc-tab-body > * + *{ margin-top:16px; } .calc-tab-body > *:first-child{ margin-top:0; } /* Columns popup */ .columns-menu{position:fixed; top:0; left:0; background:var(--panel); border:1px solid var(--panel-border); border-radius:8px; box-shadow:var(--shadow); padding:10px; width:240px; display:none; z-index:1000; text-align:left; max-height:70vh; overflow:auto} .columns-menu.open{display:block} .columns-menu h4{margin:0; font-size:12px; color:#c6c6c6} .columns-menu .menu-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 8px} .columns-menu .close{background:transparent; border:0; color:#a8a8a8; cursor:pointer; font-size:16px; line-height:1; padding:2px 6px; border-radius:4px} .columns-menu .close:hover{color:var(--text); background:var(--row-hover)} .columns-menu .row{display:flex; align-items:center; gap:8px; padding:6px 0; justify-content:flex-start; text-align:left} .columns-menu .row input{flex:0 0 auto; width:auto; height:auto; margin:0; display:inline-block} .columns-menu .row .name{flex:1; text-align:left} .editor-header{position:relative} .columns-btn{position:relative} .schematic-controls .sep{ display:inline-block; width:8px; height:1px } /* Horizontal scroll: make the whole header scroll instead of inner controls */ .editor-controls{ min-width: 0 } .schematic-controls{ max-width:100%; overflow-x:hidden; overflow-y:auto; } .schematic-controls label{ white-space:nowrap } .resizing *{cursor:col-resize !important;} .panel-section.dragging{opacity:.7} .panel-title{cursor:grab} .panel-title:active{cursor:grabbing} /* Maps list styling */ .maps-list{background:transparent; border:1px dashed var(--panel-border); border-radius:6px; padding:8px; min-height:36px} .maps-list .map-item{padding:6px 8px; border-radius:6px; cursor:context-menu; display:block} .maps-list .map-item:hover{background:var(--row-hover)} .maps-list .map-item .mi-top{color:var(--text); font-size:inherit; line-height:1.25} .maps-list .map-item .mi-sub{color:var(--muted); font-size:11px; line-height:1.25} .maps-list .map-item .mi-label{color:var(--muted-2)} .maps-progress{ border:1px dashed var(--panel-border); border-radius:6px; padding:10px; margin:12px 0; background:var(--panel); } .maps-progress-title{ font-size:13px; font-weight:600; margin-bottom:6px; } .maps-progress-bars{ display:flex; flex-direction:column; gap:8px; } .maps-progress-row span{ font-size:11px; color:var(--muted); display:block; margin-bottom:4px; } .maps-progress-row progress{ width:100%; height:8px; border:none; border-radius:4px; overflow:hidden; appearance:none; background:var(--input-border); } .maps-progress-row progress::-webkit-progress-bar{ background:var(--input-border); } .maps-progress-row progress::-webkit-progress-value{ background:var(--blue); } .maps-progress-row progress::-moz-progress-bar{ background:var(--blue); } .maps-category-title{ font-size:12px; text-transform:uppercase; letter-spacing:0.02em; color:var(--muted); margin:8px 0 4px; } .maps-progress-status{ font-size:11px; color:var(--muted); } .tables-root{ display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; } .tables-list{ flex:1 1 220px; min-height:220px; /* max-height:420px; */ overflow:auto; border:1px dashed var(--panel-border); border-radius:6px; padding:8px; background:transparent; } .tables-item{ display:flex; flex-direction:column; gap:4px; padding:8px 10px; border-radius:6px; border:1px solid transparent; cursor:pointer; color:var(--text); background:var(--panel); margin-bottom:6px; } .tables-item:hover{ border-color:var(--input-border); box-shadow:0 0 0 1px rgba(255,255,255,0.08); } .tables-item.selected{ border-color:var(--blue); background:var(--row-select); } .tables-item .mi-top{font-size:14px; color:var(--text)} .tables-item .mi-sub{color:var(--muted); font-size:11px; line-height:1.3} .tables-item .tables-meta{display:flex; gap:10px; flex-wrap:wrap; font-size:11px; color:var(--muted-2)} .tables-preview{ flex:1 1 320px; min-height:220px; border:1px solid var(--panel-border); border-radius:10px; padding:12px; background:var(--panel); display:flex; flex-direction:column; gap:10px; } .tables-preview-state{ font-size:12px; color:var(--muted); min-height:20px; } .tables-preview-meta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 16px; font-size:12px; color:var(--muted); } .tables-preview-meta .label{ font-weight:600; color:var(--text); } .tables-preview-meta .value{ text-align:right; word-break:break-word; } .tables-preview-table{ flex:1; overflow:auto; border:1px solid var(--panel-border); border-radius:6px; background:var(--sidebar); } .tables-preview-table table{ width:100%; border-collapse:collapse; font-size:12px; } .tables-preview-table th, .tables-preview-table td{ border:1px solid var(--panel-border); padding:4px 6px; white-space:nowrap; } .tables-preview-table th{ position:sticky; top:0; background:var(--panel); z-index:1; text-align:left; } .tables-preview-table tbody tr:nth-child(even){ background:rgba(255,255,255,0.02); } .tables-preview-borderless{ border:none; box-shadow:none; } .tables-preview .error-note{ margin:0; } .tables-upload .inputs{ display:flex; flex-direction:column; gap:10px; } .tables-preview-empty{ color:var(--muted); font-size:12px; } .tables-upload .filepicker{ margin-top:6px; } .tables-upload .muted{ font-size:12px; color:var(--muted); } @media (max-width: 1100px){ .tables-root{ flex-direction:column; } } /* Spotting tab lists */ .spotting-list{border:1px dashed var(--panel-border); border-radius:6px; padding:6px; min-height:32px; display:flex; flex-direction:column; gap:6px; background:transparent} .spotting-item{display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:6px; background:var(--panel); border:1px solid transparent} .spotting-item:hover{border-color:var(--panel-border)} .spotting-num{font-weight:600; font-variant-numeric:tabular-nums; color:var(--text); min-width:56px} .spotting-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px} .spotting-label{color:var(--text); font-size:13px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .spotting-meta{color:var(--muted); font-size:11px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .spotting-empty{color:var(--muted); font-size:12px; padding:4px 2px} /* File picker styled button */ .filepicker{display:flex; align-items:center; gap:10px} .filepicker input[type="file"]{display:none} .filepicker .file-btn{display:inline-flex; align-items:center; gap:6px; cursor:pointer; padding:8px 10px} .filepicker .file-btn img{width:14px; height:14px; opacity:.9} .filepicker .file-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 220px} @media (max-width: 1300px){ .filepicker .file-name{ max-width: 160px } } /* Chips (badges) for calculated coordinates */ .chips-wrap{padding:8px 10px 0} .chips-title{color:var(--muted); font-size:11px; margin:6px 0 8px} .chips{display:flex; gap:8px; flex-wrap:wrap} .chip{display:block; background:var(--panel); border:1px solid var(--panel-border); border-radius:6px; padding:8px 10px; color:var(--text); min-height:36px} .chip .k{color:var(--muted)} .chip .v{font-variant-numeric:tabular-nums; text-align:left; display:block; color:var(--text)} /* Chips as grid fields same size as inputs */ .chips-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px} .chips-grid .chip{width:100%} /* Coordinates group inside one table column */ .coord-group{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--panel-border); border-radius:6px; overflow:hidden; background:transparent} .coord-group .coord{display:flex; align-items:center; gap:6px; padding:6px 8px; background:var(--panel)} .coord-group .coord + .coord{border-left:1px solid var(--panel-border)} .coord-group .k{color:var(--muted)} .coord-group .v{color:var(--text); font-variant-numeric:tabular-nums} /* Column drag & drop cues */ table.grid thead th{user-select:none} table.grid thead th.col-dragging{opacity:.7} table.grid thead th.th-drop-target-left{box-shadow: inset 2px 0 0 var(--blue)} table.grid thead th.th-drop-target-right{box-shadow: inset -2px 0 0 var(--blue)} /* Context menu */ .ctx-menu{position:fixed; z-index:2147483647; min-width:220px; max-width:min(320px, calc(100vw - 12px)); background:var(--panel); border:1px solid var(--panel-border); border-radius:8px; box-shadow:var(--shadow); padding:6px 6px; color:var(--text); display:none} .ctx-menu.open{display:block} .ctx-menu .head{background:var(--row-hover); border-radius:6px; padding:4px 8px; margin:0 0 6px; display:flex; align-items:baseline; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .ctx-menu .ctx-menu-body{display:block} .ctx-menu .head .title{font-weight:600; font-size:12px} .ctx-menu .head .sub{color:var(--muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .ctx-menu .head .dot{color:var(--muted)} .ctx-menu .group{padding:4px 0} .ctx-menu .item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 10px; border-radius:6px; cursor:pointer; white-space:nowrap} .ctx-menu .item:hover{background:var(--row-hover)} .ctx-menu .item.danger{ color:var(--danger) } .ctx-menu .item.danger:hover{ background: var(--danger-hover) } .ctx-menu .separator{height:1px; background:var(--ctx-separator); margin:6px 0} .ctx-menu .item.disabled{opacity:.5; cursor:default} .ctx-menu .item.disabled:hover{background:transparent} .ctx-menu .item .arrow{opacity:.6} .ctx-menu .submenu{position:absolute; top:0; left:100%; margin-left:6px; min-width:220px; max-width:min(320px, calc(100vw - 12px)); max-height:calc(100vh - 12px); overflow:auto; background:var(--ctx-submenu-bg); border:1px solid var(--ctx-submenu-border); border-radius:8px; box-shadow:var(--shadow); padding:6px 6px; display:none} .ctx-menu .item.has-sub:hover > .submenu{display:block} /* Keep submenu open when explicitly toggled by JS */ .ctx-menu .submenu.open{ display:block } .ctx-menu .item.has-sub{position:relative} .ctx-menu.touch-mode .item.has-sub{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px; } .ctx-menu.touch-mode .item.has-sub > span:first-child, .ctx-menu.touch-mode .item.has-sub > .arrow{ display:inline-flex; } .ctx-menu.touch-mode .item.has-sub > span:first-child{ grid-column:1; } .ctx-menu.touch-mode .item.has-sub > .arrow{ grid-column:2; justify-self:end; } .ctx-menu.touch-mode .item.has-sub > .submenu{ grid-column:1 / -1; position:static; left:auto; top:auto; margin-left:0; margin-top:2px; min-width:0; width:100%; max-height:none; overflow:visible; } .ctx-menu.touch-mode{ max-height:calc(100vh - 12px); display:flex; flex-direction:column; overscroll-behavior:contain; } .ctx-menu.touch-mode.open{display:flex} .ctx-menu.touch-mode .head{ flex:0 0 auto; } .ctx-menu.touch-mode .ctx-menu-body{ flex:1 1 auto; min-height:0; max-height:calc(100vh - 64px); overflow-y:auto; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-x pan-y; } .ctx-menu.touch-mode .group{ min-width:max-content; } /* Hide number spinners (global) */ input[type="number"]::-webkit-outer-spin-button, /* Fireteam selector actions: compact, theme-aware */ .fireteam-actions{ display:flex; flex-direction:row; gap:4px; align-items:stretch; } .fireteam-actions .btn-icon{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:3px; border-radius:4px; border:1px solid var(--input-border); background:var(--input); color:var(--text); } .fireteam-actions .btn-icon img{ width:18px; height:18px; opacity:.9; } .fireteam-actions .btn-icon:hover{ filter:brightness(1.05); } body.theme-light .fireteam-actions .btn-icon img, body.theme-eink .fireteam-actions .btn-icon img{ filter:var(--toolbar-icon-filter); } body.theme-light .fireteam-actions .btn-icon, body.theme-eink .fireteam-actions .btn-icon{ background:var(--input); border-color:var(--input-border); } /* Fireteam row: select + 3 square buttons in one line */ .fireteam-select-row{ display:flex; align-items:center; gap:4px; } .fireteam-select-row select{ height:28px; padding-top:3px; padding-bottom:3px; } .fireteam-select-row > .input:first-child{ flex:1 1 auto; } .fireteam-select-row > .fireteam-actions{ flex:0 0 auto; } /* Fireteam header: compact spacing */ .fireteam-header .input{ gap:4px; } input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin:0 } input[type="number"]{ -moz-appearance:textfield; appearance:textfield } /* Simple modal for change-password dialog */ .modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:9999; } .modal-window{ background:var(--panel); color:var(--text); box-shadow:var(--shadow); border-radius:8px; max-width:420px; width:90%; padding:12px 16px 14px; } .modal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } .modal-title{ font-weight:600; } .modal-close{ border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:18px; line-height:1; } .modal-body{ display:flex; flex-direction:column; gap:10px; } .modal-footer{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px; } /* App frame height is controlled by body grid rows. */ .app-frame{ height:auto !important; min-height:0 } .corr-table.compact{ gap:0; padding:0 6px; } .corr-table.compact .row{ grid-template-columns:64px 64px 64px minmax(0, 1fr); padding:4px 6px; font-size:11px; border-radius:0; } .corr-table.compact .row.head{ font-size:10px; background:var(--panel); border:1px solid var(--panel-border); border-bottom:0; border-radius:6px 6px 0 0; } .corr-table.compact .row:not(.head){ border-top:0; } .corr-table.compact .row:last-child{ border-radius:0 0 6px 6px; } .corr-table.compact .row .corr-method{ font-size:11px; gap:3px; } .corr-table.compact .row .corr-method button.ghost{ font-size:10px; padding:2px 5px; } .progress-line{ position:relative; height:8px; background:rgba(255,255,255,0.08); border-radius:4px; overflow:hidden; min-width:200px; } .progress-line .bar{ position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,#1ea7fd,#7bdcf5); border-radius:4px; transition:width 0.12s ease-in-out; } .progress-line .percent{ position:absolute; right:6px; top:-18px; color:var(--muted,#9aa3af); } /* Meteo bulletin (Метеосредний) */ .meteo-bulletin-table{ display:grid; grid-template-columns:40px repeat(3, 1fr); gap:2px; font-size:11px; } .meteo-bulletin-cell{ padding:2px 4px; } .meteo-bulletin-header{ font-weight:500; text-align:center; color:var(--muted); } .meteo-bulletin-row-label{ text-align:right; color:var(--muted-2); } .meteo-bulletin-cell input{ width:100%; text-align:center; padding:2px 4px; } .meteo-bulletin-footer{ display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:nowrap; } .meteo-bulletin-footer button{ white-space:nowrap; } .meteo-bulletin-footer ._msgline{ flex:1; text-align:left; } #leftTabCalc[hidden]{ display:none !important; } .is-hidden{display:none !important;} .fireteam-header-compact{ position:static; top:auto; z-index:auto; margin-bottom:0; margin-top:0; padding:8px; background:var(--sidebar); border-bottom:1px solid var(--sidebar-border); } .fireteam-header-compact::before{ content:none; } .activity-bar .act[data-admin-only]{display:none !important;} body.admin-map-access .activity-bar .act[data-admin-only]{display:inline-flex !important;} .left-tab[hidden]{display:none !important;} .left-tab[data-admin-only]{display:none;} body.admin-map-access .left-tab[data-admin-only]{display:block;} .rangecards-page{ display:block; min-height:100vh; min-height:100dvh; overflow:auto; padding:16px; } .rangecards-page .rc-meta{margin-bottom:16px;} .rangecards-page .rc-meta.grid{display:grid; grid-template-columns:repeat(2,minmax(280px,1fr)); gap:8px 18px; align-items:start;} .rangecards-page .rc-meta .row{margin:2px 0;} .rangecards-page .rc-meta .key{color:var(--muted); margin-right:6px;} .rangecards-page .rc-title{font-size:18px; font-weight:600; margin:0 0 8px 0;} .rangecards-page .rc-file{color:var(--muted); font-size:12px; margin-bottom:8px;} .rangecards-page .rc-wrap{overflow:auto; max-width:100%;} .rangecards-page table.rc{border-collapse:separate; border-spacing:0; width:100%;} .rangecards-page table.rc th, .rangecards-page table.rc td{ border-right:1px solid var(--panel-border); border-bottom:1px solid var(--panel-border); padding:4px 6px; text-align:left; } .rangecards-page table.rc th:first-child, .rangecards-page table.rc td:first-child{ border-left:1px solid var(--panel-border); } .rangecards-page table.rc thead th{ position:sticky; top:0; background:var(--panel); z-index:1; border-top:1px solid var(--panel-border); } .rangecards-page table.rc tbody tr:first-child td{ border-top:0; }