/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Ordinary pages scroll the document: the bar is as tall as it needs to be and the content grows
   below it. */
.page[b-vnaf4unig5] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content[b-vnaf4unig5] {
    flex: 1;
    min-height: 0;
    padding: 1.25em 1.5em;
}

/* A page that marks its root .fills-viewport pins the layout to exactly the viewport instead, so
   the document never scrolls and each pane inside owns its own scrollbar -- which is what lets the
   fleet tree scroll without moving the map beside it.

   min-height: 0 on the chain is what makes that work: a flex child defaults to min-height auto and
   would otherwise refuse to shrink below its content, pushing the overflow back out to the page. */
.page:has(.fills-viewport)[b-vnaf4unig5] {
    height: 100vh;
    overflow: hidden;
}

.content:has(> .fills-viewport)[b-vnaf4unig5] {
    padding: 0;
    display: flex;
    overflow: hidden;
}

/* Under the content on an ordinary page, at the foot of the viewport on a short one; on a page
   pinned to the viewport it takes its height before the panes share the rest. */
.eb-footer[b-vnaf4unig5] {
    flex: none;
    display: flex;
    justify-content: center;
    gap: 1.5em;
    padding: .75em 1.5em;
    font-size: .875em;
    border-top: 1px solid var(--ui-top-bar-border);
}

.eb-footer a[b-vnaf4unig5] {
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.eb-footer a:hover[b-vnaf4unig5] {
    color: var(--ui-brand);
    text-decoration: underline;
}

#blazor-error-ui[b-vnaf4unig5] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .6em 1.25em .7em 1.25em;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-vnaf4unig5] {
        cursor: pointer;
        position: absolute;
        right: .75em;
        top: .5em;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* The title bar. Dark in both themes, like the sidebar it replaced, so the wordmark sits on the
   ground it was drawn for. */
.eb-bar[b-jyidmt542z] {
    display: flex;
    align-items: center;
    gap: 1.25em;
    flex-wrap: wrap;
    padding: 0 1.25em;
    min-height: 3.5em;
    /* Never squeezed by a page that pins itself to the viewport -- the panes below it absorb that. */
    flex: none;
    background-color: var(--ui-sidebar-top);
    border-bottom: 2px solid var(--ui-sidebar-accent);
    position: sticky;
    top: 0;
    /* Above Leaflet, below a modal.
       Sticky positioning makes this a stacking context, so every z-index inside the bar --
       the account menu included -- is resolved against this one number, not against the page.
       Leaflet's panes are 400 and its controls 1000, both in the root context, so at 100 the
       map painted straight over the open menu. Bootstrap's modal backdrop is 1050 and must
       still cover the bar, which is why this is not higher. */
    z-index: 1030;
}

.eb-bar[b-jyidmt542z]  .brand-logo {
    flex: none;
}

.eb-bar-nav[b-jyidmt542z] {
    display: flex;
    align-items: center;
    gap: .25em;
    flex: 1;
}

.eb-bar-end[b-jyidmt542z] {
    display: flex;
    align-items: center;
    gap: .75em;
}

/* One rule for every clickable thing in the bar, including the sign-out button, so a form button
   and an anchor are indistinguishable to the eye.

   A fixed light grey, not var(--ui-nav-text): the bar is dark in both themes, while that variable
   follows the page and resolves to near-black in light mode. */
.eb-bar[b-jyidmt542z]  .eb-link {
    color: #d7d7d7;
    text-decoration: none;
    white-space: nowrap;
    padding: .4em .7em;
    border-radius: .375em;
    line-height: 1.2;
}

.eb-bar[b-jyidmt542z]  .eb-link:hover {
    background-color: var(--ui-nav-hover-background);
    color: #fff;
}

.eb-bar[b-jyidmt542z]  .eb-link.active {
    background-color: var(--ui-nav-active-background);
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--ui-sidebar-accent);
}

.eb-bar[b-jyidmt542z]  .eb-link-button {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}

.eb-bar[b-jyidmt542z]  .eb-org-form,
.eb-bar[b-jyidmt542z]  .eb-logout-form {
    margin: 0;
}

/* theme.css styles this for a page background. In the bar it sits on the dark ground, so it takes
   the same fixed light grey as the links rather than var(--ui-page-text). Like the bell and the
   account icon beside it, it is a bare icon with no frame, whitening on hover. */
