/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-zf4not0nxv] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-zf4not0nxv] {
    flex: 1;
}

.sidebar[b-zf4not0nxv] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-zf4not0nxv] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-zf4not0nxv]  a, .top-row[b-zf4not0nxv]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-zf4not0nxv]  a:hover, .top-row[b-zf4not0nxv]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-zf4not0nxv]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-zf4not0nxv] {
        justify-content: space-between;
    }

    .top-row[b-zf4not0nxv]  a, .top-row[b-zf4not0nxv]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-zf4not0nxv] {
        flex-direction: row;
    }

    .sidebar[b-zf4not0nxv] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-zf4not0nxv] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-zf4not0nxv]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-zf4not0nxv], article[b-zf4not0nxv] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-zf4not0nxv] {
    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: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-zf4not0nxv] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-xxrfyoo55q] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-xxrfyoo55q] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-xxrfyoo55q] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-xxrfyoo55q] {
    font-size: 1.1rem;
}

.bi[b-xxrfyoo55q] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-xxrfyoo55q] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-xxrfyoo55q] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-xxrfyoo55q] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-xxrfyoo55q] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-xxrfyoo55q] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-xxrfyoo55q] {
        padding-bottom: 1rem;
    }

    .nav-item[b-xxrfyoo55q]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-xxrfyoo55q]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-xxrfyoo55q]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-xxrfyoo55q] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-xxrfyoo55q] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-xxrfyoo55q] {
        display: none;
    }

    .nav-scrollable[b-xxrfyoo55q] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-e9t19u1myg],
.components-reconnect-repeated-attempt-visible[b-e9t19u1myg],
.components-reconnect-failed-visible[b-e9t19u1myg],
.components-pause-visible[b-e9t19u1myg],
.components-resume-failed-visible[b-e9t19u1myg],
.components-rejoining-animation[b-e9t19u1myg] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-e9t19u1myg {
    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/Pages/Audit.razor.rz.scp.css */
/* The audit grid fills the viewport rather than sizing to its content. The outer container takes the
   height left under the app bar, the page's top/bottom margin (MudContainer my-6), and the breadcrumb
   above it; everything inside is a flex column so the grid's data area flexes to fill while the toolbar
   (inside the grid), the fixed header, and the caption below keep their natural height. The data area
   scrolls internally (rows are virtualized, header pinned) -- so more rows show on a taller window and
   the layout never grows a second page scrollbar. The ~150px offset is app bar (64) + my-6 (24+24) +
   breadcrumb (~37); tune here if the app bar or breadcrumb height changes. */
.audit-fill[b-rtd4arbytp] {
    height: calc(100vh - 150px);
    display: flex;
    flex-direction: column;
}

.audit-fill > .eg-dense-grid[b-rtd4arbytp] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.audit-fill[b-rtd4arbytp]  .mud-table {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.audit-fill[b-rtd4arbytp]  .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
}

/* Size the custom date-range input in the toolbar without a Style on the picker itself (which would
   also clamp its dialog panel and force a horizontal scrollbar -- the colour-picker trap). Scoped to
   this component's DOM, so it can't reach the range calendar, which renders in a document-root overlay. */
.eg-daterange[b-rtd4arbytp] {
    width: 300px;
    flex: none;
}

.eg-daterange[b-rtd4arbytp]  .mud-input-control {
    width: 300px;
}
/* /Components/Pages/Devices.razor.rz.scp.css */
/* Master-detail split: the grid sits in a top pane the user can resize vertically with the browser's
   native corner grip (reliable, no JS). The grid's extra-compact density comes from the shared global
   .eg-dense-grid class in app.css (so it matches the events and audit grids in other components).

   Stability without the gap: the pane sizes to its CONTENT (height: auto), but the table CONTAINER
   reserves exactly one page of rows via min-height (see below). So a full page fills the container
   exactly -- the pager sits flush under the last row, no slack gap -- while a short page fills the
   same reserved height with whitespace instead of collapsing, and the pane height stays constant page
   to page (no jump). Drag the grip to resize taller (the container flexes past its min-height and
   scrolls); overflow is hidden because the table area does the scrolling. */
.devices-split-top[b-4t3qang2kh] {
    height: auto;
    min-height: 200px;
    max-height: 85vh;
    overflow: hidden;
    resize: vertical;
    display: flex;
    flex-direction: column;
}

/* Fill the pane with the grid and pin the pager to its bottom: the table area flexes and scrolls,
   the toolbar and pagination keep their natural height above/below it. */
.devices-split-top > .eg-dense-grid[b-4t3qang2kh] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.devices-split-top[b-4t3qang2kh]  .mud-table {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* Reserve exactly one page of rows (10 data rows at the pinned 26px + the ~28px header). This is what
   makes a full page sit flush against the pager (no slack gap) yet keeps every page the same height.
   Tied to the pinned row height in app.css -- update both together. */
.devices-split-top[b-4t3qang2kh]  .mud-table-container {
    flex: 1 1 auto;
    min-height: calc(28px + (10 * 26px));
}

/* Positioning context for the resize-grip hint, which sits over the native corner grip at the
   bottom-right of the resizable pane (pointer-events: none, so the native grip still does the drag). */
.devices-split-wrap[b-4t3qang2kh] {
    position: relative;
}

.devices-split-wrap[b-4t3qang2kh]::after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 12px;
    height: 12px;
    pointer-events: none;
    opacity: 0.65;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cg stroke='%239e9e9e' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='11' y1='4' x2='4' y2='11'/%3E%3Cline x1='11' y1='8' x2='8' y2='11'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
}

/* Legend footer pinned to the bottom of the resizable pane. Because it is the pane's last child, the
   native resize grip (and its ::after hint) land at its right edge -- so the legend sits on the left
   and the grab handle on the right, level on the same row. The right padding keeps the last legend
   item clear of the grip. */
.devices-footer[b-4t3qang2kh] {
    flex: 0 0 auto;
    gap: 18px;
    padding: 6px 22px 4px 4px;
}