@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.7t9tbfaemk.bundle.scp.css';

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

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

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

.top-row[b-pinyi8vrc7] {
    background-color: rgba(0, 0, 0, 0.4);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

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

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

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

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

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

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

    .sidebar[b-pinyi8vrc7] {
        height: 100vh;
        position: sticky;
        top: 0;
    }

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

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

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

#blazor-error-ui[b-pinyi8vrc7] {
    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-pinyi8vrc7] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* _content/OneWare.Cloud/Components/Layout/NavMenu.razor.rz.scp.css */
/* NavMenu.razor.css — mobile-first off-canvas with proper z-index stacking */

:root[b-mi8eg0wjmg] {
    /* z-index layers */
    --ow-z-sidebar: 9999; /* above app UI */
    --ow-z-backdrop: 9998; /* just under sidebar */
    /* Navigation link colors - custom for sidebar */
    --ow-nav-text-color: #ffffff; /* white for non-selected */
    --ow-nav-hover-color: #4fd1c7; /* greenish/blueish for hover */
    --ow-nav-active-color: #22d3ee; /* slightly different cyan for active */
    --ow-nav-disabled-color: #9ca3af; /* muted gray for disabled */
    /* Bootstrap nav colors (fallback) */
    --bs-nav-link-color: var(--bs-link-color);
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
    --bs-nav-link-disabled-color: var(--bs-secondary-color);
    /* Sidebar nav spacing + rounding */
    --ow-nav-gap: 1rem; /* increased from 0.6rem */
    --ow-nav-radius: 0.75rem; /* ~12px; bump to 1rem or 999px for pill */
    /* Icon-to-text spacing & size */
    --ow-icon-gap: 1rem;
    --ow-icon-size: 1.25rem;
}

/* ===== Header Layout ===== */
.top-row.sticky-top[b-mi8eg0wjmg] {
    z-index: 1020;
    padding-bottom: 0;
}

/* Desktop: Increase header height for stacked layout */
@media (min-width: 768px) {
    .top-row.sticky-top[b-mi8eg0wjmg] {
        padding: 0.5rem 1rem;
    }
}

/* Remove any potential margins/padding from sidebar container on mobile */
@media (max-width: 768px) {
    /* Ensure the sidebar container doesn't interfere */
    .sidebar[b-mi8eg0wjmg] {
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
    }

    .page main[b-mi8eg0wjmg] {
        position: relative;
        z-index: 1;
    }

    /* Force all Interactive WebAssembly content to stay below navbar - more aggressive approach */
    .page main[b-mi8eg0wjmg],
    .page main *[b-mi8eg0wjmg],
    .page main .alert[b-mi8eg0wjmg],
    .page main .btn[b-mi8eg0wjmg],
    .page main .card[b-mi8eg0wjmg],
    .page main .nav[b-mi8eg0wjmg],
    .page main .tab-content[b-mi8eg0wjmg],
    .page main .progress[b-mi8eg0wjmg],
    .page main .spinner-border[b-mi8eg0wjmg],
    .page main .grid[b-mi8eg0wjmg],
    .page main .table[b-mi8eg0wjmg],
    .page main .breadcrumb[b-mi8eg0wjmg],
    .page main .list-group[b-mi8eg0wjmg],
    .page main .badge[b-mi8eg0wjmg],
    .page main .form-control[b-mi8eg0wjmg],
    .page main .input-group[b-mi8eg0wjmg] {
        position: relative !important;
        z-index: 1 !important;
    }

    /* Specific targeting for Blazor Bootstrap components */
    .page main .bb-grid[b-mi8eg0wjmg],
    .page main .bb-tabs[b-mi8eg0wjmg],
    .page main .bb-spinner[b-mi8eg0wjmg],
    .page main .bb-progress[b-mi8eg0wjmg],
    .page main .bb-breadcrumb[b-mi8eg0wjmg],
    .page main .bb-card[b-mi8eg0wjmg],
    .page main .bb-badge[b-mi8eg0wjmg],
    .page main .bb-listgroup[b-mi8eg0wjmg] {
        position: relative !important;
        z-index: 1 !important;
    }

    /* Force all positioned elements to lower z-index */
    .page main *[style*="position: absolute"][b-mi8eg0wjmg],
    .page main *[style*="position: fixed"][b-mi8eg0wjmg],
    .page main *[style*="position: sticky"][b-mi8eg0wjmg] {
        z-index: 1 !important;
    }

    /* Essential Bootstrap components that need to work but stay below navbar */
    .page main .modal[b-mi8eg0wjmg],
    .page main .toast[b-mi8eg0wjmg],
    .page main .dropdown-menu[b-mi8eg0wjmg],
    .page main .popover[b-mi8eg0wjmg],
    .page main .tooltip[b-mi8eg0wjmg] {
        z-index: 1040 !important;
    }

    /* Ensure toasts specifically stay below navbar */
    .page .toast-container[b-mi8eg0wjmg],
    .page .toasts[b-mi8eg0wjmg] {
        z-index: 1040 !important;
    }
}

