/*BEGIN Dashboard*/
.e-dashboardlayout {
    padding: 10px;
}

.e-panel-header {
    padding: 10px;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, .03);
}


.panel-content {
    vertical-align: middle;
    font-size: 15px;
    font-size: 15px;
    font-weight: 500;   
}

.e-panel-content {
    height: calc(100% - 28px);
    width: 100%;
    display: block;
}

.e-panel .e-header-text {
    padding: 12px 0 12px 0;
}

.e-dashboardlayout.e-control .e-panel .e-panel-header {
    font-size: 15px;
    font-weight: 500;
    height: 37px;
    line-height: 30px;
    padding: 10px;
    vertical-align: middle;
    border-bottom: 0.5px solid #e3e3e3;
}

.mobile .e-control.e-lib.e-dashboardlayout.e-responsive {
    z-index: 0;
    overflow: scroll;
}

.e-control.e-lib.e-dashboardlayout.e-responsive {
    z-index: 0;
}

.bootstrap5 .e-dashboardlayout.e-control .e-panel .e-panel-header,
.bootstrap5-dark .e-dashboardlayout.e-control .e-panel .e-panel-header {
    line-height: 20px;
}
/*END Dashboard*/


/*Progress Message*/
.progress-text::after {
    content: var(--progress-message, "Starting...");
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
    font-weight: bold;
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    /*position: absolute;*/
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/*Linear progress*/
.linear-progress {
    background: silver;
    width: 50vw;
    margin: 20% auto;
    height: 1rem;
    border-radius: 10rem;
    overflow: hidden;
    position: relative;
}

    .linear-progress:after {
        content: '';
        position: absolute;
        inset: 0;
        background: #1b6ec2;
        scale: var(--blazor-load-percentage, 0%) 100%;
        transform-origin: left top;
        transition: scale ease-out 0.5s;
    }

#blazor-error-ui {
    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;
}






.gridLink {
    text-decoration: underline !important;
    cursor: pointer !important;
}

    .gridLink:hover {
        cursor: pointer !important;
    }

table.k-grid-table td a.gridLink {
    color: #58a6ff !important;
    text-decoration: underline !important;
}

a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
    color: #58a6ff !important;
}
/* Enter custom CSS rules for your application here */
.panel .panel-container .panel-content {
    /* padding: 1rem 1rem; */
    padding: 0rem 0rem;
}

.voffset1 {
    margin-top: 5px;
}

.voffset2 {
    margin-top: 10px;
}

.voffset3 {
    margin-top: 20px;
}

.voffset4 {
    margin-top: 40px;
}

.hidden {
    display: none;
}

.mod-skin-dark:not(.mod-skin-light) .panel-hdr, .mod-skin-dark:not(.mod-skin-light) .accordion:not(.accordion-clean) .card .card-header {
    background-color: #1a1b1d;
}

.alertInElement {
    margin-bottom: 0rem !important;
}

.k-popup.k-reset {
    transition: none !important;
    /* to just make animations faster than normal use the following line INSTEAD */
    /* transition-duration: 100ms !important; */
}

.vh-50 {
    height: 50vh;
}

.vh-40 {
    height: 40vh;
}

.flexibleContent {
    flex: 1 1 auto
}

.flexibleHeader {
    flex: 0 1 auto;
}

.indentedTab {
    padding-left: 10px;
}



.blazored-toast-container {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 999;
}

.position-topleft {
    top: 3rem;
    left: 2rem;
}

.position-topright {
    top: 3rem;
    right: 2rem;
}

.position-topcenter {
    top: 3rem;
    left: 50%;
    transform: translate(-50%, 0%);
}

.position-bottomleft {
    bottom: 2rem;
    left: 2rem;
}

.position-bottomright {
    bottom: 2rem;
    right: 2rem;
}

.position-bottomcenter {
    bottom: 2rem;
    left: 50%;
    transform: translate(-50%, 0%);
}

.blazored-toast {
    width: 30rem;
    border-radius: .25rem;
}

.blazored-toast {
    display: flex;
    position: relative;
    flex-direction: row;
    animation: fadein 1.5s;
    margin-bottom: 1rem;
    /*padding: 1rem 1.25rem;*/
    padding: 1rem .25rem 1rem 1.25rem;
    color: #1D1D1B;
    /*  width: 20rem;*/
    border-radius: .25rem;
    box-shadow: rgba(0,0,0,0.30) 0px 10px 30px 2px;
    background-color: #fff;
    border-top: 6px solid #fff;
}

.blazored-toast-component {
    display: initial;
    padding: 0 0 0 0;
    border-top: none;
}

.blazored-toast-info {
    border-top: 6px solid #2563eb;
}

    .blazored-toast-info .blazored-toast-icon {
        color: #2563eb;
    }

.blazored-toast-success {
    border-top: 6px solid #16a34a;
}

    .blazored-toast-success .blazored-toast-icon {
        color: #16a34a;
    }

.blazored-toast-warning {
    border-top: 6px solid #eab308;
}

    .blazored-toast-warning .blazored-toast-icon {
        color: #eab308;
    }

.blazored-toast-error {
    border-top: 6px solid #dc2626;
}

    .blazored-toast-error .blazored-toast-icon {
        color: #dc2626;
    }

.blazored-toast-icon {
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding: 0 1rem 0 0;
    font-size: 1.5rem;
}

