@import '_content/Sts.Lib.Web.Blazor/Sts.Lib.Web.Blazor.gyl9n7517h.bundle.scp.css';

/* /Components/Dashboard/DashboardCanvas.razor.rz.scp.css */
/* The grid and every widget frame are rendered by other components, so the canvas is the only element
   that carries this component's scope attribute, hence ::deep on everything inside it. */

/* Hidden until the engine has built the grid and applied the current band. Without this the page
   paints once at the canonical column count and then steps down, which reads as a lurch. */
.dashboard-canvas[b-4nqli6m5zq]  .sts-grid--initialising {
    visibility: hidden;
}

/* A widget fills its cell exactly. The cell is positioned absolutely by the engine, so anything that
   grows past it breaks the layout instead of scrolling — which is why the body below is the element
   allowed to scroll and the frame is not. */
.dashboard-canvas[b-4nqli6m5zq]  .dashboard-widget {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    /* 12, not 16: the shortest cell is 80 pixels, and a caption plus a figure needs every one of the
       remaining ones. Measured against the rendered page, 16 clipped the figures. */
    padding: 12px;
    position: relative;
}

/* Floated, not in the flow: a header row would cost every widget its height whether or not anybody is
   editing, and a one-row cell has none to spare — the figure the widget exists to show is what gets
   clipped. */
.dashboard-canvas[b-4nqli6m5zq]  .dashboard-widget__actions {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
}

.dashboard-canvas[b-4nqli6m5zq]  .dashboard-widget__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* The framework's WidgetHost wraps every widget in one element of its own, with no height. A widget
   whose content has a height of its own never notices; one that fills the space it is given - the
   fleet map, whose element measures what it is handed - resolves height: 100% against nothing and
   draws in zero pixels. So the wrapper fills the body. */
.dashboard-canvas[b-4nqli6m5zq]  .dashboard-widget__body > .sts-widget {
    height: 100%;
}

.dashboard-canvas[b-4nqli6m5zq]  .dashboard-widget__notice {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mud-palette-text-secondary);
}

/* The handle is always rendered and hidden outside edit mode, rather than rendered conditionally:
   the engine resolves its drag selector against the DOM, and an element that appears only once
   editing has started is a race nobody needs. Reserving the space also stops the widget's contents
   shifting when the toolbar is opened. */
.dashboard-canvas[b-4nqli6m5zq]  .sts-grid-item-handle {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    display: none;
    cursor: grab;
    color: var(--mud-palette-text-secondary);
}

.dashboard-canvas[b-4nqli6m5zq]  .sts-grid--editing .sts-grid-item-handle {
    display: block;
}

.dashboard-canvas[b-4nqli6m5zq]  .sts-grid-item-handle:active {
    cursor: grabbing;
}

/* Edit mode is a state of the whole board, so it is said once on the board rather than repeated on
   every widget — and it is said on the wrapper, which the engine never touches. */
.dashboard-canvas[b-4nqli6m5zq]  .sts-grid--editing .dashboard-widget {
    border-style: dashed;
    padding-left: 32px;
}
/* /Components/Dashboard/Widgets/Distribution/DistributionWidget.razor.rz.scp.css */
/* The tile is a caption, a chart and the line that says what the chart covers. The chart takes the
   space the other two leave, because it is the reason the widget exists; the coverage line must not
   be what gets clipped, because a distribution whose shortfall is invisible is the thing this whole
   widget was shaped to avoid. */
.distribution[b-m63kzavjjs] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 4px;
}

.distribution__label[b-m63kzavjjs] {
    flex: 0 0 auto;
}

.distribution__chart[b-m63kzavjjs] {
    flex: 1 1 auto;
    min-height: 0;
}

/* The chart takes the height its box was given, legend included, rather than a fixed one: a fixed height
   taller than the box ran over the coverage line below it. */
.distribution__chart[b-m63kzavjjs]  > div {
    height: 100%;
}
/* /Components/Dashboard/Widgets/EntityCount/EntityCountWidget.razor.rz.scp.css */
/* Two shapes for the same widget, chosen by how much height the cell actually has.

   The tall one stacks the label above the figure, which is what the page looked like before it became
   arrangeable. The compact one puts them on a single line, and exists because stacking depends on the
   caption, the figure and the padding summing to less than the row height — true at one breakpoint and
   false at the next, which showed up as a figure clipped in half. */