.eb-bar[b-jyidmt542z]  .theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #d7d7d7;
    border: 0;
}

.eb-bar[b-jyidmt542z]  .theme-toggle:hover {
    color: #fff;
    background: none;
}

.eb-bar[b-jyidmt542z]  .eb-org-form .form-select {
    min-width: 11em;
}

/* The alarm bell. Red in both themes rather than following the bar's grey, because it is the
   one control that means something is wrong; a bell that only reddens when ringing cannot be
   found when it is quiet. The red is the critical alarm badge's. The bell stands alone, with no frame, and lightens on hover. */
.eb-bar[b-jyidmt542z]  .eb-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-danger);
    text-decoration: none;
    flex: none;
    /* Room for the count, which hangs past the bell's right edge, so the gap to the next icon looks
       the same as the gaps between the others. */
    margin-right: .6em;
}

/* The count of active alarms, bare white figures at the bell's upper right with no badge behind
   them, as on the unit's own web page. */
.eb-bar[b-jyidmt542z]  .eb-bell-count {
    position: absolute;
    top: -.4em;
    left: 100%;
    margin-left: -.35em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

/* While any active alarm is unacknowledged, the bell shakes for a second every three, swinging
   from its top as the unit's own web page does. Still for anyone who has asked for less motion. */
.eb-bar[b-jyidmt542z]  .eb-bell.ringing svg {
    transform-origin: 50% 0;
    animation: eb-bell-ring-b-jyidmt542z 3s ease-in-out infinite;
}

@keyframes eb-bell-ring-b-jyidmt542z {
    0%   { transform: rotate(0deg); }
    5%   { transform: rotate(-15deg); }
    10%  { transform: rotate(15deg); }
    15%  { transform: rotate(-10deg); }
    20%  { transform: rotate(10deg); }
    25%  { transform: rotate(-5deg); }
    30%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .eb-bar[b-jyidmt542z]  .eb-bell.ringing svg {
        animation: none;
    }
}

.eb-bar[b-jyidmt542z]  .eb-bell:hover {
    color: #e4606d;
}

/* The account and organization menus, each behind one icon.

   Laid out after spocenergy.com's Resources menu, made compact: a navy panel with cream text, a line
   icon on every item, and an orange bar down the left of the item under the pointer and of the page
   that is open. The colours are theme.css's --ui-menu tokens. */
.eb-acct[b-jyidmt542z] {
    position: relative;
    display: flex;
    align-items: center;
}

.eb-acct-button[b-jyidmt542z] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    color: #d7d7d7;
}

/* Transparent over the icon rather than display:none, so it stays in the tab order and Space
   opens the menu. Nothing else in the bar is reachable only by mouse. */
.eb-acct-toggle[b-jyidmt542z] {
    position: absolute;
    right: 0;
    width: 2em;
    height: 2em;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.eb-acct-toggle:hover + .eb-acct-scrim + .eb-acct-button[b-jyidmt542z],
.eb-acct-toggle:focus-visible + .eb-acct-scrim + .eb-acct-button[b-jyidmt542z] {
    color: #fff;
}

.eb-acct-menu[b-jyidmt542z] {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + .45em);
    min-width: 13em;
    z-index: 1050;
    padding: .35em 0;
    background-color: var(--ui-menu-background);
    color: var(--ui-menu-text);
    border: 1px solid var(--ui-menu-border);
    border-radius: .25em;
    box-shadow: 0 .5em 1em var(--ui-menu-shadow);
}

/* Fades in as the Resources menu does, though quicker: it is opened often. */
.eb-acct-toggle:checked ~ .eb-acct-menu[b-jyidmt542z] {
    display: block;
    animation: eb-menu-in-b-jyidmt542z .15s ease-out;
}

@keyframes eb-menu-in-b-jyidmt542z {
    from { opacity: 0; transform: translateY(-.25em); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .eb-acct-toggle:checked ~ .eb-acct-menu[b-jyidmt542z] {
        animation: none;
    }
}

/* Covers the page so a click anywhere else closes the menu. A label rather than script, and
   beneath the panel so the items stay clickable. */
.eb-acct-scrim[b-jyidmt542z] {
    display: none;
}

.eb-acct-toggle:checked ~ .eb-acct-scrim[b-jyidmt542z] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1040;
    cursor: default;
}

