/* Global dark theme */
:root {
    --bg-body: #0b0d10;
    --bg-card: #15181d;
    --bg-navbar: #080a0d;
    --text-body: #dedede;
    --border-subtle: #232630;

    --accent-red: #ff3b3b;
    --accent-green: #22ff66;
    --accent-blue: #4da3ff;
    --accent-amber: #ffbd3b;
}

html, body {
    height: 100%;
}

body.bg-body {
    background-color: var(--bg-body) !important;
    color: var(--text-body) !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400; /* no ghost/thin fonts */
}

/* Main content leaves room for fixed navbar */
.main-content {
    padding-top: 4.5rem;
    padding-bottom: 2rem;
}

/* Navbar */
.bg-navbar {
    background-color: var(--bg-navbar) !important;
}

.navbar-brand {
    font-size: 1.1rem;
}

.navbar-dark .navbar-nav .nav-link {
    color: #b2b6c2;
    font-weight: 500;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #ffffff;
}

.navbar-dark .navbar-nav .nav-link.active {
    color: #ffffff;
    border-bottom: 2px solid var(--accent-red);
    padding-bottom: 0.2rem;
}

/* Cards and tables */
.card {
    background-color: var(--bg-card);
    border-color: var(--border-subtle);
    color: var(--text-body);
    border-radius: 0.75rem;
}

.card-kpi {
    border-radius: 0.9rem;
}

.card-header {
    background-color: transparent;
    border-bottom-color: var(--border-subtle);
}

.table-dark {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
}

/* Footer */
.footer {
    background-color: #050608;
    border-top: 1px solid var(--border-subtle);
}

/* Accent text */
.text-accent-red {
    color: var(--accent-red) !important;
}

.text-accent-green {
    color: var(--accent-green) !important;
}

/* Buttons */
.btn-accent-red {
    color: #fff;
    background-color: var(--accent-red);
    border-color: var(--accent-red);
}

.btn-accent-red:hover,
.btn-accent-red:focus {
    color: #fff;
    background-color: #ff5757;
    border-color: #ff5757;
}

.btn-accent-green {
    color: #000;
    background-color: var(--accent-green);
    border-color: var(--accent-green);
}

.btn-accent-green:hover,
.btn-accent-green:focus {
    color: #000;
    background-color: #57ff8e;
    border-color: #57ff8e;
}

.btn-outline-secondary {
    border-color: #3a3f4a;
    color: #c7ccda;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: #3a3f4a;
    color: #fff;
}

/* Chart wrapper */
.chart-wrapper {
    position: relative;
    min-height: 260px;
}

/* Heatmap iframe */
.heatmap-frame iframe {
    background-color: #000;
    border-radius: 0.75rem;
}

/* Code elements */
code {
    color: #ffbd3b;
    background-color: #11131a;
    padding: 0.1rem 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.85em;
}

/* Scrollbars (WebKit) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: #050608;
}

::-webkit-scrollbar-thumb {
    background-color: #333845;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #4c5265;
}

/* Responsive tweaks */
@media (max-width: 767.98px) {
    .main-content {
        padding-top: 4rem;
    }
}