@import '_content/Prompt.Marvolo.Components/Prompt.Marvolo.Components.i3v40o0l7h.bundle.scp.css';

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

main[b-8gix3x7rfd] {
    flex: 1;
    /* A flex item is never narrower than its content unless told: without this a wide grid stretches the whole page
       sideways, where its own wrapper should scroll instead. */
    min-width: 0;
}

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

.top-row[b-8gix3x7rfd] {
    background-color: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

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

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

    .top-row[b-8gix3x7rfd] {
        position: sticky;
        top: 0;
        /* Bootstrap's sticky-top level. Being sticky, the bar holds the user menu inside its own stacking order, so
           it must sit above the grid's sticky and frozen cells (1–3) and its filter panel (10); an expanded grid
           (1040) still covers it. */
        z-index: 1020;
    }

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

#blazor-error-ui[b-8gix3x7rfd] {
    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-8gix3x7rfd] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-9ponpzs15n] {
    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-9ponpzs15n] {
    background-color: rgba(255, 255, 255, 0.5);
}

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

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

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

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

    /* Top level only: inside a group these would open gaps at the start and end of every child list. */
    .nav > .nav-item:first-of-type[b-9ponpzs15n] {
        padding-top: 1rem;
    }

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

    .nav-children .nav-item:last-of-type[b-9ponpzs15n] {
        padding-bottom: 0;
    }

    .nav-item[b-9ponpzs15n]  .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-9ponpzs15n]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

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

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

/* Flex, not block: the nav's onclick toggles this checkbox on desktop too, where the toggler is
   hidden, and block here would override the desktop column and drop the footer up the menu. */
.navbar-toggler:checked ~ .nav-scrollable[b-9ponpzs15n] {
    display: flex;
    flex-direction: column;
}

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

    .nav-scrollable[b-9ponpzs15n] {
        /* Never collapse the sidebar for wide screens. A column, so the footer's margin-top: auto
           pins it to the bottom however short the menu is. */
        display: flex;
        flex-direction: column;

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

.nav-footer[b-9ponpzs15n] {
    margin-top: auto;
    color: #d7d7d7;
    font-size: 0.75rem;
}

    /* The badge is dark green for a light background. Flattened to white so it reads on the dark
       sidebar; the mint accents go white with it. */
    .nav-footer img[b-9ponpzs15n] {
        display: block;
        margin-top: 0.25rem;
        filter: brightness(0) invert(1);
        opacity: 0.85;
    }

/* Icons are markup from a declaration, so the svg inside carries no scope attribute; ::deep reaches it. */
.nav-icon[b-9ponpzs15n]  svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Groups: a native <details>, its summary styled as a nav link with a chevron that turns when open. */
.nav-item summary[b-9ponpzs15n] {
    list-style: none;
    cursor: pointer;
}

    .nav-item summary[b-9ponpzs15n]::-webkit-details-marker {
        display: none;
    }

    .nav-item summary[b-9ponpzs15n]::after {
        content: "";
        margin-left: auto;
        margin-right: 0.5rem;
        width: 0.45rem;
        height: 0.45rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg);
        transition: transform 0.15s;
    }

.nav-item details[open] > summary[b-9ponpzs15n]::after {
    transform: rotate(45deg);
}

.nav-children[b-9ponpzs15n] {
    padding-left: 1rem;
}