/* Sidebar base */
#ow-sidebar.ow-sidebar[b-mi8eg0wjmg] {
    height: 100%;
    width: 280px;
    overflow-y: auto;
    background-clip: padding-box;
    z-index: var(--ow-z-sidebar);
    background: transparent !important;
}

/* ===== Mobile: off-canvas behavior ===== */
@media (max-width: 768px) {
    #ow-sidebar.ow-sidebar[b-mi8eg0wjmg] {
        position: fixed;
        top: 0 !important; /* cover entire viewport */
        left: 0;
        right: auto;
        bottom: 0;
        width: 300px;
        height: 100dvh;
        transform: translateX(-100%); /* hidden by default */
        transition: transform .2s ease;
        will-change: transform;
        margin: 0 !important;
        padding: 0 !important;
        background-image: linear-gradient(38deg, #030706, #152d38, #112f30) !important;
    }

    /* Backdrop that closes the drawer when tapped */
    .ow-backdrop[b-mi8eg0wjmg] {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .35);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
        z-index: var(--ow-z-backdrop);
    }

    /* Toggle ON: slide in + enable backdrop */
    .ow-nav-toggle:checked ~ #ow-sidebar.ow-sidebar[b-mi8eg0wjmg] {
        transform: translateX(0);
    }

    .ow-nav-toggle:checked ~ .ow-backdrop[b-mi8eg0wjmg] {
        opacity: 1;
        pointer-events: auto;
    }

    /* Respect notches / safe areas */
    .top-row[b-mi8eg0wjmg] {
        padding-top: env(safe-area-inset-top);
        box-shadow: 0 1px 2px 0 #0000001a;
    }

    #ow-sidebar.ow-sidebar[b-mi8eg0wjmg] {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ===== Desktop: pinned, sticky sidebar ===== */
@media (min-width: 768px) {
    #ow-sidebar.ow-sidebar[b-mi8eg0wjmg] {
        position: sticky;
        top: 0;
        height: 100vh;
        transform: none; /* ensure no transform on desktop */
    }
}

/* Accessibility: honor reduced motion */
@media (prefers-reduced-motion: reduce) {
    #ow-sidebar.ow-sidebar[b-mi8eg0wjmg], .ow-backdrop[b-mi8eg0wjmg] {
        transition: none !important;
    }
}

/* ===== Sidebar Navigation Container ===== */
.nav-scrollable[b-mi8eg0wjmg] {
    height: 100%;
    min-height: 0;
    overflow-x: hidden !important;
    background: transparent !important; /* Ensure transparent background */
}

@media (min-width: 768px) {
    .nav-scrollable[b-mi8eg0wjmg] {
        height: 100vh;
    }
}

/* Navigation area that can scroll */
.nav-scrollable .nav[b-mi8eg0wjmg] {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0;
}

/* ===== Sidebar Footer ===== */
.sidebar-footer[b-mi8eg0wjmg] {
    position: fixed !important;
    bottom: 5px !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    padding: 0.75rem 1rem !important;
    /* Make background transparent to show parent sidebar gradient */
    background: transparent !important;
    z-index: calc(var(--ow-z-sidebar) + 1) !important;
}

.sidebar-footer a[b-mi8eg0wjmg] {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    font-size: 0.8rem !important;
    padding: 0.125rem 0 !important;
    transition: color 0.2s ease !important;
}

.sidebar-footer a:hover[b-mi8eg0wjmg] {
    color: var(--ow-nav-hover-color) !important;
}

/* Mobile: Ensure consistent behavior with desktop */
@media (max-width: 768px) {
    .sidebar-footer[b-mi8eg0wjmg] {
        bottom: calc(50px + env(safe-area-inset-bottom)) !important;
    }
}

/* Ensure proper header layout */
.top-row .container-fluid[b-mi8eg0wjmg] {
    position: relative;
}

/* ===== Navigation Styling ===== */
#ow-sidebar.ow-sidebar .nav .nav-link[b-mi8eg0wjmg],
#ow-sidebar.ow-sidebar .nav[b-mi8eg0wjmg]  .nav-link {
    border-radius: 5px !important;
    transition: all 0.2s ease !important;
}

