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

main[b-085jie6k0c] {
    flex: 1;
}

.sidebar[b-085jie6k0c] {
    background-image: linear-gradient(180deg, var(--sidebar-grad-start) 0%, var(--sidebar-grad-end) 100%);
}

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

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

    article[b-085jie6k0c] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
        /* Caps line/table length on very wide monitors instead of stretching content
           edge-to-edge — docs/UI_UX_REDESIGN_PLAN.md §A.5/P. Generous on purpose: several
           pages (Transactions, Profiles' form, Wallet history) are genuinely wide tables/
           forms, so this should stop mattering well before a laptop-sized screen does. */
        max-width: 1440px;
        margin-inline: auto;
    }
}

#blazor-error-ui[b-085jie6k0c] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-085jie6k0c] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/DeyeBatteryGuard.Web/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-oj881zf9ak] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.75rem; /* 44px — the app's stated minimum touch target (see app.css) */
    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-oj881zf9ak] {
    background-color: rgba(255, 255, 255, 0.5);
}

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

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

/* Same literal white-on-gradient treatment the rest of this sidebar chrome uses (e.g. the
   active-link background below) — the sidebar is persistent brand chrome that does not
   switch with the light/dark toggle, so it reads against its own gradient, not the page's
   current --surface/--text tokens. */
.theme-toggle[b-oj881zf9ak] {
    appearance: none;
    cursor: pointer;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem; /* 44px — the app's stated minimum touch target (see app.css) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.theme-toggle:hover[b-oj881zf9ak] {
    background: rgba(255, 255, 255, 0.22);
}

.theme-toggle:focus-visible[b-oj881zf9ak] {
    outline: 2px solid white;
    outline-offset: 2px;
}

.theme-toggle-icon[b-oj881zf9ak] {
    width: 1.25rem;
    height: 1.25rem;
}

/* Clears the hamburger toggler, which is absolutely positioned over this same row only
   below the 641px breakpoint where it is actually shown (see .navbar-toggler below). */
@media (max-width: 640px) {
    .theme-toggle[b-oj881zf9ak] {
        margin-right: 3.75rem;
    }
}

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

.bi-battery-nav-menu[b-oj881zf9ak] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='white' stroke-width='1.3' viewBox='0 0 16 16'%3E%3Crect x='1' y='5' width='12' height='6' rx='1.3'/%3E%3Cpath d='M14.5 7v2' stroke-linecap='round'/%3E%3Cpath d='M3 7.3h7' stroke-linecap='round' stroke-width='2'/%3E%3C/svg%3E");
}

.bi-hdd-nav-menu[b-oj881zf9ak] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='white' stroke-width='1.3' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='14' height='9' rx='1.3'/%3E%3Cpath d='M4 5.5h4M4 8h2' stroke-linecap='round'/%3E%3Ccircle cx='11.5' cy='6.5' r='1' fill='white' stroke='none'/%3E%3Cpath d='M5 13.5h6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.bi-gear-nav-menu[b-oj881zf9ak] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.115-.402-.647-.402-.762 0l-.302 1.06a1 1 0 0 1-1.276.674l-1.041-.377c-.398-.144-.76.24-.573.618l.482.965a1 1 0 0 1-.53 1.362l-1.02.408c-.386.155-.386.7 0 .855l1.02.408a1 1 0 0 1 .53 1.362l-.482.965c-.187.378.175.762.573.618l1.041-.377a1 1 0 0 1 1.276.674l.302 1.06c.115.402.647.402.762 0l.302-1.06a1 1 0 0 1 1.276-.674l1.041.377c.398.144.76-.24.573-.618l-.482-.965a1 1 0 0 1 .53-1.362l1.02-.408c.386-.155.386-.7 0-.855l-1.02-.408a1 1 0 0 1-.53-1.362l.482-.965c.187-.378-.175-.762-.573-.618l-1.041.377a1 1 0 0 1-1.276-.674l-.302-1.06ZM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.86Z'/%3E%3C/svg%3E");
}

/* Reused across several unrelated nav links (Automation, Setup, dealer/admin Transactions, Wallet,
   Packages, Payment methods, Pending payments, Wallets) as the generic "list-like page" icon —
   deliberately plain rather than page-specific, since no single glyph fits all of them. */
.bi-list-nested-nav-menu[b-oj881zf9ak] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='white' stroke-width='1.3' viewBox='0 0 16 16'%3E%3Cpath d='M2 3.5h12' stroke-linecap='round'/%3E%3Cpath d='M2 8h1M2 12.5h1' stroke-linecap='round'/%3E%3Cpath d='M5 8h9M5 12.5h9' stroke-linecap='round'/%3E%3C/svg%3E");
}

.bi-question-circle-nav-menu[b-oj881zf9ak] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='white' stroke-width='1.3' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.3'/%3E%3Cpath d='M6.1 6.2a1.9 1.9 0 1 1 2.6 2.5c-.5.4-.8.8-.8 1.4' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.3' r='0.6' fill='white' stroke='none'/%3E%3C/svg%3E");
}

.bi-people-nav-menu[b-oj881zf9ak] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Ccircle cx='5.5' cy='5.2' r='2.1'/%3E%3Cpath d='M1 13.2c0-2.4 2-4 4.5-4s4.5 1.6 4.5 4v.3H1v-.3Z'/%3E%3Ccircle cx='11.2' cy='5.6' r='1.7' opacity='0.7'/%3E%3Cpath d='M10.5 9.4c1.8.3 3.1 1.7 3.1 3.6v.2h-2.9' opacity='0.7'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-oj881zf9ak] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='5' r='2.6'/%3E%3Cpath d='M2.5 13.3c0-2.9 2.4-4.8 5.5-4.8s5.5 1.9 5.5 4.8v.2h-11v-.2Z'/%3E%3C/svg%3E");
}

/* Groups the flat link list into Account/Dealer/Admin — purely a heading, no bearing on which
   links actually show; that's still decided entirely by _showCustomers/AdminOnly below. */
.nav-section-title[b-oj881zf9ak] {
    padding: 0.9rem 0.75rem 0.3rem;
    font-size: 0.7rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
}

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

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

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

    .nav-item[b-oj881zf9ak]  .nav-link {
        color: var(--sidebar-text);
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

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

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

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

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

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

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

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}