/* ── Cableway — Theme ────────────────── */ :root { --bg: #1e2127; --panel: #282c34; --border: #3e4451; --text: #abb2bf; --text-dim: #8b94a3; --accent: #61afef; --green: #98c379; --orange: #d19a66; --red: #e06c75; --yellow: #e5c07b; --white: #ffffff; --grid: #2c313a; --input-bg: #31353f; } /* Light-theme override — applied when . Accent/green/orange/red/yellow keep high saturation so plot highlights remain visible; --white stays #fff because it is the foreground colour used on top of saturated button backgrounds. */ :root[data-theme="light"] { --bg: #ffffff; --panel: #f3f5f8; --border: #d0d7de; --text: #1f2328; --text-dim: #656d76; --accent: #0969da; --green: #1a7f37; --orange: #bc4c00; --red: #cf222e; --yellow: #9a6700; --white: #ffffff; --grid: #e6e8eb; --input-bg: #ffffff; } :root[data-theme="light"] .tb-btn { background: #e8ecf1; color: var(--text); } :root[data-theme="light"] .tb-btn:hover { background: var(--accent); color: #ffffff; } :root[data-theme="light"] .tb-accent:hover { background: #045fc4; color: #ffffff; } :root[data-theme="light"] .tb-red:hover { background: #a40e19; } /* Every field that uses `background: var(--input-bg); color: var(--white)` is invisible in light theme (white-on-white), because `--white` is kept literally white (it's also the foreground on saturated button backgrounds like .tb-red). Re-point those text colours to `--text` and add a light border so the fields read as inputs against the white panel background. */ :root[data-theme="light"] .tb-input, :root[data-theme="light"] .ax-input, :root[data-theme="light"] .insp-input, :root[data-theme="light"] .form-input, :root[data-theme="light"] .form-select, :root[data-theme="light"] .att-editor input, :root[data-theme="light"] .att-editor select, :root[data-theme="light"] .set-row input, :root[data-theme="light"] td select, :root[data-theme="light"] td[contenteditable="true"]:focus { color: var(--text); border: 1px solid var(--border); } :root[data-theme="light"] .att-editor input, :root[data-theme="light"] .att-editor select, :root[data-theme="light"] td select { /* keep the compact table feel — just a subtle border */ border: 1px solid var(--border); } :root[data-theme="light"] .att-editor th { background: var(--panel); } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 13px; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* ── Toolbar ────────────────────────────────────────────────────────── */ #toolbar { background: var(--panel); padding: 6px 12px; display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; border-bottom: 1px solid var(--border); } .tb-label { color: var(--text-dim); font-size: 12px; padding: 0 2px; } /* ── AutoSave toggle (Office-style pill switch) ───────────────────── ON = accent track, thumb right, "On". OFF = grey track, thumb left, "Off" (muted). */ .as-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; margin: 0 4px 0 2px; border-radius: 6px; cursor: pointer; user-select: none; font-size: 11px; line-height: 1; white-space: nowrap; color: var(--text-dim); transition: background 0.12s; } .as-toggle:hover { background: var(--border); } .as-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .as-toggle .as-cap { font-weight: 600; letter-spacing: 0.2px; } .as-toggle .as-track { position: relative; width: 30px; height: 16px; border-radius: 8px; background: var(--accent); transition: background 0.15s; flex-shrink: 0; } .as-toggle .as-thumb { position: absolute; top: 2px; left: 16px; /* ON → thumb on the right */ width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transition: left 0.15s; } .as-toggle .as-state { min-width: 18px; font-weight: 700; color: var(--accent); } .as-toggle.off .as-track { background: var(--border); } .as-toggle.off .as-thumb { left: 2px; } /* OFF → thumb on the left */ .as-toggle.off .as-state { color: var(--text-dim); } .as-toggle.off .as-cap { color: var(--text-dim); } .tb-btn { background: var(--border); color: var(--text); border: none; padding: 5px 12px; border-radius: 3px; cursor: pointer; font-size: 12px; font-family: inherit; transition: background 0.15s; } .tb-btn:hover { background: var(--accent); color: var(--bg); } .tb-accent { background: var(--accent); color: var(--bg); font-weight: 600; } .tb-accent:hover { filter: brightness(1.12); } .tb-green { background: var(--green); color: var(--bg); } .tb-green:hover { background: #a9d18a; } .tb-red { background: var(--red); color: var(--white); font-weight: 600; } .tb-red:hover { background: #b84850; } .tb-input { background: var(--input-bg); color: var(--white); border: none; padding: 4px 8px; border-radius: 3px; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace; font-size: 12px; outline: none; } .tb-input:focus { box-shadow: 0 0 0 1px var(--accent); } .tb-sep { width: 1px; height: 24px; background: var(--border); margin: 0 4px; } /* ── Main layout ────────────────────────────────────────────────────── */ #main { flex: 1; display: flex; overflow: hidden; } #content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; } /* ── Tab bar ────────────────────────────────────────────────────────── */ #tab-bar { display: flex; background: var(--panel); border-bottom: 1px solid var(--border); flex-shrink: 0; } .tab { background: transparent; color: var(--text-dim); border: none; border-bottom: 2px solid transparent; padding: 8px 20px; font-size: 12px; font-family: inherit; cursor: pointer; transition: all 0.15s; } .tab:hover { color: var(--text); } .tab.active { color: var(--accent); border-bottom-color: var(--accent); } /* ── Tab panes ──────────────────────────────────────────────────────── */ .tab-pane { display: none; flex: 1; flex-direction: column; overflow: hidden; } .tab-pane.active { display: flex; } #plot2d, #plot3d, #plotplan { flex: 1; min-height: 0; } #route-mode-btn.active, #place-tower-mode-btn.active { background: var(--yellow); color: var(--bg); font-weight: 600; } /* Pan/Zoom nav-mode segmented toggle — highlight the selected gesture. */ .nav-mode-btn.active { background: var(--yellow); color: var(--bg); font-weight: 600; } /* ── Stringing panel ─────────────────────────────────────────────── */ #stringing-panel { background: var(--panel); border-top: 1px solid var(--border); padding: 6px 12px; flex-shrink: 0; } .stringing-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } #section-form { margin-top: 6px; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; } .section-form-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .section-form-row label { color: var(--text-dim); font-size: 11px; display: flex; align-items: center; gap: 4px; } #stringing-status { font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace; font-size: 11px; color: var(--yellow); } #route-table-wrap { padding: 8px; } /* ── Route pick floating panel ──────────────────────────────────────── */ .route-pick-panel { display: none; flex-direction: column; position: fixed; top: 60px; right: 310px; width: 480px; max-height: 80vh; background: var(--panel); border: 1px solid var(--accent); border-radius: 6px; box-shadow: 0 4px 20px rgba(0,0,0,0.4); z-index: 90; } .route-pick-panel-header { padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; color: var(--accent); } .route-pick-panel-body { padding: 10px 12px; flex: 1; overflow-y: auto; } .route-pick-panel-footer { padding: 8px 12px; border-top: 1px solid var(--border); display: flex; gap: 6px; justify-content: flex-end; } /* ── Route pick list ────────────────────────────────────────────────── */ .route-picklist { border: 1px solid var(--border); border-radius: 3px; background: var(--bg); max-height: 200px; overflow-y: auto; } .route-pick-item { display: flex; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--grid); font-size: 12px; } .route-pick-item:last-child { border-bottom: none; } .route-pick-num { width: 24px; flex-shrink: 0; color: var(--accent); font-weight: 600; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace; } .route-pick-label { flex: 1; color: var(--text); font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace; } .route-pick-action { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 0 3px; flex-shrink: 0; } .route-pick-action:hover { color: var(--accent); } .route-pick-remove { background: none; border: none; color: var(--red); cursor: pointer; font-size: 16px; padding: 0 4px; flex-shrink: 0; } .route-pick-remove:hover { color: var(--yellow); } .route-pick-item.route-pick-insert-active { background: rgba(97, 175, 239, 0.12); border-left: 2px solid var(--accent); } #tower-preview { border: 1px solid var(--border); border-radius: 3px; margin-bottom: 10px; height: 220px; } /* ── Axis bar ───────────────────────────────────────────────────────── */ .axis-bar { display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--panel); border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; } .ax-label { color: var(--accent); font-size: 11px; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace; margin-left: 6px; } .ax-input { background: var(--input-bg); color: var(--white); border: none; padding: 3px 6px; border-radius: 3px; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace; font-size: 11px; width: 70px; outline: none; } .ax-input:focus { box-shadow: 0 0 0 1px var(--accent); } .ax-dash { color: var(--text-dim); font-size: 11px; } /* ── Inspector ──────────────────────────────────────────────────────── */ #inspector { width: 300px; min-width: 300px; background: var(--panel); border-left: 1px solid var(--border); overflow-y: auto; flex-shrink: 0; } #inspector-content { padding: 0; } .insp-empty { text-align: center; padding: 40px 16px; } .insp-empty-title { font-size: 14px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; } .insp-empty-hint { font-size: 12px; color: var(--text-dim); line-height: 1.5; } .insp-section { padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--accent); border-bottom: 1px solid var(--border); margin-top: 4px; } .insp-row { display: flex; align-items: center; padding: 3px 12px; font-size: 12px; } .insp-label { width: 140px; flex-shrink: 0; color: var(--text-dim); } .insp-value { color: var(--green); font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace; font-size: 11px; } .insp-value.orange { color: var(--orange); } .insp-value.red { color: var(--red); } .insp-value.yellow { color: var(--yellow); } .insp-input { background: var(--input-bg); color: var(--white); border: none; padding: 3px 6px; border-radius: 3px; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace; font-size: 11px; width: 120px; outline: none; } .insp-input:focus { box-shadow: 0 0 0 1px var(--accent); } .insp-unit { color: var(--text-dim); font-size: 10px; margin-left: 4px; } .insp-apply-btn { display: block; width: calc(100% - 24px); margin: 10px 12px; padding: 8px; background: var(--accent); color: var(--bg); border: none; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s; } .insp-apply-btn:hover { background: var(--yellow); } /* ── Data Tables ────────────────────────────────────────────────────── */ .table-toolbar { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--border); flex-shrink: 0; } #table-sub-tabs { display: flex; background: var(--bg); border-bottom: 1px solid var(--border); flex-shrink: 0; } .sub-tab { background: transparent; color: var(--text-dim); border: none; border-bottom: 2px solid transparent; padding: 6px 16px; font-size: 12px; font-family: inherit; cursor: pointer; } .sub-tab:hover { color: var(--text); } .sub-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .sub-pane { display: none; flex: 1; overflow: auto; } .sub-pane.active { display: block; } #nodes-table-wrap, #cables-table-wrap { padding: 8px; } table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace; } thead th { background: var(--panel); color: var(--accent); font-weight: 600; padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1; font-size: 11px; } tbody td { padding: 4px 8px; text-align: center; border-bottom: 1px solid var(--grid); color: var(--text); } tbody tr:hover { background: rgba(97, 175, 239, 0.06); } tbody tr.selected { background: var(--border); } td[contenteditable="true"] { cursor: text; outline: none; } td[contenteditable="true"]:focus { background: var(--input-bg); color: var(--white); box-shadow: inset 0 0 0 1px var(--accent); } td select { background: var(--input-bg); color: var(--white); border: none; padding: 2px 4px; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace; font-size: 12px; outline: none; } td input[type="checkbox"] { accent-color: var(--accent); } /* ── Status bar ─────────────────────────────────────────────────────── */ #statusbar { background: var(--panel); padding: 4px 12px; border-top: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; } #status-text { color: var(--text-dim); font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace; font-size: 11px; } /* ── Activity overlay (issue #46: solve/render spinner) ─────────────── */ #activity-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); z-index: 10500; /* above modals, below onboarding */ display: none; align-items: center; justify-content: center; } #activity-overlay.show { display: flex; } .activity-card { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 26px 34px; max-width: 440px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.5); } .activity-spinner { width: 44px; height: 44px; margin: 0 auto; border: 4px solid rgba(229,192,123,0.25); border-top-color: var(--accent, #e5c07b); border-radius: 50%; animation: activity-spin 0.9s linear infinite; } @keyframes activity-spin { to { transform: rotate(360deg); } } .activity-msg { margin-top: 16px; font-size: 14px; font-weight: 600; } .activity-sub { margin-top: 6px; font-size: 12px; color: var(--text-dim); } @media (prefers-reduced-motion: reduce) { .activity-spinner { animation-duration: 2.2s; } } /* ── Modal overlay & dialog ─────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 100; display: none; align-items: flex-start; justify-content: center; padding-top: 5vh; } .modal-overlay.show { display: flex; } /* Non-blocking modal: transparent, click-through backdrop so the app behind stays visible AND usable. The dialog itself re-enables pointer events and gets a stronger shadow so it reads as a floating panel. Drag it by the header to move it out of the way. */ .modal-overlay.modal-nonblocking { background: transparent; pointer-events: none; } .modal-overlay.modal-nonblocking .modal { pointer-events: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.55); } .modal { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; width: 700px; max-width: 95vw; max-height: 85vh; min-width: 420px; min-height: 260px; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.4); /* User-resizable via mouse drag on bottom-right corner. Overflow hidden is required by CSS to show the resize handle; inner .modal-body owns the scrolling. */ resize: both; overflow: hidden; } /* Wide variant — used for dense forms (e.g. Tower Type with 12-col attachment table) */ .modal.wide { width: 1180px; } .modal-header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 14px; color: var(--accent); display: flex; justify-content: space-between; align-items: center; } .modal-close { background: none; border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; padding: 0 4px; } .modal-close:hover { color: var(--red); } .modal-body { padding: 16px; flex: 1; overflow-y: auto; } .modal-footer { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; } /* ── Form elements ─────────────────────────────────────────────────── */ .form-group { margin-bottom: 12px; } .form-label { display: block; color: var(--text-dim); font-size: 11px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; } .form-input, .form-select { width: 100%; background: var(--input-bg); color: var(--white); border: none; padding: 6px 8px; border-radius: 3px; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace; font-size: 12px; outline: none; } .form-input:focus, .form-select:focus { box-shadow: 0 0 0 1px var(--accent); } .form-row { display: flex; gap: 10px; } .form-row .form-group { flex: 1; } .form-hint { font-size: 10px; color: var(--text-dim); margin-top: 2px; } .form-computed { font-size: 11px; color: var(--green); font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace; padding: 4px 0; } /* ── Inline attachment editor table ────────────────────────────────── */ .att-editor { margin-top: 8px; overflow-x: auto; } .att-editor table { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: auto; } .att-editor th { background: var(--bg); color: var(--accent); font-weight: 600; padding: 4px 4px; text-align: center; font-size: 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } .att-editor td { padding: 3px 3px; text-align: center; border-bottom: 1px solid var(--grid); } .att-editor input { width: 100%; min-width: 48px; box-sizing: border-box; background: var(--input-bg); color: var(--white); border: none; padding: 3px 4px; border-radius: 2px; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace; font-size: 11px; text-align: center; } .att-editor select { width: 100%; min-width: 72px; box-sizing: border-box; background: var(--input-bg); color: var(--white); border: none; padding: 3px 4px; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace; font-size: 11px; } /* Text-style inputs (custom fields) should be a bit more generous */ .att-editor input[type="text"] { text-align: left; min-width: 80px; } .att-editor .att-remove { background: none; border: none; color: var(--red); cursor: pointer; font-size: 14px; padding: 0 4px; } /* ── Excel-style cell selection in attachment table ───────────────── */ .att-editor td.att-cell-sel { outline: 2px solid var(--accent); outline-offset: -2px; background: rgba(97, 175, 239, 0.10); } .att-editor td.att-cell-anchor { outline-color: var(--yellow); background: rgba(229, 192, 123, 0.14); } .att-editor tr.att-row-active > td:first-child { box-shadow: inset 3px 0 0 var(--accent); } /* ── Excel-style cell selection in the section batch editor ──────── */ #batch-tbody td.batch-cell-sel, #pl-tbody td.pl-cell-sel { outline: 2px solid var(--accent); outline-offset: -2px; background: rgba(97, 175, 239, 0.10); } #batch-tbody td.batch-cell-anchor, #pl-tbody td.pl-cell-anchor { outline-color: var(--yellow); background: rgba(229, 192, 123, 0.14); } /* ── Sets editor ───────────────────────────────────────────────────── */ .sets-editor { margin-top: 8px; } .set-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .set-row input { flex: 1; background: var(--input-bg); color: var(--white); border: none; padding: 4px 8px; border-radius: 3px; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace; font-size: 12px; } .set-remove { background: none; border: none; color: var(--red); cursor: pointer; font-size: 14px; } /* ── List modal table ──────────────────────────────────────────────── */ .list-table { width: 100%; border-collapse: collapse; } .list-table th { background: var(--bg); color: var(--accent); font-weight: 600; padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--border); font-size: 11px; } .list-table td { padding: 5px 8px; text-align: center; border-bottom: 1px solid var(--grid); color: var(--text); font-size: 12px; } .list-table tr:hover { background: rgba(97, 175, 239, 0.06); } .action-btn { background: var(--border); color: var(--text); border: none; padding: 6px 14px; border-radius: 3px; cursor: pointer; font-size: 12px; margin: 2px 3px; min-width: 56px; transition: background 0.1s ease; } .action-btn:hover { background: var(--accent); color: var(--bg); } .action-btn.del:hover { background: var(--red); color: var(--bg); } /* Actions column in list tables: tighter, whitespace-nowrap so all buttons stay on one line and are evenly spaced via action-btn margins. */ .list-table td:last-child { white-space: nowrap; padding: 4px 6px; text-align: center; } /* ── Toolbar dropdowns ─────────────────────────────────────────────── */ .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; top: 100%; left: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 3px; min-width: 180px; z-index: 50; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .dropdown-content.show { display: block; } .dropdown-item { padding: 8px 12px; cursor: pointer; font-size: 12px; color: var(--text); transition: background 0.15s; } .dropdown-item:hover { background: var(--accent); color: var(--bg); } /* ── Tower context menu (right-click / click on tower in plot) ────── */ .tower-ctx-menu { position: fixed; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; min-width: 180px; z-index: 9999; box-shadow: 0 4px 16px rgba(0,0,0,0.45); padding: 4px 0; font-size: 12px; } .tower-ctx-menu .ctx-header { padding: 6px 12px; font-weight: bold; color: var(--orange); border-bottom: 1px solid var(--border); font-size: 11px; white-space: nowrap; } .tower-ctx-menu .ctx-item { padding: 7px 12px; cursor: pointer; color: var(--text); transition: background 0.15s; display: flex; align-items: center; gap: 8px; } .tower-ctx-menu .ctx-item:hover { background: var(--accent); color: var(--bg); } .tower-ctx-menu .ctx-item .ctx-icon { width: 16px; text-align: center; font-size: 13px; } .tower-ctx-sep { height: 1px; background: var(--border); margin: 3px 0; } /* ── CSV import preview table ──────────────────────────────────────── */ .csv-preview-table-wrap { max-height: 200px; overflow: auto; border: 1px solid var(--border); border-radius: 3px; margin-bottom: 10px; } .csv-preview-table { width: 100%; border-collapse: collapse; font-size: 11px; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace; } .csv-preview-table th { background: var(--bg); color: var(--accent); font-weight: 600; padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--border); position: sticky; top: 0; font-size: 10px; } .csv-preview-table td { padding: 3px 8px; border-bottom: 1px solid var(--grid); color: var(--text); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .csv-preview-table tr:hover { background: rgba(97, 175, 239, 0.06); } /* ── Fullscreen mode ───────────────────────────────────────────────── */ body.fullscreen #toolbar { display: none; } body.fullscreen #statusbar { display: none; } body.fullscreen #tab-bar { display: none; } body.fullscreen #content-area { flex: 1; } body.fullscreen #main { flex: 1; } /* Show a compact exit-fullscreen bar at the top */ #fullscreen-exit-bar { display: none; background: var(--panel); padding: 4px 8px; align-items: center; gap: 6px; border-bottom: 1px solid var(--border); flex-shrink: 0; } body.fullscreen #fullscreen-exit-bar { display: flex; } /* In fullscreen, force the active tab pane to show */ body.fullscreen .tab-pane { display: none !important; } body.fullscreen .tab-pane.active { display: flex !important; } /* ── Results tab ───────────────────────────────────────────────────── */ .res-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 12px; } .res-title { font-size: 15px; font-weight: 700; color: var(--accent); } .res-meta { font-size: 11px; color: var(--text-dim); font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace; } .res-section-label { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin: 12px 0 6px 0; } .res-card { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; margin-bottom: 8px; } .res-card-header { padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 6px; user-select: none; } .res-card-header:hover { background: rgba(97,175,239,0.06); } .res-card-body { display: none; padding: 0 12px 12px 12px; } .res-card.open > .res-card-body { display: block; } .res-card.open > .res-card-header .res-arrow { transform: rotate(90deg); } .res-arrow { font-size: 10px; color: var(--accent); transition: transform 0.15s; display: inline-block; } .res-badge { margin-left: auto; font-size: 10px; background: var(--border); color: var(--text-dim); padding: 2px 6px; border-radius: 3px; } .res-sub-label { font-size: 10px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; margin: 10px 0 4px 0; padding-bottom: 2px; border-bottom: 1px solid var(--grid); } .res-table { width: 100%; border-collapse: collapse; font-size: 11px; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace; margin-bottom: 4px; } .res-table th { background: var(--bg); color: var(--accent); font-weight: 600; padding: 3px 6px; text-align: center; font-size: 10px; border-bottom: 1px solid var(--border); } .res-table td { padding: 3px 6px; border-bottom: 1px solid var(--grid); color: var(--text); text-align: center; } .res-table td:first-child { text-align: left; color: var(--text-dim); } .res-table tr:hover { background: rgba(97,175,239,0.04); } .res-tower-card { background: var(--bg); border: 1px solid var(--grid); border-radius: 3px; margin: 4px 0; } .res-tower-header { padding: 6px 10px; cursor: pointer; font-size: 12px; color: var(--text); display: flex; align-items: center; gap: 6px; user-select: none; } .res-tower-header:hover { background: rgba(97,175,239,0.04); } .res-tower-body { display: none; padding: 4px 10px 10px 10px; } .res-tower-card.open > .res-tower-body { display: block; } .res-tower-card.open > .res-tower-header .res-arrow { transform: rotate(90deg); } /* ── Sheet view ────────────────────────────────────────────────────── */ #sheet-container { flex: 1; overflow: auto; background: var(--border); padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .sheet-page { box-shadow: 0 4px 20px rgba(0,0,0,0.5); background: #fff; border-radius: 2px; transition: transform 0.15s ease; transform-origin: top center; } .sheet-svg { display: block; max-width: 100%; height: auto; } @media print { body * { display: none !important; } .sheet-page { display: block !important; box-shadow: none; transform: none !important; } .sheet-svg { width: 100% !important; } } /* ── Scrollbar ──────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } /* ── UX batch 1: disabled state, keyboard focus, status severity ──────── */ .tb-btn:disabled, .action-btn:disabled { opacity: .4; cursor: not-allowed; } .tb-btn:disabled:hover { background: var(--panel); color: var(--text); filter: none; } .tb-btn:focus-visible, .tab:focus-visible, .dropdown-item:focus-visible, .action-btn:focus-visible, .modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #status-text.sev-error { color: var(--red); font-weight: 600; } #status-text.sev-warn { color: var(--yellow); } #status-text.sev-ok { color: var(--green); } #status-text.sev-info { color: var(--text-dim); } /* Compile & Solve button rings amber when the model changed since the last solve. */ .tb-green.solve-stale { box-shadow: 0 0 0 2px var(--yellow); }