body {
    
}

@media print {
    .no-print, .no-print * {
        display: none !important;
    }

    body {
        background-color: white;
    }

    .pagebreak {
        page-break-before: always;
    }

    .mud-main-content {
        background-color: white;
    }

    .mud-grid {
        background-color: white;
    }


    .mud-container {
        background-color: white;
    }
}

/*Fix for reconnect popup when app is in dark theme*/
#components-reconnect-modal {
    color: black !important;
}
.mud-button-outlined.mud-button-outlined-secondary {
    color: currentColor !important;
}

.mud-toggle-group-horizontal:not(.mud-toggle-group-rtl) > .mud-toggle-item:not(:first-child), .mud-toggle-group-horizontal:not(.mud-toggle-group-rtl) > :not(:first-child) .mud-toggle-item {
    margin-left: 4px;
}

/* Selected toggle item — visible background fill (primary colour at ~18% opacity) */
.mud-toggle-group .mud-toggle-item.mud-primary-text {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.18) !important;
}

/*For yellow color on validation page*/
.timevalidationgrid .mud-icon-button.ma-n3.pa-1 .mud-icon-root {
    color: var(--mud-palette-warning) !important;
}

/*For multi-line tooltips*/
.tooltip-multiline {
    white-space: pre-line;
}

/* This targets the <span> with class 'column-header' inside 
   the <th> with class 'mud-table-cell', where the whole grid 
   container has BOTH 'mud-data-grid' AND 'No-flex'. */
.mud-data-grid.No-flex .mud-table-cell .column-header {
    display: block !important;
}

/* Notification mention tags */
.mention-tag {
    color: var(--mud-palette-info);
    font-weight: 500;
    background-color: color-mix(in srgb, var(--mud-palette-info) 12%, transparent);
    border-radius: 4px;
    padding: 0 3px;
    cursor: default;
    user-select: text;
}

/* Tailwind-like outlined chips: subtle tinted background + soft border */
.mud-chip-outlined.mud-chip-color-primary {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
    border-color: rgba(var(--mud-palette-primary-rgb), 0.35);
}

.mud-chip-outlined.mud-chip-color-secondary {
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.12);
    border-color: rgba(var(--mud-palette-secondary-rgb), 0.35);
}

.mud-chip-outlined.mud-chip-color-tertiary {
    background-color: rgba(var(--mud-palette-tertiary-rgb), 0.12);
    border-color: rgba(var(--mud-palette-tertiary-rgb), 0.35);
}

.mud-chip-outlined.mud-chip-color-info {
    background-color: rgba(var(--mud-palette-info-rgb), 0.12);
    border-color: rgba(var(--mud-palette-info-rgb), 0.35);
}

.mud-chip-outlined.mud-chip-color-success {
    background-color: rgba(var(--mud-palette-success-rgb), 0.14);
    border-color: rgba(var(--mud-palette-success-rgb), 0.38);
}

.mud-chip-outlined.mud-chip-color-warning {
    background-color: rgba(var(--mud-palette-warning-rgb), 0.14);
    border-color: rgba(var(--mud-palette-warning-rgb), 0.38);
}

.mud-chip-outlined.mud-chip-color-error {
    background-color: rgba(var(--mud-palette-error-rgb), 0.12);
    border-color: rgba(var(--mud-palette-error-rgb), 0.35);
}

.mud-chip-outlined.mud-chip-color-dark {
    background-color: rgba(var(--mud-palette-dark-rgb), 0.10);
    border-color: rgba(var(--mud-palette-dark-rgb), 0.28);
}

.mud-chip-outlined.mud-clickable.mud-chip-color-primary:hover,
.mud-chip-outlined.mud-clickable.mud-chip-color-primary:focus-visible,
.mud-chip-outlined.mud-clickable.mud-chip-color-primary:active {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.18);
}

