/* Project-wide utilities that extend Bootstrap's naming conventions. */
.bg-primary {
    background-color: var(--primary) !important;
}

.bg-secondary {
    background-color: var(--secondary) !important;
}

.bg-accent {
    background-color: var(--accent) !important;
}

.bg-data-missing-light {
    background-color: var(--data-missing-light) !important;
}

.bg-data-missing-excused-light {
    background-color: var(--data-missing-excused-light) !important;
}

.bg-data-error-light {
    background-color: var(--data-error-light) !important;
}

.bg-within-range {
    background-color: rgba(166, 160, 147, 0.15) !important;
}

.bg-dark-translucent {
    background-color: rgba(20, 30, 24, 0.62) !important;
}

.border-dashed {
    border-style: dashed !important;
}

.fs-1 { font-size: 2.5rem !important; }
.fs-2 { font-size: 2rem !important; }
.fs-3 { font-size: 1.75rem !important; }
.fs-4 { font-size: 1.5rem !important; }
.fs-5 { font-size: 1.25rem !important; }
.fs-6 { font-size: 1rem !important; }
.fs-8 { font-size: 0.65rem !important; }
.fs-10 { font-size: 0.5rem !important; }
.small { font-size: 0.875rem !important; }
.rounded-1 { border-radius: 0.25rem !important; }
.min-w-0 { min-width: 0 !important; }
.min-h-0 { min-height: 0 !important; }
.w-fit { width: fit-content !important; }
.w-max { width: max-content !important; }
.place-items-center { place-items: center !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.font-tabular { font-variant-numeric: tabular-nums !important; }

.pill {
    display: inline-block;
    width: 1.15rem;
    height: 0.25rem;
    border-radius: 0.25rem;
}

.pill-lg {
    width: 2.5rem;
    height: 0.5rem;
}

/* The navbar has its own dark scope on an otherwise light page. Only reinterpret
   bg-white when the whole document is genuinely using the legacy dark theme. */
:root[data-bs-theme="dark"] .bg-white {
    background-color: var(--light) !important;
}

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

/* Two-rem spacing between Bootstrap’s 1.5rem and 3rem gap steps. */
.gap-2rem { gap: 2rem !important; }

/* Center a grid item in its column; used by the overview legend glyphs. */
.justify-self-center { justify-self: center; }