/* ============================================================ OrbitPulse — Design System Single source of truth for all styles. Theme is driven by [data-theme="dark"] / [data-theme="light"] on . JS in base.html reads/writes localStorage. ============================================================ */ /* ------------------------------------------------------------ 1. Theme tokens ------------------------------------------------------------ */ [data-theme="dark"] { --op-bg: #07090f; --op-bg-sidebar: #0a0d16; --op-bg-surface: #111827; --op-bg-raised: #1a2235; --op-bg-input: #0f1624; --op-border: rgba(180, 160, 130, 0.12); --op-border-focus: var(--op-teal); --op-text: #e8dcc8; --op-text-muted: #a89880; --op-text-subtle: #6b7280; --op-teal: #2dd4bf; --op-teal-dim: rgba(45, 212, 191, 0.12); --op-blue: #3b82f6; --op-blue-dim: rgba(59, 130, 246, 0.12); --op-success: #34d399; --op-danger: #f87171; --op-warning: #fbbf24; --op-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); --op-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.6); color-scheme: dark; } [data-theme="light"] { --op-bg: #f5f0e8; --op-bg-sidebar: #ffffff; --op-bg-surface: #ffffff; --op-bg-raised: #ede8de; --op-bg-input: #faf7f2; --op-border: rgba(120, 100, 75, 0.15); --op-border-focus: #0d9488; --op-text: #1c1510; --op-text-muted: #6b5c47; --op-text-subtle: #9e8e7a; --op-teal: #0d9488; --op-teal-dim: rgba(13, 148, 136, 0.1); --op-blue: #2563eb; --op-blue-dim: rgba(37, 99, 235, 0.1); --op-success: #059669; --op-danger: #dc2626; --op-warning: #d97706; --op-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); --op-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.12); color-scheme: light; } /* ------------------------------------------------------------ 2. Base ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; } body { font-family: 'Inter', sans-serif; background-color: var(--op-bg); color: var(--op-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.2s ease, color 0.2s ease; } h1, h2, h3, .display-3 { font-family: 'DM Serif Display', serif; } a { color: var(--op-teal); text-decoration: none; } a:hover { color: var(--op-teal); opacity: 0.8; } /* ------------------------------------------------------------ 3. Layout ------------------------------------------------------------ */ .sidebar { min-height: 100vh; width: 250px; background-color: var(--op-bg-sidebar); border-right: 1px solid var(--op-border); display: flex; flex-direction: column; flex-shrink: 0; transition: background-color 0.2s ease; } .main-content { flex: 1; padding: 2rem; background-color: var(--op-bg); min-height: 100vh; transition: background-color 0.2s ease; } /* ------------------------------------------------------------ 4. Sidebar internals ------------------------------------------------------------ */ .navbar-brand { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.25rem; padding: 1.25rem; display: block; letter-spacing: -0.02em; text-decoration: none; } .sidebar hr { border-color: var(--op-border); opacity: 1; } .sidebar .nav-link { color: var(--op-text-muted); padding: 0.7rem 1.25rem; border-radius: 0.5rem; margin: 0.15rem 0.75rem; font-size: 0.9rem; font-weight: 500; transition: background-color 0.15s ease, color 0.15s ease; border: 1px solid transparent; } .sidebar .nav-link:hover { background-color: var(--op-bg-raised); color: var(--op-text); } .sidebar .nav-link.active { background: linear-gradient(135deg, var(--op-teal-dim), var(--op-blue-dim)); color: var(--op-teal); border-color: rgba(45, 212, 191, 0.18); } .sidebar .nav-link.active i { color: var(--op-teal); } /* Logout button styled as nav link */ .sidebar form .nav-link { width: calc(100% - 1.5rem); background: none; cursor: pointer; text-align: left; } .sidebar-user { background: var(--op-bg-raised); border-radius: 0.5rem; padding: 0.75rem; margin: 0.75rem; text-align: center; transition: background-color 0.2s ease; } .sidebar-user .label { font-size: 0.75rem; color: var(--op-text-muted); } .sidebar-user .username { font-weight: 600; color: var(--op-text); font-size: 0.875rem; } /* Theme toggle button */ .theme-toggle { background: none; border: 1px solid var(--op-border); border-radius: 0.5rem; color: var(--op-text-muted); cursor: pointer; font-size: 0.8rem; padding: 0.4rem 0.75rem; margin: 0 0.75rem 0.75rem; width: calc(100% - 1.5rem); display: flex; align-items: center; gap: 0.5rem; transition: all 0.15s ease; } .theme-toggle:hover { background: var(--op-bg-raised); color: var(--op-text); border-color: var(--op-text-subtle); } /* ------------------------------------------------------------ 5. Cards ------------------------------------------------------------ */ .card { background-color: var(--op-bg-surface); border: 1px solid var(--op-border); border-radius: 0.75rem; box-shadow: var(--op-shadow); color: var(--op-text); transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .card-metric { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .card-metric:hover { transform: translateY(-2px); border-color: rgba(45, 212, 191, 0.2); box-shadow: var(--op-shadow-hover); } /* ------------------------------------------------------------ 6. Tables ------------------------------------------------------------ */ .table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(148, 163, 184, 0.06); --bs-table-hover-color: var(--op-text); --bs-table-striped-bg: transparent; --bs-table-border-color: var(--op-border); color: var(--op-text); } .table thead th { border-bottom-color: var(--op-border); color: var(--op-text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; } .table-hover > tbody > tr { transition: background-color 0.15s ease; } .table-light { --bs-table-bg: var(--op-bg-raised); --bs-table-color: var(--op-text-muted); --bs-table-border-color: var(--op-border); } /* ------------------------------------------------------------ 7. Forms ------------------------------------------------------------ */ .form-control, .form-select { background-color: var(--op-bg-input); border-color: var(--op-border); color: var(--op-text); transition: background-color 0.2s ease, border-color 0.15s ease; } .form-control:focus, .form-select:focus { background-color: var(--op-bg-input); border-color: var(--op-border-focus); color: var(--op-text); box-shadow: 0 0 0 0.2rem var(--op-teal-dim); } .form-control::placeholder { color: var(--op-text-subtle); } .form-control:disabled, .form-control[disabled] { background-color: var(--op-bg-raised); border-color: var(--op-border); color: var(--op-text-muted); opacity: 0.45; cursor: not-allowed; } .form-label { color: var(--op-text-muted); font-weight: 500; font-size: 0.875rem; } /* ------------------------------------------------------------ 8. Buttons ------------------------------------------------------------ */ .btn-primary { background: linear-gradient(135deg, var(--op-teal), #0f9688); border: none; color: #fff; font-weight: 600; } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, #3ae0ca, var(--op-teal)); color: #fff; border: none; } .btn-outline-secondary { border-color: var(--op-border); color: var(--op-text-muted); background: transparent; } .btn-outline-secondary:hover { background-color: var(--op-bg-raised); border-color: var(--op-text-subtle); color: var(--op-text); } /* Active preset button in filter bar */ .filter-bar .btn-check:checked + .btn { background: linear-gradient(135deg, var(--op-teal), #0f9688); color: #fff; border-color: var(--op-teal); font-weight: 600; } /* ------------------------------------------------------------ 9. Badges & status indicators ------------------------------------------------------------ */ .pct-badge { font-size: 0.72rem; } .bg-success { background-color: var(--op-success) !important; color: #fff !important; } .bg-danger { background-color: var(--op-danger) !important; color: #fff !important; } .bg-secondary { background-color: var(--op-bg-raised) !important; color: var(--op-text-muted) !important; } .bg-light { background-color: var(--op-bg-raised) !important; color: var(--op-text-muted) !important; } /* ------------------------------------------------------------ 10. Progress bars ------------------------------------------------------------ */ .progress { background-color: var(--op-bg-raised); border-radius: 1rem; } .progress-bar { background: linear-gradient(90deg, var(--op-teal), var(--op-blue)); border-radius: 1rem; } /* ------------------------------------------------------------ 11. Alerts ------------------------------------------------------------ */ .alert-warning { background-color: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.2); color: var(--op-warning); } .btn-close { filter: var(--op-close-filter, none); } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.5); } /* ------------------------------------------------------------ 12. Text & utility overrides ------------------------------------------------------------ */ .text-muted { color: var(--op-text-muted) !important; } .text-primary { color: var(--op-teal) !important; } .text-success { color: var(--op-success) !important; } .text-info { color: var(--op-blue) !important; } .text-warning { color: var(--op-warning) !important; } .text-danger { color: var(--op-danger) !important; } .text-dark { color: var(--op-text) !important; } .fw-bold { color: var(--op-text); } .border-bottom { border-color: var(--op-border) !important; } .border { border-color: var(--op-border) !important; } /* ------------------------------------------------------------ 13. Stat icon (dashboard cards) ------------------------------------------------------------ */ .stat-icon { width: 44px; height: 44px; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; } /* ------------------------------------------------------------ 14. Draggable card grid ------------------------------------------------------------ */ .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .card-slot { min-width: 0; /* prevent grid blowout */ will-change: transform; } .card-slot .card { height: 100%; } .drag-handle { display: block; text-align: center; color: var(--op-text-subtle); cursor: grab; opacity: 0; transition: opacity 0.15s ease; font-size: 1rem; line-height: 1; margin-bottom: 0.5rem; letter-spacing: 2px; } .card-slot:hover .drag-handle { opacity: 1; } .drag-handle:active { cursor: grabbing; } /* Card being dragged */ .card-slot.dragging { opacity: 0.35; }