/* /Layout/MainLayout.razor.rz.scp.css */
/* --- Page shell --------------------------------------------------------- */
.page[b-9ugf702ram] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-9ugf702ram] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--it-bg, #f5f7fb);
}

/* --- Sidebar ------------------------------------------------------------ */
.sidebar[b-9ugf702ram] {
    background: linear-gradient(180deg, #1e1b4b 0%, #312e81 55%, #4c1d95 100%);
    color: #e5e7eb;
    box-shadow: 0 0 30px rgba(15, 23, 42, .15);
}

/* --- Top bar ------------------------------------------------------------ */
.top-row[b-9ugf702ram] {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--it-border, #e5e7eb);
    height: 3.75rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    z-index: 50;
}

.nav-toggle[b-9ugf702ram] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    border: 1px solid var(--it-border, #e5e7eb);
    background: #fff;
    color: var(--it-text, #111827);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.nav-toggle:hover[b-9ugf702ram] { background: var(--it-surface-2, #f9fafc); color: var(--it-primary, #4f46e5); border-color: var(--it-border-strong, #d1d5db); }
.nav-toggle:focus-visible[b-9ugf702ram] { outline: none; box-shadow: 0 0 0 3px rgba(79,70,229,.25); }

.brand[b-9ugf702ram] { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.brand-logo[b-9ugf702ram] { height: 28px; width: auto; border-radius: 6px; }
.brand-name[b-9ugf702ram] {
    font-weight: 600;
    color: var(--it-text, #111827);
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-actions[b-9ugf702ram] { margin-left: auto; display: flex; align-items: center; gap: .65rem; }

.user-chip[b-9ugf702ram] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .25rem .6rem .25rem .25rem;
    border: 1px solid var(--it-border, #e5e7eb);
    border-radius: 999px;
    background: #fff;
    max-width: 14rem;
}

.user-avatar[b-9ugf702ram] {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 600;
    flex: 0 0 auto;
}

.user-meta[b-9ugf702ram] { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.user-name[b-9ugf702ram] { font-size: .85rem; font-weight: 600; color: var(--it-text, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9rem; }
.user-role[b-9ugf702ram] { font-size: .7rem; color: var(--it-text-muted, #6b7280); text-transform: uppercase; letter-spacing: .04em; }

/* --- Language switcher -------------------------------------------------- */
.lang-switch[b-9ugf702ram] {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--it-border, #e5e7eb);
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
}
.lang-btn[b-9ugf702ram] {
    border: 0;
    background: transparent;
    color: var(--it-text-muted, #6b7280);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding: .2rem .55rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}
.lang-btn:hover[b-9ugf702ram] { color: var(--it-text, #111827); }
.lang-btn.active[b-9ugf702ram] {
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    color: #fff;
}
@media (max-width: 480px) {
    .user-meta[b-9ugf702ram] { display: none; }
}

/* --- Mobile overlay ----------------------------------------------------- */
.nav-overlay[b-9ugf702ram] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 60;
    opacity: 0;
    transition: opacity 200ms ease;
}

/* ============================================================
   Mobile (default): sidebar is hidden off-canvas.
   ============================================================ */
@media (max-width: 768.98px) {
    .sidebar[b-9ugf702ram] {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 260px;
        z-index: 70;
        transform: translateX(-100%);
        transition: transform 220ms cubic-bezier(.4, 0, .2, 1);
    }

    .page.nav-open .sidebar[b-9ugf702ram] { transform: translateX(0); box-shadow: 0 10px 35px rgba(15,23,42,.35); }
    .page.nav-open .nav-overlay[b-9ugf702ram] { display: block; opacity: 1; }

    .user-chip[b-9ugf702ram] { padding-right: .35rem; }
    .user-meta[b-9ugf702ram] { display: none; }
    .user-chip[b-9ugf702ram] { border: none; background: transparent; padding: 0; }
}

/* ============================================================
   Desktop: persistent sidebar, toggle hidden, top bar full width.
   ============================================================ */
@media (min-width: 769px) {
    .page[b-9ugf702ram] { flex-direction: row; }

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

    .nav-toggle[b-9ugf702ram] { display: none; }
    .nav-overlay[b-9ugf702ram] { display: none !important; }

    .top-row[b-9ugf702ram] { padding: 0 1.5rem; height: 4rem; }
    .content[b-9ugf702ram] { padding-left: 2rem !important; padding-right: 1.5rem !important; }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* NavMenu lives inside the .sidebar (see MainLayout.razor.css). */

:host[b-u1vn1cnnau], .nav-scrollable[b-u1vn1cnnau] {
    display: block;
    color: #e5e7eb;
}

.nav-brand[b-u1vn1cnnau] {
    display: flex;
    align-items: center;
    gap: .65rem;
    height: 3.75rem;
    padding: 0 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
    background: rgba(0, 0, 0, .15);
}

.nav-brand-mark[b-u1vn1cnnau] {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}

.nav-brand-text[b-u1vn1cnnau] {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .01em;
    color: #fff;
}

.nav-scrollable[b-u1vn1cnnau] {
    height: calc(100vh - 3.75rem);
    overflow-y: auto;
    padding: 1rem .65rem 2rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.25) transparent;
}
.nav-scrollable[b-u1vn1cnnau]::-webkit-scrollbar { width: 6px; }
.nav-scrollable[b-u1vn1cnnau]::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 6px; }

.nav-section[b-u1vn1cnnau] { padding: 0 .25rem .9rem; }
.nav-section + .nav-section[b-u1vn1cnnau] { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: .8rem; margin-top: .25rem; }
.nav-section-title[b-u1vn1cnnau] {
    display: block;
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .5);
    padding: 0 .85rem;
    margin-bottom: .4rem;
}

.nav-link[b-u1vn1cnnau] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .85rem;
    margin-bottom: .15rem;
    border-radius: 8px;
    color: rgba(229, 231, 235, .85);
    font-size: .92rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.nav-link:hover[b-u1vn1cnnau] {
    background-color: rgba(255, 255, 255, .08);
    color: #fff;
    text-decoration: none;
}

.nav-link.active[b-u1vn1cnnau] {
    background: linear-gradient(90deg, rgba(99,102,241,.55), rgba(6,182,212,.35));
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.nav-link.active .nav-icon[b-u1vn1cnnau] { color: #fff; }

.nav-link:focus-visible[b-u1vn1cnnau] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255,255,255,.4);
}

.nav-icon[b-u1vn1cnnau] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: rgba(229, 231, 235, .7);
    transition: color 150ms ease;
}
.nav-link:hover .nav-icon[b-u1vn1cnnau] { color: #fff; }