.eb-acct-who[b-jyidmt542z] {
    display: block;
    padding: .29412em 1.05882em .52941em;
    font-size: .85em;
    opacity: 0.7;
    word-break: break-all;
    border-bottom: 1px solid var(--ui-menu-divider);
    margin-bottom: .29412em;
}

.eb-acct-divider[b-jyidmt542z] {
    display: block;
    height: 1px;
    margin: .3em 0;
    background-color: var(--ui-menu-divider);
}

/* The bar on the left is always there, transparent until the item is pointed at or open, so the
   text never shifts. */
.eb-bar[b-jyidmt542z]  .eb-acct-item {
    display: flex;
    align-items: center;
    gap: .65em;
    width: 100%;
    text-align: left;
    padding: .4em .9em .4em calc(.9em - 3px);
    border-left: 3px solid transparent;
    color: var(--ui-menu-text);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s;
}

.eb-bar[b-jyidmt542z]  .eb-acct-item:hover,
.eb-bar[b-jyidmt542z]  .eb-acct-item:focus-visible {
    background-color: var(--ui-menu-hover);
    border-left-color: var(--ui-brand);
    color: var(--ui-menu-text);
    outline: none;
}

/* The bar can no longer show which administration page is open, so the menu does. */
.eb-bar[b-jyidmt542z]  .eb-acct-item.active {
    background-color: var(--ui-menu-hover);
    border-left-color: var(--ui-brand);
    font-weight: 600;
}

.eb-bar[b-jyidmt542z]  .eb-acct-icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
}

/* Hidden on a wide screen; it is the collapse control for a narrow one. */
.eb-bar-toggle[b-jyidmt542z],
.eb-bar-burger[b-jyidmt542z] {
    display: none;
}

@media (max-width: 50.06125em) {
    .eb-bar[b-jyidmt542z] {
        padding: .5em 1em;
    }

    .eb-bar-burger[b-jyidmt542z] {
        display: block;
        margin-left: auto;
        cursor: pointer;
        font-size: 1.35em;
        line-height: 1;
        color: #d7d7d7;
        padding: .18519em .37037em;
    }

    .eb-acct[b-jyidmt542z] {
        flex-direction: column;
        align-items: stretch;
    }

    .eb-acct-menu[b-jyidmt542z] {
        position: static;
        min-width: 0;
        box-shadow: none;
        margin-top: .35em;
    }

    .eb-acct-toggle:checked ~ .eb-acct-scrim[b-jyidmt542z] {
        display: none;
    }

    /* Both groups collapse together, so the bar is the wordmark and the burger until it is opened. */
    .eb-bar-nav[b-jyidmt542z],
    .eb-bar-end[b-jyidmt542z] {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: .25em;
    }

    .eb-bar-toggle:checked ~ .eb-bar-nav[b-jyidmt542z],
    .eb-bar-toggle:checked ~ .eb-bar-end[b-jyidmt542z] {
        display: flex;
    }

    .eb-bar-end[b-jyidmt542z] {
        padding-top: .5em;
        border-top: 1px solid var(--ui-top-bar-border);
        margin-top: .5em;
    }
}
/* /Components/Layout/Pager.razor.rz.scp.css */
/* Coloured as the unit page's previous and next buttons, Bootstrap's outline-secondary: a grey 2px
   outline and icon on the page, filled grey with a white icon under the pointer, in either theme.
   Highlighted only while hovered: a clicked step keeps focus, and Bootstrap would leave it tinted
   and ringed, so focus looks like rest. The keyboard still gets an outline, which a mouse click
   does not draw. */
.pagination[b-zkb1ti3emo] {
    --bs-border-width: 2px;
    --bs-pagination-border-width: 2px;
    --bs-pagination-color: #6c757d;
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: #6c757d;
    --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-bg: #6c757d;
    --bs-pagination-hover-border-color: #6c757d;
    --bs-pagination-focus-color: #6c757d;
    --bs-pagination-focus-bg: transparent;
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-disabled-color: color-mix(in srgb, #6c757d 45%, transparent);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: #6c757d;
}

/* Between Bootstrap's small pager and its default: compact, but an easy target. */
.pagination-sm[b-zkb1ti3emo] {
    --bs-pagination-padding-y: .3125rem;
    --bs-pagination-padding-x: .625rem;
    --bs-pagination-font-size: .9375rem;
}

/* Every box in the bar one fixed height with its content centred, so the top and bottom borders run
   straight across. The height is the unit page's previous and next buttons': a 1.1rem icon, .35rem
   above and below it, and the 2px borders. */
.page-link[b-zkb1ti3emo] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(1.8rem + 4px);
    padding-top: 0;
    padding-bottom: 0;
}

