:root {
    --sidebar-width: 240px;
    --sidebar-collapsed: 64px;
    --sidebar-bg: #16324f;
    --sidebar-fg: #cfe0f1;
    --sidebar-active: #1f6feb;
}
body { background: #f4f6f9; }
#app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    flex: 0 0 var(--sidebar-width);
    transition: width .15s ease, flex-basis .15s ease;
    overflow-y: auto;
}
.sidebar-brand { padding: 1rem; font-weight: 600; font-size: 1.05rem; display: flex; gap: .6rem; align-items: center; color: #fff; }
.sidebar-brand i { font-size: 1.4rem; }
.sidebar-heading { text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; padding: .9rem 1rem .25rem; opacity: .6; list-style: none; }
.sidebar-nav { list-style: none; padding: 0; margin: 0; }
.sidebar .nav-link { color: var(--sidebar-fg); padding: .55rem 1rem; display: flex; gap: .75rem; align-items: center; border-left: 3px solid transparent; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar .nav-link.active { background: rgba(255,255,255,.12); color: #fff; border-left-color: var(--sidebar-active); }
.sidebar .nav-link i { font-size: 1.1rem; width: 1.25rem; text-align: center; }

body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed); flex-basis: var(--sidebar-collapsed); }
body.sidebar-collapsed .sidebar-label { display: none; }
body.sidebar-collapsed .sidebar .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }

#main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar { background: #fff; border-bottom: 1px solid #dfe3e8; padding: .5rem 1rem; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 100; }
.topbar-title { font-weight: 600; }
.content { padding: 1.25rem; flex: 1 1 auto; }
.footer { padding: .75rem 1.25rem; border-top: 1px solid #dfe3e8; background: #fff; }

.plain-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(160deg, #eaf1f8, #f7f9fb); }
.plain-wrap { width: 100%; max-width: 420px; padding: 1rem; }

.loading-overlay { position: fixed; inset: 0; background: rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; z-index: 2000; }
.loading-overlay.d-none { display: none !important; }

@media (max-width: 767.98px) {
    .sidebar { position: fixed; z-index: 1050; height: 100vh; left: 0; transform: translateX(0); }
    body.sidebar-collapsed .sidebar { width: 0; flex-basis: 0; overflow: hidden; }
    #main { margin-left: 0; }
}

@media print {
    .sidebar, .topbar, .footer, .no-print { display: none !important; }
    .content { padding: 0; }
    body { background: #fff; }
}