.mud-chip-outlined.mud-clickable.mud-chip-color-secondary:hover,
.mud-chip-outlined.mud-clickable.mud-chip-color-secondary:focus-visible,
.mud-chip-outlined.mud-clickable.mud-chip-color-secondary:active {
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.18);
}

.mud-chip-outlined.mud-clickable.mud-chip-color-tertiary:hover,
.mud-chip-outlined.mud-clickable.mud-chip-color-tertiary:focus-visible,
.mud-chip-outlined.mud-clickable.mud-chip-color-tertiary:active {
    background-color: rgba(var(--mud-palette-tertiary-rgb), 0.18);
}

.mud-chip-outlined.mud-clickable.mud-chip-color-info:hover,
.mud-chip-outlined.mud-clickable.mud-chip-color-info:focus-visible,
.mud-chip-outlined.mud-clickable.mud-chip-color-info:active {
    background-color: rgba(var(--mud-palette-info-rgb), 0.18);
}

.mud-chip-outlined.mud-clickable.mud-chip-color-success:hover,
.mud-chip-outlined.mud-clickable.mud-chip-color-success:focus-visible,
.mud-chip-outlined.mud-clickable.mud-chip-color-success:active {
    background-color: rgba(var(--mud-palette-success-rgb), 0.20);
}

.mud-chip-outlined.mud-clickable.mud-chip-color-warning:hover,
.mud-chip-outlined.mud-clickable.mud-chip-color-warning:focus-visible,
.mud-chip-outlined.mud-clickable.mud-chip-color-warning:active {
    background-color: rgba(var(--mud-palette-warning-rgb), 0.20);
}

.mud-chip-outlined.mud-clickable.mud-chip-color-error:hover,
.mud-chip-outlined.mud-clickable.mud-chip-color-error:focus-visible,
.mud-chip-outlined.mud-clickable.mud-chip-color-error:active {
    background-color: rgba(var(--mud-palette-error-rgb), 0.18);
}

.mud-chip-outlined.mud-clickable.mud-chip-color-dark:hover,
.mud-chip-outlined.mud-clickable.mud-chip-color-dark:focus-visible,
.mud-chip-outlined.mud-clickable.mud-chip-color-dark:active {
    background-color: rgba(var(--mud-palette-dark-rgb), 0.16);
}

.mud-theme-dark .mud-chip-outlined.mud-chip-color-primary,
.mud-theme-dark .mud-chip-outlined.mud-chip-color-secondary,
.mud-theme-dark .mud-chip-outlined.mud-chip-color-tertiary,
.mud-theme-dark .mud-chip-outlined.mud-chip-color-info,
.mud-theme-dark .mud-chip-outlined.mud-chip-color-success,
.mud-theme-dark .mud-chip-outlined.mud-chip-color-warning,
.mud-theme-dark .mud-chip-outlined.mud-chip-color-error,
.mud-theme-dark .mud-chip-outlined.mud-chip-color-dark {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* Tailwind-like outlined buttons */
/* Dev feedback 2026-07-24 — bouton secondaire (outlined primary) : fond blanc plutôt que le voile
   bleu à 10 %. La bordure + le texte bleus portent déjà l'affordance ; le voile alourdissait les
   rangées où plusieurs de ces boutons voisinent (registre des accès). var(--mud-palette-surface)
   plutôt que #fff : reste correct en thème sombre. Le survol garde le voile (feedback tactile). */
.mud-button-outlined.mud-button-outlined-primary {
    background-color: var(--mud-palette-surface);
}

.mud-button-outlined.mud-button-outlined-secondary {
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.10);
}

.mud-button-outlined.mud-button-outlined-info {
    background-color: rgba(var(--mud-palette-info-rgb), 0.10);
}

.mud-button-outlined.mud-button-outlined-success {
    background-color: rgba(var(--mud-palette-success-rgb), 0.11);
}

