/* /Components/Layout/MainLayout.razor.rz.scp.css */
.shell[b-58navyk1o0] { display: flex; min-height: 100vh; }

/* ---- sidebar ---- */
.sidebar[b-58navyk1o0] { width: var(--sidebar-w); flex-shrink: 0; background: var(--navy-900); color: var(--navy-100); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand[b-58navyk1o0] { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1.1rem 1.25rem; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
.brand-logo[b-58navyk1o0] { display: block; height: 30px; width: auto; background: #fff; border-radius: 7px; padding: 5px 8px; box-sizing: content-box; }
.brand-sub[b-58navyk1o0] { font-size: 0.66rem; padding-left: 2px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-300); margin-top: 2px; }

.nav[b-58navyk1o0] { display: flex; flex-direction: column; padding: 0.75rem 0.75rem; flex: 1; overflow-y: auto; gap: 1px; }
.nav-group[b-58navyk1o0] { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-400); padding: 1rem 0.65rem 0.35rem; }
.nav[b-58navyk1o0]  a.nav-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.65rem; border-radius: 8px; color: var(--navy-100); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: background 0.12s ease, color 0.12s ease; }
.nav[b-58navyk1o0]  a.nav-item .icon { color: var(--navy-300); flex-shrink: 0; }
.nav[b-58navyk1o0]  a.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav[b-58navyk1o0]  a.nav-item.active { background: rgba(232,112,61,0.18); color: #fff; }
.nav[b-58navyk1o0]  a.nav-item.active .icon { color: var(--brand); }

.sidebar-foot[b-58navyk1o0] { padding: 0.9rem 1rem; border-top: 1px solid rgba(255,255,255,0.07); }
.user[b-58navyk1o0] { display: flex; align-items: center; gap: 0.65rem; }
.avatar[b-58navyk1o0] { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #0b4d63); color: #fff; font-size: 0.78rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.user-text[b-58navyk1o0] { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.user-name[b-58navyk1o0] { font-size: 0.82rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role[b-58navyk1o0] { font-size: 0.68rem; color: var(--navy-300); }
.logout[b-58navyk1o0] { margin: 0; }
.icon-btn[b-58navyk1o0] { background: none; border: 1px solid transparent; color: var(--navy-300); border-radius: 7px; padding: 0.35rem; cursor: pointer; display: inline-flex; }
.icon-btn:hover[b-58navyk1o0] { color: #fff; border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); }

/* ---- main ---- */
.main[b-58navyk1o0] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar[b-58navyk1o0] { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.crumbs[b-58navyk1o0] { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; min-width: 0; }
.crumb[b-58navyk1o0] { color: var(--muted); text-decoration: none; white-space: nowrap; }
.crumb:hover[b-58navyk1o0] { color: var(--ink); }
.crumb.current[b-58navyk1o0] { color: var(--ink); font-weight: 600; }
.crumbs[b-58navyk1o0]  .crumb-sep { color: var(--line-strong); flex-shrink: 0; }
.topbar-right[b-58navyk1o0] { display: flex; align-items: center; gap: 0.5rem; }
.chip[b-58navyk1o0] { font-size: 0.75rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.6rem; background: var(--bg); white-space: nowrap; }
.chip-dev[b-58navyk1o0] { color: var(--warning-ink); background: var(--warning-bg); border-color: var(--warning-line); font-weight: 600; }
.content[b-58navyk1o0] { flex: 1; padding: 1.75rem 2rem 3rem; max-width: var(--content-w); width: 100%; }

@media (max-width: 900px) {
    .shell[b-58navyk1o0] { flex-direction: column; }
    .sidebar[b-58navyk1o0] { width: auto; height: auto; position: static; }
    .nav[b-58navyk1o0] { flex-direction: row; flex-wrap: wrap; }
    .nav-group[b-58navyk1o0] { width: 100%; padding-top: 0.5rem; }
    .topbar[b-58navyk1o0] { padding: 0 1rem; }
    .content[b-58navyk1o0] { padding: 1.25rem 1rem 2rem; }
}