#ow-sidebar.ow-sidebar .nav .nav-link:not(.disabled):hover[b-mi8eg0wjmg],
#ow-sidebar.ow-sidebar .nav[b-mi8eg0wjmg]  .nav-link:not(.disabled):hover,
#ow-sidebar.ow-sidebar .nav .nav-link:not(.disabled):focus-visible[b-mi8eg0wjmg],
#ow-sidebar.ow-sidebar .nav[b-mi8eg0wjmg]  .nav-link:not(.disabled):focus-visible {
    border-color: var(--ow-nav-hover-color) !important;
    background-color: rgba(79, 209, 199, 0.15) !important;
}

#ow-sidebar.ow-sidebar .nav .nav-link.active[b-mi8eg0wjmg],
#ow-sidebar.ow-sidebar .nav[b-mi8eg0wjmg]  a.active {
    border-color: var(--ow-nav-active-color) !important;
    background-color: rgba(34, 211, 238, 0.25) !important;
    font-weight: 600 !important;
}

/* Remove border-radius from nav-item to avoid conflict */
#ow-sidebar.ow-sidebar .nav-item[b-mi8eg0wjmg],
#ow-sidebar.ow-sidebar .nav-item.px-3[b-mi8eg0wjmg] {
    border-radius: 0 !important;
    background: none !important;
}

#ow-sidebar.ow-sidebar .nav[b-mi8eg0wjmg] {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
}

/* ===== Admin submenu (CSS-only expand/collapse) ===== */
.manage-submenu[b-mi8eg0wjmg] {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

#manage-toggle:checked ~ .manage-submenu[b-mi8eg0wjmg] {
    max-height: 500px;
    opacity: 1;
}

.ow-manage-toggle[b-mi8eg0wjmg] {
    cursor: pointer;
    user-select: none;
}

.manage-chevron[b-mi8eg0wjmg] {
    transition: transform .2s ease;
}

#manage-toggle:checked + .ow-manage-toggle .manage-chevron[b-mi8eg0wjmg] {
    transform: rotate(180deg);
}

/* ===== Nav polish ===== */
.nav[b-mi8eg0wjmg] {
    list-style: none;
}

/* Base link style (keeps Bootstrap colors via variables for non-sidebar navs) */
.nav .nav-link[b-mi8eg0wjmg] {
    padding-top: .45rem;
    padding-bottom: .45rem;
    color: var(--bs-nav-link-color);
}

.nav .nav-link:hover[b-mi8eg0wjmg] {
    color: var(--bs-nav-link-hover-color);
}

.nav .nav-link.active[b-mi8eg0wjmg] {
    font-weight: 600;
}

.nav .nav-link:disabled[b-mi8eg0wjmg],
.nav .nav-link.disabled[b-mi8eg0wjmg] {
    color: var(--bs-nav-link-disabled-color);
}

/* Navigation item styling */
.nav-item[b-mi8eg0wjmg] {
    list-style: none;
    border-radius: 5px;
}

.nav-item.px-3[b-mi8eg0wjmg] {
    border-radius: 5px;
}

/* Fallback in case visually-hidden isn't available (Bootstrap 5 usually provides it) */
.visually-hidden[b-mi8eg0wjmg] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    border: 0 !important;
}

/* === Sidebar nav-link shape & states (ported + enhanced) === */
/* Scope everything to the sidebar so top navs remain untouched. */

/* Make the list vertical with gaps */
#ow-sidebar.ow-sidebar .nav[b-mi8eg0wjmg] {
    display: flex;
    flex-direction: column;
    gap: var(--ow-nav-gap);
    padding: 0;
    margin: 0;
}

/* Tile shape for links (works with Blazor CSS isolation too) */
#ow-sidebar.ow-sidebar .nav .nav-link[b-mi8eg0wjmg],
#ow-sidebar.ow-sidebar .nav[b-mi8eg0wjmg]  .nav-link {
    background: none;
    border: 0;
    border-radius: var(--ow-nav-radius);
    height: 3rem;
    display: flex;
    align-items: center;
    width: 100%;
    padding-inline: .5rem;
    /* White text for non-selected elements */
    color: var(--ow-nav-text-color) !important;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Hover + keyboard focus - greenish/blueish color */
#ow-sidebar.ow-sidebar .nav .nav-link:not(.disabled):hover[b-mi8eg0wjmg],
#ow-sidebar.ow-sidebar .nav[b-mi8eg0wjmg]  .nav-link:not(.disabled):hover,
#ow-sidebar.ow-sidebar .nav .nav-link:not(.disabled):focus-visible[b-mi8eg0wjmg],
#ow-sidebar.ow-sidebar .nav[b-mi8eg0wjmg]  .nav-link:not(.disabled):focus-visible {
    background-color: rgba(79, 209, 199, 0.15); /* subtle background with teal */
    color: var(--ow-nav-hover-color) !important;
    text-decoration: none;
    border-radius: var(--ow-nav-radius);
}

