/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-muwbfkcko2] {
    position: relative;
    display: flex;
    flex-direction: column;
}
main[b-muwbfkcko2] {
    flex: 1;
}
.sidebar[b-muwbfkcko2] {
    background-image: linear-gradient(180deg, #4b525c 0%, #363b42 70%);
}
.top-row[b-muwbfkcko2] {
    background-color: #4b525c;
    border-bottom: 1px solid #363b42;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}
.logged-in-as[b-muwbfkcko2] {
    color: #ffffff;
    font-size: 0.9rem;
}
    .top-row[b-muwbfkcko2]  a, .top-row[b-muwbfkcko2]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }
    .top-row[b-muwbfkcko2]  a:hover, .top-row[b-muwbfkcko2]  .btn-link:hover {
        text-decoration: underline;
    }
    .top-row[b-muwbfkcko2]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }
@media (max-width: 640.98px), (max-height: 500px) {
    .top-row[b-muwbfkcko2] {
        /* Removed entirely on mobile, rather than just restyled -- the
           narrow screen doesn't have room for both this row and the
           NavMenu's own top bar without crowding, and the content it
           shows (who's logged in) isn't essential for using the app on a
           phone. Same combined width-or-height condition as the rest of
           this file and NavMenu.razor.css, so a phone in landscape (wide
           but short) still gets the mobile layout instead of a broken mix
           of mobile nav items with a desktop-mode fixed sidebar. */
        display: none;
    }
    .top-row[b-muwbfkcko2]  a, .top-row[b-muwbfkcko2]  .btn-link {
        margin-left: 0;
    }
}
@media (min-width: 641px) and (min-height: 500.98px) {
    .page[b-muwbfkcko2] {
        flex-direction: row;
    }
    .sidebar[b-muwbfkcko2] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }
    .top-row[b-muwbfkcko2] {
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .top-row.auth[b-muwbfkcko2]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }
    .top-row[b-muwbfkcko2], article[b-muwbfkcko2] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-4yoooxwhuo] {
    background-color: rgba(255, 255, 255, 0.1);
}

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

.navbar-brand[b-4yoooxwhuo] {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* Lets the flex children below actually shrink to fit -- without this,
       flex items default to never shrinking narrower than their own
       natural content size, which is exactly how an unconstrained image
       can overflow its container even inside a flexbox. */
    min-width: 0;
}

.brand-logo-customer[b-4yoooxwhuo] {
    /* Original desktop sizing -- unconstrained height, width-capped only.
       Restored to how it was before the mobile overflow fix below; desktop
       has enough room that the overflow problem never showed up there. */
    max-width: 58.5%;
    height: auto;
    margin-left: 5px;
}

/* Mobile only: both logos additionally height-capped so neither can
   overflow the fixed-height top-row and bury the hamburger button
   underneath it (see the "hamburger not visible on iPhone" fix) -- desktop
   keeps its original, larger, unconstrained-height look above. Same
   combined width-or-height condition used everywhere else in this file for
   "mobile", so a phone in landscape (wide but short) still counts. */
@media (max-width: 640.98px), (max-height: 500px) {
    .brand-logo-eland[b-4yoooxwhuo],
    .brand-logo-customer[b-4yoooxwhuo] {
        max-height: 2.4rem;
        width: auto;
    }

    .brand-logo-eland[b-4yoooxwhuo] {
        max-width: 40%;
    }
}

.bi[b-4yoooxwhuo] {
    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-4yoooxwhuo] {
    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-4yoooxwhuo] {
    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-4yoooxwhuo] {
    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");
}

/* Section headings (Operations / Transactions / System) -- bold, white */
.nav-item strong[b-4yoooxwhuo] {
    color: white;
    font-weight: bold;
    font-size: 1rem;
}

.nav-item[b-4yoooxwhuo] {
    font-size: 0.9rem;
    padding-bottom: 0.15rem;
    padding-left: 2.25rem;
    padding-right: 1rem;
}

    .nav-item:first-of-type[b-4yoooxwhuo] {
        padding-top: calc(0.5rem + 71px);
    }

    .nav-item:last-of-type[b-4yoooxwhuo] {
        padding-bottom: 0.5rem;
    }

    .nav-item[b-4yoooxwhuo]  a {
        color: white;
        border-radius: 0;
        height: 2.2rem;
        display: flex;
        align-items: center;
        line-height: 2.2rem;
        font-weight: normal;
    }

        .nav-item[b-4yoooxwhuo]  a.active {
            background-color: #6c757d;
            color: white;
        }

        .nav-item[b-4yoooxwhuo]  a:hover {
            background-color: rgba(255, 255, 255, 0.15);
            color: white;
        }

    /* Home is the first nav item -- styled like a heading: bold, same size,
   left-aligned plain text rather than a padded/boxed link */
    .nav-item:first-of-type[b-4yoooxwhuo]  a {
        font-weight: bold;
        font-size: 1rem;
        display: block;
        height: auto;
        line-height: normal;
        padding: 0.25rem 0;
    }

    /* Logout is a button, not a NavLink, so it needs its own rule */
    .nav-item[b-4yoooxwhuo]  button.nav-link {
        color: white;
        font-weight: bold;
        font-size: 1rem;
        border-radius: 0;
    }

        .nav-item[b-4yoooxwhuo]  button.nav-link:hover {
            background-color: rgba(255, 255, 255, 0.15);
            color: white;
        }

/* "Mobile" is now width-or-height, not width alone -- a phone in landscape
   reports a wide viewport (often 800px+) but stays short, and a pure
   width check would misclassify it as desktop, showing the full menu it
   was specifically hidden to avoid crowding. min-height below is the
   logical complement (641px+ AND taller than 500px), so the two conditions
   never both match the same viewport. */
@media (max-width: 640.98px), (max-height: 500px) {
    .desktop-only[b-4yoooxwhuo] {
        display: none;
    }
}

@media (min-width: 641px) and (min-height: 500.98px) {
    .navbar-toggler[b-4yoooxwhuo] {
        display: none;
    }

    .collapse[b-4yoooxwhuo] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-4yoooxwhuo] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}