.entity-count[b-cayuzufal3] {
    display: flex;
    height: 100%;
    min-height: 0;
}

.entity-count--tall[b-cayuzufal3] {
    flex-direction: column;
    gap: 8px;
}

.entity-count--compact[b-cayuzufal3] {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

/* The label yields before the figure does: a truncated word is readable, a truncated number is wrong. */
.entity-count--compact .entity-count__label[b-cayuzufal3] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* /Components/Dashboard/Widgets/SystemList/SystemListWidget.razor.rz.scp.css */
/* The cell has a fixed pixel height and the widget must never push it: the engine positions items
   absolutely, so anything that grows the cell breaks the layout rather than scrolling inside it.

   min-height: 0 on both the column and the scrolling child is the load-bearing part. A flex child
   defaults to min-height: auto and refuses to shrink below its own content, which is exactly how a
   long list ends up taller than the cell that holds it. */
.system-list[b-w3ghu4z87h] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.system-list__header[b-w3ghu4z87h] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.system-list__scroll[b-w3ghu4z87h] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    margin-top: 8px;
}

/* Secondary columns recede so the serial number stays the thing the eye lands on. */
.system-list__secondary[b-w3ghu4z87h] {
    color: var(--mud-palette-text-secondary);
}
/* /Components/Dashboard/Widgets/SystemMonthly/SystemMonthlyForecastWidget.razor.rz.scp.css */
.system-monthly[b-4hxce85d8n] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 4px;
}

.system-monthly__label[b-4hxce85d8n] {
    /* Room for the edit menu, which floats over the top-right corner of the cell. */
    padding-right: 28px;
}

.system-monthly__chart[b-4hxce85d8n] {
    flex: 1 1 auto;
    min-height: 0;
}
/* /Components/Dashboard/Widgets/SystemSeries/SystemTimeSeriesWidget.razor.rz.scp.css */
.system-series[b-iiz4r9rfu7] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 4px;
}

.system-series__header[b-iiz4r9rfu7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    /* Room for the edit menu, which floats over the top-right corner of the cell. */
    padding-right: 28px;
}

.system-series__label[b-iiz4r9rfu7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-series__chart[b-iiz4r9rfu7] {
    flex: 1 1 auto;
    min-height: 0;
}

.system-series__bands[b-iiz4r9rfu7] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
/* /Components/Dashboard/Widgets/SystemsMap/SystemsMapWidget.razor.rz.scp.css */
/* A caption, the map, and the line that says what the map leaves out. The map takes the space the
   other two leave, and min-height: 0 is what lets it shrink to the cell: a flex child defaults to
   min-height: auto, and the map package's own default height would otherwise grow the cell. */
.systems-map[b-4vo271e3iq] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 4px;
}

.systems-map__header[b-4vo271e3iq] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

[b-4vo271e3iq] .systems-map__map {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
}

[b-4vo271e3iq] .systems-map__overlay {
    min-width: 220px;
    padding-right: 36px;
}

[b-4vo271e3iq] .systems-map__overlay-title {
    font-weight: 600;
}

[b-4vo271e3iq] .systems-map__overlay-status,
[b-4vo271e3iq] .systems-map__overlay-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}
/* /Components/Layout/AppFooter.razor.rz.scp.css */
/* No margin-top: the 48px cushion that used to push the footer down was a fixed nudge standing in
   for a layout rule. The shell now grows the content block instead, so on a short page the footer
   is flush with the bottom of the viewport - and therefore level with the bottom of the drawer,
   which has always been viewport-tall - while on a long page it simply follows the content. */
/* Sticky, not merely last: it is a status bar, so it stays on screen while a long page scrolls
   under it. A sticky element still occupies its place in flow, so the end of a long page is not
   hidden behind it, and on a short page the flex shell has already put it at the bottom. */
.app-footer[b-3yy4k6kn5l] {
    position: sticky;
    bottom: 0;
    z-index: 1;
    flex: 0 0 auto;
    box-sizing: border-box;
    min-height: var(--mth-bottom-band);
    display: flex;
    align-items: center;
    background-color: var(--mud-palette-surface);
    padding: 12px 0;
    border-top: 1px solid var(--mud-palette-divider-light);
}

