/* ============================================================
   SMU Student Portal — App shell (top bar + sidebar + drawer)
   ============================================================ */
.topbar { display:flex; align-items:center; gap:.5rem; height:var(--tbar-h); padding:0 var(--s4); background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; }
.topbar .brand { display:flex; align-items:center; gap:.5rem; font-weight:700; color:var(--text); }
.topbar .brand:hover { text-decoration:none; }
.topbar .brand img { width:28px; height:28px; }
.brand-sub { font-weight:600; color:var(--text-muted); }
.topbar .spacer { flex:1; }

.iconbtn { display:inline-flex; align-items:center; justify-content:center; gap:.3rem; min-width:34px; height:34px; padding:0 .55rem; border:1px solid transparent; background:transparent; border-radius:var(--r-sm); cursor:pointer; color:var(--text); font-size:.88rem; position:relative; }
.iconbtn:hover { background:var(--surface-2); }
.dot-badge { position:absolute; top:5px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--danger); }
.show-mobile { display:none; }

.dd { position:relative; }
.dd-menu { position:absolute; right:0; top:calc(100% + 6px); background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-lg); min-width:190px; padding:.35rem; display:none; z-index:60; }
.dd.is-open .dd-menu { display:block; }
.dd-head { padding:.5rem .6rem; border-bottom:1px solid var(--border); margin-bottom:.25rem; }
.dd-item { display:block; padding:.5rem .6rem; border-radius:var(--r-sm); font-size:.85rem; color:var(--text); }
.dd-item:hover { background:var(--surface-2); text-decoration:none; }
.avatar-btn { padding:0; }

.app-wrap { display:flex; align-items:flex-start; }
.sidebar { width:var(--side-w); flex:none; background:var(--surface); border-right:1px solid var(--border); position:sticky; top:var(--tbar-h); height:calc(100vh - var(--tbar-h)); overflow:auto; padding:var(--s3); display:flex; flex-direction:column; }
.side-role { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-subtle); padding:.4rem .6rem .6rem; }
.side-nav { display:flex; flex-direction:column; gap:2px; }
.nav-item { display:flex; align-items:center; gap:.55rem; padding:.55rem .7rem; border-radius:var(--r-sm); color:var(--text-muted); font-size:.85rem; font-weight:500; }
.nav-item:hover { background:var(--surface-2); text-decoration:none; color:var(--text); }
.nav-item.is-active { background:var(--surface-2); color:var(--primary); font-weight:600; }
.nav-item .nav-ico { width:18px; height:18px; flex:none; opacity:.85; }
.nav-item.is-active .nav-ico { opacity:1; }
.iconbtn svg { width:19px; height:19px; }
.side-foot { margin-top:auto; padding-top:var(--s3); border-top:1px solid var(--border); }

.app-main { flex:1; min-width:0; }
.drawer-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40; }

@media (max-width:900px){
  .show-mobile { display:inline-flex; }
  .brand-sub { display:none; }
  .sidebar { position:fixed; top:var(--tbar-h); left:0; transform:translateX(-100%); transition:transform .2s ease; z-index:45; box-shadow:var(--shadow-lg); }
  body.drawer-open .sidebar { transform:translateX(0); }
  body.drawer-open .drawer-backdrop { display:block; }
}