/* ═══════════════════════════════════════════════════════════════════════════ INDTRAD — Shared Design System Single CSS file for ALL pages: admin, user, auth Themes: dark (default) | light | auto (follows OS) Applied via data-bs-theme="dark|light" on ═══════════════════════════════════════════════════════════════════════════ */ /* ── Typography Variables ────────────────────────────────────────────────── */ :root { --font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; --font-size-xs: 0.72rem; --font-size-sm: 0.83rem; --font-size-base: 0.9rem; --font-size-md: 0.95rem; --font-size-lg: 1.05rem; --font-size-xl: 1.2rem; --font-size-xxl: 1.5rem; --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.3; --lh-base: 1.6; --lh-loose: 1.8; --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.03em; --ls-wider: 0.06em; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --pos: #26a69a; --neg: #ef5350; } /* ── Dark Theme ──────────────────────────────────────────────────────────── */ [data-bs-theme="dark"] { --bg-page: #0d0e14; --bg-card: #14151c; --bg-elevated: #1a1b26; --bg-input: #1e2030; --border: #1e2030; --border-subtle: #2a2d3e; --text-bright: #e0e6f0; --text-primary: #c8d0dd; --text-secondary: #8892a4; --text-muted: #6b7280; --text-dim: #4a5568; --accent: #00d4aa; --accent-text: #111; /* Legacy aliases */ --card-bg: #14151c; --bg2: #1a1b26; --bg3: #12131a; --bg4: #0d0e14; --card-hdr: #12131a; --border2: #2a2d3e; --muted: #6b7280; --dim: #4a5568; --text: #c8d0dd; --text2: #a0aab8; --input-bg: #1e2030; --input-text: #c8d0dd; --input-ph: #6b7280; --nav-bg: #14151c; --nav-text: rgba(255,255,255,.75); --nav-active: #ffc107; --nav-border: rgba(255,255,255,.08); --dd-bg: #1a1b26; --dd-border: #2a2d3e; --dd-hover: #22263a; --dd-text: #c8d0dd; --tbl-bg: #14151c; --tbl-hover: rgba(0,212,170,.06); --tbl-border: #2a2d3e; --tbl-stripe: rgba(255,255,255,.02); --sb-track: #0d0e14; --sb-thumb: #2a2d3e; --sb-hover: #3a3f54; } /* ── Light Theme ─────────────────────────────────────────────────────────── */ [data-bs-theme="light"] { --bg-page: #f0f3f7; --bg-card: #ffffff; --bg-elevated: #f4f6f9; --bg-input: #eef0f3; --border: #d1d5db; --border-subtle: #e5e7eb; --text-bright: #0f172a; --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #64748b; --text-dim: #94a3b8; --accent: #0097a7; --accent-text: #fff; /* Legacy aliases */ --card-bg: #ffffff; --bg2: #f4f6f9; --bg3: #e8eaed; --bg4: #f0f3f7; --card-hdr: #f1f5f9; --border2: #d1d5db; --muted: #64748b; --dim: #94a3b8; --text: #1e293b; --text2: #334155; --input-bg: #ffffff; --input-text: #1e293b; --input-ph: #94a3b8; --nav-bg: #1a1d21; --nav-text: rgba(255,255,255,.78); --nav-active: #ffc107; --nav-border: rgba(255,255,255,.08); --dd-bg: #ffffff; --dd-border: #d0d4db; --dd-hover: #f4f6f9; --dd-text: #1e293b; --tbl-bg: #ffffff; --tbl-hover: rgba(0,151,167,.06); --tbl-border: #e2e6ea; --tbl-stripe: rgba(0,0,0,.025); --sb-track: #f0f3f7; --sb-thumb: #d1d5db; --sb-hover: #b0b8c4; } /* ═══════════════════════════════════════════════════════════════════════ BASE ═══════════════════════════════════════════════════════════════════════ */ * { box-sizing: border-box; } body { font-family: var(--font-family); font-size: var(--font-size-base); font-weight: var(--fw-normal); line-height: var(--lh-base); background: var(--bg-page); color: var(--text-primary); -webkit-font-smoothing: antialiased; } h1,h2,h3,h4,h5,h6 { color: var(--text-bright); font-weight: var(--fw-semibold); line-height: var(--lh-tight); } .text-secondary { color: var(--text-secondary) !important; } .text-muted { color: var(--text-muted) !important; } .text-xs { font-size: var(--font-size-xs); } .text-sm { font-size: var(--font-size-sm); } .text-md { font-size: var(--font-size-md); } .fw-medium { font-weight: var(--fw-medium); } .text-pos { color: var(--pos) !important; } .text-neg { color: var(--neg) !important; } /* Scrollbars */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--sb-track); } ::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--sb-hover); } /* ═══════════════════════════════════════════════════════════════════ NAVBAR ═══════════════════════════════════════════════════════════════════ */ .navbar { background: var(--nav-bg) !important; border-bottom: 1px solid var(--nav-border); } .navbar-brand { color: var(--nav-active) !important; font-weight: var(--fw-bold); font-size: var(--font-size-lg); letter-spacing: var(--ls-wide); } .navbar .nav-link { font-size: var(--font-size-sm); color: var(--nav-text) !important; } .navbar .nav-link:hover, .navbar .nav-link.active { color: #ffffff !important; } .navbar .nav-link.active { font-weight: var(--fw-semibold); } /* Tab nav-links outside navbar — light mode readable */ [data-bs-theme="light"] .nav:not(.navbar-nav) .nav-link { color: #374151 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; } [data-bs-theme="light"] .nav:not(.navbar-nav) .nav-link:hover { color: #111827 !important; } [data-bs-theme="light"] .nav:not(.navbar-nav) .nav-link.active { color: var(--accent) !important; } .dropdown-menu { background: var(--dd-bg); border: 1px solid var(--dd-border); box-shadow: 0 4px 20px rgba(0,0,0,.15); border-radius: var(--radius-md); z-index: 1050 !important; } .dropdown-item { color: var(--dd-text); font-size: var(--font-size-sm); padding: .45rem 1rem; } .dropdown-item:hover, .dropdown-item:focus { background: var(--dd-hover); color: var(--text-bright); } .dropdown-divider { border-color: var(--border-subtle); } /* Prevent sticky table headers from overlapping navbar dropdowns */ thead.sticky-top, .table thead.sticky-top th { z-index: 1 !important; } /* ═══════════════════════════════════════════════════════════════════ CARDS ═══════════════════════════════════════════════════════════════════ */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text-primary); } [data-bs-theme="dark"] .card { box-shadow: 0 2px 12px rgba(0,0,0,.3); } [data-bs-theme="light"] .card { box-shadow: 0 1px 6px rgba(0,0,0,.07); } .card-header { background: var(--card-hdr,var(--bg-elevated)); border-bottom: 1px solid var(--border); padding: .75rem 1.25rem; font-size: var(--font-size-sm); } .card-footer { background: var(--card-hdr,var(--bg-elevated)); border-top: 1px solid var(--border); } .card-body { color: var(--text-primary); } /* ═══════════════════════════════════════════════════════════════════ TABLES ═══════════════════════════════════════════════════════════════════ */ .table { color: var(--text-primary); font-size: var(--font-size-sm); --bs-table-bg: transparent; --bs-table-striped-bg: var(--tbl-stripe); --bs-table-hover-bg: var(--tbl-hover); --bs-table-border-color: var(--tbl-border); --bs-table-color: var(--text-primary); } .table th { font-size: var(--font-size-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-muted); } .table td { color: var(--text-primary); } .table > :not(caption) > * > * { border-bottom-color: var(--tbl-border); background-color: transparent; } .table-hover tbody tr:hover > * { background: var(--tbl-hover); } [data-bs-theme="light"] .table { color: var(--text-primary); } [data-bs-theme="light"] .table th { color: var(--text-muted); background: var(--card-hdr); } [data-bs-theme="light"] .table td { color: var(--text-primary); } [data-bs-theme="light"] .table > :not(caption) > * > * { border-bottom-color: var(--tbl-border); } [data-bs-theme="light"] .table-hover tbody tr:hover td { background: var(--tbl-hover); } /* Neutralize table-dark class in light mode */ [data-bs-theme="light"] .table-dark { --bs-table-color: var(--text-primary); --bs-table-bg: var(--bg-card); color: var(--text-primary) !important; background: var(--bg-card) !important; border-color: var(--tbl-border) !important; } [data-bs-theme="light"] .table-dark th, [data-bs-theme="light"] .table-dark td { color: var(--text-primary) !important; border-color: var(--tbl-border) !important; } /* ═══════════════════════════════════════════════════════════════════ FORMS ═══════════════════════════════════════════════════════════════════ */ .form-label { font-size: var(--font-size-sm); font-weight: var(--fw-medium); color: var(--text-secondary); margin-bottom: .35rem; } .form-control, .form-select { background: var(--input-bg); border-color: var(--border); color: var(--input-text); font-size: var(--font-size-sm); border-radius: var(--radius-sm); } .form-control:focus, .form-select:focus { background: var(--input-bg); border-color: var(--accent); color: var(--input-text); box-shadow: 0 0 0 .2rem rgba(255,193,7,.15); } [data-bs-theme="light"] .form-control:focus, [data-bs-theme="light"] .form-select:focus { box-shadow: 0 0 0 .2rem rgba(0,151,167,.15); } .form-control::placeholder { color: var(--input-ph); } .form-control:disabled, .form-control[readonly] { background: var(--bg-elevated); color: var(--text-muted); opacity: .8; } .form-text { font-size: var(--font-size-xs); color: var(--text-muted); } .input-group-text { background: var(--bg-elevated); border-color: var(--border); color: var(--text-secondary); font-size: var(--font-size-sm); } .form-check-label { color: var(--text-secondary); font-size: var(--font-size-sm); } /* ═══════════════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════════════ */ .btn { font-size: var(--font-size-sm); border-radius: var(--radius-sm); font-weight: var(--fw-medium); } .btn-sm { font-size: var(--font-size-xs); } .btn-outline-secondary { border-color: var(--border); color: var(--text-secondary); } .btn-outline-secondary:hover { background: var(--bg-elevated); border-color: var(--border); color: var(--text-primary); } /* ═══════════════════════════════════════════════════════════════════ ALERTS ═══════════════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] .alert-danger { background: rgba(239,83,80,.12); color:#ff8a80; border-color:rgba(239,83,80,.3); } [data-bs-theme="dark"] .alert-success { background: rgba(38,166,154,.12); color:#80cbc4; border-color:rgba(38,166,154,.3); } [data-bs-theme="dark"] .alert-warning { background: rgba(255,193,7,.12); color:#ffe082; border-color:rgba(255,193,7,.3); } [data-bs-theme="dark"] .alert-info { background: rgba(41,182,246,.12); color:#80d8ff; border-color:rgba(41,182,246,.3); } [data-bs-theme="light"] .alert-danger { background:#fee2e2; color:#7f1d1d; border-color:#fca5a5; } [data-bs-theme="light"] .alert-success { background:#dcfce7; color:#14532d; border-color:#86efac; } [data-bs-theme="light"] .alert-warning { background:#fef9c3; color:#713f12; border-color:#fde047; } [data-bs-theme="light"] .alert-info { background:#e0f2fe; color:#0c4a6e; border-color:#7dd3fc; } /* ═══════════════════════════════════════════════════════════════════ MODALS ═══════════════════════════════════════════════════════════════════ */ .modal-content { background: var(--bg-card); border-color: var(--border); border-radius: var(--radius-lg); color: var(--text-primary); } .modal-header { border-bottom-color: var(--border); background: var(--bg-elevated); } .modal-footer { border-top-color: var(--border); background: var(--bg-elevated); } .modal-title { font-size: var(--font-size-md); font-weight: var(--fw-semibold); } /* ═══════════════════════════════════════════════════════════════════ CODE / CONSOLE ═══════════════════════════════════════════════════════════════════ */ code { font-family: var(--font-family-mono); font-size: var(--font-size-xs); background: var(--bg-elevated); color: #e06c75; padding: 1px 5px; border-radius: var(--radius-sm); } [data-bs-theme="light"] code { color: #c7254e; } pre { font-family: var(--font-family-mono); font-size: var(--font-size-xs); } /* Log/console panels — overrides hardcoded #050505 everywhere */ #fetchLog, #trainLog, #kolmogorovLog, .log-console { font-family: var(--font-family-mono); font-size: var(--font-size-xs); line-height: 1.6; white-space: pre-wrap; overflow-y: auto; padding: .75rem 1rem; border-radius: 0 0 var(--radius-md) var(--radius-sm); } [data-bs-theme="dark"] #fetchLog, [data-bs-theme="dark"] #trainLog, [data-bs-theme="dark"] #kolmogorovLog, [data-bs-theme="dark"] .log-console { background: #080c10; border: 1px solid var(--border); color: #8bc34a; } [data-bs-theme="light"] #fetchLog, [data-bs-theme="light"] #trainLog, [data-bs-theme="light"] #kolmogorovLog, [data-bs-theme="light"] .log-console { background: #f1f5f9; border: 1px solid var(--border); color: #1b5e20; } /* ═══════════════════════════════════════════════════════════════════ MISC ═══════════════════════════════════════════════════════════════════ */ .badge { font-size: var(--font-size-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); } span.badge:not([class*="bg-"]) { background: var(--bg-elevated); color: var(--text-secondary); } .list-group-item { background: var(--bg-card); border-color: var(--border); color: var(--text-primary); font-size: var(--font-size-sm); } .progress { background: var(--bg-elevated); } .page-link { background: var(--bg-card); border-color: var(--border); color: var(--text-secondary); font-size: var(--font-size-sm); } .page-link:hover { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); } .page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: var(--accent-text); } .border { border-color: var(--border) !important; } .border-subtle { border-color: var(--border-subtle) !important; }