/* ::deep is required, not decorative. Blazor CSS isolation stamps the scope attribute onto the HTML
   elements written in this .razor, never onto a component tag, so a rule written for a class placed
   on <MudContainer> matches nothing at all. .app-footer above needs no ::deep - it is a real
   <footer> element - which is exactly what makes the difference easy to miss. */
.app-footer[b-3yy4k6kn5l]  .app-footer-inner {
    display: flex;
    justify-content: flex-end;
}
/* /Components/Layout/AppHeader.razor.rz.scp.css */
.header-user-menu[b-mrtpo21fgb] {
    position: relative;
    display: inline-flex;
}

.header-user-button[b-mrtpo21fgb] {
    padding: 4px;
}

/* Click-outside catcher for the user menu popover. */
.header-menu-overlay[b-mrtpo21fgb] {
    position: fixed;
    inset: 0;
    z-index: 1199;
}

.header-menu-popover[b-mrtpo21fgb] {
    min-width: 240px;
}

.header-menu-header[b-mrtpo21fgb] {
    padding: 12px 16px 8px;
}
/* /Components/Layout/AuthCoverLayout.razor.rz.scp.css */
.auth-cover-root[b-ih4wuvkpqt] {
    display: flex;
    min-height: 100vh;
    background-color: var(--mud-palette-background);
}

.auth-cover-image[b-ih4wuvkpqt] {
    flex: 0 0 58.333%; /* lg=7/12 */
    background-image: url("/static/img/unsplash/unsplash-5.jpg");
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    margin: 32px;
    position: relative;
}

.auth-cover-brand[b-ih4wuvkpqt] {
    position: absolute;
    bottom: 48px;
    left: 48px;
    display: flex;
    align-items: center;
}

.auth-cover-form-area[b-ih4wuvkpqt] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    position: relative;
}

.auth-cover-lang-menu[b-ih4wuvkpqt] {
    position: absolute;
    top: 16px;
    right: 16px;
}

.auth-cover-form[b-ih4wuvkpqt] {
    width: 100%;
    max-width: 480px;
}

/* Over the cover photo, so the white rendition. Larger than the sidebar's: it is the only brand
   mark on the page at this breakpoint and has the whole panel to sit in. */
.auth-cover-logo[b-ih4wuvkpqt] {
    height: 44px;
    width: auto;
    max-width: 60%;
}
/* /Components/Layout/NavSections.razor.rz.scp.css */
/* Both palettes ground the drawer in a deep point of the brand family — light L20, dark L16 — so nav
   text is white at fixed opacities rather than following the theme text palette, which would be
   unreadable on either. The two grounds differ in lightness but not in what they demand of the text
   on top of them, which is why one set of opacities still serves both. */
.sidebar-section-title[b-k8byggx226] {
    color: rgba(255,255,255,0.55);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 24px 8px;
}

/* ::deep from here down: these elements are rendered by MudNavMenu, not by this component, so
   they never carry its scope attribute. The .sidebar-nav ancestor does — it is the class this
   component puts on the MudNavMenu root. */
.sidebar-nav[b-k8byggx226]  .mud-nav-link,
.sidebar-nav[b-k8byggx226]  .mud-nav-group .mud-nav-group-title {
    color: rgba(255,255,255,0.85) !important;
}

.sidebar-nav[b-k8byggx226]  .mud-nav-link.mud-nav-link-disabled {
    color: rgba(255,255,255,0.5) !important;
}

/* The accent marks the current item as a shape, not as a text colour: at L40 it separates from both
   drawer grounds (2.91:1 on light, 3.70:1 on dark) but would not carry small text itself. The white
   wash stays and does the work of the fill; the inset rule is what the eye actually lands on. */
.sidebar-nav[b-k8byggx226]  .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: rgba(255,255,255,0.12) !important;
    box-shadow: inset 3px 0 0 var(--mud-palette-tertiary);
    color: #FFFFFF !important;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-3jtbfgifzl],
.components-reconnect-repeated-attempt-visible[b-3jtbfgifzl],
.components-reconnect-failed-visible[b-3jtbfgifzl],
.components-pause-visible[b-3jtbfgifzl],
.components-resume-failed-visible[b-3jtbfgifzl],
.components-rejoining-animation[b-3jtbfgifzl] {
    display: none;
}

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


#components-reconnect-modal[b-3jtbfgifzl] {
    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-3jtbfgifzl 0.5s both;
    &[open]

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

}

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