.blazored-toast .blazored-toast-message {
    flex-grow: 1;
    margin-bottom: 0;
    font-weight: 500;
    font-size: 0.875rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.blazored-toast .blazored-toast-close {
    display: flex;
    flex-direction: column;
    justify-content: start;
    /* padding: 0 0 0 1rem;*/
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    color: #94a3b8;
    font-size: 0.9rem;
}

    .blazored-toast .blazored-toast-close:hover {
        color: inherit;
    }

.blazored-toast .blazored-toast-progressbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    border-bottom-left-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

    .blazored-toast .blazored-toast-progressbar > span {
        position: absolute;
        filter: brightness(75%);
        height: 6px;
        border-bottom-left-radius: .375rem;
        background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
        transition: all .1s linear;
    }

.blazored-toast-action {
    cursor: pointer;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.heightCap450 {
    max-height: 450px;
}

.fillRemainingHeight {
    height: calc(100vh - 210px);
}

/* Panel.FillViewportHeight: opt-in dynamic sizing for results/grid panels.
   On desktop (>= lg) the panel grows to fill the remaining viewport height within its
   flex-column page, and its content scrolls internally so the panel bottom and any grid
   horizontal scrollbar stay on screen regardless of viewport height or the criteria panel's
   size above it. Below lg it falls back to natural height + normal page scroll (mobile).

   Requires the page container to be a flex column capped to the available viewport height -
   use the .pageFillViewport helper below on that container. The page cap supplies the fixed
   chrome offset (header/footer/padding, the same value as .fillRemainingHeight); flex then
   subtracts the criteria panel's height dynamically. */
@media (min-width: 992px) {
    /* Page-level: cap the flex-column page to the available viewport height so its flex
       children (criteria = auto, results = fill) split within the viewport instead of
       growing the page past the bottom. The offset is the page-area chrome (header +
       content padding + footer); flex subtracts the criteria panel's height dynamically. */
    .pageFillViewport {
        height: calc(100vh - 160px);
        overflow: hidden;
    }

    /* The Bootstrap .row is a horizontal flex container; force it to a vertical column so its
       single .col-12 distributes height on the MAIN axis (reliable shrink/grow) instead of via
       cross-axis stretch, which lets the column overflow the row when space is tight. */
    .panelFillViewport {
        flex: 1 1 auto;
        min-height: 0;
        flex-direction: column;
    }

        .panelFillViewport > .col-12 {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

            .panelFillViewport > .col-12 > .panel {
                flex: 1 1 auto;
                display: flex;
                flex-direction: column;
                min-height: 0;
            }

    /* A COLLAPSED fill-viewport panel must not keep claiming the space it was given: flex: 1 1 auto held
       it at full height with nothing but its header showing, so collapsing a results panel freed no room
       for the criteria panel above it. Shrink to content and hand the space back; expanding restores the
       fill above. Blazor owns these two classes outright (unlike `show` on .panel-container, which
       Bootstrap animates), so they are safe to render from the expanded state. */
    .panelFillViewport.panelIsCollapsed,
    .panelFillViewport.panelIsCollapsed > .col-12,
    .panelFillViewport > .col-12 > .panel.panelIsCollapsed {
        flex: 0 0 auto;
        min-height: 0;
    }

    /* REMOVED 2026-07-28: a `.pageFillViewport div:has(.panelFillViewport.panelIsCollapsed)` rule used to
       sit here, setting `flex: 0 0 auto !important; height: auto !important` on the page-owned wrappers so
       a collapsed panel also released THEIR height. It was the prime suspect for the reported failure
       where collapsing the Delivery results panel put the page into an endless "TypeError: Failed to
       fetch" loop and locked the browser: it resized an ancestor while Bootstrap was still animating the
       collapse, and the SfGrid inside re-measured and re-requested data.

       It is not being reinstated in a safer form, because the panel no longer needs it to shrink - the
       grid host below takes the panel itself to header height. All the rule bought was removing the
       leftover whitespace between a collapsed panel and the bottom of the page cap. That is cosmetic, and
       not worth carrying a rule that once made the app unusable. If the whitespace matters, add it back
       deliberately and smoke it on its own. */

    /* The collapse host is the flex item that fills; collapsed, it stops claiming the space. The
       .panel-container inside is a GRID item now, so it stretches to its row rather than flexing. */
    .panelFillViewport > .col-12 > .panel > .panel-collapse-host {
        flex: 1 1 auto;
        min-height: 0;
    }

    .panelFillViewport > .col-12 > .panel > .panel-collapse-host.panelIsCollapsed {
        flex: 0 0 auto;
    }

    /* The container itself must be a flex COLUMN (not just a flex item) so its children flex
       instead of relying on percentage h-100 - a percentage height of a flex item does not
       resolve, which let the content (and the grid) balloon to full height.
       (Was keyed on `.panel-container.show`; `show` is no longer emitted - the host's grid row
       decides visibility, and the container is always present and always laid out.) */
    /* A fill-viewport panel is the ONE case that does want the container stretched to the grid row - its
       whole job is to fill, and it already declares the explicit flex chain below so nothing here depends
       on an `h-100` resolving to auto. The extra `.panelFillViewport` in the selector is deliberate: it
       has to outrank `.panel-collapse-host > .panel-container { align-self: start }`, which appears later
       in this file and would otherwise win the tie. */
    .panelFillViewport .panel-collapse-host > .panel-container {
        align-self: stretch;
    }

    .panelFillViewport .panel-container {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

        /* Main content area flexes to fill the container (toolbar/status take natural height). */
        .panelFillViewport .panel-container > .panel-content:first-child {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
        }

            /* The ChildContent/Content wrapper flexes to fill the content area, so a single
               fill child inside it (the grid host) gets a real, bounded height to measure. */
            .panelFillViewport .panel-container > .panel-content:first-child > div:last-child {
                display: flex;
                flex-direction: column;
                flex: 1 1 auto;
                min-height: 0;
            }
}

/* ===========================================================================================
   PANEL COLLAPSE - CSS grid, single owner, no JavaScript.

   .panel-collapse-host is a one-row grid wrapping .panel-container. Animating that row between
   1fr and 0fr animates to the content's NATURAL height without anyone having to measure it, which
   is the thing that previously forced a JS implementation. Blazor renders panelIsCollapsed from
   IsExpanded and nothing else ever writes it.

   min-height: 0 on the grid item is MANDATORY, not defensive: a grid item's automatic minimum size is
   its content, which stops the row reaching zero however small the fr becomes.

   WHY THIS REPLACED BOOTSTRAP'S COLLAPSE (three failures, in order):
     1. `show` on .panel-container was rendered by Blazor AND driven by jQuery .collapse(). Any
        re-render rewrote the class mid-transition behind the plugin's back, leaving _isTransitioning
        stale so a later show() returned early - the two-clicks-to-expand bug.
     2. Emitting `show` from a value captured once fixed the fight, but a collapsed fill-viewport
        panel then kept its full height and handed no space back.
     3. The CSS added to fix THAT resized an ancestor while Bootstrap was still animating, and the
        SfGrid inside re-measured and re-requested data in a loop until the page was unusable.
   All three are the same root cause - two owners of one layout - and none of them exist here.

   Deliberately NOT an @if in the markup: removing the content from the render tree disposes child
   components, invalidates @refs and makes every Syncfusion control re-run its JS interop on each
   expand. overflow: hidden keeps the DOM intact and simply clips it.

   Deliberately NOT interpolate-size / calc-size(): cleaner, but Chromium-only as of 2026 (no
   Firefox, no Safari). Revisit when support is broad.

   THE CLIP LIVES ON THE HOST, AND THE CONTAINER KEEPS ITS AUTO HEIGHT - this is the important part.
   The obvious formulation is the other way round: stretch the container to the grid row and let IT clip.
   That was tried and it broke every panel FOOTER in the app. Stretching gives the container a DEFINITE
   height, and the panel is full of descendants carrying Bootstrap's `h-100`, which had always resolved to
   `auto` against an auto-height ancestor. Against a definite one each of them claims the full height,
   pushes its footer sibling past the bottom edge, and the clip hides it. There are three footer flavours
   (Panel.FooterContent, PanelContent, PanelTabContent) nested at three different depths, and stretching
   broke all three the same way.
   So: `align-self: start` keeps the container at its natural height exactly as it was before this rewrite,
   and `overflow: hidden` on the HOST does the clipping instead. Every percentage height inside resolves
   the way it always did.
   GENERAL LESSON: changing an element's display type changes what percentage heights INSIDE it resolve
   against. `h-100` on a descendant is a silent dependency on some ancestor's height being indefinite, and
   nothing in the markup marks it.
   =========================================================================================== */
.panel-collapse-host {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    transition: grid-template-rows 250ms ease;
}

    .panel-collapse-host.panelIsCollapsed {
        grid-template-rows: minmax(0, 0fr);
    }

    .panel-collapse-host > .panel-container {
        align-self: start;
        min-height: 0;
        /* The horizontal twin of min-height above, and it was missed when this was written because only
           the vertical axis was being animated. A grid item's automatic minimum size is its CONTENT's
           intrinsic minimum on BOTH axes, so without this the container refuses to shrink below the
           widest thing inside it and overflows its grid area instead.
           MEASURED 2026-07-28 in the AI dialog: .panel-collapse-host was correctly 582px while the
           .panel-container inside it was 4185px - one wide markdown table set the intrinsic minimum and
           every descendant inherited it, so the analysis text ran outside the dialog and the result grid
           never produced a horizontal scrollbar (its columns "fit" a container 7x too wide).
           Bounded again, content that cannot shrink scrolls inside its own box - Syncfusion's grid uses
           its internal scroller, and the analysis markdown wraps or scrolls per AiResultView's rules. */
        min-width: 0;
    }

/* Respect the OS setting: the collapse still works, it just arrives immediately. */
@media (prefers-reduced-motion: reduce) {
    .panel-collapse-host {
        transition: none;
    }
}

.footer {
    position: fixed;
    height: 100px;
    bottom: 0;
    width: 100%;
}

.checkboxLabel{
    vertical-align: middle;
}

.loading-splash{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    background-color: #fff;
}

/* Hide the sidebar nav while the WASM splash screen is visible.
   jQuery sets display:none on #preload when loading completes,
   which removes this rule and reveals the nav. */
/*#preload:not([style*="display: none"]) ~ * aside.app-sidebar {
    display: none !important;
}*/

.boldRow {
    font-weight: bold !important;
}

.e-row.boldRow > td.e-active {
    font-weight: bold !important;
}

.e-confirm-dialog.e-primary {
    float: right;
}

.grid-goal-property {
    font-weight: bold;
}

#Grid table.e-table > tbody > tr.grid-row-goal-alert td {
    background-color: rgb(from var(--bs-success) r g b / 0.3);
}

#Grid table.e-table > tbody > tr.grid-row-goal-alert:hover td {
    background-color: rgb(from var(--bs-success) r g b / 0.5);
}

#Grid table.e-table > tbody > tr.grid-row-threshold-alert {
    background-color: rgb(from var(--bs-danger) r g b / 0.3);
}

#Grid table.e-table > tbody > tr.grid-row-threshold-alert:hover td {
    background-color: rgb(from var(--bs-danger) r g b / 0.5);
}

