/* ---------- App shell ---------- */
.app-shell { min-height: 100vh; }
.app-sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--em-sidebar-w); z-index: 1040;
    background: linear-gradient(180deg, #232c5e 0%, #2f3c86 100%); color: #cdd3ef;
    display: flex; flex-direction: column; transition: width .2s ease, transform .25s ease;
}
.app-brand { height: var(--em-topbar-h); display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem; color: #fff; font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; }
.app-brand-logo { width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .14); display: grid; place-items: center; font-size: 1.15rem; flex: none; }
.app-nav { flex: 1; overflow-y: auto; padding: .5rem .75rem 1rem; scrollbar-width: thin; }
.app-nav-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #8f99c9; padding: 1rem .75rem .35rem; white-space: nowrap; }
.app-nav a {
    display: flex; align-items: center; gap: .8rem; color: #cdd3ef; padding: .62rem .75rem; border-radius: 10px;
    font-weight: 500; white-space: nowrap; min-height: var(--em-touch); position: relative;
}
.app-nav a .bi { font-size: 1.1rem; width: 22px; text-align: center; flex: none; }
.app-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.app-nav a.active { background: rgba(255, 255, 255, .16); color: #fff; }
.app-nav a.active::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: #fff; }
.app-sidebar-footer { padding: .75rem; border-top: 1px solid rgba(255, 255, 255, .08); }

.app-main { margin-left: var(--em-sidebar-w); transition: margin-left .2s ease; min-width: 0; }
.app-topbar {
    position: sticky; top: 0; z-index: 1030; height: var(--em-topbar-h); background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--em-border);
    display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem;
}
.app-topbar .global-search { max-width: 420px; flex: 1; }
.app-topbar .global-search .form-control { background: var(--em-surface-2); border-radius: 999px; min-height: 40px; }
.app-content { padding: 1.5rem; max-width: 1600px; margin: 0 auto; }

.avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--em-primary-100); color: var(--em-primary); display: inline-grid; place-items: center; font-weight: 700; flex: none; }
.avatar-lg { width: 96px; height: 96px; font-size: 2rem; }
.avatar-sm { width: 28px; height: 28px; font-size: .75rem; }

/* Collapsed (mini) sidebar on desktop */
body.sidebar-mini .app-sidebar { width: var(--em-sidebar-mini-w); }
body.sidebar-mini .app-main { margin-left: var(--em-sidebar-mini-w); }
body.sidebar-mini .app-nav a span, body.sidebar-mini .app-nav-label, body.sidebar-mini .app-brand-text, body.sidebar-mini .app-sidebar-footer span { display: none; }
body.sidebar-mini .app-nav a { justify-content: center; }

/* Tablet & phone: sidebar becomes an off-canvas drawer */
.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); width: min(86vw, 300px) !important; box-shadow: var(--em-shadow-lg); }
    .app-main, body.sidebar-mini .app-main { margin-left: 0; }
    body.sidebar-open .app-sidebar { transform: none; }
    body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 20, 40, .45); z-index: 1035; }
    body.sidebar-mini .app-nav a span, body.sidebar-mini .app-nav-label, body.sidebar-mini .app-brand-text { display: initial; }
    body.sidebar-mini .app-nav a { justify-content: flex-start; }
    .app-content { padding: 1rem; }
    .app-topbar { padding: 0 .75rem; }
}