@keyframes components-reconnect-modal-slideUp-b-3jtbfgifzl {
    0% {
        transform: translateY(30px) scale(0.95);
    }

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-3jtbfgifzl] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

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

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

.components-rejoining-animation[b-3jtbfgifzl] {
    position: relative;
    width: 80px;
    height: 80px;
}

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

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

@keyframes components-rejoining-animation-b-3jtbfgifzl {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/Sidebar.razor.rz.scp.css */
/* ::deep throughout this file wherever the class sits on a MudBlazor component rather than on an
   element written here: CSS isolation only stamps its scope attribute on the latter. */
.sidebar-user[b-tct4azwk5k]  .sidebar-operator-line {
    color: var(--mud-palette-drawer-text);
    line-height: 1.2;
}

.sidebar-root[b-tct4azwk5k] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--mud-palette-drawer-background);
    color: var(--mud-palette-drawer-text);
}

/* Header and footer are set off from the nav by darkening the drawer ground rather than by painting
   a second colour onto it. A translucent black composites over whichever deep tone the palette put
   behind it, so one rule serves both themes. The previous --mud-palette-primary ground now tracks
   the Primary role, which is an action colour and no longer the drawer's neighbour. */
.sidebar-brand[b-tct4azwk5k] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    background-color: rgba(0, 0, 0, 0.18);
    padding: 0 24px;
    font-weight: 500;
}

.sidebar-nav-scroll[b-tct4azwk5k] {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}

.sidebar-nav-scroll[b-tct4azwk5k]::-webkit-scrollbar { width: 0; }

.sidebar-user[b-tct4azwk5k] {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--mth-bottom-band);
    padding: 12px 16px;
    background-color: rgba(0, 0, 0, 0.18);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Light disc, dark initials. The accent teal would have put white text at 3.06:1, and the operator
   badge is the one place on the drawer where a filled shape carries text of its own. Fixed values
   for the same reason the nav text is fixed: both palettes ground this surface in deep teal. */
.sidebar-user[b-tct4azwk5k]  .sidebar-avatar {
    background-color: var(--mth-muted-light);
    color: var(--mth-sidebar-light);
    font-weight: 600;
}

/* The white lockup, sized by height so the aspect ratio decides the width. The drawer is 258px and
   the brand padding leaves 210px, which the wordmark clears at this height with room to spare. */
.sidebar-logo[b-tct4azwk5k] {
    height: 34px;
    width: auto;
    max-width: 100%;
}
/* /Components/Pages/Account/Login.razor.rz.scp.css */
.auth-form-header[b-jafxagsrd9] {

    text-align: center;

}



/* The green rendition: the form area is a light surface. This is also the ONLY brand mark below
   the lg breakpoint, where auth-cover-image is display:none and the photo panel takes the cover
   logo with it. Inline element, so the header text-align centres it. */
.auth-form-logo[b-jafxagsrd9] {
    height: 40px;
    width: auto;
    max-width: 100%;
}



.auth-form-form[b-jafxagsrd9] {

    margin-top: 32px;

}



.auth-form-field[b-jafxagsrd9] {

    margin-bottom: 16px;

}



.auth-form-label[b-jafxagsrd9] {

    display: block;

    font-size: 0.875rem;

    font-weight: 500;

    margin-bottom: 6px;

}



.auth-form-input[b-jafxagsrd9] {

    width: 100%;

    padding: 12px 14px;

    border: 1px solid var(--mud-palette-lines-inputs);

    border-radius: 8px;

    font-size: 1rem;

    font-family: inherit;

    outline: none;

    transition: border-color 0.15s ease, box-shadow 0.15s ease;

}



.auth-form-input:focus[b-jafxagsrd9] {

    border-color: var(--mud-palette-primary);

    box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), 0.15);

}



.auth-form-submit[b-jafxagsrd9] {

    width: 100%;

    padding: 12px 16px;

    margin-top: 8px;

    border: none;

    border-radius: 8px;

    background-color: var(--mud-palette-primary);

    color: var(--mud-palette-primary-text);

    font-size: 1rem;

    font-weight: 500;

    cursor: pointer;

    transition: background-color 0.15s ease, box-shadow 0.15s ease;

}



