body {
    background-color: #1a1d23;
    color: #e1e1e1;
}
.card {
    background-color: #212529;
    border: 1px solid #2c3034;
}
.card-header {
    background-color: #2c3034;
    border-bottom: 1px solid #373b3e;
}
.table {
    color: #e1e1e1;
}
.table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
.navbar {
    border-bottom: 1px solid #2c3034;
}
.btn-outline-light:hover {
    background-color: #2c3034;
}
a {
    color: #5ea1f0;
}
a:hover {
    color: #7fb8ff;
}
.form-control, .form-select {
    background-color: #2c3034;
    border: 1px solid #373b3e;
    color: #e1e1e1;
}
.form-control:focus, .form-select:focus {
    background-color: #2c3034;
    color: #e1e1e1;
    border-color: #5ea1f0;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
}

.offcanvas {
    --bs-offcanvas-width: 280px;
}
.accordion-button:not(.collapsed) {
    background-color: #2c3034;
    color: #e1e1e1;
}
.accordion-button:focus {
    box-shadow: none;
}
.list-group-item-action:hover {
    background-color: #2c3034 !important;
}
.breadcrumb {
    background-color: transparent;
    padding: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: #6c757d;
}

/* ============================================================
   Compact / information-dense layout
   Applied globally via base.html so every page benefits.
   Uses Bootstrap's own custom properties where possible.
   ============================================================ */

/* Uniform ~12% scale-down of the whole rem-based UI (fonts + spacing). */
html {
    font-size: 14px;
}
body {
    line-height: 1.4;
}

/* Tighter cards. */
.card {
    --bs-card-spacer-y: 0.6rem;
    --bs-card-spacer-x: 0.85rem;
    --bs-card-cap-padding-y: 0.35rem;
    --bs-card-cap-padding-x: 0.85rem;
    margin-bottom: 0.75rem;
}

/* Denser tables. */
.table {
    --bs-table-cell-padding-y: 0.25rem;
    --bs-table-cell-padding-x: 0.5rem;
    font-size: 0.9rem;
}
.table-sm {
    --bs-table-cell-padding-y: 0.15rem;
}

/* Trim oversized headline numbers on stat tiles and card headers. */
.card-body h2 { font-size: 1.4rem; }
.card-body h3 { font-size: 1.2rem; }
.card-header h5,
.card-header .h5 { font-size: 1rem; }
/* Stat-tile helper text. */
.card-body .card-title { margin-bottom: 0.15rem; }
/* Equal-height stat tiles (`.card.text-center.h-100`) stretch to match the
   tallest tile in the row; center their content vertically so shorter tiles
   don't leave empty space at the bottom. */
.card.text-center.h-100 > .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Stat tiles are the only `.col-md-3` columns; cap their width so they stay
   compact and left-pack instead of stretching to 25% of a wide screen. They
   still grow/shrink responsively between ~150px and 240px. */
.container-fluid .row > .col-md-3 {
    flex: 1 1 150px;
    max-width: 240px;
}

/* Trim vertical rhythm inside the content area (Bootstrap utilities are
   scoped here so navbar/offcanvas chrome is left untouched). */
.container-fluid h1 { font-size: 1.45rem; }
.container-fluid .mb-4 { margin-bottom: 0.75rem !important; }
.container-fluid .mb-3 { margin-bottom: 0.4rem !important; }
.container-fluid .py-3 {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}
/* Bootstrap columns default to a 1rem gutter; tighten it for the content grid. */
.container-fluid .row {
    --bs-gutter-x: 1rem;
}

/* Sticky top navbar (hamburger + brand stay visible while scrolling). */
:root {
    --topnav-height: 3.25rem;
}
.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: var(--topnav-height);
}
/* Tighter gap under the top navbar. */
.navbar.mb-4 {
    margin-bottom: 0.75rem !important;
}

/* Activity detail header (title + nav/download controls) sticks just below the
   navbar so both stay visible. Opaque background so content scrolls under it. */
.activity-header-sticky {
    position: sticky;
    top: var(--topnav-height);
    z-index: 1020;
    background-color: #1a1d23;  /* matches body background */
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #2c3034;
}