.mud-button-outlined.mud-button-outlined-warning {
    background-color: rgba(var(--mud-palette-warning-rgb), 0.11);
}

.mud-button-outlined.mud-button-outlined-error {
    background-color: rgba(var(--mud-palette-error-rgb), 0.10);
}

.mud-button-outlined.mud-button-outlined-primary:hover,
.mud-button-outlined.mud-button-outlined-primary:focus-visible,
.mud-button-outlined.mud-button-outlined-primary:active {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.16);
}

.mud-button-outlined.mud-button-outlined-secondary:hover,
.mud-button-outlined.mud-button-outlined-secondary:focus-visible,
.mud-button-outlined.mud-button-outlined-secondary:active {
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.16);
}

/* Alert text variant polish (closer to Tailwind default badges/alerts) */
.mud-alert-text-info {
    background-color: rgba(var(--mud-palette-info-rgb), 0.12);
}

.mud-alert-text-success {
    background-color: rgba(var(--mud-palette-success-rgb), 0.12);
}

.mud-alert-text-warning {
    background-color: rgba(var(--mud-palette-warning-rgb), 0.14);
}

.mud-alert-text-error {
    background-color: rgba(var(--mud-palette-error-rgb), 0.12);
}

/* Dark mode: make filled primary chips more legible and less pastel */
.mud-theme-dark .mud-chip-filled.mud-chip-color-primary {
    background-color: var(--mud-palette-primary-darken);
}

/* ═══════════════════════════════════════════════════════════
   OASIS UI COMPONENT LIBRARY — Shared Styles
   Used by UiDrawer, UiChildCard, UiSection, and page forms.
   ═══════════════════════════════════════════════════════════ */

/* ── Form label-above-input pattern ──────────────────────── */
.ui-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ui-form-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

/* ── Secondary hint text below a field or a section intro ─── */
.ui-form-hint {
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
    margin: 6px 0 0;
}

/* ── Panel section titles (uppercase grey) ────────────────── */
.ui-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-disabled);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Normalize input text inside drawers/panels ──────────── */
.ui-drawer .mud-input,
.ui-drawer .mud-input-text,
.ui-drawer .mud-input > input,
.ui-drawer .mud-select .mud-input,
.ui-drawer .mud-input-slot,
.ui-drawer textarea {
    font-weight: 400 !important;
    font-size: 0.9rem !important;
}

/* PreventionActivities forms: keep entered input text non-bold */
.fieldvisit-page .mud-input,
.fieldvisit-page .mud-input-text,
.fieldvisit-page .mud-input > input,
.fieldvisit-page .mud-input > textarea,
.fieldvisit-page .mud-input-slot,
.obs-page .mud-input,
.obs-page .mud-input-text,
.obs-page .mud-input > input,
.obs-page .mud-input > textarea,
.obs-page .mud-input-slot,
.ins-page .mud-input,
.ins-page .mud-input-text,
.ins-page .mud-input > input,
.ins-page .mud-input > textarea,
.ins-page .mud-input-slot,
.td-page .mud-input,
.td-page .mud-input-text,
.td-page .mud-input > input,
.td-page .mud-input > textarea,
.td-page .mud-input-slot,
.rmsst-page .mud-input,
.rmsst-page .mud-input-text,
.rmsst-page .mud-input > input,
.rmsst-page .mud-input > textarea,
.rmsst-page .mud-input-slot,
.evrdq-page .mud-input,
.evrdq-page .mud-input-text,
.evrdq-page .mud-input > input,
.evrdq-page .mud-input > textarea,
.evrdq-page .mud-input-slot,
.evrmsst-page .mud-input,
.evrmsst-page .mud-input-text,
.evrmsst-page .mud-input > input,
.evrmsst-page .mud-input > textarea,
.evrmsst-page .mud-input-slot {
    font-weight: 400 !important;
}

