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

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

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

.top-row[b-lnazcrcyt1] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

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

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

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

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

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

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

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

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

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

    .top-row[b-lnazcrcyt1], article[b-lnazcrcyt1] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* Transparent, sticky navbar that overlays page content and keeps the teal accent line */

/* Use the page variables defined in app.css for consistent theming */
.qgo-navbar[b-oe0293o0i8] {
    background: transparent !important;
    position: sticky;
    top: 0;
    z-index: 60;
    padding-top: 0.2rem; /* increased padding to make navbar taller */
    padding-bottom: 0.2rem; /* increased padding to make navbar taller */
    padding-left: 3rem;
    padding-right: 3rem;
    min-height: 64px; /* enforce a taller navbar */
    box-shadow: 0 1px 0 rgba(255,255,255,0.02), 0 6px 18px rgba(2,6,23,0.35);
    transition: background .28s ease, box-shadow .28s ease, backdrop-filter .28s ease, padding .2s ease;
    overflow: visible; /* allow overlays to be visible outside */
    /* soft side fades using inset shadows so we don't need extra pseudos for left/right */
    box-shadow: inset 120px 0 80px rgba(11,18,28,0.98), inset -120px 0 80px rgba(11,18,28,0.98), 0 6px 18px rgba(2,6,23,0.35);
}

/* when scrolled, show a frosted blurred band at the top and fade to transparent at the bottom */
.qgo-navbar.scrolled[b-oe0293o0i8] {
    background: transparent; /* keep underlying content visible */
    position: sticky;
    /* remove direct backdrop-filter from the whole nav and use a masked pseudo for the blur band */
    box-shadow: inset 120px 0 80px rgba(11,18,28,0.98), inset -120px 0 80px rgba(11,18,28,0.48), 0 12px 40px rgba(2,6,23,0.15);
    border-bottom: 0px solid rgba(255,255,255,0.02);
}

/* blurred top band that fades to transparent toward bottom */
.qgo-navbar.scrolled[b-oe0293o0i8]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 60%; /* control how much of the navbar height gets blurred */
    pointer-events: none;
    z-index: 6; /* sit below nav content (.qgo-container z-index:10) */

    /* backdrop blur and subtle tint */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: linear-gradient(180deg, rgba(11,18,28,0.72) 0%, rgba(11,18,28,0.48) 30%, rgba(11,18,28,0.18) 60%, rgba(11,18,28,0.00) 100%);

    /* mask/fade the band so the blur transitions to transparent at the bottom */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.65) 45%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.65) 45%, rgba(0,0,0,0) 100%);
}

/* layout containers */
.qgo-container[b-oe0293o0i8] { display:flex; align-items:center; gap:1rem; width:100%; }
.qgo-brand[b-oe0293o0i8] { color:var(--qgo-primary); font-weight:700; text-decoration:none; margin-right:1rem; }

/* toggler (mobile) */
.qgo-toggler[b-oe0293o0i8] { background:transparent; border:0; color:var(--muted); padding:.2rem; }
.qgo-toggler-icon[b-oe0293o0i8] { width:18px; height:14px; display:inline-block; position:relative; }
/* Fixed: use correct syntax for top position and explicit positions for pseudo elements */
.qgo-toggler-icon[b-oe0293o0i8]::before, .qgo-toggler-icon[b-oe0293o0i8]::after, .qgo-toggler-icon span[b-oe0293o0i8] { content:""; position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--qgo-accent),var(--qgo-primary)); border-radius:2px; }
.qgo-toggler-icon[b-oe0293o0i8]::before{ top:0; } 
.qgo-toggler-icon span[b-oe0293o0i8]{ top:6px; } 
.qgo-toggler-icon[b-oe0293o0i8]::after{ bottom:0; }

/* ensure the toggler is visible and sized on mobile */
@media (max-width: 575.98px) {
    .qgo-toggler[b-oe0293o0i8] { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; }
    .qgo-toggler-icon[b-oe0293o0i8] { width:22px; height:16px; }
}

/* collapse behavior */
.qgo-collapse.collapsed[b-oe0293o0i8] { display:flex; flex-direction:column; align-items:flex-start; gap:0.5rem; width:100%; }
.qgo-collapse.open[b-oe0293o0i8] { display:flex; flex-direction:row; align-items:center; justify-content:space-between; width:100%; }

/* nav list */
.qgo-nav[b-oe0293o0i8] { list-style:none; margin:0; padding:0; display:flex; gap:1rem; flex-direction:column; width:100%; }
.qgo-item[b-oe0293o0i8] { padding:1.25rem 0; }