.report-subheading {
    color: var(--bs-heading-color);
    opacity: .5;
}

.panel-content-toolbar {
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

/*Dashboard Widgets - BEGIN*/

e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
    display: none;
}

/* To customize the arrow tip at top */
.e-tooltip-wrap .e-arrow-tip.e-tip-top {
    display: none;
}

/* To customize the arrow tip at left */
.e-tooltip-wrap .e-arrow-tip.e-tip-left {
    display: none;
}

/* To customize the arrow tip at right */
.e-tooltip-wrap .e-arrow-tip.e-tip-right {
    display: none;
}


.e-btn:hover {
    background-color: #0b6a0b;
}


.noBorderButton {
    border: none !important;
}

.menuPopupButton {
    width: 100%;
    border-radius: 0 !important;
    text-align: left;
}

.noBorderButton:hover {
    background: var(--primary-300) !important;
    color: white;
}

.menuCloseButton:hover {
    background: var(--primary-300) !important;
    color: white;
}

.menuPopupButton:hover {
    width: 100%;
    border-radius: 0 !important;
}

.menuPopupButtonDiv:hover {
    background: var(--primary-300);
    color: white;
}

.menuPopupButtonDiv:hover {
    background: var(--primary-300);
    color: white;
}

.menuPopupButtonDiv:hover {
    background: var(--primary-300);
    color: white;
}

.menuPopupButtonDiv .fa-duotone {
    --fa-primary-color: var(--bs-primary);
    --fa-secondary-color: var(--bs-primary-200);
}

    .menuPopupButtonDiv .fa-duotone :hover {
        --fa-primary-color: white;
        --fa-secondary-color: white;
    }

.menuPopupButtonDiv:hover .fa-duotone {
    --fa-primary-color: white;
    --fa-secondary-color: white;
}

.menuPopupButtonDiv .fa-regular {
    color: var(--bs-primary);
}

    .menuPopupButtonDiv .fa-regular :hover {
        color: white;
    }

.menuPopupButtonDiv:hover .fa-regular {
    color: white;
}

.widgetHeaderIcon-Green {
    color: green;
}

.widgetHeaderIcon-Blue {
    color: deepskyblue;
}

/*Dashboard Widgets - END*/

/*  Syncfusion DataGrid - remove selection around cell when selecting row  - BEGIN */
.e-grid td.e-rowcell.e-focus.e-focused {
    box-shadow: none;
}
.e-grid th.e-headercell.e-focus.e-focused {
    box-shadow: none;
}
/*  Syncfusion DataGrid - remove selection around cell when selecting row  - END */

.panelButtonIcon {
    width: 2rem;
    height: 2rem;
    stroke-width: 1px;
    fill: none;
    margin-left: 0;
    position: relative;
    --sa-icon-hover-fill-opacity: 0.2;
}