.auth-form-submit:hover[b-jafxagsrd9] {

    background-color: var(--mud-palette-primary-darken);

}
/* /Components/Pages/Account/MfaTotpChallenge.razor.rz.scp.css */
.auth-form-header[b-hvw600qlj8] { text-align: center; }
.auth-form-brand-icon[b-hvw600qlj8] { color: var(--mud-palette-primary); }
.auth-form-form[b-hvw600qlj8] { margin-top: 32px; }
.auth-form-field[b-hvw600qlj8] { margin-bottom: 16px; }
.auth-form-label[b-hvw600qlj8] { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 6px; }
.auth-form-input[b-hvw600qlj8] { width: 100%; padding: 12px 14px; border: 1px solid var(--mud-palette-lines-inputs); border-radius: 8px; font-size: 1rem; font-family: inherit; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.auth-form-input:focus[b-hvw600qlj8] { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 3px rgba(46,125,50,0.15); }
.auth-form-code[b-hvw600qlj8] { letter-spacing: 0.4em; font-family: 'Courier New', monospace; font-size: 1.25rem; text-align: center; }
.auth-form-submit[b-hvw600qlj8] { width: 100%; padding: 12px 16px; margin-top: 8px; border: none; border-radius: 8px; background-color: var(--mud-palette-primary); color: var(--mud-palette-primary-text); font-size: 1rem; font-weight: 500; cursor: pointer; transition: background-color 0.15s ease; }
.auth-form-submit:hover[b-hvw600qlj8] { background-color: var(--mud-palette-primary-darken); }
/* /Components/Pages/Account/MfaTotpEnroll.razor.rz.scp.css */
.auth-form-header[b-1ssqwfiabe] { text-align: center; }
.auth-form-brand-icon[b-1ssqwfiabe] { color: var(--mud-palette-primary); }
.auth-form-form[b-1ssqwfiabe] { margin-top: 24px; }
.auth-form-field[b-1ssqwfiabe] { margin-bottom: 16px; }
.auth-form-label[b-1ssqwfiabe] { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 6px; }
.auth-form-input[b-1ssqwfiabe] { width: 100%; padding: 12px 14px; border: 1px solid var(--mud-palette-lines-inputs); border-radius: 8px; font-size: 1rem; font-family: inherit; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.auth-form-input:focus[b-1ssqwfiabe] { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 3px rgba(46,125,50,0.15); }
.auth-form-code[b-1ssqwfiabe] { letter-spacing: 0.4em; font-family: 'Courier New', monospace; font-size: 1.25rem; text-align: center; }
.auth-form-submit[b-1ssqwfiabe] { width: 100%; padding: 12px 16px; margin-top: 8px; border: none; border-radius: 8px; background-color: var(--mud-palette-primary); color: var(--mud-palette-primary-text); font-size: 1rem; font-weight: 500; cursor: pointer; transition: background-color 0.15s ease; }
.auth-form-submit:hover[b-1ssqwfiabe] { background-color: var(--mud-palette-primary-darken); }
.mfa-qr[b-1ssqwfiabe] { display: flex; justify-content: center; margin: 16px 0 16px; padding: 16px; background: var(--mud-palette-surface); border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); }
.mfa-qr svg[b-1ssqwfiabe] { max-width: 200px; height: auto; }
.mfa-secret[b-1ssqwfiabe] { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; text-align: center; }
.mfa-secret-label[b-1ssqwfiabe] { font-size: 0.75rem; color: var(--mud-palette-text-secondary); margin-bottom: 4px; }
.mfa-secret-value[b-1ssqwfiabe] { display: inline-block; font-family: 'Courier New', monospace; font-size: 0.95rem; letter-spacing: 0.1em; word-break: break-all; }
/* /Components/Pages/Admin/Diagnostics/ErrorReportDialog.razor.rz.scp.css */
/* Wide and long by nature: scroll it inside its own box rather than letting it reshape the dialog
   around it. */
.error-report-detail[b-cmjzve4r68] {
    max-height: 22rem;
    overflow: auto;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background-gray);
    font-size: 0.8125rem;
    line-height: 1.5;
    white-space: pre;
}
/* /Components/Pages/Fleet/Catalogue/List.razor.rz.scp.css */
/* The published class term is a sentence, not a label: "TOMOGRAFI A MAGNETE CHIUSO CON INTENSITA'
   DI CAMPO INFERIORE O UGUALE A 2T" is sixty characters and takes six lines in a table cell, which
   makes every row six rows tall. It is clamped to two lines here and the whole term stays one hover
   away, in the tooltip that already carries the code. */