/* NonCompliance + CorrectiveAction forms: keep entered input text non-bold */
.noncompliance-mobile .mud-input,
.noncompliance-mobile .mud-input-text,
.noncompliance-mobile .mud-input > input,
.noncompliance-mobile .mud-input > textarea,
.noncompliance-mobile .mud-input-slot,
.corrective-action-mobile .mud-input,
.corrective-action-mobile .mud-input-text,
.corrective-action-mobile .mud-input > input,
.corrective-action-mobile .mud-input > textarea,
.corrective-action-mobile .mud-input-slot {
    font-weight: 400 !important;
}

/* iOS Safari auto-zooms inputs whose font-size is < 16px on focus.
   Bump touch-device input text to 16px to suppress the zoom. */
@media (pointer: coarse) {
    .fieldvisit-page .mud-input > input,
    .fieldvisit-page .mud-input > textarea,
    .fieldvisit-page .mud-input-slot,
    .obs-page .mud-input > input,
    .obs-page .mud-input > textarea,
    .obs-page .mud-input-slot,
    .ins-page .mud-input > input,
    .ins-page .mud-input > textarea,
    .ins-page .mud-input-slot,
    .td-page .mud-input > input,
    .td-page .mud-input > textarea,
    .td-page .mud-input-slot,
    .rmsst-page .mud-input > input,
    .rmsst-page .mud-input > textarea,
    .rmsst-page .mud-input-slot,
    .evrdq-page .mud-input > input,
    .evrdq-page .mud-input > textarea,
    .evrdq-page .mud-input-slot,
    .evrmsst-page .mud-input > input,
    .evrmsst-page .mud-input > textarea,
    .evrmsst-page .mud-input-slot {
        font-size: 16px !important;
    }
}

/* ── Inline form (white inputs over tinted bg) ───────────── */
.ui-inline-form {
    border: 1.5px dashed var(--mud-palette-primary);
    border-radius: var(--mud-default-borderradius);
    padding: 18px;
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface)) !important;
}

/* Keep inline form container only; let MudBlazor inputs render natively */

/* ── Soft cancel button ──────────────────────────────────── */
.ui-btn-cancel {
    border-color: var(--mud-palette-lines-default) !important;
    color: var(--mud-palette-text-secondary) !important;
}

/* ── Action button — primary on hover ────────────────────── */
.ui-btn-action:hover {
    color: var(--mud-palette-primary) !important;
    opacity: 1 !important;
}

/* ── TextFieldAI adornment — match icon button size, primary on hover ── */
.mud-input-adornment-end .mud-icon-button {
    color: var(--mud-palette-text-secondary);
}

.mud-input-adornment-end .mud-icon-button:hover {
    color: var(--mud-palette-primary) !important;
}

/* All buttons — squarer radius */
.mud-button {
    border-radius: 6px !important;
}

/* ── Delete button — red on hover ────────────────────────── */
.ui-btn-delete:hover {
    color: var(--mud-palette-error) !important;
    opacity: 1 !important;
}