/* qgo navlink (primary styling) */
.qgo-navlink[b-oe0293o0i8] {
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    color:var(--qgo-primary);
    text-decoration:none;
    padding:.28rem .6rem;
    border-radius:10px;
    font-weight:700;
    background:rgba(13,148,136,0.02);
    border:1px solid rgba(13,148,136,0.06);
    transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.qgo-navlink:hover[b-oe0293o0i8] {
    color:#042027;
    background:linear-gradient(180deg, rgba(13,148,136,0.12), rgba(56,189,248,0.03));
    transform:translateY(-3px);
    box-shadow:0 10px 30px rgba(2,6,23,0.35);
    border-color:rgba(13,148,136,0.18);
}
.qgo-navlink.active[b-oe0293o0i8] {
    color:#042027;
    background:linear-gradient(180deg, rgba(13,148,136,0.16), rgba(13,148,136,0.06));
    border-color:rgba(13,148,136,0.28);
}

/* actions / CTAs on the right */
.qgo-actions[b-oe0293o0i8] { display:flex; gap:.5rem; margin-left:auto; align-items:center; }
.qgo-cta[b-oe0293o0i8] { padding:.35rem .6rem; border-radius:8px; text-decoration:none; color:var(--qgo-link); background:transparent; border:1px solid rgba(255,255,255,0.03); }
.qgo-cta.qgo-primary[b-oe0293o0i8] { background:linear-gradient(180deg,var(--qgo-primary),var(--qgo-primary-600)); color:#042027; border-color:rgba(0,0,0,0.12); box-shadow:var(--shadow-sm); }

/* responsive: make nav horizontal on wider screens */
@media (min-width:576px) {
    .qgo-nav[b-oe0293o0i8] { flex-direction:row; width:auto; }
    .qgo-collapse.collapsed[b-oe0293o0i8] { display:flex; flex-direction:row; justify-content:space-between; align-items:center; }
}

/* mobile tweaks */
@media (max-width:575.98px) {
    .qgo-nav[b-oe0293o0i8] { flex-direction:column; width:100%; }
    .qgo-actions[b-oe0293o0i8] { width:100%; justify-content:flex-start; gap:.5rem; }
    /* reduce vertical padding on mobile to avoid overly tall items */
    .qgo-item[b-oe0293o0i8] { padding: .6rem 0; }
    .qgo-navlink[b-oe0293o0i8] { padding: .45rem .75rem; }
}

/* Desktop behaviour: hide the mobile toggle and force collapsed state to render horizontally */
@media (min-width: 576px) {
    /* hide the mobile toggle button on desktop */
    .qgo-toggler[b-oe0293o0i8] {
        display: none !important;
    }

    /* ensure the collapsed container still lays out as a horizontal navbar */
    .qgo-collapse.collapsed[b-oe0293o0i8],
    .qgo-collapse.open[b-oe0293o0i8] {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        background: transparent !important;
        padding-top: 0 !important;
        border-top: none !important;
    }

    /* horizontal nav list */
    .qgo-nav[b-oe0293o0i8] {
        flex-direction: row !important;
        gap: 1rem !important;
        width: auto !important;
    }

    /* keep action buttons aligned to the right */
    .qgo-actions[b-oe0293o0i8] {
        margin-left: auto !important;
    }
}

/* Nav link: enforce blue (#0d9488) and give a compact "card" button appearance.
   Placed at the end of the file so it overrides earlier rules (higher specificity + !important). */

nav.qgo-navbar .qgo-navlink[b-oe0293o0i8],
nav.qgo-navbar .qgo-navlink:link[b-oe0293o0i8],
nav.qgo-navbar .qgo-navlink:visited[b-oe0293o0i8],
nav.qgo-navbar .qgo-navlink:hover[b-oe0293o0i8],
nav.qgo-navbar .qgo-navlink:active[b-oe0293o0i8],
nav.qgo-navbar .qgo-navlink:focus[b-oe0293o0i8] {
    color: #0d9488 !important;
    text-decoration:none;
}

/* Button/card-like chrome */
nav.qgo-navbar .qgo-navlink[b-oe0293o0i8] {
    background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01)) !important;
    border: 1px solid rgba(10,88,202,0.08) !important;
    padding: .30rem .7rem !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 18px rgba(2,6,23,0.30) !important;
    transition: transform .12s ease, box-shadow .14s ease, background-color .12s ease !important;
    text-decoration:none !important;
}

/* Hover: subtle lift and stronger outline, keep text blue */
nav.qgo-navbar .qgo-navlink:hover[b-oe0293o0i8],
nav.qgo-navbar .qgo-navlink:focus[b-oe0293o0i8] {
    background: linear-gradient(180deg, rgba(10,88,202,0.02), rgba(10,88,202,0.01)) !important;
    border-color: rgba(10,88,202,0.18) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(2,6,23,0.36) !important;
    color: #0d9488 !important;
    text-decoration: none !important;
}

/* Active state: slightly stronger background, still blue text to match your request */
    nav.qgo-navbar .qgo-navlink.active[b-oe0293o0i8] {
        background: linear-gradient(180deg, rgba(10,88,202,0.04), rgba(10,88,202,0.02)) !important;
        border-color: rgba(10,88,202,0.22) !important;
        box-shadow: 0 10px 28px rgba(2,6,23,0.34) !important;
        color: #0d9488 !important;
        text-decoration: none !important;
    }

