/* ZEHNOX EduCloud — app shell layout */

/* ---------- Login ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth__brand { background: radial-gradient(1200px 600px at 20% -10%, #1b1730 0%, var(--ink) 55%); color: #fff; padding: var(--s9) var(--s8); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth__brand::after { content: ""; position: absolute; width: 480px; height: 480px; right: -120px; bottom: -160px; background: radial-gradient(circle, rgba(206,253,33,.16), transparent 62%); }
.auth__logo { display: flex; align-items: center; gap: var(--s3); font-weight: 800; font-size: var(--fs-lg); letter-spacing: .02em; }
.auth__logo .mark { width: 40px; height: 40px; border-radius: 11px; background: var(--lime); color: var(--ink); display: grid; place-content: center; font-weight: 800; }
.auth__pitch h1 { font-size: 38px; line-height: 1.08; letter-spacing: -0.02em; max-width: 14ch; }
.auth__pitch p { color: rgba(255,255,255,.72); margin-top: var(--s4); max-width: 42ch; font-size: var(--fs-lg); }
.auth__stats { display: flex; gap: var(--s7); margin-top: var(--s7); }
.auth__stats .n { font-size: var(--fs-2xl); font-weight: 800; color: var(--lime); }
.auth__stats .l { font-size: var(--fs-sm); color: rgba(255,255,255,.6); }
.auth__form { display: grid; place-content: center; padding: var(--s7); }
.auth__card { width: min(400px, 92vw); }
.auth__card h2 { font-size: var(--fs-2xl); }
.demo-note { background: var(--warning-bg); color: var(--warning); border: 1px solid #f0dcb8; border-radius: var(--r-md); padding: var(--s2) var(--s3); font-size: var(--fs-sm); font-weight: 600; display: flex; gap: var(--s2); align-items: center; }
.rolegrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.rolebtn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--s3) var(--s4); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); transition: var(--transition); text-align: left; }
.rolebtn:hover { border-color: var(--cobalt); box-shadow: var(--ring); }
.rolebtn .r { font-weight: 700; font-size: var(--fs-md); }
.rolebtn .d { font-size: var(--fs-xs); color: var(--text-3); }
.rolebtn .ic { width: 20px; height: 20px; margin-bottom: 4px; color: var(--cobalt); }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth__brand { display: none; } }

/* ---------- App shell ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.shell.collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* Sidebar */
.sidebar { background: var(--ink); color: #cfd0d8; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.sidebar__brand { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s4); height: var(--topbar-h); flex: none; }
.sidebar__brand .mark { width: 34px; height: 34px; border-radius: 9px; background: var(--lime); color: var(--ink); display: grid; place-content: center; font-weight: 800; flex: none; }
.sidebar__brand .txt { font-weight: 800; color: #fff; letter-spacing: .01em; white-space: nowrap; }
.sidebar__brand .txt b { color: var(--lime); }
.collapsed .sidebar__brand .txt { display: none; }
.sidebar__nav { flex: 1; overflow-y: auto; padding: var(--s3) var(--s2); }
.sidebar__nav::-webkit-scrollbar-thumb { border-color: var(--ink); }
.nav-group { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #6b6c7a; font-weight: 700; padding: var(--s3) var(--s3) var(--s1); }
.collapsed .nav-group { text-align: center; font-size: 8px; }
.nav-item { display: flex; align-items: center; gap: var(--s3); padding: 9px var(--s3); border-radius: var(--r-md); color: #b9bac6; font-weight: 500; font-size: var(--fs-md); transition: var(--transition); position: relative; white-space: nowrap; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.nav-item.active { background: rgba(206,253,33,.12); color: #fff; }
.nav-item.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--lime); }
.nav-item .ic { width: 19px; height: 19px; flex: none; }
.nav-item .badge { margin-left: auto; height: 18px; padding: 0 6px; }
.collapsed .nav-item { justify-content: center; }
.collapsed .nav-item .label, .collapsed .nav-item .badge { display: none; }
.sidebar__foot { padding: var(--s3); border-top: 1px solid rgba(255,255,255,.08); flex: none; }

/* Main */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: var(--s4); padding: 0 var(--s5); position: sticky; top: 0; z-index: 40; }
.topbar__search { flex: 1; max-width: 460px; min-width: 220px; }
.topbar__scope, .topbar__scope .chip, .topbar__scope .select { white-space: nowrap; flex-shrink: 0; }
.topbar__search .input { height: 36px; background: var(--surface-2); }
.topbar__spacer { flex: 1; }
.topbar__actions { display: flex; align-items: center; gap: var(--s2); }
.iconbtn { width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-content: center; color: var(--text-2); transition: var(--transition); position: relative; }
.iconbtn:hover { background: var(--surface-3); color: var(--text); }
.iconbtn .ic { width: 20px; height: 20px; }
.iconbtn .notif-dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); border: 2px solid var(--surface); }
.rolebadge { height: 26px; padding: 0 10px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.rolebadge--admin { background: #efe7fb; color: var(--role-admin); }
.rolebadge--faculty { background: #e2f2f7; color: var(--role-faculty); }
.rolebadge--student { background: #e4f5ec; color: var(--role-student); }
.rolebadge--finance { background: var(--warning-bg); color: var(--role-finance); }
.rolebadge--platform { background: #e6e8f5; color: #2f3a8f; }
.rolebadge--all-campus-admin { background: #efe7fb; color: var(--role-admin); }
.rolebadge--campus-admin { background: #e8ecfb; color: #3a4fc4; }
.rolebadge--teacher { background: #e2f2f7; color: var(--role-faculty); }
.rolebadge--accountant { background: var(--warning-bg); color: var(--role-finance); }
.topbar__scope .select { height: 36px; background: var(--surface-2); width: auto; max-width: 200px; }

.content { flex: 1; padding: var(--s6); max-width: var(--content-max); width: 100%; margin: 0 auto; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
.page-head h1 { font-size: var(--fs-2xl); }
.page-head .sub { color: var(--text-3); font-size: var(--fs-md); margin-top: 2px; }
.page-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.view { animation: fadeup var(--transition); }

/* mobile */
.hamburger { display: none; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 70; left: 0; top: 0; width: var(--sidebar-w); transform: translateX(-100%); transition: transform var(--transition); }
  .shell.nav-open .sidebar { transform: none; box-shadow: var(--sh-3); }
  .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 69; }
  .hamburger { display: grid; }
  .content { padding: var(--s4); }
}

/* ---------- Wave 11 shell: nested sidebar, support footer, session scope, app footer ---------- */
.hamburger { display: grid; }
.nav-node { position: relative; }
.nav-row { position: relative; }
.nav-node.has-sub > .nav-row > .nav-item { padding-right: 36px; }
.nav-caret { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-content: center; color: #8d8e9c; background: transparent; border: 0; cursor: pointer; transition: var(--transition); }
.nav-caret:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-caret:focus-visible, .nav-child:focus-visible, .nav-item:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.nav-caret .ic, .nav-caret__ic .ic { width: 15px; height: 15px; }
.nav-caret__ic { display: inline-grid; place-content: center; transition: transform var(--transition); }
.nav-node.open > .nav-row .nav-caret__ic { transform: rotate(180deg); }
.nav-sub { display: none; margin: 2px 0 6px 21px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.1); }
.nav-node.open > .nav-sub { display: block; }
.nav-child { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 10px; border-radius: var(--r-sm); color: #9d9eab; font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; text-align: left; background: transparent; border: 0; cursor: pointer; transition: var(--transition); }
.nav-child:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.nav-child.active { color: #fff; background: rgba(206,253,33,.10); box-shadow: inset 2px 0 0 var(--lime); }
.nav-sub__head { position: relative; }
.nav-child--head { font-weight: 600; color: #b9bac6; padding-right: 32px; }
.nav-child--toggle .nav-caret__ic { margin-left: auto; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.nav-caret--sm { width: 24px; height: 24px; }
.nav-group3 .nav-caret__ic { transition: transform var(--transition); }
.nav-group3.open .nav-caret__ic { transform: rotate(90deg); }
.nav-child--toggle .nav-caret__ic { transform: translateY(-50%); }
.nav-group3.open .nav-child--toggle .nav-caret__ic { transform: translateY(-50%) rotate(90deg); }
.nav-sub--l3 { display: none; margin: 2px 0 4px 8px; }
.nav-group3.open > .nav-sub--l3 { display: block; }
.collapsed .nav-sub, .collapsed .nav-caret { display: none !important; }
.collapsed .nav-node.has-sub > .nav-row > .nav-item { padding-right: var(--s3); }

.support { margin-bottom: var(--s2); font-size: var(--fs-xs); line-height: 1.4; }
.support__code { background: rgba(206,253,33,.12); color: #e9f7b3; border-radius: var(--r-sm); padding: 6px 8px; margin-bottom: 6px; }
.support__code b { color: var(--lime); letter-spacing: .02em; }
.support__link { display: flex; align-items: center; gap: 6px; color: #b9bac6; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: 10.5px; padding: 4px 2px; }
.support__link:hover { color: #fff; text-decoration: none; }
.support__link .ic { width: 14px; height: 14px; flex: none; }
.collapsed .support, .collapsed .sidebar__foot .label { display: none; }
.collapsed .sidebar__foot .btn { justify-content: center !important; }

.avatar--crest { background: var(--cobalt); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .03em; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--cobalt); }
.chip--viewing { background: var(--warning-bg); color: var(--warning); }
.topbar__scope select[data-session] { min-width: 150px; }
.app-crumbs { flex-wrap: wrap; }
.app-foot { padding: var(--s3) var(--s6) var(--s5); color: var(--text-3); font-size: var(--fs-xs); text-align: center; border-top: 1px solid var(--border); max-width: var(--content-max); width: 100%; margin: 0 auto; }
@media (max-width: 1200px) { .chip--viewing { display: none; } }
@media (max-width: 900px) { .topbar__scope select[data-session] { min-width: 0; } .app-foot { padding: var(--s3) var(--s4); } }
@media print { .app-foot, .app-crumbs { display: none !important; } }
@media (max-width: 900px) {
  /* desktop "collapsed" preference never applies to the mobile drawer */
  .shell.collapsed { grid-template-columns: 1fr; }
  .shell.collapsed .nav-item .label, .shell.collapsed .sidebar__brand .txt, .shell.collapsed .support, .shell.collapsed .sidebar__foot .label { display: revert; }
  .shell.collapsed .nav-item { justify-content: flex-start; }
  .shell.collapsed .nav-caret { display: grid !important; }
  .shell.collapsed .nav-node.open > .nav-sub, .shell.collapsed .nav-group3.open > .nav-sub--l3 { display: block !important; }
}