/* DataLookout dashboard -- utilities (C2b step 5, 2026-11-02). Needs tokens.css.
   The Bootstrap utility classes the templates and JS still use, by the same names (Paul, 2026-11-02:
   "own small utility sheet, same names"), with Bootstrap's `!important` semantics and its spacing scale
   (1 = .25rem, 2 = .5rem, 3 = 1rem, 4 = 1.5rem, 5 = 3rem); colours map to tokens. Add a class here
   only when a template needs it; the set is the measured one, not the framework's. */

/* Spacing */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.p-0 { padding: 0 !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }

/* Layout */
.d-flex { display: flex !important; }
.d-inline-block { display: inline-block !important; }
.flex-wrap { flex-wrap: wrap !important; }
.gap-2 { gap: 0.5rem !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-self-center { align-self: center !important; }
.align-baseline { vertical-align: baseline !important; }
.w-100 { width: 100% !important; }
.position-relative { position: relative !important; }
.border { border: 1px solid var(--dl-rule) !important; }

/* Text */
.text-center { text-align: center !important; }
.text-muted { color: var(--dl-ink-3) !important; }
.text-dark { color: var(--dl-ink-1) !important; }
.text-decoration-none { text-decoration: none !important; }
.fw-medium { font-weight: 500 !important; }
.fs-5 { font-size: 1.25rem !important; }
.h3 { font-size: calc(1.3rem + 0.6vw); }
@media (min-width: 1200px) { .h3 { font-size: 1.75rem; } }

/* Surfaces (the badge count chips override these in components.css) */
.bg-secondary { background-color: var(--dl-panel-2) !important; }
.bg-light { background-color: var(--dl-panel-2) !important; }
.bg-warning { background-color: var(--dl-notable-tint) !important; }

/* Accessibility */
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* The page container: Bootstrap's widths, kept so no page moves (max 1320px at >= 1400px). */
.container { width: 100%; padding-right: 0.75rem; padding-left: 0.75rem; margin-right: auto; margin-left: auto; }
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }