/* HealthDash component styles: what MudTheme (Layout/AppTheme.cs) can't express.
   Classes are prefixed hd- so they never clash with Bootstrap on the Identity pages. */
:root {
    --hd-bg: #0D1117; --hd-nav: #0F141B; --hd-s1: #141A22; --hd-s2: #1A212B; --hd-s3: #232B36;
    --hd-line: #242D39; --hd-line2: #323C4A;
    --hd-t1: #E6EAF0; --hd-t2: #AAB4C2; --hd-t3: #8792A2; --hd-t4: #5B6676;
    --hd-accent: #7AA2FF; --hd-accent-soft: rgba(122,162,255,.14);
    --hd-ok: #4CC38A; --hd-warn: #E8B04B; --hd-err: #F2716B;
}

body { -webkit-font-smoothing: antialiased; }
.hd-tn, .mud-table-cell, .apexcharts-yaxis text { font-variant-numeric: tabular-nums; }

/* page */
.hd-main { padding: 20px 32px 56px; }
.hd-wrap { max-width: 1360px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.hd-wrap.narrow { max-width: 1040px; }

/* nav drawer */
.hd-brand { display: flex; align-items: center; gap: 10px; padding: 16px 22px 20px; color: var(--hd-t1); font-weight: 600; font-size: 15px; text-decoration: none; }
.hd-logo { width: 30px; height: 30px; border-radius: 8px; background: #1C2638; border: 1px solid #2D3B55; display: inline-flex; align-items: center; justify-content: center; color: var(--hd-accent); flex: none; }
.hd-nav { padding: 0 12px; }
/* MudBlazor aligns nav links to flex-start with a 1.75 line height; centre icon and text in a 40 px row instead. */
.hd-nav .mud-nav-link { display: flex; align-items: center; gap: 12px; border-radius: 8px; height: 40px; padding: 0 10px; margin: 1px 0; line-height: 20px; color: var(--hd-t2); font-weight: 500; font-size: 14px; }
.hd-nav .mud-nav-link:hover { background: var(--hd-s1); color: var(--hd-t1); }
.hd-nav .mud-nav-link .mud-nav-link-icon { color: var(--hd-t3); font-size: 18px; width: 18px; height: 18px; flex: none; }
.hd-nav .mud-nav-link .mud-nav-link-text { margin: 0; line-height: 20px; }
.hd-nav .mud-nav-link.active { background: var(--hd-s2) !important; color: var(--hd-t1) !important; box-shadow: inset 2px 0 0 var(--hd-accent); }
.hd-nav .mud-nav-link.active .mud-nav-link-icon { color: var(--hd-accent); }
.hd-nsec { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hd-t3); padding: 18px 10px 6px; }
.hd-nfoot { margin: auto 12px 0; padding: 12px 10px; border-top: 1px solid var(--hd-line); display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 16px; color: var(--hd-t3); }
.hd-nfoot div { display: flex; align-items: center; gap: 8px; }
.hd-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.mud-drawer.hd-drawer { border-right: 1px solid var(--hd-line); }
.mud-drawer.hd-drawer .mud-drawer-content { display: flex; flex-direction: column; min-height: 100%; }
.mud-appbar.hd-appbar { border-bottom: 1px solid var(--hd-line); }
@media (min-width: 960px) {
    /* No app bar from md up: the page header takes its place. */
    .mud-layout .mud-main-content { padding-top: 0; }
}

/* top bar + page header */
.hd-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 40px; }
.hd-crumbs { display: flex; align-items: center; gap: 8px; color: var(--hd-t3); font-size: 13px; }
.hd-crumbs b { color: var(--hd-t2); font-weight: 500; }
.hd-crumbs a { color: var(--hd-t2); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.hd-crumbs a:hover { color: var(--hd-t1); }
.hd-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hd-caption { color: var(--hd-t3); font-size: 13px; }
.hd-avatar { width: 36px; height: 36px; border-radius: 50%; background: #23304A; color: #C9D6F5; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; border: 0; cursor: pointer; padding: 0; }
.hd-ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.hd-ph h1 { margin: 0; }
.hd-ph p { margin: 4px 0 0; color: var(--hd-t2); font-size: 14px; }
.hd-eyebrow { font-size: 12px; font-weight: 500; color: var(--hd-t3); margin-bottom: 4px; }
.hd-icon-tile { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hd-icon-tile.lg { width: 52px; height: 52px; border-radius: 14px; }

/* segmented period selector (MudToggleGroup Class="hd-seg") */
.mud-toggle-group.hd-seg { background: var(--hd-s1); border: 1px solid var(--hd-line); border-radius: 10px; padding: 3px; gap: 2px; }
.hd-seg .mud-toggle-item { border: 0 !important; border-radius: 7px !important; min-height: 34px; padding: 0 13px; color: var(--hd-t2); font-size: 13px; font-weight: 500; text-transform: none; }
.hd-seg .mud-toggle-item:hover { color: var(--hd-t1); }
.hd-seg .mud-toggle-item-selected, .hd-seg .mud-toggle-item.mud-toggle-item-selected { background: var(--hd-s3) !important; color: var(--hd-t1) !important; box-shadow: 0 1px 2px rgba(0,0,0,.35), inset 0 0 0 1px var(--hd-line2); }
.hd-seg-scroll { max-width: 100%; overflow-x: auto; }
.hd-short { display: none; }

/* controls */
.hd-ctl { height: 40px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--hd-line); background: var(--hd-s1); color: var(--hd-t2); font: 500 13px/1 Inter, system-ui, sans-serif; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.hd-ctl:hover { color: var(--hd-t1); }
.hd-ctl .mud-icon-root { font-size: 16px; }
.hd-stepper { display: inline-flex; align-items: center; border: 1px solid var(--hd-line); border-radius: 9px; background: var(--hd-s1); height: 40px; }
.hd-stepper .mud-icon-button { width: 36px; height: 38px; border-radius: 8px; padding: 0; }
.hd-stepper span { padding: 0 6px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.hd-picker-anchor { width: 0; height: 0; overflow: hidden; position: relative; }
.mud-button-root.hd-btn { height: 40px; border-radius: 9px; padding: 0 14px; }
.mud-button-root.hd-btn.sm { height: 34px; padding: 0 12px; }
.mud-button-outlined.hd-btn { border-color: var(--hd-line2); background: var(--hd-s2); color: var(--hd-t1); }
.mud-button-outlined.hd-btn:hover { background: var(--hd-s3); }

/* filter chips */
.hd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hd-line2); background: transparent; color: var(--hd-t2); font: 500 13px/1 Inter, system-ui, sans-serif; cursor: pointer; text-decoration: none; }
.hd-chip:hover { color: var(--hd-t1); }
.hd-chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.hd-chip .n { color: var(--hd-t3); font-size: 12px; }
.hd-chip.on { background: var(--hd-accent-soft); border-color: rgba(122,162,255,.45); color: var(--hd-t1); }

/* layout grid */
.hd-grid { display: grid; gap: 16px; }
.hd-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hd-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hd-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hd-g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hd-g12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.hd-s4 { grid-column: span 4; } .hd-s5 { grid-column: span 5; } .hd-s6 { grid-column: span 6; }
.hd-s7 { grid-column: span 7; } .hd-s8 { grid-column: span 8; } .hd-s12 { grid-column: span 12; }

/* cards */
.hd-card { background: var(--hd-s1); border: 1px solid var(--hd-line); border-radius: 14px; padding: 18px 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.025); min-width: 0; }
.hd-card.err { border-color: rgba(242,113,107,.35); }
.hd-card-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.hd-card-t { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.hd-card-st { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--hd-t3); }
.hd-card-a { font-size: 13px; font-weight: 500; color: var(--hd-accent); text-decoration: none; }
.hd-card-a:hover { color: #A9C2FF; }
.hd-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; line-height: 16px; color: var(--hd-t2); }
.hd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hd-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.hd-legend i.ln { height: 2px; border-radius: 1px; width: 14px; }
.hd-legend i.dash { height: 0; width: 14px; border-top: 2px dashed; border-radius: 0; background: transparent !important; }
.hd-note { margin: 8px 0 0; font-size: 12px; color: var(--hd-t3); }
.hd-sep { border-bottom: 1px solid var(--hd-line); }

/* KPI tile */
.hd-kpi { background: var(--hd-s1); border: 1px solid var(--hd-line); border-radius: 14px; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.025); min-width: 0; height: 100%; }
.hd-kpi .l { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--hd-t2); }
.hd-kpi .l i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: none; }
.hd-kpi .v { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-kpi .v .u { font-size: 14px; font-weight: 500; color: var(--hd-t2); margin-left: 3px; letter-spacing: 0; }
.hd-kpi .v.empty { color: var(--hd-t4); }
.hd-kpi .s { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; line-height: 16px; color: var(--hd-t3); }
.hd-kpi .hd-spark { margin-top: auto; padding-top: 4px; }
.hd-spark svg { width: 100%; height: 28px; display: block; }
.hd-delta { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; line-height: 16px; font-weight: 600; padding: 1px 6px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hd-delta.good { color: #86D9AE; background: rgba(76,195,138,.13); }
.hd-delta.bad { color: #F7A39E; background: rgba(242,113,107,.13); }
.hd-delta.neutral { color: var(--hd-t2); background: var(--hd-s3); }

/* small stat */
.hd-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hd-stat .k { font-size: 12px; color: var(--hd-t3); display: inline-flex; align-items: center; gap: 6px; }
.hd-stat .x { font-size: 18px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hd-stat .x.lg { font-size: 24px; line-height: 30px; }
.hd-stat .x small { font-size: 12px; color: var(--hd-t2); font-weight: 500; margin-left: 2px; }

/* tables (MudTable Class="hd-table" or a plain table.hd-tbl) */
.hd-tw { overflow-x: auto; margin: 0 -20px; }
.hd-tbl { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.hd-tbl th { text-align: left; color: var(--hd-t3); font-weight: 500; font-size: 12px; padding: 8px 12px; border-bottom: 1px solid var(--hd-line); white-space: nowrap; }
.hd-tbl td { padding: 12px; border-bottom: 1px solid var(--hd-line); white-space: nowrap; }
.hd-tbl tr:last-child td { border-bottom: 0; }
.hd-tbl th:first-child, .hd-tbl td:first-child { padding-left: 20px; }
.hd-tbl th:last-child, .hd-tbl td:last-child { padding-right: 20px; }
.hd-tbl tbody tr:hover td { background: rgba(255,255,255,.02); }
.hd-tbl .r, .hd-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.hd-tbl .grp td { background: var(--hd-s2); font-weight: 600; font-size: 12px; color: var(--hd-t2); padding-top: 8px; padding-bottom: 8px; }
.hd-mut { color: var(--hd-t3); }
.hd-table.mud-table { background: transparent; margin: 0 -20px; }
.hd-table .mud-table-container { overflow-x: auto; }
.hd-table .mud-table-head .mud-table-cell { font-size: 12px; font-weight: 500; color: var(--hd-t3); padding: 8px 12px; white-space: nowrap; }
.hd-table .mud-table-body .mud-table-cell { font-size: 13px; line-height: 18px; padding: 12px; white-space: nowrap; }
.hd-table .mud-table-cell:first-child { padding-left: 20px; }
.hd-table .mud-table-cell:last-child { padding-right: 20px; }
.hd-table .mud-table-pagination { border-top: 1px solid var(--hd-line); color: var(--hd-t3); font-size: 12px; }
.hd-table .mud-table-pagination .mud-select-input, .hd-table .mud-table-pagination-caption { font-size: 12px; }
.hd-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--hd-t2); }
.hd-tag i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.hd-link { color: var(--hd-t1); font-weight: 500; text-decoration: none; }
.hd-link:hover { color: var(--hd-accent); }

/* status chip */
.hd-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 600; padding: 3px 8px 3px 7px; border-radius: 6px; white-space: nowrap; }
.hd-st i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.hd-st.ok { color: #86D9AE; background: rgba(76,195,138,.12); } .hd-st.ok i { background: var(--hd-ok); }
.hd-st.error { color: #F7A39E; background: rgba(242,113,107,.12); } .hd-st.error i { background: var(--hd-err); }
.hd-st.running { color: #B5CAFF; background: var(--hd-accent-soft); } .hd-st.running i { background: var(--hd-accent); }
.hd-st.paused { color: #F1CB82; background: rgba(232,176,75,.12); } .hd-st.paused i { background: var(--hd-warn); }
.hd-st.idle { color: var(--hd-t2); background: var(--hd-s3); } .hd-st.idle i { background: var(--hd-t3); }

/* alerts (MudAlert Variant.Outlined) */
.mud-alert.mud-alert-outlined-error { border-color: rgba(242,113,107,.32); background: rgba(242,113,107,.07); color: #F3C4C0; }
.mud-alert.mud-alert-outlined-warning { border-color: rgba(232,176,75,.3); background: rgba(232,176,75,.07); color: #EBD8B3; }
.mud-alert.mud-alert-outlined-info { border-color: rgba(122,162,255,.3); background: rgba(122,162,255,.06); color: #C9D6F5; }
.mud-alert.mud-alert-outlined-success { border-color: rgba(76,195,138,.3); background: rgba(76,195,138,.06); color: #BFE8D1; }
.mud-alert-outlined { border-radius: 10px; font-size: 13px; line-height: 18px; }
.hd-alert-title { display: block; font-weight: 600; margin-bottom: 2px; }

/* bars */
.hd-bar { height: 8px; border-radius: 999px; background: var(--hd-s3); overflow: hidden; display: flex; position: relative; }
.hd-bar > span { display: block; height: 100%; }
.hd-bar.split { height: 12px; gap: 2px; background: transparent; border-radius: 0; }
.hd-bar.split > span { border-radius: 4px; }
.hd-range { position: relative; height: 10px; border-radius: 999px; background: var(--hd-s3); }
.hd-range > span { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
.hd-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--hd-t4); margin-top: 4px; }
.hd-hbar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 92px; gap: 12px; align-items: center; font-size: 13px; }
.hd-hbar .zn { color: var(--hd-t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-hbar .zn small { display: block; color: var(--hd-t3); font-size: 11px; }
.hd-hbar .zt { text-align: right; font-variant-numeric: tabular-nums; }
.hd-hbar .zt small { color: var(--hd-t3); margin-left: 4px; }
.hd-hbar.top .zn, .hd-hbar.top .zt { color: var(--hd-t1); font-weight: 600; }
.hd-hbar.wide { grid-template-columns: 220px minmax(0, 1fr) 70px; }

/* empty state */
.hd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 20px 12px; color: var(--hd-t3); font-size: 13px; }
.hd-empty .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--hd-s2); border: 1px solid var(--hd-line); display: flex; align-items: center; justify-content: center; color: var(--hd-t2); margin-bottom: 4px; }
.hd-empty strong { color: var(--hd-t1); font-weight: 600; font-size: 14px; }

/* drop zone */
.hd-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 40px 24px; border: 1.5px dashed var(--hd-line2); border-radius: 12px; background: #11161D; cursor: pointer; width: 100%; }
.hd-drop:hover { border-color: var(--hd-accent); }
.hd-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 13px; color: var(--hd-t2); }
.hd-steps li { display: flex; gap: 12px; }
.hd-steps .n { width: 24px; height: 24px; border-radius: 50%; background: var(--hd-s3); color: var(--hd-t1); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: none; }
.hd-steps b { color: var(--hd-t1); font-weight: 500; }

/* charts (ApexCharts) */
.hd-chart .apexcharts-text, .hd-chart .apexcharts-xaxis-label, .hd-chart .apexcharts-yaxis-label { fill: var(--hd-t3); font-size: 11px; }
.hd-chart .apexcharts-tooltip { background: var(--hd-s2) !important; border: 1px solid var(--hd-line2) !important; box-shadow: 0 12px 32px rgba(0,0,0,.45) !important; }
.hd-chart .apexcharts-tooltip-title { background: var(--hd-s3) !important; border-bottom: 1px solid var(--hd-line2) !important; }
.hd-chart-empty { display: flex; align-items: center; justify-content: center; color: var(--hd-t3); font-size: 13px; }
svg.hd-mini { width: 100%; height: auto; display: block; }
svg.hd-mini text { font-family: Inter, system-ui, sans-serif; font-size: 11px; fill: var(--hd-t3); }

/* menus and dialogs carry the only shadows */
.mud-popover.mud-paper { border: 1px solid var(--hd-line2); box-shadow: 0 12px 32px rgba(0,0,0,.45); }

@media (max-width: 1279.98px) {
    .hd-g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hd-s4, .hd-s5, .hd-s7, .hd-s8 { grid-column: span 12; }
}
@media (max-width: 959.98px) {
    .hd-main { padding: 16px 16px 40px; }
    .hd-g4, .hd-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hd-s6 { grid-column: span 12; }
    .hd-g2 > * { grid-column: span 2; }
}
@media (max-width: 599.98px) {
    .hd-g6, .hd-g2, .hd-g3, .hd-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hd-g3 > .hd-card { grid-column: span 2; }
    .hd-grid { gap: 10px; }
    .hd-kpi { padding: 12px; }
    .hd-kpi .v { font-size: 24px; line-height: 30px; }
    .hd-ph h1 { font-size: 22px; line-height: 28px; }
    .hd-card { padding: 16px; }
    .hd-tw, .hd-table.mud-table { margin: 0 -16px; }
    .hd-hbar { grid-template-columns: 110px minmax(0, 1fr) 80px; }
    .hd-hbar.wide { grid-template-columns: 130px minmax(0, 1fr) 60px; }
    .hd-long { display: none; }
    .hd-short { display: inline; }
}