.page-link:focus-visible[b-zkb1ti3emo] {
    outline: 2px solid var(--ui-brand);
    outline-offset: -2px;
}

/* The steps: one width for all four, so they line up as a set. No side padding: the width alone
   frames the icon, which the pagination's padding would otherwise squeeze narrower than it is set. */
.pager-step[b-zkb1ti3emo] {
    width: 2.5em;
    padding-left: 0;
    padding-right: 0;
}

/* The unit page's triangles at the unit page's size, and never shrunk by the flex box around them. */
.pager-icon[b-zkb1ti3emo] {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

/* Page x of y reads as text, not as a step that cannot be taken, so it keeps the page's own colour
   inside the grey outline. */
.pager-status[b-zkb1ti3emo] {
    color: var(--ui-page-text);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-yjad28bqpw],
.components-reconnect-repeated-attempt-visible[b-yjad28bqpw],
.components-reconnect-failed-visible[b-yjad28bqpw],
.components-pause-visible[b-yjad28bqpw],
.components-resume-failed-visible[b-yjad28bqpw],
.components-rejoining-animation[b-yjad28bqpw] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-yjad28bqpw],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-yjad28bqpw],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-yjad28bqpw],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-yjad28bqpw],
#components-reconnect-modal.components-reconnect-retrying[b-yjad28bqpw],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-yjad28bqpw],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-yjad28bqpw],
#components-reconnect-modal.components-reconnect-failed[b-yjad28bqpw],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-yjad28bqpw] {
    display: block;
}


#components-reconnect-modal[b-yjad28bqpw] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-yjad28bqpw 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-yjad28bqpw 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-yjad28bqpw 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-yjad28bqpw]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-yjad28bqpw 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-yjad28bqpw {
    0% {
        transform: translateY(1.875em) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-yjad28bqpw {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-yjad28bqpw {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-yjad28bqpw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

#components-reconnect-modal p[b-yjad28bqpw] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-yjad28bqpw] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: .25em 1.5em;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-yjad28bqpw] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-yjad28bqpw] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-yjad28bqpw] {
    position: relative;
    width: 5em;
    height: 5em;
}

    .components-rejoining-animation div[b-yjad28bqpw] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-yjad28bqpw 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-yjad28bqpw] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-yjad28bqpw {
    0% {
        top: 2.5em;
        left: 2.5em;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 2.5em;
        left: 2.5em;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 2.5em;
        left: 2.5em;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0;
        left: 0;
        width: 5em;
        height: 5em;
        opacity: 0;
    }
}
/* /Components/Layout/SocSparkline.razor.rz.scp.css */
.soc-spark[b-c2lywf8ruo] {
    display: flex;
    flex-direction: column;
    gap: .25em;
}

.soc-spark-head[b-c2lywf8ruo] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .25em .75em;
}

.soc-spark-title[b-c2lywf8ruo] {
    color: var(--bs-secondary-color);
}