.catalogue-class[b-5rarrzpepc] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* /Components/Pages/Fleet/Systems/Detail.razor.rz.scp.css */
/* The payload as itself, behind the disclosure: monospaced and wrapped, because it is one long line
   with no spaces in it and a horizontal scrollbar inside a panel is a worse answer than a wrap. */
.system-connection-raw[b-xk9kyt14hl] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
}

/* The location and the way to reach it on one line: the field takes the width, the chip sits at the
   right edge. Below the breakpoint where a long path and the chip no longer fit, the chip wraps under
   the path rather than squeezing it. */
.system-location[b-xk9kyt14hl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.system-location-field[b-xk9kyt14hl] {
    flex: 1 1 320px;
    min-width: 0;
}
/* /Components/Pages/Fleet/Systems/SystemConsoleTab.razor.rz.scp.css */
/* The terminal fills the width it is given and keeps a height a shell can be read in; the fit addon
   recomputes rows and columns whenever this box changes size. */
.system-console__terminal[b-49374a4u0m] {
    width: 100%;
    height: 420px;
    padding: 8px;
    border-radius: 4px;
    background: #000;
}

@media (max-width: 599px) {
    .system-console__terminal[b-49374a4u0m] {
        height: 320px;
    }
}
/* /Components/Pages/Fleet/Systems/SystemFilesTab.razor.rz.scp.css */
/* The icon sits on the name's baseline rather than above it, and keeps its distance from the text. The
   wrapper is the only element written here, so it is the scope anchor. */
.system-files[b-28h5fbpe7w]  .system-files__icon {
    vertical-align: text-bottom;
    margin-right: 6px;
}
/* /Components/Shared/EntityPages/EntityEmptyState.razor.rz.scp.css */
.entity-empty-state[b-nq7qv4g1ds] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1rem;
}

.entity-empty-state-icon[b-nq7qv4g1ds] {
    color: var(--mud-palette-text-disabled);
}

.entity-empty-state-text[b-nq7qv4g1ds] {
    margin-top: 0.5rem;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Shared/EntityPages/EntityFieldRow.razor.rz.scp.css */
/* Two equal columns, and the same two on every row of every detail page: that is the whole point.
   minmax(0, 1fr) rather than 1fr so a long select cannot push its column wider than its share. */
.entity-field-row[b-9vh99h62us] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mth-field-gap);
    align-items: start;
}

.entity-field-row-wide[b-9vh99h62us] {
    grid-template-columns: minmax(0, 1fr);
}

.entity-field-row-center[b-9vh99h62us] {
    align-items: center;
}

/* The vertical rhythm belongs to the row, not to the fields inside it. Pages used to carry it on
   each control - mt-3 on the Fleet pages, mt-4 on the Users ones - which is how two spacings for
   one purpose ended up in the codebase. */
.entity-field-row + .entity-field-row[b-9vh99h62us] {
    margin-top: var(--mth-field-gap);
}

/* Below the md breakpoint every row is a single column: two form fields side by side stop being
   readable well before the drawer collapses. */
@media (max-width: 959.98px) {
    .entity-field-row[b-9vh99h62us] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Aligning the tops of two controls is not the same as aligning the lines an operator reads. A
   control sizes itself from what it holds: MudBlazor gives a field slot `min-height: 19px`, while a
   small chip is 24px tall inside 4px vertical margins, so a field carrying a status chip sat its
   underline exactly 13px below the select beside it - measured on the Systems identity row.

   One min-height for every slot in the row, set to the tallest thing a field carries, makes the
   underlines agree whatever each control contains; dropping the chip's vertical margins stops it
   pushing past that height again. ::deep because these elements are rendered by MudBlazor, not here. */
.entity-field-row[b-9vh99h62us]  .mud-input-slot {
    min-height: 24px;
}

.entity-field-row[b-9vh99h62us]  .mud-chip {
    margin-top: 0;
    margin-bottom: 0;
}
/* /Components/Shared/EntityPages/EntityFormPanel.razor.rz.scp.css */
.entity-form-panel.editing[b-e4raamaucb] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
    border-color: var(--mud-palette-primary);
}
/* /Components/Shared/EntityPages/EntityStatusBand.razor.rz.scp.css */
/* Auto-fit rather than a fixed column count: the band carries two facts on one page and three on
   another, and neither should have to declare how many it has. */