/* Keep mobile full-width buttons readable while preserving the card look */
@media (max-width: 575.98px) {
    nav.qgo-navbar .qgo-navlink[b-oe0293o0i8] {
        display: block !important;
        width: 100% !important;
        text-decoration: none !important;
        padding-left: .75rem !important;
    }
}

@media (max-width:575.98px) {
    .qgo-navbar.scrolled[b-oe0293o0i8] {
        background: rgba(11,18,28,0.6);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}

/* ensure overlays sit below nav content but above page background */
.qgo-navbar .qgo-container[b-oe0293o0i8] { position: relative; z-index: 10; }
/* Add small home logo styles */
nav.qgo-navbar .nav-home-logo[b-oe0293o0i8] {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 6px;
}

/* reduce padding for the home nav item so it looks like an icon */
nav.qgo-navbar .qgo-item .home-link[b-oe0293o0i8] { padding: 0 !important; }
/* Mobile-specific collapse behavior and hamburger animation */
@media (max-width:575.98px) {
    /* Hide collapsed menu completely on mobile, show only when open */
    .qgo-collapse.collapsed[b-oe0293o0i8] { display: none !important; }
    .qgo-collapse.open[b-oe0293o0i8] { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: .5rem !important; width: 100% !important; padding: .75rem 1rem !important; background: transparent; }

    /* Ensure nav list stacks vertically and fills width */
    .qgo-nav[b-oe0293o0i8] { flex-direction: column !important; width: 100% !important; }
    .qgo-item[b-oe0293o0i8] { width: 100%; }

    /* Make action buttons stack under nav links on mobile */
    .qgo-actions[b-oe0293o0i8] { width: 100% !important; justify-content: flex-start !important; flex-direction: column !important; gap: .5rem !important; margin-left: 0 !important; }

    /* Improve spacing for mobile nav links */
    nav.qgo-navbar .qgo-navlink[b-oe0293o0i8] { display: block !important; width: 100% !important; padding: .65rem .9rem !important; }

    /* Toggler styling and animation: transform into X when expanded using aria-expanded */
    .qgo-toggler[b-oe0293o0i8] { z-index: 70; }
    .qgo-toggler-icon[b-oe0293o0i8], .qgo-toggler-icon[b-oe0293o0i8]::before, .qgo-toggler-icon[b-oe0293o0i8]::after, .qgo-toggler-icon span[b-oe0293o0i8] { transition: transform .18s ease, opacity .18s ease; transform-origin: center; }

    button[aria-expanded="true"] .qgo-toggler-icon[b-oe0293o0i8]::before { transform: translateY(6px) rotate(45deg); }
    button[aria-expanded="true"] .qgo-toggler-icon[b-oe0293o0i8]::after  { transform: translateY(-6px) rotate(-45deg); }
    button[aria-expanded="true"] .qgo-toggler-icon span[b-oe0293o0i8]    { opacity: 0; transform: scaleX(0); }

    /* Slight background for the opened mobile menu to separate from content */
    .qgo-collapse.open[b-oe0293o0i8] { background: linear-gradient(180deg, rgba(11,18,28,0.85), rgba(11,18,28,0.65)); border-radius: 10px; box-shadow: var(--shadow-sm); }
}

/* Keep desktop layout intact */
@media (min-width: 576px) {
    .qgo-collapse.collapsed[b-oe0293o0i8] { display:flex; flex-direction:row; justify-content:space-between; align-items:center; }
}

/* Ensure screen-reader only text stays hidden visually but accessible */
.sr-only[b-oe0293o0i8] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Default: show logo, hide home text */
nav.qgo-navbar .nav-home-logo[b-oe0293o0i8] { display: inline-block; }
nav.qgo-navbar .nav-home-text[b-oe0293o0i8] { display: none; margin-left: .5rem; font-weight:700; color:var(--qgo-primary); }

/* On mobile: hide logo and show text for the home link */
@media (max-width:575.98px) {
    nav.qgo-navbar .nav-home-logo[b-oe0293o0i8] { display: none !important; }
    nav.qgo-navbar .nav-home-text[b-oe0293o0i8] { display: inline-block !important; }

    /* Make home link more prominent on mobile */
    nav.qgo-navbar .home-link[b-oe0293o0i8] { padding-left: .5rem !important; padding-right: .5rem !important; }

    /* Make toggler look like just a hamburger icon (no visible label) */
    .qgo-toggler[b-oe0293o0i8] { background: transparent; border-radius: 8px; }
    .qgo-toggler .qgo-toggler-icon[b-oe0293o0i8] { display:inline-block; }
}

/* Desktop: ensure text hidden and logo visible */
@media (min-width:576px) {
    nav.qgo-navbar .nav-home-logo[b-oe0293o0i8] { display: inline-block !important; }
    nav.qgo-navbar .nav-home-text[b-oe0293o0i8] { display: none !important; }

    /* keep toggler hidden on desktop */
    .qgo-toggler[b-oe0293o0i8] { display: none !important; }
}

/* Toggler visual tweaks for accessibility */
.qgo-toggler:focus[b-oe0293o0i8] { outline: none; box-shadow: 0 0 0 0.18rem rgba(56,189,248,0.12); border-radius:8px; }