.shell { display:flex; height:100vh; overflow:hidden; } .overlay { display:none; position:fixed; inset:0; background:rgba(28,24,20,.45); z-index:40; } .sidebar { width:var(--sidebar-w); background:var(--bg-surface); border-right:1.5px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; z-index:50; transition:transform .25s ease; } .sidebarHeader { display:flex;align-items:center;justify-content:space-between;padding:18px 18px 14px;border-bottom:1px solid var(--border); } .logo { display:flex;align-items:center;gap:9px; } .logoMark { width:30px;height:30px;background:var(--accent);border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;font-family:'Lora',serif;flex-shrink:0; } .logoText { font-family:'Lora',serif;font-weight:700;font-size:17px;color:var(--text-primary);letter-spacing:-.2px; } .closeMobile { display:none; background:none; border:none; color:var(--text-muted); padding:4px; } .orgBadge { display:flex;align-items:center;gap:7px;margin:10px 14px; padding:7px 11px;background:var(--bg-base);border-radius:var(--radius); font-size:11.5px;font-weight:600;color:var(--text-muted);border:1px solid var(--border); overflow:hidden;white-space:nowrap; } .orgBadge span { overflow:hidden;text-overflow:ellipsis; } .nav { flex:1;padding:6px 10px;display:flex;flex-direction:column;gap:1px; } .navItem { display:flex;align-items:center;gap:11px;padding:9px 12px; border-radius:var(--radius);color:var(--text-secondary); font-size:13.5px;font-weight:500;transition:all .13s ease;text-decoration:none; border:1px solid transparent; } .navItem:hover { background:var(--bg-hover);color:var(--text-primary);text-decoration:none; } .navItemActive { background:var(--accent-light);color:var(--accent);border-color:var(--accent-border);font-weight:600; } .navItemActive:hover { background:var(--accent-light);color:var(--accent);text-decoration:none; } .navSection { font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--text-faint);text-transform:uppercase;padding:10px 12px 4px; } .userSection { padding:14px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px; } .userInfo { flex:1;display:flex;align-items:center;gap:10px;min-width:0; } .avatar { width:32px;height:32px;border-radius:50%;background:var(--accent); color:#fff;font-weight:700;font-size:12.5px;display:flex;align-items:center; justify-content:center;flex-shrink:0;font-family:'Lora',serif; } .userDetails { display:flex;flex-direction:column;min-width:0; } .userName { font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .userRole { font-size:11px;color:var(--text-muted);text-transform:capitalize; } .logoutBtn { background:none;border:none;color:var(--text-faint);padding:5px;border-radius:var(--radius);display:flex;align-items:center;transition:all .15s; } .logoutBtn:hover { background:var(--rose-light);color:var(--rose); } .main { flex:1;display:flex;flex-direction:column;overflow:hidden; } .header { height:var(--header-h);background:var(--bg-surface);border-bottom:1.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex-shrink:0; } .menuBtn { display:none;background:none;border:none;color:var(--text-muted);padding:4px;cursor:pointer; } .headerRight { display:flex;align-items:center;gap:10px;margin-left:auto; } .headerOrg { font-size:12.5px;color:var(--text-muted);font-weight:500; } .headerAvatar { width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:11.5px;display:flex;align-items:center;justify-content:center;font-family:'Lora',serif; } .content { flex:1;overflow-y:auto;padding:26px 30px; } @media(max-width:768px){ .sidebar{position:fixed;top:0;left:0;height:100%;transform:translateX(-100%);} .sidebarOpen{transform:translateX(0);} .overlay{display:block;} .closeMobile{display:flex;} .menuBtn{display:flex;} .headerOrg{display:none;} .content{padding:18px 16px;} }