.entity-status-band[b-no8pc84dfx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--mth-field-gap);
    align-items: start;
}

/* EntityFieldValue spaces itself for a stack of rows; in a band its last line is the last line of
   the panel, and the margin would show as an uneven floor. ::deep because the element is rendered
   by EntityFieldValue, and a scope attribute never lands on another component's markup. */
.entity-status-band[b-no8pc84dfx]  .entity-field-value > :last-child {
    margin-bottom: 0 !important;
}
/* /Components/Shared/EntityPages/EntityTreeCell.razor.rz.scp.css */
/* The indentation of a row is its depth in the hierarchy, handed over as a custom property. */
.entity-tree-cell-row[b-6capmmkecf] {
    padding-left: calc(var(--entity-tree-depth, 0) * 22px);
}

/* Keeps a row whose node has no children aligned with the ones that carry the controls. */
.entity-tree-cell-placeholder[b-6capmmkecf] {
    display: inline-block;
    width: 34px;
}
/* /Components/Shared/EntityPages/LocationCoordinatesCell.razor.rz.scp.css */
/* The pair of numbers and the way to act on them sit together, close enough to read as one fact. */
.location-coordinates[b-eslheqq4ex] {
    gap: 6px;
}
/* /Components/Shared/ErrorPanel.razor.rz.scp.css */
/* Mirrors EntityEmptyState's centred column: a failed page should read as a deliberate state, not
   as a page that stopped halfway through drawing. */
.error-panel[b-bjnac4u6cn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    gap: 0.5rem;
}

.error-panel-icon[b-bjnac4u6cn] {
    color: var(--mud-palette-error);
}

.error-panel-title[b-bjnac4u6cn] {
    margin-top: 0.5rem;
}

.error-panel-body[b-bjnac4u6cn] {
    color: var(--mud-palette-text-secondary);
    max-width: 34rem;
}

/* The reference is the one thing on this panel the operator has to carry away, so it is set apart
   and in a face that survives being read out loud. */
.error-panel-reference[b-bjnac4u6cn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-top: 1rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background-gray);
}

.error-panel-reference-label[b-bjnac4u6cn] {
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.error-panel-reference-value[b-bjnac4u6cn] {
    font-family: var(--mud-typography-body1-family), monospace;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    user-select: all;
}
/* /Components/Shared/LanguageMenu.razor.rz.scp.css */
.language-menu[b-qffrdpwuhq] {

    position: relative;

    display: inline-block;

}



.language-menu-summary[b-qffrdpwuhq] {

    list-style: none;

    cursor: pointer;

    padding: 6px 10px;

    border-radius: 8px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 0.95rem;

    user-select: none;

    background: transparent;

    border: 1px solid transparent;

}



.language-menu-summary[b-qffrdpwuhq]::-webkit-details-marker { display: none; }



.language-menu-summary:hover[b-qffrdpwuhq] {

    background: var(--mud-palette-action-default-hover);

}



.language-menu[open] .language-menu-summary[b-qffrdpwuhq] {

    background: var(--mud-palette-divider-light);

    border-color: var(--mud-palette-lines-default);

}



.language-menu-caret[b-qffrdpwuhq] {

    font-size: 0.75rem;

    opacity: 0.6;

}



.language-menu-popover[b-qffrdpwuhq] {

    position: absolute;

    top: calc(100% + 4px);

    right: 0;

    min-width: 220px;

    background: var(--mud-palette-surface);

    border-radius: 8px;

    box-shadow: 0 4px 12px rgba(var(--mud-palette-text-primary-rgb), 0.12), 0 0 0 1px var(--mud-palette-divider-light);

    padding: 6px 0;

    z-index: 1300;

}



.language-menu-item[b-qffrdpwuhq] {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px 16px;

    color: var(--mud-palette-text-primary);

    text-decoration: none;

    font-size: 0.9rem;

}



.language-menu-item:hover[b-qffrdpwuhq] {

    background: rgba(var(--mud-palette-primary-rgb), 0.06);

}



.language-menu-item-active[b-qffrdpwuhq] {

    color: var(--mud-palette-text-disabled);

    pointer-events: none;

    background: var(--mud-palette-action-default-hover);

}



.language-menu-flag[b-qffrdpwuhq] {

    display: inline-block;

    width: 22px;

    font-size: 1rem;

}