/* ============================================================================ Algo — single source of truth for the app theme. A modern, dark "fintech" skin built on a small set of design tokens. The palette is derived from the live console window so the whole app feels like one product. Bootstrap 5.3 runs in dark color-mode (data-bs-theme="dark" on ); the overrides below recolor its component variables to these tokens so existing Bootstrap markup (cards, tables, buttons…) adopts the theme with no per-page changes. Sections: 1. Design tokens 2. Base / reset 3. Bootstrap dark overrides 4. App shell + sidebar + nav 5. Top bar + process strip 6. Cards, stat tiles, dashboard grid, charts 7. Badges, status dots, tables, forms, buttons, misc 8. Console (pop-out window) 9. Chat (Ollama) 10. Error UI + utilities ========================================================================== */ /* ----------------------------------------------------------- 1. tokens ---- */ :root { /* surfaces, deepest → most elevated */ --algo-bg: #0d0f14; --algo-bg-2: #12141a; --surface: #161922; --surface-2: #1b1e26; --surface-3: #232733; --surface-hover: #20242f; /* lines */ --border: #2b2f3a; --border-strong: #3a3f4b; /* text */ --text: #e6e9ef; --text-muted: #9aa4b2; --text-dim: #6b7280; /* brand + semantic */ --accent: #4f8cff; --accent-2: #6cb6ff; --accent-soft: rgba(79, 140, 255, 0.14); --accent-glow: rgba(79, 140, 255, 0.40); --success: #3fb950; --success-soft: rgba(63, 185, 80, 0.14); --danger: #ff6b66; --danger-soft: rgba(255, 107, 102, 0.14); --warning: #f2c14e; --warning-soft: rgba(242, 193, 78, 0.14); --info: #6cb6ff; /* shape + depth */ --radius: 14px; --radius-sm: 9px; --radius-xs: 6px; --shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 32px -16px rgba(0,0,0,.65); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --sidebar-w: 215px; --topbar-h: 46px; --font-sans: 'Inter', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: 'Cascadia Code', 'JetBrains Mono', 'Consolas', 'SFMono-Regular', monospace; } /* --------------------------------------------------------- 2. base ------- */ /* Global compaction: rem is the unit nearly everything (app + Bootstrap) is sized in, so shrinking the root font-size scales the whole UI down in one place. 13px ≈ 19% tighter than the 16px browser default — a denser, more data-rich layout without touching individual component sizes. */ html { font-size: 13px; } html, body { font-family: var(--font-sans); background-color: var(--algo-bg); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; min-height: 100vh; } h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 650; letter-spacing: -0.01em; } h1 { font-size: 1.6rem; } h1:focus { outline: none; } a { color: var(--accent-2); text-decoration: none; } a:hover { color: #9fccff; text-decoration: underline; } code, pre, .font-mono { font-family: var(--font-mono); } hr { border-color: var(--border); opacity: 1; } ::selection { background: var(--accent-glow); color: #fff; } /* themed scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: #4a505e; background-clip: content-box; } /* ------------------------------------------- 3. Bootstrap dark overrides -- */ [data-bs-theme="dark"] { --bs-body-bg: var(--algo-bg); --bs-body-color: var(--text); --bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-secondary-color: var(--text-muted); --bs-secondary-bg: var(--surface-2); --bs-tertiary-color: var(--text-dim); --bs-tertiary-bg: var(--surface-3); --bs-border-color: var(--border); --bs-border-color-translucent: rgba(255, 255, 255, 0.08); --bs-primary: #4f8cff; --bs-primary-rgb: 79, 140, 255; --bs-link-color: var(--accent-2); --bs-link-color-rgb: 108, 182, 255; --bs-link-hover-color: #9fccff; --bs-link-hover-color-rgb: 159, 204, 255; --bs-success: #3fb950; --bs-success-rgb: 63, 185, 80; --bs-danger: #ff6b66; --bs-danger-rgb: 255, 107, 102; --bs-warning: #f2c14e; --bs-warning-rgb: 242, 193, 78; --bs-info: #6cb6ff; --bs-info-rgb: 108, 182, 255; --bs-card-bg: var(--surface); --bs-card-border-color: var(--border); --bs-card-cap-bg: var(--surface-2); --bs-card-color: var(--text); --bs-border-radius: var(--radius-sm); --bs-border-radius-sm: var(--radius-xs); --bs-border-radius-lg: var(--radius); --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--border); --bs-table-striped-bg: rgba(255, 255, 255, 0.025); --bs-table-striped-color: var(--text); --bs-table-hover-bg: var(--accent-soft); --bs-table-hover-color: var(--text); --bs-progress-bg: var(--surface-3); --bs-code-color: #ff9d96; } /* Cards: a touch of depth + crisp hairline. */ .card { border-radius: var(--radius); box-shadow: var(--shadow-sm); } .card .card-header { border-bottom-color: var(--border); font-weight: 600; } /* Inputs: lift off the page background so they're readable on the dark shell. */ .form-control, .form-select { background-color: var(--surface-3); border-color: var(--border); color: var(--text); } .form-control:focus, .form-select:focus { background-color: var(--surface-3); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 0.2rem var(--accent-soft); } .form-control::placeholder { color: var(--text-dim); } .btn:focus-visible, .form-control:focus-visible, .form-check-input:focus-visible { box-shadow: 0 0 0 0.2rem var(--accent-soft); } .btn-primary { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } .text-muted { color: var(--text-muted) !important; } .validation-message, .invalid-feedback { color: var(--danger); } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--success); } .invalid { outline: 1px solid var(--danger); } /* --------------------------------------------- 4. shell + sidebar + nav --- */ .app-shell { display: flex; flex-direction: column; min-height: 100vh; } .sidebar { background: linear-gradient(180deg, #14171f 0%, #0f1117 100%); border-right: 1px solid var(--border); display: flex; flex-direction: column; } .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .content { padding: 1.5rem 1.75rem 3rem; flex: 1; } /* brand */ .sidebar-brand { display: flex; align-items: center; gap: 0.6rem; height: var(--topbar-h); padding: 0 1.15rem; border-bottom: 1px solid var(--border); color: var(--text); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.01em; text-decoration: none; } .sidebar-brand:hover { color: var(--text); text-decoration: none; } .sidebar-brand .brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), #7b5bff); color: #fff; font-size: 1rem; box-shadow: 0 4px 14px -4px var(--accent-glow); } .sidebar-brand .brand-text { background: linear-gradient(90deg, #fff, #c9d4e3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* collapsible region (brand stays put; this collapses on mobile) */ .nav-collapse { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* nav scroll area */ .nav-scrollable { flex: 1; overflow-y: auto; padding: 0.4rem 0.5rem 0.6rem; } .nav-section { padding: 0.7rem 0.6rem 0.3rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); } .nav-section:first-child { padding-top: 0.3rem; } /* collapsible group: native
/ so it toggles with no JS / no interactivity */ .nav-group { margin: 0; } .nav-group-header { display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; user-select: none; list-style: none; /* hide the default disclosure triangle (Firefox) */ transition: color .12s ease; } .nav-group-header::-webkit-details-marker { display: none; } /* hide the default triangle (WebKit) */ .nav-group-header::marker { content: ""; } .nav-group-header:hover { color: var(--text-muted); } .nav-group-header .nav-chevron { font-size: 0.68rem; opacity: 0.6; transition: transform .15s ease; } .nav-group[open] > .nav-group-header .nav-chevron { transform: rotate(180deg); } /* nested child links sit under a guide rail so the group hierarchy reads at a glance */ .nav-group > .algo-nav-link, .nav-group > * > .algo-nav-link, .nav-group form .algo-nav-link { margin-left: 0.7rem; padding-left: 0.65rem; border-left: 1px solid var(--border); border-top-left-radius: 0; border-bottom-left-radius: 0; } .nav-group > .algo-nav-link:hover, .nav-group form .algo-nav-link:hover { border-left-color: var(--border-strong); } .nav-group > .algo-nav-link.active, .nav-group form .algo-nav-link.active { border-left-color: var(--accent); } .algo-nav-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.38rem 0.6rem; margin-bottom: 1px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 0.84rem; font-weight: 500; width: 100%; border: none; background: none; text-align: left; cursor: pointer; position: relative; transition: background-color .12s ease, color .12s ease, border-color .12s ease; } .algo-nav-link .bi { font-size: 0.98rem; width: 1.15rem; text-align: center; opacity: .9; } .algo-nav-link:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; } .algo-nav-link.active { background: var(--accent-soft); color: #cfe0ff; } .algo-nav-link.is-action { color: var(--text-muted); } .nav-footer { border-top: 1px solid var(--border); padding: 0.5rem 0.5rem; } /* mobile drawer plumbing — a pure-CSS checkbox (in MainLayout, a sibling of the sidebar) drives the slide-in; the hamburger + backdrop are