/* /Components/ConfirmationModal.razor.rz.scp.css */
.modal-backdrop-custom[b-gw66ree9rc] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1050;
    animation: fadeIn-b-gw66ree9rc 0.2s ease-out;
}

.modal[b-gw66ree9rc] {
    z-index: 1055;
    animation: slideIn-b-gw66ree9rc 0.2s ease-out;
}

.modal-content[b-gw66ree9rc] {
    background: var(--color-surface);
    color: var(--color-text);
}

@keyframes fadeIn-b-gw66ree9rc {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-gw66ree9rc {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (prefers-color-scheme: dark) {
    .btn-close[b-gw66ree9rc] {
        filter: invert(1) grayscale(100%) brightness(200%);
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-hj94b9dgm5] {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Mobile: Full viewport height, no window scroll */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

main[b-hj94b9dgm5] {
    flex: 1;
    background-color: var(--color-bg);
    overflow-y: auto;
    overflow-x: hidden;
    /* Content scrolls inside main */
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    /* No padding needed, sidebar is separate */
}

.content[b-hj94b9dgm5] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sidebar[b-hj94b9dgm5] {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    /* Mobile: Part of the flex flow, at the bottom */
    position: relative;
    z-index: 1000;
    height: auto;
    flex-shrink: 0;
    /* Never shrink */
    order: 2;
    /* Move to bottom */
    padding-bottom: env(safe-area-inset-bottom);
}

/* Hide top row on mobile as we use bottom nav */
.top-row[b-hj94b9dgm5] {
    display: none;
}

@media (min-width: 641px) {
    .page[b-hj94b9dgm5] {
        flex-direction: row;
        height: auto;
        /* Reset */
        min-height: 100vh;
        overflow: visible;
        /* Reset */
    }

    main[b-hj94b9dgm5] {
        overflow-y: visible;
        /* Reset */
        padding-bottom: 0;
    }

    .sidebar[b-hj94b9dgm5] {
        width: 80px;
        /* Narrower for icon+text stack (Rail style) */
        height: 100vh;
        position: sticky;
        top: 0;
        border-top: none;
        border-right: 1px solid var(--color-border);
        display: flex;
        flex-direction: column;
        order: 0;
        /* Reset */
    }

    .top-row[b-hj94b9dgm5] {
        display: none;
        /* Hide top row on desktop too if we want a pure rail, or keep it. User didn't specify, but screenshots often show just the rail. Let's hide it for now as the NavMenu is the main nav. */
        background-color: var(--color-surface-glass);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--color-border);
        justify-content: flex-end;
        height: 3.5rem;
        align-items: center;
        flex-shrink: 0;
    }

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

    .top-row[b-hj94b9dgm5]  a:hover,
    .top-row[b-hj94b9dgm5]  .btn-link:hover {
        color: var(--color-primary);
    }

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