.soc-spark-now[b-c2lywf8ruo] {
    font-size: 1.5em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.soc-spark-now small[b-c2lywf8ruo] {
    font-size: .9em;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.soc-spark-range[b-c2lywf8ruo] {
    font-size: .8125em;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

/* Stretched to the width of its area at a fixed height; the drawing is scaled into that box. */
.soc-spark-svg[b-c2lywf8ruo] {
    width: 100%;
    height: clamp(5em, 16vh, 10em);
    display: block;
}

/* The success colour rather than the on-colour the diagram's tiles use: the on-colour is the same
   dark green in both themes, which all but disappears as a thin line on the dark page, where the
   success colour brightens. */
.soc-spark-line[b-c2lywf8ruo] {
    fill: none;
    stroke: var(--ui-success);
    stroke-width: 2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.soc-spark-area[b-c2lywf8ruo] {
    fill: var(--ui-success);
    opacity: .15;
}

.soc-spark-base[b-c2lywf8ruo] {
    stroke: var(--ui-top-bar-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.soc-spark-axis[b-c2lywf8ruo] {
    display: flex;
    justify-content: space-between;
    font-size: .75em;
    color: var(--bs-secondary-color);
}
/* /Components/Layout/UnitDetails.razor.rz.scp.css */
/* Four cards side by side while there is room for them, wrapping to two and then one as the view
   narrows. Sized from the component's own width, not the viewport, since it sits inside a grid
   cell. */
.unit-details[b-m2uamfb1mm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.14286em, 1fr));
    gap: 1.14286em;
    align-content: start;
    /* A step down from body text, so all four cards fit the lower half of a 768-pixel screen. */
    font-size: .875em;
}

/* Everything inside is in the cards' own em, the .875em above, so these are the 16px-based sizes
   divided by .875: a card's padding stays the size it was as its text steps down. */

/* One line per column heading: wrapping "Current day" doubles the header row for one word. The
   row labels are left to wrap, which is where a narrow card finds its room. */
.unit-details thead th[b-m2uamfb1mm] {
    white-space: nowrap;
}

.detail-card[b-m2uamfb1mm] {
    border: 1px solid var(--ui-top-bar-border);
    border-radius: .42857em;
    padding: .85714em 1.14286em;
    background-color: var(--ui-page-background);
}

.detail-card-title[b-m2uamfb1mm] {
    font-weight: 600;
    margin-bottom: .57143em;
    padding-bottom: .4em;
    border-bottom: 2px solid var(--ui-brand);
}

/* Two columns: label left, value right. A definition list rather than a table because these are
   name/value pairs, not rows of a dataset. */
.detail-list[b-m2uamfb1mm] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .17143em .85714em;
    margin: 0;
}

.detail-list dt[b-m2uamfb1mm] {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.detail-list dd[b-m2uamfb1mm] {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* /Components/Layout/UnitMimic.razor.rz.scp.css */
/* The unit's one-line diagram, in the device home screen's colours, drawn straight onto the page.

   The device's home screen is always dark; here the page's theme carries through, so panels,
   text and the battery outline take the page's colours, while the state colours -- running
   blue, power-flow green, fault red -- are the device's own in both themes. */

/* The diagram fills whatever box the page gives it (see Unit.razor.css). preserveAspectRatio
   "xMidYMin meet" scales it to whichever of width or height runs out first and pins it to the
   top, so spare height falls below it. */
.mimic[b-pork05u7tx] {
    display: flex;
    flex-direction: column;
}

.mimic-svg[b-pork05u7tx] {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: block;
    font-family: inherit;
}

/* Lines */
.mimic-svg .line[b-pork05u7tx] {
    fill: none;
    stroke-width: 16;
    opacity: .85;
}

.mimic-svg .line-idle[b-pork05u7tx]   { stroke: #a0a0a0; }
.mimic-svg .line-flow[b-pork05u7tx]   { stroke: var(--ui-on-color); }
.mimic-svg .line-fault[b-pork05u7tx]  { stroke: var(--ui-fault); }
.mimic-svg .line-absent[b-pork05u7tx] { stroke: #a0a0a0; opacity: .3; }

/* Arrows on a line that carries power, in the device's dark green. A straight line's row moves
   one arrow spacing (ArrowSpacing in UnitMimic.razor) per second, so it loops seamlessly. */
.mimic-svg .arrows polygon[b-pork05u7tx] {
    fill: #002800;
}

.mimic-svg .arrows-marching[b-pork05u7tx] {
    animation: mimic-flow-b-pork05u7tx 1s linear infinite;
}

@keyframes mimic-flow-b-pork05u7tx {
    from { transform: translateX(0); }
    to   { transform: translateX(32px); }
}

/* For a browser asked for less motion, the straight lines' arrows stand still. */
@media (prefers-reduced-motion: reduce) {
    .mimic-svg .arrows-marching[b-pork05u7tx] {
        animation: none;
    }
}

/* Drives: blue while running, grey otherwise, including on a fault -- the badge and the red
   line say fault, as on the device. */
.mimic-svg .drive-body[b-pork05u7tx] {
    stroke: var(--ui-page-text);
    stroke-width: 4;
}

.mimic-svg .drive-on .drive-body[b-pork05u7tx]    { fill: #1c71d8; }
.mimic-svg .drive-off .drive-body[b-pork05u7tx],
.mimic-svg .drive-fault .drive-body[b-pork05u7tx] { fill: #606060; }

/* Each drive opens its own page. */
.mimic-svg .drive-link[b-pork05u7tx] {
    cursor: pointer;
}

.mimic-svg .drive-link:hover .drive-body[b-pork05u7tx],
.mimic-svg .drive-link:focus-visible .drive-body[b-pork05u7tx] {
    stroke: var(--ui-brand);
    stroke-width: 7;
}

.mimic-svg .drive-sym[b-pork05u7tx] {
    fill: none;
    stroke: #fff;
    stroke-width: 4;
    stroke-linecap: round;
}

/* The genset picture, faded on a unit with no generator: the shape of the machine is the point
   of the diagram, and a gap would read as a rendering fault. */
.mimic-svg .genset.absent[b-pork05u7tx] {
    opacity: .3;
}

/* Text */
.mimic-svg text[b-pork05u7tx] {
    fill: var(--ui-page-text);
    font-size: 16px;
}

.mimic-svg .ident[b-pork05u7tx] {
    text-anchor: end;
}

.mimic-svg .state[b-pork05u7tx] {
    font-weight: 700;
}

.mimic-svg .state-on[b-pork05u7tx] {
    fill: var(--ui-on-color);
}

.mimic-svg .hours[b-pork05u7tx] {
    font-size: 15px;
}

.mimic-svg .reading[b-pork05u7tx],
.mimic-svg .panel-text[b-pork05u7tx] {
    font-variant-numeric: tabular-nums;
}

.mimic-svg .centred[b-pork05u7tx] {
    text-anchor: middle;
}

/* Generator and Output panels */
.mimic-svg .panel-body[b-pork05u7tx] {
    fill: var(--ui-page-background);
    stroke: var(--ui-top-bar-border);
    stroke-width: 3;
}

.mimic-svg .panel-title[b-pork05u7tx] {
    font-weight: 700;
    text-anchor: middle;
}

.mimic-svg .panel-hit[b-pork05u7tx] {
    fill: transparent;
}

.mimic-svg .panel-rule[b-pork05u7tx] {
    stroke: var(--ui-top-bar-border);
    stroke-width: 2;
}

/* Output voltage badge: the device's dark grey in both themes. */
.mimic-svg .volt-badge[b-pork05u7tx] {
    fill: #3a3a3a;
    stroke: #5a5a5a;
    stroke-width: 2;
}

.mimic-svg .volt-badge-text[b-pork05u7tx] {
    fill: #fff;
    font-size: 18px;
    text-anchor: middle;
}

/* Battery */
/* No underline: it would take the number's dark halo and draw as a black bar beneath it. The
   frame's hover colour says it is a link instead. */
.mimic-svg .batt-link[b-pork05u7tx] {
    cursor: pointer;
    text-decoration: none;
}

.mimic-svg .batt-link:hover .batt-frame[b-pork05u7tx],
.mimic-svg .batt-link:focus-visible .batt-frame[b-pork05u7tx] {
    stroke: var(--ui-brand);
}

.mimic-svg .batt-empty[b-pork05u7tx] {
    fill: var(--ui-page-background);
}

.mimic-svg .batt-fill.soc-ok[b-pork05u7tx]  { fill: var(--ui-on-color); }
.mimic-svg .batt-fill.soc-mid[b-pork05u7tx] { fill: var(--ui-warning); }
.mimic-svg .batt-fill.soc-low[b-pork05u7tx] { fill: var(--ui-fault); }

.mimic-svg .batt-frame[b-pork05u7tx] {
    fill: none;
    stroke: var(--ui-page-text);
    stroke-width: 8;
}

.mimic-svg .batt-terminal[b-pork05u7tx] {
    fill: var(--ui-page-text);
}

/* Readable over the filled and the empty part alike. */
.mimic-svg .batt-text[b-pork05u7tx] {
    fill: #fff;
    stroke: rgba(0, 0, 0, .6);
    stroke-width: 6;
    stroke-linejoin: round;
    paint-order: stroke;
    font-size: 43px;
    font-weight: 700;
    text-anchor: middle;
}

/* Fault badge: a red warning triangle with a black mark, cut out of what it overlaps by a
   stroke in the page's background. */
.mimic-svg .fault-badge[b-pork05u7tx] {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
}

.mimic-svg .fault-badge-triangle[b-pork05u7tx] {
    fill: var(--ui-fault);
    stroke: var(--ui-page-background);
    stroke-width: 4;
    stroke-linejoin: round;
    paint-order: stroke;
}

.mimic-svg .fault-badge-mark[b-pork05u7tx] {
    fill: none;
    stroke: #000;
    stroke-width: 4.5;
    stroke-linecap: round;
}

.mimic-svg .fault-badge-dot[b-pork05u7tx] {
    fill: #000;
}
/* /Components/Pages/Battery.razor.rz.scp.css */
/* A unit's battery strings, as the device's BMU page draws them. */

/* Lights in the device's colours: green reporting, blue for a charge flag, red for a protection
   flag, a dark disc off. */
.led[b-omutmifrno] {
    display: inline-block;
    flex: none;
    width: .875em;
    height: .875em;
    border-radius: 50%;
    background: #3a3a3a;
    border: 1px solid rgba(0, 0, 0, .35);
}

.led-sm[b-omutmifrno] {
    width: .75em;
    height: .75em;
}

.led-on[b-omutmifrno] {
    background: #22c55e;
    box-shadow: 0 0 6px 1px #86efac;
}

.led-info[b-omutmifrno] {
    background: #0ea5e9;
    box-shadow: 0 0 6px 1px #7dd3fc;
}

.led-fault[b-omutmifrno] {
    background: #ef4444;
    box-shadow: 0 0 6px 1px #fca5a5;
}
/* /Components/Pages/Drive.razor.rz.scp.css */
/* A unit's drives, as the device's drives page draws them. */

/* The drive the page was opened on, from its box on the diagram. */
.drive-card.selected[b-i4lrw2gu6c] {
    border-color: var(--ui-brand);
    box-shadow: 0 0 0 1px var(--ui-brand);
}

/* Status-word lights in the device's colours: green on, red for the fault bit, a dark disc off. */
.led[b-i4lrw2gu6c] {
    display: inline-block;
    width: .75em;
    height: .75em;
    border-radius: 50%;
    background: #3a3a3a;
    border: 1px solid rgba(0, 0, 0, .35);
}

.led-on[b-i4lrw2gu6c] {
    background: #22c55e;
    box-shadow: 0 0 6px 1px #86efac;
}

.led-fault[b-i4lrw2gu6c] {
    background: #ef4444;
    box-shadow: 0 0 6px 1px #fca5a5;
}
/* /Components/Pages/Unit.razor.rz.scp.css */
/* The found-unit view, pinned to the viewport by .fills-viewport. Three rows: the titles and poll
   time in a strip across the full width; the diagram on the left with the stale-poll warning and
   SOC sparkline on the right; then, full width, the headline tiles and the per-subsystem detail.

   The title strip is as tall as its content. The lower row is as tall as the tiles and detail
   cards need, capped at 40% of the view (fit-content), and the middle row takes everything else:
   the diagram is the area that most needs the height. Its 20rem minimum keeps the diagram a
   usable size on a short window, the lower row giving way instead and scrolling inside its own
   area; a fixed minimum rather than plain 1fr also stops content stretching the row. The layout
   drops its content padding for a viewport-filling page, so the padding is restored here. */
.unit-view[b-73i78dsz0h] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(20rem, 1fr) fit-content(40%);
    gap: 1em 1.5em;
    padding: 1.25em 1.5em;
}

.unit-head[b-73i78dsz0h] {
    grid-column: 1 / -1;
    grid-row: 1;
}

.unit-head .breadcrumb[b-73i78dsz0h] {
    margin-bottom: .25rem;
}

/* The previous and next arrows: a heavier frame than a small outline button and a filled triangle,
   so they read as controls beside the serial. --bs-border-width is set on the group as well as the
   buttons, so the overlap between the two stays a single line. The triangle takes the button's
   text colour, so it follows hover and the light/dark switch. */
.unit-stepper[b-73i78dsz0h] {
    --bs-border-width: 2px;
}

.unit-stepper .btn[b-73i78dsz0h] {
    --bs-btn-border-width: 2px;
    --bs-btn-padding-x: .5rem;
    --bs-btn-padding-y: .35rem;
    display: inline-flex;
    align-items: center;
}

.unit-stepper svg[b-73i78dsz0h] {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

/* The stale-poll warning at its natural height across the top, the sparkline filling everything
   below it: its chart stretches to the area's full width and remaining height, with a floor so a
   tall warning cannot squeeze it flat. */
.unit-status[b-73i78dsz0h] {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.unit-status-banner[b-73i78dsz0h] {
    flex: none;
}

.unit-status-banner .alert:last-child[b-73i78dsz0h] {
    margin-bottom: .75rem;
}

.unit-status-spark[b-73i78dsz0h] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.unit-status-spark[b-73i78dsz0h]  .soc-spark {
    flex: 1;
    min-height: 0;
}

.unit-status-spark[b-73i78dsz0h]  .soc-spark-svg {
    flex: 1;
    min-height: 5em;
    height: auto;
}

/* The diagram (UnitMimic's root) taking the whole area. */
.unit-side[b-73i78dsz0h] {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.unit-side > *[b-73i78dsz0h] {
    flex: none;
}

.unit-side[b-73i78dsz0h]  .mimic {
    flex: 1;
    min-height: 0;
}

.unit-lower[b-73i78dsz0h] {
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: 0;
    overflow-y: auto;
}

/* The headline cards, as many to a row as the width allows, stretched to fill it. Sized from the
   area rather than the viewport, which Bootstrap's row-cols classes would use; auto-fit so the
   tiles spread across the full width instead of leaving empty columns at the end. */
.metric-grid[b-73i78dsz0h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.25em, 1fr));
    gap: .5em;
    margin-bottom: 1em;
}

.metric-grid .card-body[b-73i78dsz0h] {
    padding: .4em .5em;
}

/* Too narrow for two columns: one column, the view scrolls. Titles, then the diagram, then the
   stale-poll warning and sparkline, then the tiles and detail. */
@media (max-width: 50.06125em) {
    .unit-view[b-73i78dsz0h] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        /* Auto rows would otherwise stretch to fill the pinned height, opening a gap between them. */
        align-content: start;
        overflow-y: auto;
    }

    /* min-height back to auto on all three: the wide layout's 0 lets each area scroll inside its
       row, but here, once the stacked page is taller than the window, it lets the grid shrink a
       row below its content and the next area paints over it. The view scrolls instead. */
    .unit-side[b-73i78dsz0h] {
        grid-column: 1;
        grid-row: 2;
        min-height: auto;
    }

    .unit-status[b-73i78dsz0h] {
        grid-column: 1;
        grid-row: 3;
        min-height: auto;
        overflow-y: visible;
    }

    /* No area height to fill when stacked: the chart takes its own fixed height again. */
    .unit-status-spark[b-73i78dsz0h]  .soc-spark-svg {
        flex: none;
        height: clamp(5em, 16vh, 10em);
    }

    .unit-lower[b-73i78dsz0h] {
        grid-row: 4;
        min-height: auto;
        overflow-y: visible;
    }

    /* Sized from the width alone, so the box is exactly as tall as the drawing. */
    .unit-side[b-73i78dsz0h]  .mimic {
        flex: none;
    }

    .unit-side[b-73i78dsz0h]  .mimic-svg {
        flex: none;
        height: auto;
    }
}
/* /Components/Pages/ViewsPage.razor.rz.scp.css */
/* The view builder: small headings over each group of choices, and the preview in a framed box
   that scrolls rather than pushing the page down. */
.view-builder .builder-section[b-gr5y0xpglm] {
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    margin-bottom: .35rem;
}

.view-preview[b-gr5y0xpglm] {
    max-height: 22rem;
    overflow: auto;
    padding: .75rem 1rem;
    border: 1px solid var(--ui-top-bar-border);
    border-radius: .5rem;
}

/* The delete confirmation: a rounded card on the page's own background, a red bin beside the
   question, and the buttons along the bottom with no rule above them. */
.delete-dialog[b-gr5y0xpglm] {
    max-width: 30rem;
}

.delete-dialog .modal-content[b-gr5y0xpglm] {
    background-color: var(--ui-page-background);
    color: var(--ui-page-text);
    border: 1px solid var(--ui-top-bar-border);
    border-radius: .75rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .35);
}

.delete-dialog .modal-body[b-gr5y0xpglm] {
    padding: 1.5rem 1.5rem .75rem;
}

.delete-dialog .modal-title[b-gr5y0xpglm] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.delete-dialog .delete-text[b-gr5y0xpglm] {
    color: var(--bs-secondary-color);
    line-height: 1.5;
}

.delete-dialog .modal-footer[b-gr5y0xpglm] {
    border-top: 0;
    padding: .5rem 1.5rem 1.25rem;
    gap: .25rem;
}

/* The bin in a soft red circle, so the dialog reads as destructive before a word is read. */
.delete-icon[b-gr5y0xpglm] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    color: var(--ui-fault);
    background-color: color-mix(in srgb, var(--ui-fault) 14%, transparent);
}