/* ── Number/ID badge (rectangular) ───────────────────────── */
.ui-id-badge {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ── Normal-case button (no uppercase transform) ────────── */
.ui-btn-normal-case {
    text-transform: none;
}

/* ── Completion justification box ───────────────────────── */
.ui-completion-box {
    border-radius: 8px;
    background: var(--mud-palette-background-grey);
}
.ui-completion-box--valid {
    border: 2px solid var(--mud-palette-success);
}
.ui-completion-box--pending {
    border: 2px dashed var(--mud-palette-warning);
}

/* ── Sticky grid header under the sticky tab band (≥960px) ── */
:root {
    --ui-sticky-tab-band-height: 65px; /* the tab band's 64px row + its 1px border */
    --ui-sticky-grid-header-top: calc(var(--mud-appbar-height, 64px) + var(--ui-sticky-tab-band-height));
}

/* ── Sticky footer action bar ────────────────────────────── */
:root {
    --ui-sticky-footer-height: 65px; /* 14px top + ~36px button + 14px bottom + 1px border */
    --ui-sticky-footer-gap: 8px;     /* breathing room between content and footer */
}
/* SC-1580 — le footer est position:fixed, donc il recouvre tout ce qui tombe dans ses
   derniers ~65px, quelle que soit la position de scroll (le padding-bottom du conteneur
   ne protège que la toute fin de la page, pas un champ au milieu). scroll-padding-bottom
   ne change rien visuellement : il ne fait qu'ajuster où le navigateur s'arrête quand
   quelque chose déclenche un scroll (scrollIntoView vers une erreur de validation,
   navigation clavier, ancre) pour que la cible ne finisse jamais cachée derrière le
   footer. Portée par :has() aux seules pages qui ont un .ui-sticky-footer — aucun effet
   sur les pages sans footer collant. */
html:has(.ui-sticky-footer) {
    scroll-padding-bottom: calc(var(--ui-sticky-footer-height) + var(--ui-sticky-footer-gap));
}
.ui-sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--ui-sticky-footer-height);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    z-index: 1100;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}
.ui-sticky-footer .mud-button-root {
    padding: 8px 32px;
}
@media (max-width: 480px) {
    .ui-sticky-footer {
        padding: 10px 8px;
        gap: 6px;
        justify-content: center;
    }
    .ui-sticky-footer .mud-button-root {
        padding: 6px 14px;
        min-width: 0;
    }
}


/* ── UiToggleSearchBlock Component ───────────────────────── */
.ui-toggle-search-block {
    position: relative;
    width: 100%;
}
.ui-toggle-search-row {
    border: 1px solid var(--mud-palette-primary);
    border-radius: var(--mud-default-borderradius);
    padding: 0 4px;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
}
.ui-toggle-search-row .mud-input {
    background-color: transparent !important;
}
.ui-toggle-search-row .mud-input-outlined-border {
    border: none !important;
}

/* ── Drawer backdrop blur shared style ────────────────────── */
.ui-drawer-blur-wrapper .mud-drawer-overlay {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background-color: rgba(15, 23, 42, 0.28) !important;
}

/* ── Dark Mode: titres éclatants (slate-50) malgré TextPrimary adouci ── */
.mud-theme-dark h1,
.mud-theme-dark h2,
.mud-theme-dark h3,
.mud-theme-dark h4,
.mud-theme-dark h5,
.mud-theme-dark h6,
.mud-theme-dark .mud-typography-h1,
.mud-theme-dark .mud-typography-h2,
.mud-theme-dark .mud-typography-h3,
.mud-theme-dark .mud-typography-h4 {
    color: #f8fafc !important; /* slate-50 — les titres restent brillants */
}

/* ── Prose: limite la largeur de lecture pour le confort visuel ── */
.document-prose {
    max-width: 65ch;
}

/* ── MudDateRangePicker — fonce la couleur de sélection entre deux dates ──
   Override de la couleur seulement, en conservant la formule background-size
   de MudBlazor `calc(100% * (var(--selected-day) - var(--day-id)))` qui filtre
   visuellement les cellules HORS range (sinon le tint déborde sur les cellules
   après la date de fin). N'affecte ni le hover ni les bornes start/end. */
.mud-range-selection:not(:hover):not(.mud-range-start-selected):not(.mud-range-end-selected) {
    background: linear-gradient(
        color-mix(in srgb, var(--mud-palette-primary) 22%, transparent) 100%,
        color-mix(in srgb, var(--mud-palette-primary) 22%, transparent) 100%,
        transparent 0%
    ) !important;
}

/* Report dashboard charts (oasis-charts.js) — rendered inside a MarkupString, so global. */
.oasis-chart {
    position: relative;
    width: 100%;
    height: 340px;
}

/* The drawing surface (first child; the tooltip is the second) goes out of the flow, so a drawn
   chart never holds its column at its old width while the window shrinks. */
