/* Vectra dashboard - minimal custom CSS on top of Bootstrap 5. Dark mode is driven by Bootstrap 5.3's `data-bs-theme="dark"` attribute on ; we only override custom colors, never Bootstrap defaults. */ main.container { max-width: 1200px; } .navbar-brand { font-weight: 700; letter-spacing: 0.5px; } .table thead th { border-bottom-width: 2px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; } .badge { font-weight: 500; } code { padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 0.85em; } .list-group-item { border-left-width: 3px; } /* Light theme background tweak (Bootstrap default is white) */ [data-bs-theme="light"] body { background: #f8f9fa; } [data-bs-theme="light"] .table thead th { color: #495057; } [data-bs-theme="light"] code { background: #f1f3f5; color: #495057; } /* Dark theme: tone down the harsh pure-black to match Bootstrap dark */ [data-bs-theme="dark"] body { background: #1a1d20; } [data-bs-theme="dark"] code { background: #2b3035; color: #dcdcdc; } /* ---------- Mobile (<= 576px) ---------- */ @media (max-width: 576px) { main.container { padding-left: 0.75rem; padding-right: 0.75rem; } /* Tighter tables on phones */ .table { font-size: 0.85rem; } .table th, .table td { padding: 0.4rem 0.5rem; } /* Big numeric KPIs shrink so 4 cards fit two-up cleanly */ .display-6 { font-size: 1.6rem; } /* Buttons in tight rows wrap instead of crushing */ .btn-group .btn { padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.8rem; } /* Sparkline keeps its shape but shrinks vertically */ .sparkline { height: 56px !important; } h2.h3, h2.h4 { font-size: 1.25rem; } } /* Make every horizontally scrollable on small screens without needing to wrap each one in .table-responsive manually. */ @media (max-width: 768px) { main.container > .table, main.container .card-body > .table { display: block; overflow-x: auto; white-space: nowrap; } }