html, body {
    background-color: #f4f6f9;
}

[data-bs-theme="dark"] html,
[data-bs-theme="dark"] body {
    background-color: #15181c;
}

/*
 * Bootstrap's own components (.card, .card-header, .modal, etc.) already
 * repaint correctly for [data-bs-theme="dark"] via CSS variables. But the
 * .bg-light / .table-light utility classes used throughout this app's
 * templates (card headers, table headers) are hardcoded light colors with
 * !important in Bootstrap itself and are never redefined for dark mode -
 * without this override they stay bright white/gray bars on an otherwise
 * dark page. Badges combining bg-light with text-dark (small pill labels)
 * are intentionally left alone; they read fine as light chips on a dark
 * page and darkening them would leave their dark text unreadable.
 */
[data-bs-theme="dark"] .card-header.bg-light {
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > * {
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: var(--bs-secondary-bg);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-hover-bg: var(--bs-secondary-bg);
    --bs-table-hover-color: var(--bs-body-color);
}

[data-bs-theme="dark"] .bg-white {
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] div.bg-light {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color);
}

/* Navbar active tab */
.active-tab {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* Small uppercase field labels */
.info-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    margin-bottom: 2px;
}

/* Call navigator (prev/next arrows + counter) */
.call-navigator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Service record navigator — same layout as .call-navigator above */
.service-navigator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Highlights the service record currently shown in the focused card, when
   scanning the full history list below it. */
.list-group-item-action.active-record {
    background-color: #eef4ff;
    border-left: 3px solid #0d6efd;
}

[data-bs-theme="dark"] .list-group-item-action.active-record {
    background-color: var(--bs-tertiary-bg);
    border-left: 3px solid #0d6efd;
}

/* Make the notes textarea a decent height */
#id_notes {
    min-height: 220px;
}