.oasis-chart > div:first-child {
    position: absolute !important;
    inset: 0;
}

.oasis-chart-error {
    color: var(--mud-palette-error);
}

/* Report dashboard — banner, panel and card shared by the dashboard templates (partials in
   Oasis.Common/Reports/DashboardPartials.cs), rendered inside a MarkupString, so global. */
.dash-wrap { container-type: inline-size; }
.dash-banner { font-family: 'Public Sans', Roboto, sans-serif; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: 'lead nav meta'; align-items: center; gap: 8px 16px; background: #622128; color: #FFFFFF; padding: 8px 16px; border-radius: 8px; margin-bottom: 12px; }
.dash-banner-lead { grid-area: lead; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-width: 0; }
.dash-banner-area { font-size: 13px; font-weight: 600; letter-spacing: 0.2em; opacity: 0.85; text-transform: uppercase; }
.dash-banner-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.dash-banner-variant { font-weight: 400; opacity: 0.85; }
.dash-banner-meta { grid-area: meta; justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 16px; }
.dash-banner-month { font-weight: 700; }
.dash-banner-note { opacity: 0.85; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.4); }
.dash-nav { grid-area: nav; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dash-nav a { padding: 3px 12px; border-radius: 5px; background: rgba(255, 255, 255, 0.14); color: #FFFFFF; text-decoration: none; font-size: 13px; white-space: nowrap; }
.dash-nav a:hover { background: rgba(255, 255, 255, 0.28); }
.dash-nav a[aria-current="page"] { background: #FFFFFF; color: #622128; font-weight: 700; }
/* Too narrow for the period and the note side by side around centred buttons: stack them on the right. */
@container (min-width: 1300px) and (max-width: 1599px) {
    .dash-banner-meta { flex-direction: column; align-items: flex-end; gap: 0; text-align: right; }
    .dash-banner-note { padding-left: 0; border-left: 0; }
}
@container (max-width: 1299px) {
    .dash-banner { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'lead meta' 'nav nav'; }
    .dash-nav { justify-content: flex-end; }
}
@container (max-width: 700px) {
    .dash-banner { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'lead' 'meta' 'nav'; }
    .dash-banner-meta { justify-self: start; justify-content: flex-start; }
    .dash-nav { justify-content: flex-start; }
}
/* Under 960 px the buttons are for a gloved thumb: 48 px high, 8 px apart, a visible border when not chosen,
   spread over equal columns so the row wraps evenly rather than at random. */
@media (max-width: 959.98px) {
    .dash-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; justify-content: stretch; }
    .dash-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 6px; border: 1px solid rgba(255, 255, 255, 0.6); }
}
/* Four buttons do not fit one row on a phone: two rows of two, never three and one. */
@media (max-width: 520px) {
    .dash-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dash-card { background: #FFFFFF; border-radius: 8px; padding: 12px; }
.dash-panel { background: #FFFFFF; border-radius: 8px; padding: 8px; font-size: 13.5px; }
.dash-sec { background: #EFE9EA; color: #622128; font-weight: 700; text-align: center; padding: 5px 0; margin: 8px 0 2px; font-size: 14px; }
.dash-sec:first-child { margin-top: 0; }
.dash-blk { padding: 4px; border-bottom: 1px solid #E1DFDD; }
.dash-row { display: flex; justify-content: space-between; line-height: 1.55; }
.dash-row span:last-child { font-variant-numeric: tabular-nums; }
.dash-main { font-weight: 700; }

/* Public Sans 5.3.0 (fontsource, SIL OFL 1.1 — lib/fonts/public-sans/LICENSE), latin subset, for report dashboards. */
@font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url("lib/fonts/public-sans/public-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url("lib/fonts/public-sans/public-sans-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url("lib/fonts/public-sans/public-sans-latin-700-normal.woff2") format("woff2");
}