/* Active (selected) state - greenish/blueish color */
#ow-sidebar.ow-sidebar .nav .nav-link.active[b-mi8eg0wjmg],
#ow-sidebar.ow-sidebar .nav[b-mi8eg0wjmg]  a.active {
    background-color: rgba(34, 211, 238, 0.25); /* subtle background with cyan */
    color: var(--ow-nav-active-color) !important;
    border-radius: var(--ow-nav-radius);
    font-weight: 600;
}

/* Disabled state */
#ow-sidebar.ow-sidebar .nav .nav-link.disabled[b-mi8eg0wjmg],
#ow-sidebar.ow-sidebar .nav .nav-link:disabled[b-mi8eg0wjmg] {
    color: var(--ow-nav-disabled-color) !important;
}

/* === Icon → text spacing inside sidebar nav links === */
#ow-sidebar.ow-sidebar .nav .nav-link[b-mi8eg0wjmg],
#ow-sidebar.ow-sidebar .manage-submenu .nav-link[b-mi8eg0wjmg] {
    display: flex;
    align-items: center;
    gap: 1rem; /* or use var(--ow-icon-gap) if you prefer */
}

#ow-sidebar.ow-sidebar .nav .nav-link[b-mi8eg0wjmg] {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

#ow-sidebar.ow-sidebar .nav .nav-link .bi[b-mi8eg0wjmg] {
    margin-right: 0.75rem !important;
}
/* Ensure icons look aligned and consistent */
#ow-sidebar.ow-sidebar .nav .nav-link .bi[b-mi8eg0wjmg],
#ow-sidebar.ow-sidebar .manage-submenu .nav-link .bi[b-mi8eg0wjmg] {
    font-size: var(--ow-icon-size);
    line-height: 1;
    flex-shrink: 0;
    display: inline-block;
}

/* Use 'gap' as the single source of spacing (override any earlier margins) */
#ow-sidebar.ow-sidebar .nav .nav-link .bi[b-mi8eg0wjmg] {
    margin-right: 0;
}

/* Fallback for browsers without flex gap in flexbox */
@supports not (gap: 1rem) {
    #ow-sidebar.ow-sidebar .nav .nav-link .bi[b-mi8eg0wjmg],
    #ow-sidebar.ow-sidebar .manage-submenu .nav-link .bi[b-mi8eg0wjmg] {
        margin-right: var(--ow-icon-gap);
    }
}

/* === Admin submenu styling === */
#ow-sidebar.ow-sidebar .manage-submenu .nav-link[b-mi8eg0wjmg] {
    color: var(--ow-nav-text-color) !important;
    transition: all 0.2s ease;
}

#ow-sidebar.ow-sidebar .manage-submenu .nav-link:hover[b-mi8eg0wjmg] {
    color: var(--ow-nav-hover-color) !important;
    background-color: rgba(79, 209, 199, 0.15);
}

#ow-sidebar.ow-sidebar .manage-submenu .nav-link.active[b-mi8eg0wjmg] {
    color: var(--ow-nav-active-color) !important;
    background-color: rgba(34, 211, 238, 0.25);
}

/* === Form buttons in sidebar (logout button) === */
#ow-sidebar.ow-sidebar form button.nav-link[b-mi8eg0wjmg] {
    background: none;
    border: none;
    color: var(--ow-nav-text-color) !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

#ow-sidebar.ow-sidebar form button.nav-link:hover[b-mi8eg0wjmg] {
    color: var(--ow-nav-hover-color) !important;
    background-color: rgba(79, 209, 199, 0.15);
}

@media (max-width: 768px) {
    #ow-sidebar.ow-sidebar[b-mi8eg0wjmg] {
        z-index: 99999 !important;
        top: 0 !important;
    }

    .ow-backdrop[b-mi8eg0wjmg] {
        z-index: 99998 !important;
    }
    
    /* Essential overlays */
    .modal[b-mi8eg0wjmg], .toast[b-mi8eg0wjmg], .dropdown-menu[b-mi8eg0wjmg], .popover[b-mi8eg0wjmg], .tooltip[b-mi8eg0wjmg],
    .toast-container[b-mi8eg0wjmg], .toasts[b-mi8eg0wjmg] {
        z-index: 1040 !important;
    }
    /* Reset any inline z-index */
    [style*="z-index"][b-mi8eg0wjmg] {
        z-index: 1 !important;
    }
}

/* Remove gap between navbar and sidebar */
.top-row.navbar[b-mi8eg0wjmg], #ow-sidebar.ow-sidebar[b-mi8eg0wjmg] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
}