/* ═══════════════════════════════════════════════════════════════
   ADMIN SHELL — shared sidebar nav cho mọi trang /admin/*
   Mirror của teacher dashboard V2 (vocab/teacher/teacher.css .t2-*).
   Tokens từ theme.css (--bg --surf --surf2 --accent --border --dim).
   Nav markup được /admin/shell.js inject vào .adm-layout lúc runtime —
   trang chỉ cần <main> + <script src="/admin/shell.js" defer>.
   Xem docs/planning/ADMIN_REDESIGN_PLAYBOOK.md.
   ═══════════════════════════════════════════════════════════════ */

/* shell.js gắn class adm-shell lên body — ép body flex-column để footer nằm sát đáy
   (kể cả trang không tự khai body flex như band-calibration*) */
body.adm-shell{display:flex;flex-direction:column;min-height:100dvh}
.adm-layout{display:flex;align-items:stretch;flex:1 0 auto}
.adm-layout>main{flex:1;min-width:0}

.adm-side{position:sticky;top:var(--adm-hdr,61px);align-self:flex-start;
  height:calc(100dvh - var(--adm-hdr,61px));width:216px;flex-shrink:0;
  display:flex;flex-direction:column;gap:2px;background:var(--surf);
  border-right:1px solid var(--border);padding:14px 10px;overflow-y:auto}

.adm-grp-lbl{font-size:.64rem;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--dim);font-weight:700;padding:12px 12px 4px}
.adm-grp-lbl:first-child{padding-top:2px}

.adm-nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  color:var(--dim);font-size:.86rem;font-weight:600;text-decoration:none;
  white-space:nowrap;transition:background .15s,color .15s}
.adm-nav-item:hover{color:var(--text);background:var(--surf2)}
.adm-nav-item.active{background:rgba(124,92,191,.15);color:var(--accent)}
.adm-nav-ico{font-size:1.02rem;width:22px;text-align:center;flex-shrink:0}
.adm-nav-lbl{overflow:hidden;text-overflow:ellipsis}

/* Badge (vd chấm vàng "payments pending") sống trong shell — id giữ nguyên */
.adm-nav-item .adm-dot{margin-left:auto;color:var(--yellow);font-size:.7rem}

[data-theme="light"] .adm-side{background:#F5F0FF;border-color:#c8c2d8}
[data-theme="light"] .adm-nav-item{color:#475569}
[data-theme="light"] .adm-nav-item:hover{color:#1a1a2e;background:#EDE6FF}
[data-theme="light"] .adm-nav-item.active{color:var(--accent)}

@media(max-width:768px){
  .adm-side{width:58px;padding:10px 5px}
  .adm-side .adm-nav-lbl,.adm-side .adm-grp-lbl,.adm-side .adm-dot{display:none}
  .adm-nav-item{justify-content:center;padding:10px 6px;gap:0}
}