/* _content/MHC.Web/Components/Layout/DashboardLayout.razor.rz.scp.css */
.dashboard-background[b-up4ui69dix] {
    background: linear-gradient(135deg, #f7f9fa 0%, #e9ecef 100%);
}
:root[b-up4ui69dix] {
    --dashboard-header-h: 5vh;
    --dashboard-header-metrics-h: 8vh;
    --dashboard-footer-h: 5vh;
}

/* Full viewport fixed container (same pattern used in Bed pages) */
.dashboard-root[b-up4ui69dix] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    box-sizing: border-box;
}

/* Header, KPI row and footer sizing (centralized) */
.dashboard-root > .page-header[b-up4ui69dix] {
    flex: 0 0 var(--dashboard-header-h);
    min-height: var(--dashboard-header-h);
    max-height: var(--dashboard-header-h);
    box-sizing: border-box;
}

.dashboard-root > .header-metrics[b-up4ui69dix] {
    flex: 0 0 var(--dashboard-header-metrics-h);
    min-height: var(--dashboard-header-metrics-h);
    max-height: var(--dashboard-header-metrics-h);
    box-sizing: border-box;
}

/* Main area gets remaining height (100vh - header - header-metrics - footer) */
.dashboard-root > main[b-up4ui69dix],
.dashboard-root > .content-main[b-up4ui69dix] {
    flex: 0 0 calc(100vh - (var(--dashboard-header-h) + var(--dashboard-header-metrics-h) + var(--dashboard-footer-h)));
    height: calc(100vh - (var(--dashboard-header-h) + var(--dashboard-header-metrics-h) + var(--dashboard-footer-h)));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.25rem 0.5rem;
    box-sizing: border-box;
}

/* Footer fixed height */
.dashboard-root > footer[b-up4ui69dix],
.dashboard-root > .app-footer[b-up4ui69dix] {
    flex: 0 0 var(--dashboard-footer-h);
    min-height: var(--dashboard-footer-h);
    max-height: var(--dashboard-footer-h);
    box-sizing: border-box;
}

/* --- Global overrides (ensure all pages use the dashboard heights) --- */
/* Use :global so these rules are truly global even with Blazor CSS isolation */
:global(.page-header)[b-up4ui69dix] {
  min-height: var(--dashboard-header-h) !important;
  max-height: var(--dashboard-header-h) !important;
  height: var(--dashboard-header-h) !important;
  box-sizing: border-box;
}

:global(.header-metrics)[b-up4ui69dix] {
  min-height: var(--dashboard-header-metrics-h) !important;
  max-height: var(--dashboard-header-metrics-h) !important;
  height: var(--dashboard-header-metrics-h) !important;
  box-sizing: border-box;
}

:global(footer)[b-up4ui69dix],
:global(.app-footer)[b-up4ui69dix],
:global(.page-footer)[b-up4ui69dix] {
  min-height: var(--dashboard-footer-h) !important;
  max-height: var(--dashboard-footer-h) !important;
  height: var(--dashboard-footer-h) !important;
  box-sizing: border-box;
}

/* Ensure body reserves footer space (overrides page-level attempts to set smaller value) */
:global(body)[b-up4ui69dix] {
  padding-bottom: var(--dashboard-footer-h) !important;
}

/* Small-screen adjustments */
@media (max-width: 480px) {
    .dashboard-root > .header-metrics .metric-item[b-up4ui69dix] {
        max-width: 100%;
        flex: 1 1 auto;
    }
}
/* _content/MHC.Web/Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-ebxv7lurgz] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ebxv7lurgz] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/MHC.Web/Components/Pages/Dashboards/Bed/BedManagement.razor.rz.scp.css */
/* =========================================================
   Bed Management Dashboard (scoped CSS for BedManagement.razor)
   ========================================================= */

/* ---------------------------------------------------------
   1. Layout / Structural Blocks
   --------------------------------------------------------- */
