use{ cursor: move; } textarea { resize: none; } .terminal { cursor: crosshair; } .box-selecting { cursor: crosshair !important; } #main { display: flex; width: 90vw; min-height: calc(100vh - 40vh); } .banner-logo-img { max-height: 5.5em; position: relative; } .banner-text-title{ font-family: sans-serif; color: #555; text-decoration: none; text-transform: uppercase; font-size: 5vw; font-weight: 800; letter-spacing: -3px; line-height: 1; text-shadow: #EDEDED 3px 2px 0; position: relative; text-align: center; } .terminal:hover { fill: red; } .unit-selected > use { filter: drop-shadow(0 0 4px #0d6efd) drop-shadow(0 0 1px #0d6efd); } .unit-selected > text { fill: #0d6efd; } .connector-selected > path:first-child { stroke: #6ea8fe !important; stroke-width: 2.5; } .dropdown-toggle-sub::after { content: '\25B6'; float: right; font-size: 0.65em; margin-top: 0.35em; color: #6c757d; } .box-select-rect { fill: rgba(13, 110, 253, 0.08); stroke: #0d6efd; stroke-width: 1; stroke-dasharray: 5,3; } .nav-link-sub{ text-indent: 10px; } .sidebar-sticky { display: flex; flex-direction: column; height: 100vh; } .sidebar-sticky > #sidebar-autosave-status { margin-top: auto; position: sticky; bottom: 0; background: #f8f9fa; } .svg-container { display: inline-block; position: relative; width: 100%; padding-bottom: 40%; /* aspect ratio */ vertical-align: top; overflow: hidden; } .svg-content-responsive { display: inline-block; position: relative; top: 10px; left: 0; } .tab-pane { margin: 0px; padding: 0px; max-width: 100%; } /* ── Dark mode overrides ───────────────────────────────────────────────────── */ /* Bootstrap 5.3.8 handles modals, forms, dropdowns, cards automatically via */ /* data-bs-theme="dark" on . However bg-light does NOT auto-invert in */ /* this version, so sidebar and SVG canvas need explicit overrides. */ /* ── Sidebar ── */ /* bg-light stays #f8f9fa in Bootstrap 5.3.8 dark mode — override explicitly */ [data-bs-theme="dark"] .sidebar { background-color: var(--bs-body-bg) !important; } [data-bs-theme="dark"] .sidebar .nav-link { color: #c9d1d9; } [data-bs-theme="dark"] .sidebar .nav-link svg, [data-bs-theme="dark"] .sidebar .nav-link .feather { color: #8b949e; } [data-bs-theme="dark"] .sidebar .nav-link:hover svg, [data-bs-theme="dark"] .sidebar .nav-link:hover .feather, [data-bs-theme="dark"] .sidebar .nav-link.active svg, [data-bs-theme="dark"] .sidebar .nav-link.active .feather { color: inherit; } [data-bs-theme="dark"] .sidebar .nav-link.active { color: #58a6ff; } [data-bs-theme="dark"] .cf-accordion-btn { color: #c9d1d9; } [data-bs-theme="dark"] .cf-accordion-btn:hover { background: rgba(255,255,255,.06); color: #e6edf3; } [data-bs-theme="dark"] .cf-accordion-btn[aria-expanded="true"] { background: #1c2d4a; color: #58a6ff; } [data-bs-theme="dark"] .cf-accordion-btn[aria-expanded="true"] svg { color: #58a6ff; } [data-bs-theme="dark"] .cf-accordion-item { border-bottom-color: rgba(255,255,255,.08); } [data-bs-theme="dark"] .sidebar-sticky > #sidebar-autosave-status { background: var(--bs-body-bg) !important; border-top-color: rgba(255,255,255,.12) !important; } /* ── SVG flowsheet canvas ── */ /* bg-light on the SVG element also stays white — override to dark */ [data-bs-theme="dark"] .svg-content-responsive { background-color: var(--bs-tertiary-bg) !important; /* #2b3035 */ } /* Unit name labels and connector line-tag text are black SVG text by default. */ /* Use !important so it beats SVG presentation attributes set in JS. */ [data-bs-theme="dark"] .svg-content-responsive text { fill: #dee2e6 !important; } /* Restore blue tint for selected unit labels */ [data-bs-theme="dark"] .unit-selected > text { fill: #6ea8fe !important; } /* ── Banner / misc ── */ [data-bs-theme="dark"] .banner-text-title { color: #c9d1d9; text-shadow: #111 3px 2px 0; } [data-bs-theme="dark"] .result-row:hover { background-color: #1c2d4a; } [data-bs-theme="dark"] .border-top { border-top-color: rgba(255,255,255,.12) !important; } [data-bs-theme="dark"] .border-bottom { border-bottom-color: rgba(255,255,255,.12) !important; } /* ── Shared themed classes (light-mode defaults + dark-mode overrides) ── */ /* cf-mono-output: monospace output/status areas (e.g. NRTL regression result, */ /* line-tag preview). Inline background:#f8f9fa is overridden with !important */ [data-bs-theme="dark"] .cf-mono-output { background: var(--bs-secondary-bg) !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; } /* cf-panel-header: toolbar/header bars inside modals (SymbolEditor, Component) */ [data-bs-theme="dark"] .cf-panel-header { background: var(--bs-tertiary-bg) !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; } /* cf-readonly-field: disabled/readonly form-control styled with light bg */ [data-bs-theme="dark"] .cf-readonly-field { background: var(--bs-secondary-bg) !important; color: var(--bs-body-color) !important; } /* cf-active-row: highlighted active row in the sheets table */ .cf-active-row { background-color: #e7f1ff; } [data-bs-theme="dark"] .cf-active-row { background-color: #1c2d4a !important; } /* ── Progress overlay (runs during simulation calculations) ── */ /* Light mode uses rgba(255,255,255,.65) — a white wash that looks "greige" on */ /* dark backgrounds. Replace with a dark semi-transparent overlay. */ [data-bs-theme="dark"] #cf-progress-overlay { background: rgba(0, 0, 0, 0.75) !important; } [data-bs-theme="dark"] #cf-progress-box { background: var(--bs-secondary-bg) !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color); box-shadow: 0 8px 24px rgba(0,0,0,.45) !important; } [data-bs-theme="dark"] #cf-progress-status { color: var(--bs-secondary-color); } /* ── Toast notifications ── */ [data-bs-theme="dark"] .cf-toast { background: var(--bs-secondary-bg) !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; box-shadow: 0 4px 12px rgba(0,0,0,.35) !important; } [data-bs-theme="dark"] .cf-toast-error { background: #2c1215 !important; } [data-bs-theme="dark"] .cf-toast-warn { background: #2b2000 !important; } [data-bs-theme="dark"] .cf-toast-close { color: var(--bs-secondary-color) !important; } [data-bs-theme="dark"] .cf-toast-close:hover { color: var(--bs-body-color) !important; }