.btn.btn-panel {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

    .btn.btn-panel:focus,
    .btn.btn-panel:active,
    .btn.btn-panel:focus-visible,
    .btn.btn-panel:focus-within {
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
        background-color: transparent !important;
        background-image: none !important;
        transition: none !important;
        animation: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        opacity: 1 !important;
    }

        .btn.btn-panel::before,
        .btn.btn-panel::after,
        .btn.btn-panel:active::before,
        .btn.btn-panel:active::after {
            content: none !important;
            display: none !important;
        }

    .btn.btn-panel:hover {
        background-color: rgba(255, 255, 255, 0.3) !important;
    }

[data-bs-theme="dark"] .btn.btn-panel:hover {
    background-color: transparent !important;
}

.btn.btn-panel:active svg {
    filter: none !important;
}

.panelButtonIcon {
    transition: all 0.2s ease !important;
}

.panelCollapseIcon,
.panelCollapseIcon use {
    stroke: var(--bs-success);
}

.btn-panel:hover .panelCollapseIcon,
.btn-panel:hover .panelCollapseIcon use {
    fill: var(--bs-success) !important;
    fill-opacity: 0.2 !important;
}

.panelExpandIcon,
.panelExpandIcon use {
    stroke: var(--bs-success);
}

.btn-panel:hover .panelExpandIcon,
.btn-panel:hover .panelExpandIcon use {
    fill: var(--bs-success) !important;
    fill-opacity: 0.2 !important;
}

.panelFullscreenIcon,
.panelFullscreenIcon use {
    stroke: var(--bs-warning);
}

.btn-panel:hover .panelFullscreenIcon,
.btn-panel:hover .panelFullscreenIcon use {
    fill: var(--bs-warning) !important;
    fill-opacity: 0.2 !important;
}

/* Pin/thumbtack panel button - light (outline) thumbtack stacked in a light circle, matching
   the collapse/fullscreen circle icons (primary outline at rest, semi-opaque fill on hover).
   On/off is conveyed by the thumbtack angle (angled when unpinned, straight when pinned) and
   a persistent filled circle when pinned. */
.panelPinIcon.fa-stack {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    vertical-align: middle;
}

    .panelPinIcon .panelPinRing {
        color: var(--bs-primary);
    }

    .panelPinIcon .panelPinTack {
        color: var(--bs-primary);
    }

    .panelPinIcon .panelPinFill {
        color: var(--bs-primary);
        opacity: 0;
        transition: opacity 0.2s ease;
    }

/* Hover fills the circle, like the other panel icons */
.btn-panel:hover .panelPinIcon .panelPinFill {
    opacity: 0.15;
}

/* Pinned (on): persistent filled circle to read as active */
.panelPinIcon.panelPinned .panelPinFill {
    opacity: 0.2;
}

.e-control, .e-css, .e-error {
    font-family: "Inter", sans-serif;  /*system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";*/
}

.notification-report-parameter-name {
    font-weight: bold;
}
/* ------------------------------------------------------------------------------------------------
   Sync issue explanation card and its ⓘ trigger.

   ⚠ HERE RATHER THAN IN EITHER PAGE'S INLINE STYLE BLOCK, BECAUSE TWO PAGES USE IT: the tenant Data
   Issues grid and the Support Sync Issues grid both render the ⓘ and both open the same
   SyncIssueExplanation card. A copy in each page is the drift this file exists to prevent, and the
   trigger classes cannot live in the card component itself - they style the GRID CELL, which is
   painted long before any card is opened.
   ------------------------------------------------------------------------------------------------ */

/* The issue name and its ⓘ share a cell; the icon is pushed right so it lands in the same place on
   every row rather than tracking the length of each issue name. */
.syncIssueIssueCell {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

    .syncIssueIssueCell > span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.syncIssueInfoButton {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 0;
    border: none;
    background: none;
    line-height: 1;
    font-size: 1rem;
    cursor: pointer;
    color: var(--bs-primary, #0d6efd);
}

    .syncIssueInfoButton:hover,
    .syncIssueInfoButton:focus-visible {
        opacity: 0.75;
    }

.syncIssueExplanationSection {
    margin-bottom: 0.5rem;
}

.syncIssueExplanationLabel {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    opacity: 0.7;
    margin-bottom: 0.1rem;
}

/* The row's own finding, and the dismissal reason - set apart from the rule's general prose so the
   reader can tell "this is about THIS record" from "this is what the rule means". */
.syncIssueExplanationDetail {
    margin-top: 0.25rem;
    padding-left: 0.5rem;
    border-left: 2px solid rgba(127, 127, 127, 0.4);
}

/* ── MapSurface (AI Sprinkles 1b-1) ───────────────────────────────────────────
   ⚠ GLOBAL, NOT SCOPED TO MapSurface, AND THAT IS NOT AN OVERSIGHT.
   (This said "NOT MapSurface.razor.css" until 2026-08-16. That file no longer
   exists at all - D1 Task 11's fix round folded its only rule, .zipOverlayToggle,
   into MapToolsPanel's Tools - so the contrast is now with scoped CSS in general.
   The reasoning below is unchanged and is still why these two live here.)

   Blazor CSS isolation works by stamping a scope attribute onto the elements a
   component itself renders. Neither of these rules applies to such an element:

     .mapStyles  is handed to GoogleMapsComponents' own AdvancedGoogleMap as a
                 CssClass, and a child component's markup does not carry its
                 parent's scope attribute.
     .st0-.st4   style the cluster-pin SVG, which the Google Maps JS API injects
                 into its own DOM entirely outside Blazor's render tree.

   Under isolation both would silently stop applying - an 800px map collapsing to
   nothing, and cluster pins losing their fill - with no build error and nothing
   in the C# to suggest why. Moved here from TankMap.razor's inline <style> when
   the map became a reusable component. */
.mapStyles {
    min-height: 800px;
}

.st0 { fill: #008CFF; }
.st1 { fill: none; stroke: #008CFF; stroke-width: 2; stroke-miterlimit: 10; }
.st2 { opacity: 0.1; fill: #008CFF; }
.st3 { opacity: 0.3; fill: #008CFF; }
.st4 { opacity: 0.5; fill: #008CFF; }

/* ⚠⚠ THE TANK MAP'S DRAWING MODES: MARKERS MUST NOT EAT THE CLICKS THAT PLACE A VERTEX.
   Toggled by terraDrawFunctions.applyMarkerSuppressionForMode on the map's own container, and removed the
   instant the mode returns to static (a click on a marker then opens its tank detail again, as always).

   MEASURED 2026-08-17, drawing mode armed and 23 markers on screen:
       click ON a marker  -> document.elementFromPoint = <svg>  -> Terra Draw features 0 -> 0
       click on empty map -> document.elementFromPoint = <div>  -> Terra Draw features 0 -> 1
   A <gmp-advanced-marker> sits above the map's event element, so its clicks never reach Terra Draw's
   listener. On a map of ~17,000 tanks that is most of the area a user actually wants to draw over, which is
   why the defect read as "drawing does not work at all" while every empty-map test drew fine.

   ⚠ IT LIVES HERE, NOT IN A COMPONENT STYLESHEET, AND THAT IS NOT A STYLE CHOICE. <gmp-advanced-marker> is
   rendered by the Google Maps API inside its own DOM, so Blazor's scoped CSS attribute is never applied to
   it and a MapSurface.razor.css rule - ::deep or not - could not reach it. */
   ⚠⚠ `!important` IS LOAD-BEARING HERE AND MUST NOT BE "CLEANED UP". Google writes the marker's
   pointer-events INLINE - measured on a live marker 2026-08-17:
       style="pointer-events: auto; cursor: pointer; touch-action: pan-x pan-y; transform: ...; ..."
   An inline declaration beats ANY stylesheet selector no matter how specific, so the first version of this
   rule (without !important) loaded correctly, applied to the right element, and still computed to
   `pointer-events: auto` - the markers went on eating every click and the fix looked like it had done
   nothing. A stylesheet `!important` DOES beat a normal inline declaration, and Google's is not itself
   `!important`, so exactly one is enough. Do not add a second one elsewhere hoping to out-rank it. */
.mapDrawingSuppressesMarkers gmp-advanced-marker {
    pointer-events: none !important;
}

/* ⚠⚠ THE MAP PANEL'S IN-FLIGHT SPINNER, SHARED BY MapHotspotsControl (Zip Code Density) AND
   MapZipBoundaryControl (Zip Code Boundaries).
   It lives here rather than in either component's .razor.css because Blazor's scoped CSS stamps a per-component
   attribute onto the elements THAT component renders - so a rule in one component's stylesheet cannot style a
   span rendered by the other. It was first written in MapHotspotsControl.razor.css and the boundaries spinner
   silently rendered unstyled (no border, no size, invisible), which is why that spinner was reported missing
   twice while its markup was already in place.
   ⚠ A CSS-only spinner rather than SfSpinner: SfSpinner's .e-spinner-pane is position:absolute at 100%x100% and
   would cover its nearest positioned ancestor instead of sitting inline beside a checkbox. */
.mapHotspotsChoroplethSpinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #C7C7C7;
    border-top-color: #4285F4;
    border-radius: 50%;
    animation: mapHotspotsSpin 700ms linear infinite;
}

@keyframes mapHotspotsSpin {
    to { transform: rotate(360deg); }
}

/* ── DASHBOARD CARD HEADERS ───────────────────────────────────────────────────
   Promoted out of Home.razor.css 2026-08-19. These are shared by the Inbox,
   What's New and System Health cards, and What's New now lives in its own
   component (Components/News/WhatsNew.razor).

   ⚠ THEY MUST STAY UNSCOPED. A scoped rule can only match elements its OWN
   .razor authored, so as soon as one of the three cards moved into a component
   these stopped matching it. Do not move them back into a .razor.css.

   The .homeContainer:not(.light) dark variants below work again precisely
   BECAUSE these are unscoped - an unscoped descendant selector does not care
   which component authored the element. ────────────────────────────────────── */

.card-header-row {
    padding: 2px 0 16px 0;
    border-bottom: 0px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .card-header-row .ch-title {
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        flex: 1;
    }

    .card-header-row .ch-badge {
        font-size: 11px;
        font-weight: 500;
        color: #C8C8C8;
        /* background: var(--bg); */
        /* border-radius: 20px; */
        padding: 2px 9px;
        text-transform: uppercase;
    }

    .card-header-row .ch-icon {
        color: var(--text-muted);
        font-size: 15px;
    }

    .card-header-row .ch-icon-red {
        color: var(--red);
        font-size: 12px;
        background: #FFF9F9;
        padding: 10px;
        border-radius: 4px;
    }

.homeContainer:not(.light) .card-header-row .ch-icon-red {
    background: #fff9f914;
}


.card-header-row .ch-icon-blue {
    color: var(--blue-primary);
    font-size: 11px;
    background: #0090D70D;
    padding: 10px;
    border-radius: 4px;
}

.card-header-row .ch-icon-green {
    color: var(--green);
    font-size: 11px;
    background: #00d76d0d;
    padding: 10px;
    border-radius: 4px;
}

.homeContainer:not(.light) .card-header-row .green {
    background: #fff9f914;
}

/* ── SYSTEM HEALTH: the 24-hour strip's geometry, and its SECOND CHANNEL ──────────────────────────────
   System health dashboard, 2026-08-24.

   ⚠⚠ HERE RATHER THAN IN A SCOPED .razor.css, AND THAT IS THE RULE FOR THE WHOLE FEATURE. The strip is
   rendered inside a Syncfusion <Template> in the topology grid, and a scoped rule cannot reach markup a
   template produced (HD-C39) - nor a RenderFragment's. The health pages ship NO .razor.css at all, and
   HealthPageStylingTests scans for one, because a file appearing there later would be inert and would look
   like it worked.

   ⚠⚠ THE PATTERN IS NOT DECORATION - IT IS THE SECOND CHANNEL. A row of 24 coloured cells is colour ALONE,
   which this feature forbids everywhere else. A 24-cell strip cannot carry a text label per cell, so the
   state must be legible without colour: solid / hatched / outlined / dashed / a bare baseline rule are
   distinguishable in greyscale and under every form of colour blindness. Each segment also carries a title
   attribute naming its hour and status, and the strip carries an aria-label summarising the day in words.

   ⚠ EVERY var() CARRIES A LITERAL FALLBACK, so a sheet that failed to load degrades to legible rather than
   invisible. */
.healthStrip {
    display: flex;
    gap: 1px;
    height: 14px;
}

.healthStrip-segment {
    flex: 1 1 0;
    min-width: 3px;
    border-radius: 1px;
}

.healthStrip-good {
    background-color: var(--health-strip-good, rgba(25, 135, 84, .35));
}

.healthStrip-degraded {
    background-image: repeating-linear-gradient(45deg, var(--health-strip-degraded, rgba(255, 193, 7, .35)) 0 3px, transparent 3px 6px);
}

.healthStrip-bad {
    background-color: var(--health-strip-bad, rgba(220, 53, 69, .35));
    box-shadow: inset 0 0 0 2px var(--health-strip-outline, #C7C7C7);
}

.healthStrip-unknown {
    background-color: var(--health-strip-unknown, rgba(108, 117, 125, .25));
    border: 1px dashed var(--health-strip-outline, #C7C7C7);
}

/* ⚠ A BASELINE RULE AND NOTHING ELSE. "We did not look" must be visibly EMPTY rather than a fifth tint, or an
   hour the prober never ran reads as an hour it ran and found something. */
.healthStrip-nodata {
    background-color: transparent;
    border-bottom: 1px solid var(--health-strip-outline, #C7C7C7);
}

/* ── SYSTEM HEALTH DASHBOARD: executive pulse and drill-down estate map ──────────────────────────────
   All surfaces resolve through Bootstrap tokens so the site's data-bs-theme toggle owns light/dark mode. */
.systemHealthDashboardLayout {
    --health-dashboard-surface: #FFFFFF;
    --health-dashboard-link: #0A58CA;
    --health-dashboard-action: #0A58CA;
    --health-dashboard-on-action: #FFFFFF;
    --health-dashboard-status-success: #146C43;
    --health-dashboard-status-danger: #B02A37;
    --health-dashboard-status-unknown: #495057;
    --health-dashboard-on-status: #FFFFFF;
    --health-dashboard-focus: #0A58CA;
    color: var(--bs-body-color, #212529);
    font-size: .84rem;
}

[data-bs-theme="dark"] .systemHealthDashboardLayout {
    --health-dashboard-surface: #212529;
    --health-dashboard-link: #6EA8FE;
    --health-dashboard-action: #0A58CA;
    --health-dashboard-on-action: #FFFFFF;
    --health-dashboard-status-success: #146C43;
    --health-dashboard-status-danger: #B02A37;
    --health-dashboard-status-unknown: #495057;
    --health-dashboard-on-status: #FFFFFF;
    --health-dashboard-focus: #6EA8FE;
}

.systemHealthDashboardLayout a:not(.btn),
.systemHealthDashboardLayout .btn-link,
.systemHealthDashboardLayout .gridLink,
.systemHealthDashboardLayout table.k-grid-table td a.gridLink {
    color: var(--health-dashboard-link, #0A58CA) !important;
}

.systemHealthDashboardLayout .btn-primary,
.systemHealthDashboardLayout .healthInvestigateButton {
    color: var(--health-dashboard-on-action, #FFFFFF) !important;
    background-color: var(--health-dashboard-action, #0A58CA) !important;
    border-color: var(--health-dashboard-action, #0A58CA) !important;
}

.systemHealthDashboardLayout .healthSignalInvestigateButton {
    color: var(--health-dashboard-link, #0A58CA) !important;
    border-color: var(--health-dashboard-link, #0A58CA) !important;
}

.systemHealthDashboardLayout .healthDashboardOutlineAction {
    color: var(--health-dashboard-link, #0A58CA) !important;
    border-color: var(--health-dashboard-link, #0A58CA) !important;
}

.systemHealthDashboardLayout .healthDashboardOutlineAction:hover,
.systemHealthDashboardLayout .healthDashboardOutlineAction:focus,
.systemHealthDashboardLayout .healthDashboardOutlineAction:active {
    color: var(--health-dashboard-on-action, #FFFFFF) !important;
    background-color: var(--health-dashboard-action, #0A58CA) !important;
    border-color: var(--health-dashboard-action, #0A58CA) !important;
}

.systemHealthDashboardLayout .healthDashboardTextAction {
    color: var(--health-dashboard-link, #0A58CA) !important;
}

.systemHealthDashboardLayout .healthGridLinkButton {
    padding: 0;
    color: var(--health-dashboard-link, #0A58CA);
    font: inherit;
    text-align: left;
    background: transparent;
    border: 0;
}

.systemHealthDashboardLayout .healthGridLinkButton:focus-visible {
    outline: 3px solid var(--health-dashboard-focus, #0A58CA);
    outline-offset: 2px;
}

.systemHealthDashboardLayout .healthSignalExplanationButton:focus-visible {
    outline: 3px solid var(--health-dashboard-focus, #0A58CA);
    outline-offset: 2px;
}

/* Syncfusion dialogs are rendered in a portal outside .systemHealthDashboardLayout. Keep this selector
   specific to Health dialog permalinks while allowing it to follow the site's root theme state. */
.healthDashboardDialogPermalink {
    color: #0A58CA !important;
}

[data-bs-theme="dark"] .healthDashboardDialogPermalink {
    color: #6EA8FE !important;
}

/* Incident and component details can render inside a Syncfusion portal, outside the dashboard wrapper.
   This feature-local surface carries its own semantic pair without changing site-wide Bootstrap controls. */
.healthDetailSurface {
    --health-detail-surface: #FFFFFF;
    --health-detail-link: #0A58CA;
    --health-detail-action: #0A58CA;
    --health-detail-on-action: #FFFFFF;
}

[data-bs-theme="dark"] .healthDetailSurface {
    --health-detail-surface: #212529;
    --health-detail-link: #6EA8FE;
    --health-detail-action: #0A58CA;
    --health-detail-on-action: #FFFFFF;
}

.healthDetailSurface a:not(.btn),
.healthDetailSurface .gridLink,
.healthDetailSurface table.k-grid-table td a.gridLink {
    color: var(--health-detail-link, #0A58CA) !important;
}

.healthDetailSurface .btn-outline-primary {
    color: var(--health-detail-link, #0A58CA) !important;
    border-color: var(--health-detail-link, #0A58CA) !important;
}

.healthDetailSurface .btn-outline-primary:hover,
.healthDetailSurface .btn-outline-primary:focus,
.healthDetailSurface .btn-outline-primary:active,
.healthDetailSurface .btn-primary,
.healthDetailSurface .btn-primary:hover,
.healthDetailSurface .btn-primary:focus,
.healthDetailSurface .btn-primary:active {
    color: var(--health-detail-on-action, #FFFFFF) !important;
    background-color: var(--health-detail-action, #0A58CA) !important;
    border-color: var(--health-detail-action, #0A58CA) !important;
}

.systemHealthDashboardLayout .healthSignalInvestigateButton:hover,
.systemHealthDashboardLayout .healthSignalInvestigateButton:active {
    color: var(--health-dashboard-on-action, #FFFFFF) !important;
    background-color: var(--health-dashboard-action, #0A58CA) !important;
    border-color: var(--health-dashboard-action, #0A58CA) !important;
}

.systemHealthDashboardLayout .badge.bg-success {
    color: var(--health-dashboard-on-status, #FFFFFF) !important;
    background-color: var(--health-dashboard-status-success, #146C43) !important;
}

.systemHealthDashboardLayout .badge.bg-danger {
    color: var(--health-dashboard-on-status, #FFFFFF) !important;
    background-color: var(--health-dashboard-status-danger, #B02A37) !important;
}

.systemHealthDashboardLayout .badge.bg-secondary {
    color: var(--health-dashboard-on-status, #FFFFFF) !important;
    background-color: var(--health-dashboard-status-unknown, #495057) !important;
}

.systemHealthDashboardLayout .panel-hdr .btn.btn-panel:focus-visible,
.systemHealthDashboardLayout .panel-hdr button:focus-visible,
.systemHealthDashboardLayout .panel-hdr a:focus-visible {
    outline: 3px solid var(--health-dashboard-focus, #0A58CA) !important;
    outline-offset: 2px !important;
}

.systemHealthDashboardLayout .panel-hdr .h2 {
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: 0;
}

.systemHealthDashboardLayout .e-grid {
    font-size: .8rem;
}

.healthDashboardPageHeader {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .25rem 0 .8rem;
}

.healthDashboardPageHeader h1 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.healthDashboardPageHeader p {
    margin: .18rem 0 0;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .8rem;
}

.healthDashboardPageTools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .7rem;
    min-height: 1.8rem;
    font-size: .78rem;
    white-space: nowrap;
}

.healthDashboardExecutive {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) repeat(3, minmax(90px, .45fr)) minmax(230px, 1fr);
    gap: 0;
    overflow: hidden;
    margin-bottom: 1rem;
    color: var(--bs-body-color, #212529);
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-left-width: 5px;
    border-radius: var(--bs-border-radius, .375rem);
}

.healthDashboardVerdict-good {
    border-left-color: var(--bs-success, #198754);
}

.healthDashboardVerdict-degraded {
    border-left-color: var(--bs-warning, #ffc107);
}

.healthDashboardVerdict-bad {
    border-left-color: var(--bs-danger, #dc3545);
}

.healthDashboardVerdict-unknown {
    border-left-color: var(--bs-secondary, #6c757d);
}

.healthDashboardVerdict {
    min-width: 0;
    padding: .8rem .9rem;
    background: var(--bs-body-bg, #fff);
    border-right: 1px solid var(--bs-border-color, #dee2e6);
}

.healthDashboardEyebrow {
    margin-bottom: .4rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .055em;
}

.healthDashboardHeadline {
    margin: .5rem 0 .18rem;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -.015em;
}

.healthDashboardSummary {
    color: var(--bs-secondary-color, #6c757d);
    font-size: .78rem;
    line-height: 1.35;
}

.healthDashboardMetrics {
    display: contents;
}

.healthDashboardMetric {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: .7rem .6rem;
    text-align: center;
    background: var(--bs-body-bg, #fff);
    border-right: 1px solid var(--bs-border-color, #dee2e6);
}

.healthDashboardMetric + .healthDashboardMetric {
    border-left: 0;
}

.healthDashboardMetricValue {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1;
}

.healthDashboardMetric-success .healthDashboardMetricValue {
    color: var(--bs-success, #0f8a57);
}

.healthDashboardMetric-danger .healthDashboardMetricValue {
    color: var(--bs-danger, #e15570);
}

.healthDashboardMetricLabel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    margin-top: .3rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .01em;
}

.healthDashboardMetricExplanationButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .1rem;
    color: inherit;
    font-size: .78rem;
    line-height: 1;
    background: transparent;
    border: 0;
    border-radius: var(--bs-border-radius-sm, .25rem);
}

.healthDashboardMetricExplanationButton:hover {
    color: var(--bs-primary, #0d6efd);
}

.healthDashboardMetricExplanationButton:focus-visible {
    color: var(--bs-primary, #0d6efd);
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.healthDashboardPulse {
    min-width: 0;
    padding: .7rem .85rem;
}

.healthDashboardPulseStrip {
    height: 26px;
}

/* Dashboard timelines use the approved solid, instrument-like blocks. Tooltips, spoken summaries, status
   badges and check counts remain the non-colour channels; the timeline is never the sole status indicator. */
.healthDashboardTimeStrip {
    gap: 3px;
    height: 24px;
}

.healthDashboardTimeStrip .healthStrip-segment {
    min-width: 2px;
    border: 0;
    border-radius: 1px;
    box-shadow: none;
}

.healthDashboardTimeStrip .healthStrip-good {
    background-color: var(--bs-success, #0f8a57);
}

.healthDashboardTimeStrip .healthStrip-degraded {
    background-color: var(--bs-warning, #b08e1e);
    background-image: none;
}

.healthDashboardTimeStrip .healthStrip-bad {
    background-color: var(--bs-danger, #e15570);
}

.healthDashboardTimeStrip .healthStrip-unknown {
    background-color: var(--bs-secondary, #6c757d);
}

.healthDashboardTimeStrip .healthStrip-nodata {
    background-color: var(--bs-secondary-bg, #e9ecef);
    opacity: .55;
}

.healthDashboardPulseMeta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-top: .5rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .74rem;
}

.healthDashboardPanelLink {
    align-self: center;
    margin-right: .6rem;
    font-size: .76rem;
    text-decoration: none;
}

.healthActionQueuePanelContainer {
    height: clamp(19rem, 42vh, 25rem);
    overflow: hidden;
}

.healthActionQueuePanelContainer .e-grid {
    height: 100%;
}

.healthActionQueueDescription {
    display: -webkit-box;
    overflow: hidden;
    margin-top: .12rem;
    font-size: .72rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.healthIncidentsFilterBar {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1rem;
    align-items: center;
    padding: .7rem .75rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.healthIncidentsFilterGroup {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
}

.healthIncidentsFilterLabel {
    color: var(--bs-secondary-color, #6c757d);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.healthIncidentsGridSurface {
    height: clamp(20rem, 44vh, 30rem);
    overflow: hidden;
}

.healthIncidentsGridSurface .e-grid {
    height: 100%;
}

.healthDashboardActionCell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.healthEstateMap {
    display: grid;
    gap: .55rem;
}

.healthEstateGroup {
    display: grid;
    grid-template-columns: minmax(170px, .35fr) minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    padding: .5rem .65rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-left-width: 3px;
    border-radius: var(--bs-border-radius, .375rem);
}

.healthEstateGroup-good {
    border-left-color: var(--bs-success, #0f8a57);
}

.healthEstateGroup-degraded {
    border-left-color: var(--bs-warning, #b08e1e);
}

.healthEstateGroup-bad {
    border-left-color: var(--bs-danger, #e15570);
}

.healthEstateGroup-unknown {
    border-left-color: var(--bs-secondary, #6c757d);
}

.healthEstateGroupHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0;
}

.healthEstateGroupTitle {
    font-size: .84rem;
    font-weight: 600;
}

.healthEstateGroupHeader .text-muted {
    font-size: .72rem;
}

.healthEstateNodes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: .45rem;
}

.healthEstateNode,
.healthEstateOverflow {
    min-height: 36px;
    border-radius: var(--bs-border-radius, .375rem);
}

.healthEstateNode {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    padding: .32rem .48rem;
    color: var(--bs-body-color, #212529);
    text-align: left;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-left-width: 3px;
    transition: border-color .15s ease, background-color .15s ease;
}

.healthEstateNode:hover {
    background: var(--bs-secondary-bg, #e9ecef);
}

.healthEstateNode:focus-visible,
.healthEstateOverflow:focus-visible {
    outline: 3px solid rgba(var(--bs-primary-rgb, 13, 110, 253), .35);
    outline-offset: 2px;
}

.healthEstateNode-good {
    border-left-color: var(--bs-success, #198754);
}

.healthEstateNode-degraded {
    border-left-color: var(--bs-warning, #ffc107);
}

.healthEstateNode-bad {
    border-left-color: var(--bs-danger, #dc3545);
}

.healthEstateNode-unknown {
    border-left-color: var(--bs-secondary, #6c757d);
}

.healthEstateNodeIcon {
    flex: 0 0 .9rem;
    font-size: .65rem;
    text-align: center;
}

.healthEstateNode-good .healthEstateNodeIcon {
    color: var(--bs-success, #0f8a57);
}

.healthEstateNode-degraded .healthEstateNodeIcon {
    color: var(--bs-warning, #b08e1e);
}

.healthEstateNode-bad .healthEstateNodeIcon {
    color: var(--bs-danger, #e15570);
}

.healthEstateNode-unknown .healthEstateNodeIcon {
    color: var(--bs-secondary, #6c757d);
}

.healthEstateNodeCopy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.healthEstateNodeName {
    overflow: hidden;
    font-size: .8rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.healthEstateNodeChecks {
    color: var(--bs-secondary-color, #6c757d);
    font-size: .7rem;
}

.healthEstateOverflow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .5rem;
    font-size: .76rem;
    font-weight: 500;
    text-decoration: none;
    background: var(--bs-body-bg, #fff);
    border: 1px dashed var(--bs-border-color, #dee2e6);
}

.healthDashboardSectionTools {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .75rem;
}

.healthDashboardSectionTools-padded {
    padding: .75rem .75rem 0;
}

.healthDashboardSegmentedControl {
    display: inline-flex;
    gap: .15rem;
    padding: .2rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 999px;
}

.healthDashboardSegmentedControl button {
    padding: .25rem .7rem;
    color: var(--bs-secondary-color, #6c757d);
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 500;
}

.systemHealthDashboardLayout .healthDashboardSegmentedControl button.active,
.systemHealthDashboardLayout .e-pager .e-currentitem {
    color: var(--health-dashboard-on-action, #FFFFFF) !important;
    background: var(--health-dashboard-action, #0A58CA) !important;
}

.healthDashboardSegmentedControl button:focus-visible {
    outline: 3px solid rgba(var(--bs-primary-rgb, 13, 110, 253), .35);
    outline-offset: 1px;
}

.healthDashboardSignalCard {
    height: 100%;
    padding: .75rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem);
}

.healthDashboardSignalCard .fw-bold,
.healthDashboardSignalCard .fw-semibold {
    font-size: .82rem;
    font-weight: 600 !important;
}

.healthDashboardSignalCard .fs-5 {
    font-size: 1rem !important;
    font-weight: 600;
}

.healthSignalSparkline {
    align-items: center;
    display: flex;
    height: 32px;
    justify-content: center;
    position: relative;
    width: 120px;
}

.healthSignalSparklineLoading {
    position: absolute;
    z-index: 1;
}

.healthDashboardSignalDetails {
    padding-top: .75rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.healthComponentDialogHeader {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.healthComponentDialogLoadingIndicator {
    position: relative;
    display: inline-flex;
    width: 1rem;
    height: 1rem;
}

.healthComponentTopSurface {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-bottom: 1rem;
    padding: .8rem 1rem;
    color: var(--bs-body-color, #212529);
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-left: .25rem solid var(--health-detail-action, #0A58CA);
    border-radius: var(--bs-border-radius, .375rem);
}

.healthComponentPageHeading {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.25;
}

.healthComponentTopBar,
.healthComponentSummary,
.healthComponentTopActions {
    display: flex;
    align-items: center;
}

.healthComponentTopBar {
    justify-content: space-between;
    gap: .75rem 1rem;
}

.healthComponentSummary {
    flex-wrap: wrap;
    gap: .55rem 1rem;
    min-width: 0;
}

.healthComponentTopActions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .45rem .75rem;
}

.healthComponentUpdated {
    white-space: nowrap;
}

.healthMeasuredValuesWorkspace {
    display: grid;
    gap: .5rem;
    margin-bottom: 1rem;
}

.healthComponentSectionHeading {
    margin: 0;
    font-size: .92rem;
    font-weight: 600;
}

.healthMeasurementPanel {
    overflow: hidden;
    color: var(--bs-body-color, #212529);
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem);
}

.healthMeasurementToggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: .55rem .7rem;
    color: var(--bs-body-color, #212529);
    text-align: left;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 0;
}

.healthMeasurementToggle:hover {
    background: var(--bs-secondary-bg, #e9ecef);
}

.healthMeasurementToggle:focus-visible {
    outline: 3px solid rgba(var(--bs-primary-rgb, 13, 110, 253), .35);
    outline-offset: -3px;
}

.healthMeasurementIdentity {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.healthMeasurementName {
    overflow: hidden;
    font-size: .84rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.healthMeasurementSummary {
    color: var(--bs-secondary-color, #6c757d);
    font-size: .72rem;
}

.healthMeasurementChart {
    height: 16rem;
    padding: .45rem .65rem .65rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.healthComponentFullWidthPanel {
    width: 100%;
}

.healthComponentIncidentsPanelContainer {
    height: clamp(18rem, 38vh, 24rem);
    overflow: hidden;
}

.healthComponentIncidentsPanelContainer .e-grid {
    height: 100%;
}

/* System-health drill-downs keep the primary evidence wide and place supporting state beside it. Both grids
   collapse naturally for a narrow browser or the dashboard's modal dialog. */
.healthIncidentWorkspace {
    display: grid;
    grid-template-areas: "main rail";
    grid-template-columns: minmax(0, 1.65fr) minmax(260px, .7fr);
    align-items: start;
    gap: 1rem;
}

.healthIncidentMain {
    grid-area: main;
    min-width: 0;
}

.healthIncidentRail {
    display: grid;
    grid-area: rail;
    gap: 1rem;
    min-width: 0;
}

.healthComponentSecondaryGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
}

@media (max-width: 991.98px) {
    .healthDashboardPageHeader {
        flex-wrap: wrap;
    }

    .healthDashboardPageTools {
        width: 100%;
        margin-left: 0 !important;
        justify-content: flex-start;
    }

    .healthDashboardExecutive {
        grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(90px, .45fr));
    }

    .healthDashboardPulse {
        grid-column: 1 / -1;
        border-top: 1px solid var(--bs-border-color, #dee2e6);
    }

    .healthIncidentWorkspace,
    .healthComponentSecondaryGrid {
        grid-template-areas: none;
        grid-template-columns: 1fr;
    }

    .healthIncidentMain,
    .healthIncidentRail {
        grid-area: auto;
    }
}

@media (max-width: 575.98px) {
    .healthDashboardExecutive,
    .healthEstateGroup {
        grid-template-columns: 1fr;
    }

    .healthDashboardVerdict,
    .healthDashboardMetric {
        border-right: 0;
        border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    }

    .healthDashboardMetric + .healthDashboardMetric {
        border-left: 0;
    }

    .healthDashboardPulse {
        grid-column: auto;
        border-top: 0;
    }

    .healthEstateNodes {
        grid-template-columns: 1fr;
    }

    .healthDashboardPageTools {
        align-items: flex-start;
        flex-wrap: wrap;
        white-space: normal;
    }

    .healthActionQueuePanelContainer {
        height: 22rem;
    }

    .healthIncidentsFilterGroup {
        align-items: flex-start;
        flex-direction: column;
        gap: .2rem;
        max-width: 100%;
    }

    .healthIncidentsFilterGroup .healthDashboardSegmentedControl {
        flex-wrap: wrap;
        max-width: 100%;
    }

    .healthIncidentsFilterGroup .healthDashboardSegmentedControl button {
        flex: 1 1 auto;
    }

    .healthIncidentsFilterBar {
        align-items: flex-start;
    }

    .healthComponentTopBar {
        align-items: flex-start;
        flex-direction: column;
    }

    .healthComponentTopActions {
        justify-content: flex-start;
        width: 100%;
        margin-left: 0 !important;
    }

    .healthComponentUpdated {
        flex-basis: 100%;
        white-space: normal;
    }
}


/* ── CREDENTIAL UNLOCK BUTTONS: readable in BOTH themes (ONB2-D10) ───────────────────────
   Tenant Database Server detail, 2026-08-31. Found by the Stage 2 two-theme browser pass.

   A bare Syncfusion `e-flat` button renders its label in Bootstrap's $gray-600, rgb(108,117,125), and that
   SAME token is used in both themes. Measured against the real backgrounds: 4.69:1 on the light ground
   (passes) but 3.04:1 on the dark panel, rgb(39,43,48) - under the 4.5:1 WCAG AA floor for 14px/400 text,
   and on screen it reads as a DISABLED control.

   ⚠ TWO SIMPLER FIXES WERE MEASURED IN THE RUNNING APP AND BOTH FAILED - do not "simplify" back to either:
     - `e-primary` alone is theme-aware but only reaches 4.33:1 on the dark panel. Still fails.
     - `var(--bs-link-color)` passes dark (7.33:1) but the skin's LIGHT link token is #2198f3, which is
       only 3.07:1 on white. It trades a dark failure for a light one.

   So the colour is a variable defined in BOTH theme sheets - the same "both sheets or neither" shape as the
   health-strip fills above. Light #0b5ed7 = 5.84:1 on white; dark #7ac1f8 = 7.33:1 on rgb(39,43,48).

   ⚠ THIS CANNOT BE SCOPED CSS. The element is rendered by SfButton, a child component, so a `.razor.css`
   rule never receives the scope attribute that would match it - it would silently match nothing (see the
   razor-traps note on scoped CSS and child-component markup). It has to be a global rule. */
.e-btn.e-flat.credential-unlock-button,
.e-btn.e-flat.e-primary.credential-unlock-button {
    color: var(--credential-unlock-color, #0b5ed7);
}


/* ── ERP HANDOVER FIELDS (Stage 3, onboarding step 5) ─────────────────
   ONB3-BP-D5. The three ERP inputs live in the STEP NAME CELL of the steps table, whose width is whatever
   four fixed-width columns (60 + 160 + 140 + 180 px) leave over. Bootstrap's col-md-4 responds to the
   VIEWPORT, so above 768px it holds all three side by side however narrow the cell has actually become.
   ⚠ MEASURED IN THE BROWSER PASS: at a 900px viewport the cell was 183px and each input 57px. An operator
   cannot read or check `(localdb)\MSSQLLocalDB` in a 57px box, and that row exists to get a server name
   exactly right.

   ⚠ flex-basis, NOT min-width. A hard min-width larger than the cell OVERFLOWS it (min-width beats
   max-width in CSS), and the pass verified the page does not scroll horizontally at 900px - a property worth
   keeping. A flex basis wraps instead: the row is already `display:flex; flex-wrap:wrap`, so each field takes
   14rem when three of them fit and drops to its own full-cell line when they do not, then shrinks to fit.
   min-width:0 stops a long value forcing the column wider than its share.

   ⚠ NO NEW COLOUR, so nothing here needs a token in either theme sheet. Layout only - deliberately, since
   a colour would have to be a matched pair in site-defaultTheme.css and site-darkTheme.css.

   ⚠ NOT SCOPED CSS, for the same reason as the script block below: TenantOnboardingDetail.razor has no
   .razor.css and this markup is authored inside a Panel's RenderFragment, where a scoped rule would never
   receive the attribute that matches it and would silently match nothing (razor-traps note #6). */
.onboarding-erp-handover-fields > [class*="col-"] {
    flex: 1 1 14rem;
    width: auto;
    min-width: 0;
}


/* ── ERP GRANT SCRIPT BLOCK (Stage 3, onboarding step 5) ───────────────────────────────
   The readonly T-SQL block the operator sends to the customer's DBA, on TenantOnboardingDetail.

   ⚠ THE COLOURS ARE VARIABLES DEFINED IN BOTH THEME SHEETS, NEVER LITERALS HERE - the same "both sheets or
   neither" shape as the credential-unlock colour above and the health-strip fills. The literal in each
   var()'s fallback slot is the LIGHT value, so a missing token degrades to the light theme rather than to
   nothing, matching the convention site-defaultTheme.css records for the --map-* tokens.

   ⚠ NOT SCOPED CSS. TenantOnboardingDetail.razor has no .razor.css, and the block is authored inside a
   Panel's RenderFragment - a scoped rule would not receive the scope attribute that matches it and would
   silently match nothing (razor-traps note #6). It has to be a global rule.

   ⚠ THE ELEMENT IS A <textarea readonly>, NOT A <pre>, and the monospace font here is what stops it looking
   like an ordinary form field. readonly rather than disabled so the text can still be SELECTED by hand,
   which is the fallback when the browser blocks the clipboard API. */
textarea.onboarding-grant-script {
    background-color: var(--onboarding-script-bg, #F5F5F5);
    color: var(--onboarding-script-fg, #212529);
    border: 1px solid var(--onboarding-script-border, #C7C7C7);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.8rem;
    white-space: pre;
    overflow-x: auto;
}

/* ⚠ Bootstrap's .form-control:focus repaints background and colour from its OWN tokens, which would drop
   this block back to a plain field the moment it is clicked - and it WILL be clicked, because selecting the
   text by hand is the documented fallback above. */
textarea.onboarding-grant-script:focus {
    background-color: var(--onboarding-script-bg, #F5F5F5);
    color: var(--onboarding-script-fg, #212529);
}