.Totals[b-8dyt7c7no6] {
    display: grid;
    width: 100%;
    gap: 1.2rem;
    margin-bottom: 0.1rem;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    min-height: 120px;
}

    .Totals > *[b-8dyt7c7no6] {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

.bed-dashboard-title[b-8dyt7c7no6] {
    font-weight: 600;
    letter-spacing: .5px;
    margin-bottom: .5rem;
    color: var(--text-primary);
    text-transform: none;
}

/* ---------------------------------------------------------
   Facility grid: 2 rows x 6 columns
   --------------------------------------------------------- */
.facility-grid[b-8dyt7c7no6] {
    display: grid;
    width: 100%;
    box-sizing: border-box;
    gap: 0.1rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: minmax(180px, auto);
    align-items: start;
    justify-items: stretch;
    padding: 0.2rem;
    margin: 0.1rem 0;
}

/* Each cell holds a facility card */
.facility-cell[b-8dyt7c7no6] {
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    box-sizing: border-box;
}

/* Make FacilityCard fill its cell */
.facility-cell > .facility-card[b-8dyt7c7no6],
.facility-grid .facility-card[b-8dyt7c7no6] {
    width: 100%;
    height: 100%;
    min-width: 0; /* override previous min-width */
    box-sizing: border-box;
}

/* Responsive fallbacks: keep layout sensible on smaller viewports */
@media (max-width: 1200px) {
    .facility-grid[b-8dyt7c7no6] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* reduced slightly from 200 -> 160 */
    .facility-grid[b-8dyt7c7no6] { grid-auto-rows: minmax(160px, auto); }
}

@media (max-width: 900px) {
    .facility-grid[b-8dyt7c7no6] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* reduced slightly from 180 -> 140 */
    .facility-grid[b-8dyt7c7no6] { grid-auto-rows: minmax(140px, auto); }
}

@media (max-width: 600px) {
    .facility-grid[b-8dyt7c7no6] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* reduced slightly from 160 -> 120 */
    .facility-grid[b-8dyt7c7no6] { grid-auto-rows: minmax(120px, auto); }
}

@media (max-width: 420px) {
    .facility-grid[b-8dyt7c7no6] { grid-template-columns: 1fr; grid-auto-rows: minmax(110px, auto); }
}

/* ---------------------------------------------------------
   2. Charts Containers
   --------------------------------------------------------- */
.dashboard-container[b-8dyt7c7no6] {
    display: flex;
    flex-direction: row;
    gap: 0.3rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #ccc #f9f9f9;
    padding: 0.1rem;
    margin: 0.1rem;
    min-height: 260px;
}

/* slightly reduced default to match grid rows */
.facility-card[b-8dyt7c7no6] {
    /* keep defaults for non-grid contexts; overridden inside .facility-grid */
    min-width: 340px;
    min-height: 180px;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------
   3. Charts Containers
   --------------------------------------------------------- */
.charts-row[b-8dyt7c7no6] {
    display: flex;
    flex-direction: row;
    gap: 0.3rem;
    width: 100%;
    align-items: stretch;
    min-height: 340px;
}

.donut-class[b-8dyt7c7no6],
.line-class[b-8dyt7c7no6],
.bar-class[b-8dyt7c7no6] {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    min-height: 320px;
    width: 100%;
    height: 100%;
}

.control-section[b-8dyt7c7no6] {
    width: 100%;
    height: 100%;
}

/* ---------------------------------------------------------
   4. Scrollbars (Light Theme Defaults)
   --------------------------------------------------------- */
.dashboard-container[b-8dyt7c7no6]::-webkit-scrollbar {
    height: 10px;
}

.dashboard-container[b-8dyt7c7no6]::-webkit-scrollbar-track {
    background: var(--bs-body-bg);
}

.dashboard-container[b-8dyt7c7no6]::-webkit-scrollbar-thumb {
    background: var(--bs-border-color);
    border-radius: 6px;
}

    .dashboard-container[b-8dyt7c7no6]::-webkit-scrollbar-thumb:hover {
        background: var(--surface-border);
    }

    /* ---------------------------------------------------------
       5. Dark Theme Overrides
       --------------------------------------------------------- */
    [data-theme="dark"] .bed-dashboard[b-8dyt7c7no6] {
        --bd-scrollbar-track: var(--surface-alt, #1c242c);
        --bd-scrollbar-thumb: var(--surface-border, #2f3a45);
        --bd-scrollbar-thumb-hover: var(--neutral-300, #4b5661);
    }

    [data-theme="dark"] .bed-dashboard-title[b-8dyt7c7no6] {
        color: var(--text-primary);
    }

    [data-theme="dark"] .dashboard-container[b-8dyt7c7no6] {
        scrollbar-color: var(--bd-scrollbar-thumb) var(--bd-scrollbar-track);
        background: linear-gradient(145deg, rgba(255,255,255,0.015) 0%, rgba(255,255,255,0.03) 60%, rgba(255,255,255,0.015) 100%);
        border-radius: var(--radius-lg, 0.9rem);
        backdrop-filter: blur(2px);
    }

    [data-theme="dark"] .charts-row[b-8dyt7c7no6] {
        background: linear-gradient(160deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.03) 55%, rgba(255,255,255,0.015) 100%);
        border-radius: var(--radius-lg, 0.9rem);
        padding: .25rem;
    }

    /* Dark theme scrollbar (WebKit) */
    [data-theme="dark"] .dashboard-container[b-8dyt7c7no6]::-webkit-scrollbar-track {
        background: var(--bd-scrollbar-track);
    }

    [data-theme="dark"] .dashboard-container[b-8dyt7c7no6]::-webkit-scrollbar-thumb {
        background: var(--bd-scrollbar-thumb);
    }

        [data-theme="dark"] .dashboard-container[b-8dyt7c7no6]::-webkit-scrollbar-thumb:hover {
            background: var(--bd-scrollbar-thumb-hover);
        }

    /* ---------------------------------------------------------
       6. Syncfusion Chart Integration / Theming
       --------------------------------------------------------- */

    /* Base (light + dark) chart surface & plot */
    .bed-dashboard .e-chart[b-8dyt7c7no6],
    .bed-dashboard .e-accumulationchart[b-8dyt7c7no6] {
        background: var(--chart-surface) !important;
    }

        .bed-dashboard .e-chart .e-chart-background[b-8dyt7c7no6] {
            fill: var(--chart-plot) !important;
            stroke: var(--chart-plot) !important;
        }

        .bed-dashboard .e-accumulationchart .e-accumulationchart-background[b-8dyt7c7no6] {
            fill: var(--chart-surface) !important;
            stroke: var(--chart-surface) !important;
        }

    /* Dark theme text & tooltip */
    [data-theme="dark"] .e-chart svg text[b-8dyt7c7no6],
    [data-theme="dark"] .e-accumulationchart svg text[b-8dyt7c7no6] {
        fill: var(--text-primary) !important;
    }

    [data-theme="dark"] .e-tooltip[b-8dyt7c7no6] {
        background: var(--surface-elevated, #232d37) !important;
        color: var(--text-primary) !important;
        border-color: var(--surface-border, #2f3a45) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.55) !important;
    }

    [data-theme="dark"] .e-legend[b-8dyt7c7no6],
    [data-theme="dark"] .e-legend-item[b-8dyt7c7no6] {
        fill: var(--text-secondary) !important;
    }

    /* Grid / axis tint */
    [data-theme="dark"] .bed-dashboard .e-chart .e-gridlines .e-line[b-8dyt7c7no6],
    [data-theme="dark"] .bed-dashboard .e-chart .e-axis-line[b-8dyt7c7no6] {
        stroke: var(--surface-border) !important;
        opacity: .7;
    }

    /* Title (cartesian + accumulation) */
    .bed-dashboard :is(.e-chart-title, .e-accumulationchart-title)[b-8dyt7c7no6],
    .bed-dashboard :is(.e-chart-title, .e-accumulationchart-title) tspan[b-8dyt7c7no6] {
        fill: var(--text-primary) !important;
        color: var(--text-primary) !important;
        font-weight: 600;
        letter-spacing: .25px;
        stroke: none !important;
    }

    /* Stack labels & data labels (theme aware)
       .e-stacklabel = total labels on stacked series
       .e-datalabel = individual point labels
    */
    .bed-dashboard :is(.e-stacklabel, .e-datalabel)[b-8dyt7c7no6],
    .bed-dashboard :is(.e-stacklabel, .e-datalabel) tspan[b-8dyt7c7no6] {
        fill: var(--text-primary) !important;
        color: var(--text-primary) !important;
        font-weight: 500;
        stroke: none !important;
    }

    /* Axis labels (optional – unify) */
    .bed-dashboard .e-chart .e-axis-labels text[b-8dyt7c7no6] {
        fill: var(--text-primary) !important;
        color: var(--text-primary) !important;
    }

    /* Legend text (ensure readable in both themes) */
    .bed-dashboard .e-legend .e-legend-text[b-8dyt7c7no6] {
        fill: var(--text-secondary) !important;
        color: var(--text-secondary) !important;
    }

    [data-theme="dark"] .bed-dashboard .e-legend .e-legend-text[b-8dyt7c7no6] {
        fill: var(--text-secondary) !important;
        color: var(--text-secondary) !important;
    }
/* _content/MHC.Web/Components/Pages/Dashboards/Bed/Beds.razor.rz.scp.css */
.Totals[b-f1lqqz0z95] {
    display: grid;
    width: 100%;
    gap: 2rem;
    margin-bottom: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    min-height: 140px; /* Reserve space for totals cards */
}

    .Totals > *[b-f1lqqz0z95] {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

.dashboard-container[b-f1lqqz0z95] {
    display: flex;
    flex-direction: row;
    gap: 0.2rem; /* Reduced gap for more space */
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scrollbar-width: thin;
    scrollbar-color: var(--bs-border-color) var(--bs-body-bg);
    padding: 0.2rem;
    margin: 0.2rem;
    min-height: 300px; /* Reserve space for facility cards */
}

.facility-card[b-f1lqqz0z95] {
    min-width: 360px;
    min-height: 240px; /* Reserve vertical space */
    flex: 0 0 auto;
}

@media (max-width: 600px) {
    .Totals[b-f1lqqz0z95] {
        grid-template-columns: 1fr !important;
        gap: 0.7rem;
        min-height: 160px;
    }

    .dashboard-container[b-f1lqqz0z95] {
        flex-direction: column !important;
        gap: 0.7rem;
        min-height: 320px;
    }

    .facility-card[b-f1lqqz0z95] {
        min-width: 0;
        width: 100%;
        min-height: 200px;
    }

    .charts-row[b-f1lqqz0z95],
    .bubble-class[b-f1lqqz0z95], .line-class[b-f1lqqz0z95], .bar-class[b-f1lqqz0z95] {
        min-height: 250px;
    }
}

.charts-row[b-f1lqqz0z95] {
    display: flex;
    flex-direction: row;
    gap: 1.2rem;
    width: 100%;
    align-items: stretch;
    min-height: 400px; /* Reserve space for charts */
}

.bubble-class[b-f1lqqz0z95], .line-class[b-f1lqqz0z95], .bar-class[b-f1lqqz0z95] {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    min-height: 380px; /* Reserve space for each chart */
}

.control-section[b-f1lqqz0z95] {
    width: 100%;
    height: 100%;
}

/* _content/MHC.Web/Components/Pages/Dashboards/Emergency/Dashboards/MAKKAHEmergencyStatus.razor.rz.scp.css */
html[b-0ybes1kpk8], body[b-0ybes1kpk8] {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent both vertical and horizontal scrolling */
}

/* === Root Dashboard Container === */
.dashboard-root[b-0ybes1kpk8] {
    display: flex;
    flex-direction: column;
    height: 94vh; /* use full viewport height */
    background-color: var(--bs-body-bg);
    overflow: hidden;
}

/* === Header Section (replaced with grid-based layout) === */
.page-header[b-0ybes1kpk8] {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    column-gap: .5rem;
    min-height: 2.25rem;
    margin-bottom: .5rem;
}

    .page-header > *[b-0ybes1kpk8] {
        min-width: 0;
    }

    .page-header .page-title[b-0ybes1kpk8] {
        font-size: clamp(1rem, 1.8vw, 2rem);
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .page-header .header-widget[b-0ybes1kpk8] {
        font-size: clamp(.75rem, 1vw, .95rem);
        padding: clamp(.2rem, .5vw, .35rem) clamp(.4rem, .8vw, .6rem);
        color: var(--nav-text) !important;
        background: transparent;
        border-color: var(--surface-border);
    }

        .page-header .header-widget i[b-0ybes1kpk8] {
            color: var(--nav-text) !important;
        }

/* === KPI Row (8vh) === */
.dashboard-compact.first-row[b-0ybes1kpk8] {
    flex: 0 0 8vh;
    display: flex;
    align-items: center;
    justify-content: stretch; /* stretch children to fill the row */
    width: 100%; /* ensure the row takes full width */
    gap: 0.25rem; /* small gap between children */
    background-color: var(--bs-body-bg);
    padding: 0.05rem; /* tightened padding to match emergency rows */
    box-sizing: border-box;
}

    .dashboard-compact.first-row .row[b-0ybes1kpk8] {
        display: flex;
        width: 100%;
        gap: 0.25rem;
        align-items: stretch;
        margin: 0; /* remove bootstrap row negative margins that break exact fit */
    }

        /* Force direct column children to be equal-width flexible items */
        .dashboard-compact.first-row .row > [class*="col-"][b-0ybes1kpk8] {
            flex: 1 1 0;
            min-width: 0; /* allow shrinking to avoid overflow */
            display: flex;
            align-items: stretch;
            justify-content: center;
            padding-left: 0.15rem; /* keep some inner spacing but smaller than bootstrap default */
            padding-right: 0.15rem;
            box-sizing: border-box;
        }

            /* Ensure the MetricWidget (component) inside the column consumes full width */
            .dashboard-compact.first-row .row > [class*="col-"] > *[b-0ybes1kpk8] {
                width: 100%;
                display: flex;
                align-items: stretch;
            }

/* === Emergency Rows (2nd & 3rd rows) === */
.emergency-row[b-0ybes1kpk8] {
    flex: 1; /* make both rows share remaining height equally */
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    padding: 0.05rem; /* reduced padding to tighten vertical spacing */
    gap: 0.05rem; /* reduced gap between cards */
    background-color: var(--bs-body-bg);
    box-sizing: border-box;
    overflow: hidden;
}

    /* Reduce the extra top margin added by Bootstrap's mt-3 on the third row */
    .emergency-row.mt-3[b-0ybes1kpk8],
    .emergency-row + .emergency-row[b-0ybes1kpk8] {
        margin-top: 0.2rem !important; /* tightened spacing between the two emergency rows */
    }

/* Each emergency card wrapper fills evenly across width */
.emergency-card-wrapper[b-0ybes1kpk8] {
    flex: 1 1 18%; /* roughly 5 cards per row */
    min-width: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin: 0.05rem; /* reduced margin to tighten vertical/horizontal spacing */
    box-sizing: border-box;
}

/* === Footer (fixed at bottom, no scroll) === */
appfooter[b-0ybes1kpk8], .app-footer[b-0ybes1kpk8] {
    flex: 0 0 6vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-dark);
    color: var(--bs-light);
    padding: 0.2rem;
    box-sizing: border-box;
}

/* === Prevent overflow across components === */
.emergency-card-wrapper[b-0ybes1kpk8],
.emergency-row[b-0ybes1kpk8],
.dashboard-root[b-0ybes1kpk8] {
    overflow: hidden;
}

/* === Responsive tweaks for smaller screens === */
@media (max-width: 992px) {
    .dashboard-root[b-0ybes1kpk8] {
        overflow-y: auto; /* allow scroll if needed on small screens */
    }

    .emergency-row[b-0ybes1kpk8] {
        flex-wrap: wrap;
        flex: unset;
        height: auto;
    }

    .emergency-card-wrapper[b-0ybes1kpk8] {
        flex: 1 1 45%;
    }

    /* keep the tighter spacing on small screens as well */
    .emergency-row.mt-3[b-0ybes1kpk8],
    .emergency-row + .emergency-row[b-0ybes1kpk8] {
        margin-top: 0.15rem !important;
    }

    /* On medium/smaller screens allow KPI items to wrap and keep readable spacing */
    .dashboard-compact.first-row[b-0ybes1kpk8] {
        flex-wrap: wrap;
        gap: 0.15rem;
    }

        .dashboard-compact.first-row .row > [class*="col-"][b-0ybes1kpk8] {
            flex: 1 1 45%; /* two per row where space constrained */
        }
}

@media (max-width: 768px) {
    .page-header .page-title[b-0ybes1kpk8] {
        font-size: 1.4rem;
    }

    .dashboard-compact.first-row[b-0ybes1kpk8] {
        flex: 0 0 7vh;
    }

    .emergency-row[b-0ybes1kpk8] {
        flex: unset;
        height: auto;
    }

        /* slightly smaller top gap on very small screens */
        .emergency-row.mt-3[b-0ybes1kpk8],
        .emergency-row + .emergency-row[b-0ybes1kpk8] {
            margin-top: 0.12rem !important;
        }
}
/* _content/MHC.Web/Components/Shared/AppFooter.razor.rz.scp.css */
:global(:root)[b-pc6rbwovz0] {
    --app-footer-height: 2.4vh; /* must match EmergencyDashboard.css */
}

/* Fixed to bottom of viewport so footer always sits at end */
:global(.app-footer)[b-pc6rbwovz0] {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    height: var(--app-footer-height);
    min-height: var(--app-footer-height);
    width: 100%;
    margin: 0;
    padding: .02rem .06rem; /* tighter padding to reduce height */
    background: transparent;
    z-index: 1040;
    overflow-x: hidden;
}

/* Keep footer compact and centered content */
.app-footer[b-pc6rbwovz0] {
    flex: 0 0 var(--app-footer-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .02rem .06rem;
    border-top: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    background: transparent;
    height: var(--app-footer-height);
    min-height: var(--app-footer-height);
    box-sizing: border-box;
    margin: 0;
}

/* 3-zone responsive grid: left / center / right */
.app-footer .footer-content[b-pc6rbwovz0] {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .15rem;
    font-size: 1rem;
}
.app-footer .footer-left[b-pc6rbwovz0]   { justify-self: start; }
.app-footer .footer-center[b-pc6rbwovz0] { justify-self: center; }
.app-footer .footer-right[b-pc6rbwovz0]  { justify-self: end; }

/* Compact widgets */
.app-footer .footer-widget[b-pc6rbwovz0] {
    display: inline-flex;
    align-items: center;
    gap: .08rem;
    padding: .02rem .04rem;
    border-radius: .28rem;
    border: 1px solid var(--surface-border);
    background: transparent;
    color: var(--nav-text);
    user-select: none;
    min-height: calc(var(--app-footer-height) - 4px);
    min-width: 80px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}
.app-footer .footer-widget i[b-pc6rbwovz0] { color: var(--nav-text); }

/* Logo sizing: strict caps so it never overwhelms layout */
:global(.app-footer) .footer-logo[b-pc6rbwovz0],
.app-footer .footer-logo[b-pc6rbwovz0] {
    max-height: calc(var(--app-footer-height) * 0.6) !important;
    height: auto !important;
    width: auto !important;
    max-width: 100px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

/* Ensure images/SVG inside wrapper obey the wrapper caps */
:global(.app-footer) .footer-logo img[b-pc6rbwovz0],
:global(.app-footer) .footer-logo svg[b-pc6rbwovz0],
.app-footer .footer-logo img[b-pc6rbwovz0],
.app-footer .footer-logo svg[b-pc6rbwovz0] {
    height: auto !important;
    max-height: inherit !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
}

/* Mobile: caps */
@media (max-width: 576px) {
    :global(.app-footer)[b-pc6rbwovz0] {
        padding: .02rem .04rem;
    }
    .app-footer .footer-widget[b-pc6rbwovz0] {
        min-width: 70px;
        padding: .01rem .03rem;
    }
    :global(.app-footer) .footer-logo[b-pc6rbwovz0],
    .app-footer .footer-logo[b-pc6rbwovz0] {
        max-height: calc(var(--app-footer-height) * 0.5) !important;
        max-width: 90px !important;
    }
}

/* -------------------------
   Light-mode overrides (centralized values)
   Ensure timestamps/icons are dark in light mode
   ------------------------- */

/* Cover multiple theme approaches:
   - explicit .light on body
   - absence of a .dark class on html/body
   - user's system preference via prefers-color-scheme
*/

:global(body.light) .app-footer .footer-widget[b-pc6rbwovz0],
:global(body.light) .app-footer .footer-widget i[b-pc6rbwovz0],
:global(body.light) .app-footer .footer-widget span[b-pc6rbwovz0],
:global(html:not(.dark)) .app-footer .footer-widget[b-pc6rbwovz0],
:global(html:not(.dark)) .app-footer .footer-widget i[b-pc6rbwovz0],
:global(html:not(.dark)) .app-footer .footer-widget span[b-pc6rbwovz0],
:root[data-bs-theme="light"] .app-footer .footer-widget[b-pc6rbwovz0],
html[data-bs-theme="light"] .app-footer .footer-widget[b-pc6rbwovz0],
body[data-bs-theme="light"] .app-footer .footer-widget[b-pc6rbwovz0] {
    color: var(--text-primary) !important;
    border-color: rgba(0,0,0,.08) !important;
    background: rgba(255,255,255,0.02) !important;
}

/* ensure icons/timestamps inherit the widget color */
:global(body.light) .app-footer .footer-widget i[b-pc6rbwovz0],
:global(html:not(.dark)) .app-footer .footer-widget i[b-pc6rbwovz0],
:root[data-bs-theme="light"] .app-footer .footer-widget i[b-pc6rbwovz0] {
    color: inherit !important;
}

@media (prefers-color-scheme: light) {
    .app-footer .footer-widget[b-pc6rbwovz0],
    .app-footer .footer-widget i[b-pc6rbwovz0],
    .app-footer .footer-widget .footer-ts[b-pc6rbwovz0],
    .app-footer .footer-widget *[b-pc6rbwovz0] {
        color: var(--text-primary) !important;
        border-color: rgba(0,0,0,.08) !important;
        background: rgba(255,255,255,0.02) !important;
    }
}

/* Force timestamp/icon color in legacy selectors to inherit centralized tokens */
:global(body.light) :global(.app-footer) .footer-ts[b-pc6rbwovz0],
:global(html:not(.dark)) :global(.app-footer) .footer-ts[b-pc6rbwovz0] {
    color: var(--text-primary) !important;
}

:global(body.light) :global(.app-footer) .footer-widget *[b-pc6rbwovz0],
:global(html:not(.dark)) :global(.app-footer) .footer-widget *[b-pc6rbwovz0] {
    color: inherit !important;
}
/* _content/MHC.Web/Components/Shared/Dashboard Components/FacilityCard.razor.rz.scp.css */
/* FacilityCard – Light & Dark (responsive: fill parent height, scale circle, units use available space)
   Layout: header 15%, circle remaining, units 60%.
   Circle/gauge uses the same design as WardCard (viewBox 140, center 70, radius 52). */

.facility-card[b-hh6c2536md] {
    --fc-bg: var(--surface-alt,#ffffff);
    --fc-border: var(--surface-border,#e2e8f0);
    --fc-text: var(--text-primary,#2f3439);
    --fc-text-soft: var(--text-secondary,#5f6670);
    --fc-section-bg: var(--neutral-50,#f8f9fa);
    --fc-soft-bg: var(--neutral-75,#f5f6f8);
    --fc-box-bg: var(--neutral-100,#eceff2);
    --fc-box-text: var(--fc-text);
    --fc-progress-border: #8ec5fc;
    --fc-progress-start: #ff6fd8;
    --fc-progress-end: #8ec5fc;
    --fc-alert-red: #d50000;
    background: var(--fc-bg);
    border-radius: .75em;
    margin: 0 .04em .4rem; /* small bottom margin added */
    padding: .4rem;
    max-width: 95vw;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: min-content 1fr 47%;
    gap: .06em;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--fc-text);
    transition: background .25s, color .25s, border-color .25s;
}

/* Header row */
.facility-header[b-hh6c2536md],
.facility-header-row[b-hh6c2536md] {
    grid-row: 1;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: auto;
}

.facility-header[b-hh6c2536md] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    text-align: center;
    color: var(--fc-text);
}

    .facility-header[b-hh6c2536md]::after {
        content: "";
        display: block;
        width: 90%;
        height: 0.0625rem;
        margin: .2rem auto .2rem;
        background: var(--fc-border);
        opacity: .95;
    }

/* add divider styling (placed inside .facility-header-row) so it always appears immediately under the header content */
.facility-header-row[b-hh6c2536md] {
    position: relative; /* required for absolute-positioned divider */
}

/* thin horizontal line under header content */
.facility-divider[b-hh6c2536md] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.06rem; /* slight offset so it visually separates header from circle */
    height: 0.0625rem; /* 1px */
    background: var(--fc-border);
    opacity: 0.95;
    pointer-events: none;
    box-sizing: border-box;
}

/* Header: facility name left + right totals alignment */
.facility-header-left[b-hh6c2536md] {
    flex: 1 1 auto; /* allow name to take remaining space */
    font-size: clamp(1.15rem, 2.2vh, 1.45rem); /* larger, responsive font */
    font-weight: 600;
    text-align: left;
    color: var(--fc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: .35rem;
}

.facility-header-right[b-hh6c2536md] {
    margin-left: auto; /* push totals to the far right */
    /* size the whole right group to its content so the left title can shrink/ellipsis reliably */
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .25rem;
}

    /* ensure the inner container lays out badges inline and doesn't wrap */
    .facility-header-right .unit-details[b-hh6c2536md] {
        display: flex;
        gap: .25rem;
        align-items: center;
        white-space: nowrap;
    }

    /* make each numeric box shrink-to-fit, provide comfortable padding and prevent clipping */
    .facility-header-right .unit-details-box[b-hh6c2536md] {
        flex: 0 0 auto; /* shrink-to-fit, don't grow */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: .18rem .5rem; /* vertical + horizontal breathing room for digits */
        line-height: 1;
        white-space: nowrap;
        min-width: 2.2rem; /* ensures single-digit boxes still look good */
        min-height: calc(1em + .36rem);
        box-sizing: border-box;
        position: relative;
        z-index: 3; /* keep above header divider / ::after */
        overflow: visible;
        border-radius: .35rem;
        background: var(--fc-box-bg);
        color: var(--fc-box-text);
        font-weight: 600;
    }

/* Circle area (middle; WardCard-style gauge) */
.circle-container[b-hh6c2536md] {
    grid-row: 2;
    display: flex;
    /* center horizontally, allow child to control its height by using the full row height */
    align-items: center;
    justify-content: center;
    padding: 0; /* remove vertical padding so svg can occupy full row height */
    min-height: 0;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* make svg fill the container fully while preserving aspect ratio
   Use height:100% with width:auto so the SVG scales to the row height and remains square. */
.circle-progress[b-hh6c2536md] {
    height: 100%;
    width: auto;
    max-height: 100%;
    max-width: 100%;
    display: block;
    box-sizing: border-box;
}

    /* Keep a small visual inset so stroke is not clipped on some browsers.
   If you still see clipping, reduce stroke-width or add a tiny padding via viewBox or SVG CSS. */
    .circle-progress svg[b-hh6c2536md],
    .circle-progress > svg[b-hh6c2536md] {
        display: block;
    }

/* stroke sizing: keep vector-effect so stroke does not scale oddly */
.circle-bg[b-hh6c2536md],
.circle-fg[b-hh6c2536md] {
    vector-effect: non-scaling-stroke;
}

/* animation for arc */
.circle-fg[b-hh6c2536md] {
    transition: stroke-dashoffset .6s ease;
}

/* dot */
.circle-dot[b-hh6c2536md] {
    transition: transform .3s ease;
}

/* gauge text matched to WardCard; reduced slightly so it doesn't overflow sibling rows */
.gauge-text[b-hh6c2536md] {
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    /* made slightly smaller than before to avoid overlap with units row */
    font-size: clamp(1rem, 4.5vh, 2.6rem);
    dominant-baseline: middle;
    text-anchor: middle;
}

/* Units row */
.units-container[b-hh6c2536md] {
    grid-row: 3;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .1em;
    overflow: hidden;
    padding-top: .06rem;
    padding-bottom: .09rem;
    box-sizing: border-box;
}

/* Unit card: each card occupies one third of units-container */
.unit-card[b-hh6c2536md] {
    background: var(--fc-section-bg);
    border-radius: .5em;
    padding: .12em;
    margin: 0;
    display: grid;
    grid-template-columns: 2.6rem 1fr; /* left column reserved for rotated name */
    grid-template-rows: auto 1fr;      /* top row for boxes, bottom row for progress */
    gap: .2em;
    align-items: center;
    text-align: left;
    transition: background .25s;
    flex: 0 0 calc(100% / 3);
    height: calc(100% / 3);
    box-sizing: border-box;
    min-height: 0;
    overflow: visible;
}

/* Place the unit-name column and make it span both rows so it vertically centers */
.unit-info[b-hh6c2536md] {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .06em;
    box-sizing: border-box;
    height: 100%;
}

/* Rotated unit name — keep readable, clipped if too long */
.unit-name[b-hh6c2536md] {
    display: inline-block;
    transform: rotate(-90deg);
    transform-origin: center;
    white-space: nowrap;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1;
    max-width: 8.5rem;          /* visual clipping limit for long names */
    text-overflow: ellipsis;
    overflow: visible;          /* allow rotated text to be visible within the narrow column */
}

/* Ensure boxes stay in the right column top row (same design as before) */
.unit-details[b-hh6c2536md] {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    gap: .12em;
    margin-bottom: .02em;
    align-items: center;
}

/* Modern pill-style progress bar (track + fill + floating percent badge)
   Design matches screenshot: thin rounded border, gradient fill, left floating percent chip. */
.modern-progress-bar[b-hh6c2536md] {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    height: 1.6rem;
    background: transparent;
    border-radius: 999px; /* full round */
    border: 0.125rem solid var(--fc-progress-border);
    position: relative;
    overflow: hidden;
    margin: .02em 0 .02em;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0;
}

.modern-progress-fill[b-hh6c2536md] {
    height: 100%;
    width: var(--progress, 0%); /* set inline or via style attribute */
    border-radius: 999px; /* keep fill fully rounded */
    background: linear-gradient(90deg, var(--fc-progress-start), var(--fc-progress-end));
    transition: width .6s cubic-bezier(.4,2,.6,1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 -3px 6px rgba(0,0,0,0.18);
    overflow: hidden;
    box-sizing: border-box;
}

/* centered label inside the pill. If you prefer a floating left badge, add .badge-left */
.modern-progress-label[b-hh6c2536md] {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}

/* optional left-floating chip variant */
.modern-progress-bar .badge-left[b-hh6c2536md] {
    position: absolute;
    left: .35rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1;
    color: #fff;
    background: linear-gradient(90deg, var(--fc-progress-start), var(--fc-progress-end));
    box-shadow: 0 3px 8px rgba(0,0,0,0.24);
    border: 2px solid rgba(0,0,0,0.08);
    z-index: 3;
    white-space: nowrap;
}

/* alternative label style (small percent label above or inside track when needed) */
.modern-progress-bar .modern-progress-label[b-hh6c2536md] {
    display: inline-block;
    font-weight: 700;
    color: var(--fc-text);
    font-size: 1.1rem;
    margin-left: .2rem;
}

/* ensure progress-fill doesn't visually overflow rounded corners on some browsers */
.modern-progress-bar .progress-track[b-hh6c2536md],
.modern-progress-bar .progress-fill[b-hh6c2536md] {
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* workaround for antialiasing clipping */
}

/* Keep existing unit-details-box sizing and appearance — no changes required */
.unit-details-box[b-hh6c2536md] {
    flex: 1 1 0;
    background: var(--fc-box-bg);
    border-radius: .35em;
    padding: .14em .1em;
    text-align: center;
    font-size: .98rem;
    font-weight: 600;
    color: var(--fc-box-text);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 1.8em;
    line-height: 1.1;
    border: 0.125rem solid transparent;
    transition: background .25s, color .25s, border-color .25s;
}

/* Match WardCard border color / color for total, occupied, vacant boxes
   Keep existing sizing; only adjust border-color, border-style and text color. */
.unit-details-box-total[b-hh6c2536md] {
    border-color: #2d78d2; /* total - blue (matches WardCard) */
    border-style: solid;
    color: #2d78d2;
}

.unit-details-box-occupied[b-hh6c2536md] {
    border-color: #d9534f; /* occupied - red (matches WardCard .occ) */
    border-style: solid;
    color: #d9534f;
}

.unit-details-box-empty[b-hh6c2536md] {
    border-color: #5cb85c; /* vacant/empty - green (matches WardCard .vac) */
    border-style: solid;
    color: #5cb85c;
}

    /* Ensure inner text inherits the box color */
    .unit-details-box-total *[b-hh6c2536md],
    .unit-details-box-occupied *[b-hh6c2536md],
    .unit-details-box-empty *[b-hh6c2536md] {
        color: inherit;
    }

/* Dark theme overrides */
[data-theme="dark"] .facility-card[b-hh6c2536md] {
    --fc-bg: var(--surface-elevated,#232d37);
    --fc-section-bg: var(--surface-alt,#1c242c);
    --fc-soft-bg: var(--surface-muted,#161c22);
    --fc-box-bg: rgba(255,255,255,0.05);
    --fc-box-text: var(--text-primary,#e4e8ec);
    --fc-border: var(--surface-border,#2f3a45);
    --fc-text: var(--text-primary,#e4e8ec);
    --fc-text-soft: var(--text-secondary,#a8b2bc);
    --fc-progress-border: var(--color-primary-accent,#4592ff);
    --fc-progress-start: #ff6fd8;
    --fc-progress-end: #4592ff;
}

[data-theme="dark"] .unit-card[b-hh6c2536md] {
    background: var(--fc-section-bg);
}

[data-theme="dark"] .unit-details-box[b-hh6c2536md] {
    background: var(--fc-box-bg);
}

/* Mobile adjustments */
@media (max-width:37.5rem) {
    .facility-card[b-hh6c2536md] {
        padding: .3rem;
    }

    .facility-header[b-hh6c2536md],
    .facility-header-row[b-hh6c2536md] {
        height: auto;
    }

    .unit-card[b-hh6c2536md] {
        flex: 0 0 calc(100% / 3);
        height: calc(100% / 3);
    }

    .circle-container[b-hh6c2536md] {
        min-height: 6.5rem;
        align-items: center;
        padding: 0;
    }

    .unit-info[b-hh6c2536md] {
        font-size: .92rem;
    }

    .unit-details-box[b-hh6c2536md] {
        font-size: .9rem;
        min-height: 1.4em;
        padding: .08em .06em;
    }

    .modern-progress-label[b-hh6c2536md] {
        font-size: .8rem;
    }
}

/* Ensure header boxes fully contain the numbers and are not clipped */
.facility-header-right > *[b-hh6c2536md] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* more vertical room so digits never touch/overflow the box */
    padding: .18rem .5rem;
    line-height: 1;
    height: auto;
    min-height: calc(1em + .36rem);
    white-space: nowrap;
    box-sizing: border-box;
    overflow: visible;
    /* keep them above the header divider and any siblings */
    position: relative;
    z-index: 2;
    border-radius: .35rem;
    background: var(--fc-box-bg);
    color: var(--fc-box-text);
    font-weight: 600;
}

/* Slightly smaller padding on narrow viewports */
@media (max-width:37.5rem) {
    .facility-header-right > *[b-hh6c2536md] {
        padding: .12rem .32rem;
        min-height: calc(1em + .24rem);
        font-size: .95rem;
    }
}

/* Header-specific sizing fixes: ensure right-side boxes fully contain numbers */
.facility-header-row[b-hh6c2536md] {
    /* allow header children to overflow locally if needed (prevents clipping by the absolute divider) */
    overflow: visible;
}
/* _content/MHC.Web/Components/Shared/Dashboard Components/MetricCard.razor.rz.scp.css */
.metric-card[b-omekpnpuz9] {
    display: grid;
    /* 15% / 50% / 35% must sum to 100% with no extra row gap */
    grid-template-rows: 30% auto;
    gap: 0.1rem; /* was 0.5rem -> causes overflow with percent rows */
    height: 100%;
    padding: 0;
    border: 1px solid black;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    box-sizing: border-box;
    container-type: inline-size;
}

.mc-title[b-omekpnpuz9] {
    font-weight: 600;
    color: black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    font-size: clamp(1rem, 2cqw, 1.05rem);
    padding: 0.5rem; /* keep padding for title only */
}

/* Percent row with layered smooth waves like the screenshot */
.mc-percent[b-omekpnpuz9] {
    --wave-overshoot: 40px; /* show crest at 100% */
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .mc-percent .pct-text[b-omekpnpuz9] {
        position: relative;
        z-index: 3;
        font-weight: 700;
        color: black;
        font-size: clamp(2rem, 5.5cqw, 2.25rem);
        line-height: 1.1;
    }

    /* Clip area */
    .mc-percent .liquid[b-omekpnpuz9] {
        position: absolute;
        inset: 0;
        overflow: hidden;
        border-radius: 0.5rem;
        pointer-events: none;
    }

    /* Fill height driven by --pct plus overshoot */
    .mc-percent .fill[b-omekpnpuz9] {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
    }

    /* SVG positioning */
    .mc-percent .wave-svg[b-omekpnpuz9] {
        position: absolute;
        inset: -8px 0 0 0; /* overscan to hide seams */
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Fill height driven by --pct plus overshoot */
    .mc-percent .fill[b-omekpnpuz9] {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
    }

    .mc-percent .layer.front[b-omekpnpuz9] {
        opacity: 0.8;
        mix-blend-mode: screen;
        transform: translateY(0px);
        animation: waveBob-b-omekpnpuz9 6s ease-in-out infinite;
    }

    /* Seamless horizontal scroll (two tiles) */
    .mc-percent .layer .mover[b-omekpnpuz9] {
        animation: waveShift-b-omekpnpuz9 10s linear infinite;
    }

    .mc-percent .layer.front .mover[b-omekpnpuz9] {
        animation-duration: 7s;
    }
/* faster front */

@keyframes waveShift-b-omekpnpuz9 {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-1200px);
    }
    /* matches viewBox width */
}

@keyframes waveBob-b-omekpnpuz9 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-4px);
    }
}

/* Wave container fills the percent area's fill */
.mc-percent .waveAnimation[b-omekpnpuz9] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* Add this: */
    transform: translateY(var(--wave-offset, 0));
    transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}

    .mc-percent .waveAnimation svg[b-omekpnpuz9] {
        width: 100%;
        height: 100%;
        display: block;
    }

/* Your wave layers and animations */
.w1[b-omekpnpuz9] {
    stroke: none;
    fill: #b3696c;
    opacity: 55%;
    animation: move1-b-omekpnpuz9 5s ease-in-out infinite;
}

.w2[b-omekpnpuz9] {
    stroke: none;
    fill: #b3696c;
    opacity: 35%;
    transform: translate3d(0, 0, 0);
    animation: move2-b-omekpnpuz9 4s ease-in-out infinite;
}

.w3[b-omekpnpuz9] {
    stroke: none;
    fill: #cf2127;
    opacity: 30%;
    transform: translate3d(0, 0, 0);
    animation: move3-b-omekpnpuz9 6s ease-in-out infinite;
}

/* Ensure units on translateX for consistent motion */
@keyframes move1-b-omekpnpuz9 {
    0% {
        transform: translateX(-500px) scaleX(2.5);
    }

    25% {
        transform: translateX(-100px) scaleX(2.5);
    }

    50% {
        transform: translateX(0) scaleX(2.5);
    }

    75% {
        transform: translateX(-100px) scaleX(2.5);
    }

    100% {
        transform: translateX(-500px) scaleX(2.5);
    }
}

@keyframes move2-b-omekpnpuz9 {
    0% {
        transform: translateX(-600px) scaleX(3);
    }

    25% {
        transform: translateX(-100px) scaleX(2.5);
    }

    50% {
        transform: translateX(0) scaleX(3);
    }

    75% {
        transform: translateX(-100px) scaleX(2.5);
    }

    100% {
        transform: translateX(-600px) scaleX(3);
    }
}

@keyframes move3-b-omekpnpuz9 {
    0% {
        transform: translateX(-800px) scaleX(3);
    }

    25% {
        transform: translateX(-100px) scaleX(2.5);
    }

    50% {
        transform: translateX(0) scaleX(3);
    }

    75% {
        transform: translateX(-100px) scaleX(2.5);
    }

    100% {
        transform: translateX(-800px) scaleX(3);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mc-percent .layer[b-omekpnpuz9], .mc-percent .layer .mover[b-omekpnpuz9] {
        animation: none !important;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .metric-card[b-omekpnpuz9] {
        height: auto;
        grid-template-rows: auto auto auto;
        overflow: hidden;
    }

    .mc-percent[b-omekpnpuz9] {
        min-block-size: clamp(72px, 32cqw, 160px);
    }
}


.mc-percent.wave-green[b-omekpnpuz9] {
    --wave-c1: #22c55e;
    --wave-c2: #16a34a;
}
/* green */
.mc-percent.wave-orange[b-omekpnpuz9] {
    --wave-c1: #f59e0b;
    --wave-c2: #d97706;
}
/* orange */
.mc-percent.wave-red[b-omekpnpuz9] {
    --wave-c1: #ef4444;
    --wave-c2: #b91c1c;
}


/* Apply color to single-path wave (uses currentColor in markup) */
.mc-percent.wave-green svg path[b-omekpnpuz9] {
    color: var(--wave-c1);
}

.mc-percent.wave-orange svg path[b-omekpnpuz9] {
    color: var(--wave-c1);
}

.mc-percent.wave-red svg path[b-omekpnpuz9] {
    color: var(--wave-c1);
}

/* If using layered wave (w1/w2/w3), override their fills via variables */
.mc-percent .w1[b-omekpnpuz9],
.mc-percent .w2[b-omekpnpuz9] {
    fill: var(--wave-c1) !important;
}

.mc-percent .w3[b-omekpnpuz9] {
    fill: var(--wave-c2) !important;
}
/* _content/MHC.Web/Components/Shared/Dashboard Components/TotalsCard.razor.rz.scp.css */
/* TotalsCard – Theme Aware (Light & Dark)
   Uses global tokens from app-theme.css and local variables for easy tuning */

.custom-totals-card[b-9ugra44u98] {
    /* Local token defaults (Light) */
    --tc-bg: var(--surface-alt, #ffffff);
    --tc-border: var(--surface-border, #e0e0e0);
    --tc-divider: var(--surface-border, #e0e0e0);
    --tc-text: var(--text-primary, #222);
    --tc-text-soft: var(--text-secondary, #6c757d);
    --tc-stat-label: var(--tc-text-soft);
    --tc-stat-value: var(--tc-text);
    --tc-stat-box-bg: var(--neutral-75, #f9fafb);
    --tc-stat-box-bg-alt: var(--neutral-100, #f1f5f9);
    --tc-progress-border: #8ec5fc;
    --tc-progress-glow: rgba(142,197,252,0.30);
    --tc-alert-red: #D50000;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 80px;
    padding: 0;
    border-radius: 1.2rem;
    border: 2px solid var(--tc-border);
    background: var(--tc-bg);
    transition: box-shadow 0.2s, transform 0.2s, background .25s, border-color .25s, color .25s;
    overflow: hidden;
    will-change: transform, box-shadow;
    color: var(--tc-text);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

    .custom-totals-card:hover[b-9ugra44u98] {
        transform: translateY(-2px) scale(1.01);
        box-shadow: 0 6px 18px -4px rgba(0,0,0,0.15);
    }

.totals-title-vertical[b-9ugra44u98] {
    min-width: 36px;
    max-width: 36px;
    border-right: 1.5px solid var(--tc-divider);
    border-radius: 1.2rem 0 0 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    font-weight: 700;
    font-size: 1.3rem;
    background-clip: padding-box;
    background: linear-gradient(180deg, var(--neutral-75, #f5f6f8) 0%, var(--neutral-100, #eceff2) 100%);
    color: var(--tc-text);
}

.totals-main[b-9ugra44u98] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.3rem 0.5rem;
}

.totals-stats-row[b-9ugra44u98] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
}

.totals-stat-box[b-9ugra44u98] {
    flex: 1 1 0;
    background: var(--tc-stat-box-bg);
    border: none;
    border-radius: 0.6rem;
    margin: 0 0.05rem;
    padding: 0.15rem 0.05rem 0.1rem 0.05rem;
    min-width: 0;
    position: relative;
    color: var(--tc-text);
}

    .totals-stat-box:nth-child(odd)[b-9ugra44u98] {
        background: var(--tc-stat-box-bg-alt);
    }

.stat-label[b-9ugra44u98] {
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    margin-bottom: 0.03rem;
    color: var(--tc-stat-label);
    opacity: 0.9;
    text-transform: uppercase;
}

.stat-value[b-9ugra44u98] {
    font-size: 1.05em;
    font-weight: 700;
    margin-bottom: 0;
    color: var(--tc-stat-value);
}

.modern-progress-bar[b-9ugra44u98] {
    width: 100%;
    height: 2em;
    border-radius: 0.7em;
    border: 2px solid var(--tc-progress-border);
    position: relative;
    overflow: hidden;
    margin: 0.04em 0 0.02em 0;
    display: flex;
    align-items: center;
    transition: border-color 0.2s;
    will-change: border-color;
    box-shadow: 0 1px 6px 0 var(--tc-progress-glow);
    background: rgba(142,197,252,0.10);
}

.modern-progress-fill[b-9ugra44u98] {
    height: 100%;
    border-radius: 0.7em;
    display: flex;
    align-items: center;
    transition: width 0.6s cubic-bezier(.4,2,.6,1), background 0.2s;
    position: relative;
    will-change: width, background;
    /* Background / gradient expected to be set inline OR fallback below */
    background: linear-gradient(90deg, #ff6fd8 0%, #8ec5fc 100%);
    box-shadow: inset 0 0 4px rgba(255,255,255,0.15);
}

.modern-progress-label[b-9ugra44u98] {
    color: #fff;
    font-size: 0.95em;
    font-weight: 600;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

@keyframes blink-red-b-9ugra44u98 {
    0%, 100% {
        color: var(--tc-alert-red);
        opacity: 1;
    }

    50% {
        color: var(--tc-alert-red);
        opacity: 0.2;
    }
}

.blink-red[b-9ugra44u98] {
    animation: blink-red-b-9ugra44u98 2s ease-in-out infinite;
    font-weight: bold;
}

/* =========================
   DARK THEME OVERRIDES
   ========================= */
[data-theme="dark"] .custom-totals-card[b-9ugra44u98] {
    --tc-bg: var(--surface-elevated, #232d37);
    --tc-border: var(--surface-border, #2f3a45);
    --tc-divider: var(--surface-border, #2f3a45);
    --tc-text: var(--text-primary, #e4e8ec);
    --tc-text-soft: var(--text-secondary, #a8b2bc);
    --tc-stat-label: var(--tc-text-soft);
    --tc-stat-value: var(--tc-text);
    --tc-stat-box-bg: rgba(255,255,255,0.04);
    --tc-stat-box-bg-alt: rgba(255,255,255,0.08);
    --tc-progress-border: var(--color-primary-accent, #4592ff);
    --tc-progress-glow: rgba(69,146,255,0.40);
    --tc-alert-red: #ff5a5a;
    box-shadow: 0 2px 10px -2px rgba(0,0,0,0.55);
}

    [data-theme="dark"] .custom-totals-card:hover[b-9ugra44u98] {
        box-shadow: 0 6px 20px -6px rgba(0,0,0,0.75);
    }

[data-theme="dark"] .totals-title-vertical[b-9ugra44u98] {
    background: linear-gradient(180deg, var(--surface-alt, #1c242c) 0%, var(--surface-bg, #0f1419) 100%);
    color: var(--tc-text);
}

[data-theme="dark"] .modern-progress-bar[b-9ugra44u98] {
    background: rgba(69,146,255,0.10);
    box-shadow: 0 0 0 1px rgba(69,146,255,0.25), 0 2px 6px -1px rgba(0,0,0,0.65);
}

[data-theme="dark"] .modern-progress-fill[b-9ugra44u98] {
    background: linear-gradient(90deg, #ff6fd8 0%, var(--color-primary-accent, #4592ff) 100%);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.35), 0 0 10px -2px rgba(69,146,255,0.55);
}

/* =========================
   RESPONSIVE (unchanged sizes)
   ========================= */

/* Mobile styles */
@media (max-width: 600px) {
    .custom-totals-card[b-9ugra44u98] {
        flex-direction: column;
        min-height: 60px;
        border-radius: 0.8rem;
    }

    .totals-title-vertical[b-9ugra44u98] {
        min-width: 100%;
        max-width: 100%;
        border-right: none;
        border-bottom: 1.5px solid var(--tc-divider);
        border-radius: 0.8rem 0.8rem 0 0;
        writing-mode: horizontal-tb;
        text-orientation: initial;
        font-size: 1.1rem;
        padding: 0.2rem 0;
    }

    .totals-main[b-9ugra44u98] {
        padding: 0.25rem 0.3rem;
    }

    .totals-stats-row[b-9ugra44u98] {
        flex-direction: column;
        gap: 0.15rem;
        margin-bottom: 0.1rem;
    }

    .totals-stat-box[b-9ugra44u98] {
        margin: 0.05rem 0;
        padding: 0.12rem 0.03rem 0.08rem 0.03rem;
        font-size: 0.95em;
    }

    .stat-label[b-9ugra44u98] {
        font-size: 0.9rem;
    }

    .stat-value[b-9ugra44u98] {
        font-size: 1em;
    }

    .modern-progress-bar[b-9ugra44u98] {
        height: 1.2em;
    }

    .modern-progress-label[b-9ugra44u98] {
        font-size: 0.9em;
    }
}

/* Tablet/iPad styles */
@media (min-width: 601px) and (max-width: 1024px) {
    .custom-totals-card[b-9ugra44u98] {
        min-height: 70px;
        border-radius: 1rem;
    }

    .totals-title-vertical[b-9ugra44u98] {
        font-size: 1.15rem;
        min-width: 32px;
        max-width: 32px;
        border-radius: 1rem 0 0 1rem;
    }

    .totals-main[b-9ugra44u98] {
        padding: 0.28rem 0.4rem;
    }

    .totals-stats-row[b-9ugra44u98] {
        gap: 0.2rem;
        margin-bottom: 0.15rem;
    }

    .totals-stat-box[b-9ugra44u98] {
        font-size: 1em;
        padding: 0.13rem 0.04rem 0.09rem 0.04rem;
    }

    .stat-label[b-9ugra44u98] {
        font-size: 0.93rem;
    }

    .stat-value[b-9ugra44u98] {
        font-size: 1.03em;
    }

    .modern-progress-bar[b-9ugra44u98] {
        height: 1.5em;
    }

    .modern-progress-label[b-9ugra44u98] {
        font-size: 0.93em;
    }
}
/* _content/MHC.Web/Components/Shared/KpiTiles.razor.rz.scp.css */
/* Integrates with app-theme.css + Bootstrap variables */
.kpi-card[b-b8nvgo4s5a] {
    border-radius: .75rem;
    background-color: var(--bs-card-bg, var(--bs-body-bg));
    border: 1px solid rgba(255,255,255,.08);
}

.kpi-title[b-b8nvgo4s5a] {
    font-size: .9rem;
    line-height: 1;
    margin-bottom: .25rem;
}

.kpi-subtitle[b-b8nvgo4s5a] {
    font-size: .8rem;
    opacity: .8;
    margin-bottom: .25rem;
}

.kpi-value[b-b8nvgo4s5a] {
    font-weight: 600;
    font-size: 1.25rem;
    min-height: 1.6rem;
}

/* Optional icon on the right */
.kpi-icon[b-b8nvgo4s5a] {
    opacity: .6;
    font-size: 1rem;
}

/* Lightweight loading shimmer */
.skeleton[b-b8nvgo4s5a] {
    display: inline-block;
    width: 4rem;
    height: 1.2rem;
    border-radius: .25rem;
    background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
    background-size: 200% 100%;
    animation: kpi-shimmer-b-b8nvgo4s5a 1.2s infinite;
}

@keyframes kpi-shimmer-b-b8nvgo4s5a {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* _content/MHC.Web/Components/Shared/KpiWidgets.razor.rz.scp.css */
.kpiw-card[b-2zltuw3jel] {
    border-radius: .9rem;
    border: 1px solid color-mix(in oklab, var(--bs-body-color) 8%, transparent);
    background:
      radial-gradient(120% 120% at 100% 0, color-mix(in oklab, var(--accent) 12%, transparent) 0%, transparent 60%) no-repeat,
      var(--bs-card-bg);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kpiw-card:hover[b-2zltuw3jel] {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.25);
    border-color: color-mix(in oklab, var(--accent) 30%, transparent);
}

/* Bigger, higher-contrast title */
.kpiw-title[b-2zltuw3jel] {
    font-size: 1.1rem;          /* was .9rem */
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .2px;
    color: var(--bs-emphasis-color);
    margin-bottom: .2rem;
}

.kpiw-subtitle[b-2zltuw3jel] {
    font-size: .78rem;
    opacity: .7;
    margin-top: .15rem;
}
.kpiw-icon[b-2zltuw3jel] {
    font-size: 1.1rem;
    opacity: .7;
}
.kpiw-value[b-2zltuw3jel] {
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: .2px;
    margin-top: .35rem;
    min-height: 1.7rem;
}

/* trend chip */
.kpiw-chip[b-2zltuw3jel] {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .15rem .4rem;
    border-radius: .5rem;
    font-size: .75rem;
    border: 1px solid color-mix(in oklab, var(--bs-body-color) 10%, transparent);
    background-color: color-mix(in oklab, var(--accent) 12%, transparent);
    color: var(--bs-body-color);
}
.kpiw-chip.up[b-2zltuw3jel]   { border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.kpiw-chip.down[b-2zltuw3jel] { border-color: color-mix(in oklab, var(--bs-danger) 45%, transparent); }
.kpiw-chip.neutral[b-2zltuw3jel] { opacity: .8; }

/* skeleton shimmer */
.skeleton[b-2zltuw3jel] {
    display: inline-block;
    width: 4.5rem;
    height: 1.3rem;
    border-radius: .3rem;
    background: var(--skeleton-gradient);
    background-size: 200% 100%;
    animation: kpiw-shimmer-b-2zltuw3jel 1.2s infinite;
}
@keyframes kpiw-shimmer-b-2zltuw3jel {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* _content/MHC.Web/Components/Shared/MetricWidget.razor.rz.scp.css */
.metric[b-fup6l933ok] {
    position: relative;
    /* Fill parent size */
    inline-size: 100%;
    block-size: 100%;
    width: 100%;
    height: 100%;
    min-inline-size: 0;
    min-block-size: 0;
    /* Keep rounded corners and content clipping */
    overflow: hidden;
    /* Stretch content vertically */
    display: flex;
    flex-direction: column;
    border-radius: .9rem;
    border: 1px solid color-mix(in oklab, var(--bs-body-color) 8%, transparent);
    background: radial-gradient(120% 120% at 100% 0, color-mix(in oklab, var(--accent) 12%, transparent) 0%, transparent 60%) no-repeat, var(--dashboard-card-bg);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.metric:hover[b-fup6l933ok] {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.25);
    border-color: color-mix(in oklab, var(--accent) 30%, transparent);
}

/* let the body fill the card height and reduce padding */
.metric > .card-body[b-fup6l933ok] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: .5rem .75rem; /* compact: was Bootstrap default (.rem 1rem) */
}

/* left accent bar */
.metric-accent[b-fup6l933ok] {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 6px;
    border-start-start-radius: .9rem;
    border-end-start-radius: .9rem;
    background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 85%, transparent), color-mix(in oklab, var(--accent) 45%, transparent));
    opacity: .95;
}

/* title & subtitle */
.metric-title[b-fup6l933ok] {
    color: color-mix(in oklab, var(--accent) 85%, var(--bs-light) 15%);
    font-size: 1.05rem; /* was 1.15rem */
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .2px;
    margin-bottom: .1rem; /* was .15rem */
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.metric-title[b-fup6l933ok]::after {
    content: "";
    display: block;
    inline-size: 20px; /* was 28px */
    block-size: 2px;
    margin-top: 2px; /* was 4px */
    background: color-mix(in oklab, var(--accent) 65%, transparent);
    border-radius: 1px;
    opacity: .45; /* was .6 */
}
.metric-subtitle[b-fup6l933ok] {
    font-size: .75rem; /* was .8rem */
    opacity: .75;
}

/* icon in soft circle */
.metric-icon[b-fup6l933ok] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 30px; /* was 36px */
    block-size: 30px;  /* was 36px */
    border-radius: 999px;
    background: color-mix(in oklab, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent);
    color: color-mix(in oklab, var(--accent) 65%, var(--bs-body-color) 35%);
}
.metric-icon i[b-fup6l933ok] {
    font-size: 1.05rem; /* was 1.2rem */
    line-height: 1;
}

/* value */
.metric-value[b-fup6l933ok] {
    font-weight: 800;
    font-size: 1.35rem; /* was 1.6rem */
    letter-spacing: .2px;
    margin-top: .25rem; /* was .4rem */
    min-height: 1.6rem; /* was 1.8rem */
}

/* trend chip */
.metric-chip[b-fup6l933ok] {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .1rem .35rem; /* was .15 .45 */
    border-radius: .5rem;
    font-size: .72rem; /* was .76rem */
    border: 1px solid color-mix(in oklab, var(--bs-body-color) 12%, transparent);
    background-color: color-mix(in oklab, var(--accent) 12%, transparent);
    color: var(--bs-body-color);
}
.metric-chip.up[b-fup6l933ok]   { border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.metric-chip.down[b-fup6l933ok] { border-color: color-mix(in oklab, var(--bs-danger) 45%, transparent); }
.metric-chip.neutral[b-fup6l933ok] { opacity: .85; }

.metric-footer[b-fup6l933ok] {
    font-size: .72rem; /* was .76rem */
    opacity: .85;
}

/* skeleton shimmer uses centralized skeleton gradient */
.skeleton[b-fup6l933ok] {
    display: inline-block;
    width: 4rem;
    height: 1.1rem;
    border-radius: .3rem;
    background: var(--skeleton-gradient);
    background-size: 200% 100%;
    animation: metric-shimmer-b-fup6l933ok 1.2s infinite;
}
@keyframes metric-shimmer-b-fup6l933ok {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Dark-mode: ensure metric value is high contrast */
[data-theme="dark"] .metric .metric-value[b-fup6l933ok] {
  color: var(--text-primary);
}