/* LAYOUT - Sidebar, topbar, sayfa yapısı */
#app{display:none;min-height:100vh}
#app.show{display:flex}
#sidebar .logo{padding:16px;border-bottom:1px solid var(--border)}
#sidebar .logo .logo-title{font-size:15px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:8px}
#sidebar .logo small{font-size:11px;color:var(--text-tertiary);display:block;margin-top:3px}
.nav-sep{font-size:10px;color:var(--text-tertiary);padding:12px 16px 4px;text-transform:uppercase;letter-spacing:.06em}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 16px;cursor:pointer;font-size:13px;color:var(--text-secondary);border-left:2px solid transparent;transition:all .15s}
.nav-item:hover{background:var(--bg-secondary);color:var(--text-primary)}
.nav-item.active{color:var(--accent);background:var(--accent-light);border-left-color:var(--accent);font-weight:500}
.nav-item i{font-size:17px}
#sidebar-close{display:none;position:absolute;top:12px;right:12px;background:none;border:none;cursor:pointer;font-size:20px;color:var(--text-secondary)}
#sidebar-user{padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--border);margin-top:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-item,.nav-sep{flex-shrink:0}
#sidebar{display:flex;flex-direction:column;height:100vh;height:100dvh;position:fixed;top:0;left:0;width:220px;background:var(--bg-primary);border-right:1px solid var(--border);z-index:50}
#sidebar nav{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:8px}
#sidebar nav::-webkit-scrollbar{width:3px}
#sidebar nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
#sidebar-user .uname{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sidebar-user .urole{font-size:11px;color:var(--text-tertiary)}
#logout-btn{background:none;border:none;cursor:pointer;color:var(--text-tertiary);font-size:16px;padding:2px;flex-shrink:0}
#logout-btn:hover{color:var(--red)}

#main{flex:1;margin-left:var(--nav-w);display:flex;flex-direction:column;min-height:100vh}
#topbar{background:var(--bg-primary);border-bottom:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:40}
#menu-btn{display:none;background:none;border:none;cursor:pointer;font-size:24px;color:var(--text-primary);padding:4px 8px;line-height:1}
#topbar h1{font-size:15px;font-weight:600;flex:1}
#topbar .actions{display:flex;gap:8px}
#content{padding:20px;flex:1}
.page{display:none}.page.active{display:block}
.delta.up{color:var(--green)}.delta.down{color:var(--red)}
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:49}