/*
 * KAIROS ACADEMY TECH — Octahedron shell
 *
 * Self-contained sidebar + topbar styles for every page under
 * /octahedron/*. Visually aligned with the Tetrahedron shell
 * (tetra-shell-v2.css) so directors and teachers see the same
 * proportions, gradient, brand block, collapse behavior, and active
 * nav treatment across portals.
 *
 * Markup contract used by octa-shell.js:
 *   <aside data-octa-sidebar></aside>            ← sidebar mount
 *   <header data-octa-topbar data-title="…"></header>  ← topbar mount
 *
 * Pages should NOT duplicate sidebar/topbar markup or sidebar-collapse
 * JS — the shell owns all of that.
 */

:root{
  --k-bg:#f5f6fb;
  --k-panel:#ffffff;
  --k-panel-alt:#fcfcff;
  --k-line:#e7e9f2;
  --k-text:#1f2430;
  --k-muted:#69707d;
  --k-primary:#42108d;
  --k-primary-2:#5a41cb;
  --k-accent:#ece5ff;
  --k-good:#dff5e8;
  --k-warn:#fff4d6;
  --k-danger:#ffe2e2;
  --k-shadow:0 18px 40px rgba(31,36,48,.10);
  --k-radius-xl:28px;
  --k-radius-lg:22px;
  --k-radius-md:18px;
  --k-sidebar-w:224px;
  --k-sidebar-collapsed:78px;
  --k-topbar-h:76px;
}

/* Applied synchronously by octa-shell-prepaint.js before the body is parsed.
   This reserves the persisted sidebar width during navigation and prevents the
   expanded shell from flashing for one frame before the module hydrates. */
@media (min-width:901px){
  html.octa-sidebar-collapsed .app-shell{grid-template-columns:78px 1fr!important}
}

*,*::before,*::after{box-sizing:border-box;}

html,body{
  margin:0;
  min-height:100%;
  font-family:Arial,sans-serif;
  background:var(--k-bg);
  color:var(--k-text);
}
body.k-shell-lock{overflow:hidden;}

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

/* ── Sidebar ──────────────────────────────────────────────────── */
[data-octa-sidebar],
.sidebar{
  position:sticky;
  top:0;
  align-self:start;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.08), transparent 22%),
    radial-gradient(circle at 82% 82%, rgba(255,255,255,.07), transparent 24%),
    linear-gradient(180deg, #24115f 0%, #3b1f8f 48%, #5b43c4 100%);
  color:#fff;
  padding:18px 14px;
  border-radius:0 24px 24px 0;
  box-shadow:0 24px 80px rgba(55,30,130,.20), inset -1px 0 0 rgba(255,255,255,.04);
  display:flex;
  flex-direction:column;
}

[data-octa-sidebar] .brand-wrap,
.sidebar .brand-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  text-decoration:none;
  color:#fff;
}
[data-octa-sidebar] .brand-logo,
.sidebar .brand-logo{
  width:40px;
  height:40px;
  border-radius:12px;
  object-fit:cover;
  display:block;
  background:rgba(255,255,255,.10);
  padding:2px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
[data-octa-sidebar] .brand-copy,
.sidebar .brand-copy{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
[data-octa-sidebar] .brand-text,
.sidebar .brand-text{
  font-size:18px;
  font-weight:800;
  letter-spacing:.08em;
}
[data-octa-sidebar] .brand-subtitle,
.sidebar .brand-subtitle{
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  opacity:.82;
  text-transform:uppercase;
  margin-top:4px;
}

[data-octa-sidebar] .portal-chip,
.sidebar .portal-chip{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  font-size:12px;
  font-weight:800;
  margin-bottom:14px;
}

[data-octa-sidebar] .nav,
.sidebar .nav{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:2px;
  /* Thin, self-coloured scrollbar. The platform default is a wide light bar
     that appears on hover and visually cuts the nav in half. */
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
  scrollbar-gutter:stable;
}
[data-octa-sidebar] .nav::-webkit-scrollbar,
.sidebar .nav::-webkit-scrollbar{width:6px;}
[data-octa-sidebar] .nav::-webkit-scrollbar-track,
.sidebar .nav::-webkit-scrollbar-track{background:transparent;}
[data-octa-sidebar] .nav::-webkit-scrollbar-thumb,
.sidebar .nav::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.16);
  border-radius:999px;
}
[data-octa-sidebar] .nav:hover::-webkit-scrollbar-thumb,
.sidebar .nav:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);}
[data-octa-sidebar] .nav a,
.sidebar .nav a{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  margin-bottom:6px;
  border-radius:14px;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  opacity:.96;
  transition:background .16s ease, transform .16s ease, opacity .16s ease;
}
[data-octa-sidebar] .nav a:hover,
.sidebar .nav a:hover{background:rgba(255,255,255,.10);}
[data-octa-sidebar] .nav a.active,
.sidebar .nav a.active{
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  font-weight:800;
}
[data-octa-sidebar] .nav-icon,
.sidebar .nav-icon{
  width:18px;
  display:inline-flex;
  justify-content:center;
  flex-shrink:0;
  font-size:15px;
}
[data-octa-sidebar] .nav-label,
.sidebar .nav-label{white-space:nowrap;}

[data-octa-sidebar] .sidebar-footer,
.sidebar .sidebar-footer{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
}
[data-octa-sidebar] .sidebar-ai-link,
.sidebar .sidebar-ai-link{
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(79,209,197,.18);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(79,209,197,.12),rgba(79,209,197,.045));
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:750;
}
[data-octa-sidebar] .sidebar-ai-link:hover,
.sidebar .sidebar-ai-link:hover{background:linear-gradient(135deg,rgba(79,209,197,.2),rgba(79,209,197,.08));border-color:rgba(79,209,197,.34)}
[data-octa-sidebar] .sidebar-ai-link.active,
.sidebar .sidebar-ai-link.active{background:linear-gradient(135deg,rgba(79,209,197,.24),rgba(79,209,197,.1));border-color:rgba(79,209,197,.42);box-shadow:inset 2px 0 0 #4fd1c5}
[data-octa-sidebar] .sidebar-footer-controls,
.sidebar .sidebar-footer-controls{display:flex;align-items:center;justify-content:space-between;gap:10px}
[data-octa-sidebar] .sidebar-toggle,
.sidebar .sidebar-toggle{
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
}
[data-octa-sidebar] .k-sidebar-support{position:relative}
[data-octa-sidebar] .k-sidebar-support>summary{display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:5px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:rgba(255,255,255,.06);cursor:pointer;list-style:none;transition:background .15s ease,border-color .15s ease}
[data-octa-sidebar] .k-sidebar-support>summary::-webkit-details-marker{display:none}
[data-octa-sidebar] .k-sidebar-support>summary:hover,
[data-octa-sidebar] .k-sidebar-support[open]>summary{background:rgba(79,209,197,.12);border-color:rgba(79,209,197,.34)}
[data-octa-sidebar] .k-sidebar-support>summary img{display:block;width:25px;height:25px;object-fit:contain}
[data-octa-sidebar] .k-sidebar-support>summary .nav-label{display:none}
[data-octa-sidebar] .k-support-popover{position:absolute;z-index:1300;left:0;bottom:48px;display:flex;width:258px;flex-direction:column;gap:4px;padding:10px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:linear-gradient(155deg,rgba(22,48,54,.99),rgba(13,30,36,.99));box-shadow:0 18px 46px rgba(3,15,18,.48)}
[data-octa-sidebar] .k-support-title{padding:7px 10px 10px;border-bottom:1px solid rgba(255,255,255,.11);color:#fff;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
[data-octa-sidebar] .k-support-popover a{display:flex;flex-direction:column;gap:3px;padding:9px 10px;border-radius:10px;color:#fff;text-decoration:none}
[data-octa-sidebar] .k-support-popover a:hover{background:rgba(255,255,255,.08)}
[data-octa-sidebar] .k-support-popover strong{font-size:13px}
[data-octa-sidebar] .k-support-popover span{color:rgba(255,255,255,.61);font-size:11.5px}
body.sidebar-collapsed [data-octa-sidebar] .k-support-popover{position:fixed;left:86px;bottom:14px}

body.sidebar-collapsed [data-octa-sidebar] .brand-copy,
body.sidebar-collapsed [data-octa-sidebar] .brand-text,
body.sidebar-collapsed [data-octa-sidebar] .brand-subtitle,
body.sidebar-collapsed [data-octa-sidebar] .nav-label,
body.sidebar-collapsed [data-octa-sidebar] .sidebar-ai-link .nav-label,
body.sidebar-collapsed [data-octa-sidebar] .portal-chip,
body.sidebar-collapsed .sidebar .brand-copy,
body.sidebar-collapsed .sidebar .brand-text,
body.sidebar-collapsed .sidebar .brand-subtitle,
body.sidebar-collapsed .sidebar .nav-label,
body.sidebar-collapsed .sidebar .sidebar-ai-link .nav-label,
body.sidebar-collapsed .sidebar .portal-chip{
  display:none !important;
}
body.sidebar-collapsed [data-octa-sidebar] .brand-wrap,
body.sidebar-collapsed .sidebar .brand-wrap{justify-content:center;}
body.sidebar-collapsed [data-octa-sidebar] .sidebar-footer,
body.sidebar-collapsed .sidebar .sidebar-footer{justify-content:center;align-items:center;}
body.sidebar-collapsed [data-octa-sidebar] .sidebar-ai-link,
body.sidebar-collapsed .sidebar .sidebar-ai-link{width:44px;justify-content:center;padding:10px;box-shadow:none}
body.sidebar-collapsed [data-octa-sidebar] .sidebar-footer-controls,
body.sidebar-collapsed .sidebar .sidebar-footer-controls{flex-direction:column}
body.sidebar-collapsed [data-octa-sidebar] .nav a,
body.sidebar-collapsed .sidebar .nav a{justify-content:center;padding-left:10px;padding-right:10px;}

/* ── Main column ──────────────────────────────────────────────── */
.right-column{
  min-width:0;
  display:grid;
  grid-template-rows:var(--k-topbar-h) 1fr;
  min-height:100vh;
  height:100vh;
}

/* ── Topbar ───────────────────────────────────────────────────── */
[data-octa-topbar],
.topbar{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--k-line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:12px 18px;
  position:sticky;
  top:0;
  z-index:60;
}
[data-octa-topbar] .topbar-left,
[data-octa-topbar] .topbar-right,
.topbar .topbar-left,
.topbar .topbar-right{
  display:flex;
  align-items:center;
  gap:12px;
}
[data-octa-topbar] .topbar-title{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
[data-octa-topbar] .topbar-title-main{
  font-weight:800;
  font-size:15px;
  color:var(--k-text);
  line-height:1.1;
}
[data-octa-topbar] .topbar-title-sub{
  font-size:11px;
  color:var(--k-muted);
  line-height:1.1;
}
[data-octa-topbar] .school-badge,
[data-octa-topbar] .user-avatar{
  width:40px;
  height:40px;
  border-radius:999px;
  overflow:hidden;
  background:var(--k-accent);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:var(--k-primary);
  font-size:14px;
}
[data-octa-topbar] .school-badge img,
[data-octa-topbar] .user-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
[data-octa-topbar] .user-box{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fafafe;
  border:1px solid var(--k-line);
  border-radius:14px;
  padding:6px 10px 6px 6px;
}
[data-octa-topbar] .user-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.1;
  min-width:0;
}
[data-octa-topbar] .user-name{
  font-weight:700;
  font-size:13.5px;
  color:var(--k-text);
}
[data-octa-topbar] .user-role{
  font-size:11px;
  color:var(--k-muted);
}

/* ── Page content ─────────────────────────────────────────────── */
.page-content{
  overflow:auto;
  min-height:0;
  padding:22px;
}

/* ── Tooltip on collapsed sidebar ─────────────────────────────────
 * This used to be an `::after` on the nav link with position:absolute. It
 * could NEVER be seen: the tooltip's containing block is `.nav`, which is an
 * `overflow` scroll container, so anything drawn past its right edge is
 * clipped away. The element is now a single position:fixed node parked on
 * <body> (octa-shell.js positions it on hover), which no ancestor can clip. */
.octa-tip{
  position:fixed;
  z-index:10000;
  pointer-events:none;
  background:#221b3f;
  color:#f4f1ff;
  border:1px solid rgba(255,255,255,.16);
  padding:7px 11px;
  border-radius:10px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  opacity:0;
  transform:translateY(-50%) translateX(-4px);
  transition:opacity .12s ease, transform .12s ease;
}
.octa-tip.is-visible{opacity:1;transform:translateY(-50%) translateX(0);}
@media (prefers-reduced-motion:reduce){
  .octa-tip{transition:none;}
}

/* ── Topbar v2 (octa-shell.js owns this layout) ───────────────────
 * Layout:
 *   [page title + school pill]        [🔔 notif] [Portal ↗] [user box]
 * Pages mount with <header data-octa-topbar data-title="..."> and the
 * shell renders everything below into that container. The shell
 * renders skeleton synchronously; Firebase hydration only updates the
 * inner text/icons, so the topbar never disappears mid-load.
 */
[data-octa-topbar]{
  min-height:var(--k-topbar-h);
}
[data-octa-topbar] .octa-topbar-left,
[data-octa-topbar] .octa-topbar-right{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
[data-octa-topbar] .octa-topbar-left{
  flex:1 1 auto;
  min-width:0;
}
[data-octa-topbar] .octa-topbar-right{
  flex:0 0 auto;
}

[data-octa-topbar] .octa-topbar-title{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  padding-right:10px;
  border-right:1px solid var(--k-line);
}
[data-octa-topbar] .octa-topbar-title-main{
  font-weight:800;
  font-size:15px;
  color:var(--k-text);
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:280px;
}
[data-octa-topbar] .octa-topbar-title-sub{
  font-size:11px;
  color:var(--k-muted);
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:320px;
}
[data-octa-topbar] .octa-topbar-title-sub[hidden]{display:none;}

[data-octa-topbar] .octa-school-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px 6px 6px;
  background:#fafafe;
  border:1px solid var(--k-line);
  border-radius:14px;
  min-width:0;
  max-width:320px;
}
/* School logo chip.
 * A real school logo is arbitrary artwork we do not control: this one is dark
 * maroon on transparent, which disappeared entirely against the previous dark
 * --k-accent fill. The chip therefore carries its OWN light, near-neutral
 * backing so a dark mark reads, plus a hairline ring so a white/light mark
 * still shows its edge against that backing. `contain` (not `cover`) keeps the
 * whole mark visible — cover was cropping the edges of non-square logos. */
[data-octa-topbar] .octa-school-badge{
  width:32px;
  height:32px;
  border-radius:10px;
  overflow:hidden;
  background:rgba(248,247,255,.94);
  box-shadow:inset 0 0 0 1px rgba(15,10,35,.18);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#2a2054;                 /* initials fallback: dark ink on the light chip */
  font-size:13px;
  padding:3px;
}
[data-octa-topbar] .octa-school-badge img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
[data-octa-topbar] .octa-school-meta{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
  line-height:1.15;
}
[data-octa-topbar] .octa-school-name{
  font-weight:800;
  font-size:13px;
  color:var(--k-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:220px;
}
[data-octa-topbar] .octa-school-loc{
  font-size:11px;
  color:var(--k-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:220px;
}

/* Notification button + badge */
[data-octa-topbar] .octa-notif-wrap{
  position:relative;
}
[data-octa-topbar] .octa-notif-btn{
  appearance:none;
  cursor:pointer;
  background:#fafafe;
  border:1px solid var(--k-line);
  border-radius:12px;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color:var(--k-text);
  position:relative;
  padding:0;
  transition:background .15s ease, border-color .15s ease;
}
[data-octa-topbar] .octa-notif-btn:hover{
  background:#f3f1fb;
  border-color:#d6cef0;
}
[data-octa-topbar] .octa-notif-btn[aria-expanded="true"]{
  background:var(--k-accent);
  border-color:#c9bdee;
}
[data-octa-topbar] .octa-notif-badge{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:var(--k-primary);
  color:#fff;
  font-size:10px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px rgba(75,42,173,.30);
  letter-spacing:0;
}
[data-octa-topbar] .octa-notif-badge[hidden]{display:none;}

/* Notification dropdown */
[data-octa-topbar] .octa-notif-dropdown{
  position:absolute;
  top:48px;
  right:0;
  width:340px;
  background:#fff;
  border:1px solid var(--k-line);
  border-radius:18px;
  box-shadow:0 18px 40px rgba(31,36,48,.18);
  overflow:hidden;
  z-index:120;
}
[data-octa-topbar] .octa-notif-dropdown[hidden]{display:none;}
[data-octa-topbar] .octa-notif-header{
  padding:14px 16px;
  border-bottom:1px solid var(--k-line);
  background:#fcfcff;
}
[data-octa-topbar] .octa-notif-eyebrow{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--k-muted);
  margin-bottom:2px;
}
[data-octa-topbar] .octa-notif-title{
  font-weight:800;
  font-size:15px;
  color:var(--k-text);
  line-height:1.1;
}
[data-octa-topbar] .octa-notif-list{
  max-height:360px;
  overflow:auto;
}
[data-octa-topbar] .octa-notif-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  border-bottom:1px solid var(--k-line);
  text-decoration:none;
  color:var(--k-text);
  transition:background .14s ease;
}
[data-octa-topbar] .octa-notif-row:last-child{border-bottom:0;}
[data-octa-topbar] .octa-notif-row:hover{background:#fafafe;}
[data-octa-topbar] .octa-notif-row.is-active{background:#f8f6ff;}
[data-octa-topbar] .octa-notif-row.is-active:hover{background:#f1eafe;}
[data-octa-topbar] .octa-notif-row-icon{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--k-accent);
  color:var(--k-primary);
  font-size:14px;
  flex-shrink:0;
}
[data-octa-topbar] .octa-notif-row-label{
  flex:1;
  font-size:13px;
  font-weight:700;
  color:var(--k-text);
  line-height:1.25;
}
[data-octa-topbar] .octa-notif-row-count{
  font-size:12px;
  font-weight:800;
  color:var(--k-muted);
  background:#fafafe;
  border:1px solid var(--k-line);
  border-radius:999px;
  padding:2px 8px;
  min-width:28px;
  text-align:center;
}
[data-octa-topbar] .octa-notif-row-count.is-active{
  color:#fff;
  background:var(--k-primary);
  border-color:var(--k-primary);
}
[data-octa-topbar] .octa-notif-empty{
  padding:24px 16px;
  text-align:center;
  font-size:13px;
  color:var(--k-muted);
  line-height:1.55;
}
[data-octa-topbar] .octa-notif-empty.error{
  color:#9b1b1b;
  background:var(--k-danger);
}
[data-octa-topbar] .octa-notif-empty-sub{
  display:block;
  margin-top:4px;
  font-size:11.5px;
  color:var(--k-muted);
}
[data-octa-topbar] .octa-notif-partial{
  padding:10px 14px;
  font-size:11.5px;
  color:#7a4700;
  background:var(--k-warn);
  border-top:1px solid #f3deaa;
}

/* Portal-selector link */
[data-octa-topbar] .octa-portal-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid var(--k-line);
  background:#fafafe;
  color:var(--k-text);
  text-decoration:none;
  font-weight:700;
  font-size:12.5px;
  height:40px;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
[data-octa-topbar] .octa-portal-link:hover{
  background:var(--k-accent);
  border-color:#c9bdee;
  color:var(--k-primary);
}
[data-octa-topbar] .octa-portal-link-label{
  font-weight:800;
  letter-spacing:.02em;
}

/* User box — now a button that opens the user menu */
[data-octa-topbar] .octa-user-wrap{
  position:relative;
}
[data-octa-topbar] .octa-user-box{
  appearance:none;
  font:inherit;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  background:#fafafe;
  border:1px solid var(--k-line);
  border-radius:14px;
  padding:6px 12px 6px 6px;
  max-width:240px;
  color:var(--k-text);
  text-align:left;
  transition:background .15s ease, border-color .15s ease;
}
[data-octa-topbar] .octa-user-box:hover{
  background:#f3f1fb;
  border-color:#d6cef0;
}
[data-octa-topbar] .octa-user-box:focus-visible{
  outline:none;
  background:var(--k-accent);
  border-color:#c9bdee;
  box-shadow:0 0 0 3px rgba(75,42,173,.18);
}
[data-octa-topbar] .octa-user-box[aria-expanded="true"]{
  background:var(--k-accent);
  border-color:#c9bdee;
}
[data-octa-topbar] .octa-user-caret{
  margin-left:2px;
  color:var(--k-muted);
  font-size:11px;
  line-height:1;
  transition:transform .15s ease;
}
[data-octa-topbar] .octa-user-box[aria-expanded="true"] .octa-user-caret{
  transform:rotate(180deg);
  color:var(--k-primary);
}
[data-octa-topbar] .octa-user-avatar{
  width:32px;
  height:32px;
  border-radius:999px;
  overflow:hidden;
  background:var(--k-accent);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:var(--k-primary);
  font-size:13px;
}
[data-octa-topbar] .octa-user-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
[data-octa-topbar] .octa-user-meta{
  display:flex;
  flex-direction:column;
  gap:1px;
  line-height:1.1;
  min-width:0;
}
[data-octa-topbar] .octa-user-name{
  font-weight:800;
  font-size:13px;
  color:var(--k-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:140px;
}
[data-octa-topbar] .octa-user-role{
  font-size:11px;
  color:var(--k-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:140px;
}

/* User menu dropdown — Tetrahedron-parity panel sitting under the
 * user box. The list is just a vertical column of menu items with
 * dividers; superadmin-only rows and the sign-out row are hidden
 * until octa-shell.js explicitly reveals them.
 */
[data-octa-topbar] .octa-user-dropdown{
  position:absolute;
  top:48px;
  right:0;
  width:260px;
  background:#fff;
  border:1px solid var(--k-line);
  border-radius:18px;
  box-shadow:0 18px 40px rgba(31,36,48,.18);
  overflow:hidden;
  z-index:120;
}
[data-octa-topbar] .octa-user-dropdown[hidden]{display:none;}
[data-octa-topbar] .octa-user-menu-header{
  padding:14px 16px;
  border-bottom:1px solid var(--k-line);
  background:#fcfcff;
}
[data-octa-topbar] .octa-user-menu-name{
  font-weight:800;
  font-size:14px;
  color:var(--k-text);
  margin-bottom:2px;
  line-height:1.2;
  word-break:break-word;
}
[data-octa-topbar] .octa-user-menu-role{
  font-size:11.5px;
  color:var(--k-muted);
  line-height:1.2;
}
[data-octa-topbar] .octa-user-menu-list{
  display:flex;
  flex-direction:column;
  padding:6px 0;
}
[data-octa-topbar] .octa-user-menu-item{
  appearance:none;
  font:inherit;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:0;
  background:transparent;
  color:var(--k-text);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  text-align:left;
  transition:background .14s ease, color .14s ease;
}
[data-octa-topbar] .octa-user-menu-item:hover,
[data-octa-topbar] .octa-user-menu-item:focus-visible{
  background:#fafafe;
  color:var(--k-primary);
  outline:none;
}
[data-octa-topbar] .octa-user-menu-item[hidden]{display:none;}
[data-octa-topbar] .octa-user-menu-icon{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--k-accent);
  color:var(--k-primary);
  font-size:13px;
  flex-shrink:0;
}
[data-octa-topbar] .octa-user-menu-label{
  flex:1;
  line-height:1.2;
}
[data-octa-topbar] .octa-user-menu-divider{
  height:1px;
  background:var(--k-line);
  margin:6px 0;
}
[data-octa-topbar] .octa-user-menu-divider[hidden]{display:none;}

/* Logout row sits visually apart in red. Disabled state is reached
 * while the async signOut() is in-flight.
 */
[data-octa-topbar] .octa-user-menu-item.logout{
  color:#b42318;
}
[data-octa-topbar] .octa-user-menu-item.logout .octa-user-menu-icon{
  background:#ffe2e2;
  color:#b42318;
}
[data-octa-topbar] .octa-user-menu-item.logout:hover,
[data-octa-topbar] .octa-user-menu-item.logout:focus-visible{
  background:#fff1f1;
  color:#9b1b1b;
}
[data-octa-topbar] .octa-user-menu-item.logout:disabled{
  opacity:.55;
  cursor:not-allowed;
}
[data-octa-topbar] .octa-user-menu-error{
  margin:0 12px 10px;
  padding:8px 10px;
  font-size:11.5px;
  line-height:1.4;
  color:#9b1b1b;
  background:var(--k-danger);
  border:1px solid #f3c0c0;
  border-radius:10px;
}
[data-octa-topbar] .octa-user-menu-error[hidden]{display:none;}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width:1100px){
  [data-octa-topbar] .octa-portal-link-label{display:none;}
  [data-octa-topbar] .octa-portal-link{padding:8px 10px;}
  [data-octa-topbar] .octa-school-pill{max-width:240px;}
  [data-octa-topbar] .octa-user-meta{display:none;}
  [data-octa-topbar] .octa-user-box{max-width:none;padding:6px;}
  [data-octa-topbar] .octa-user-caret{display:none;}
}
@media (max-width:900px){
  html,body{overflow:auto;}
  .app-shell{grid-template-columns:1fr;height:auto;min-height:auto;}
  body.sidebar-collapsed .app-shell{grid-template-columns:1fr;}
  [data-octa-sidebar],
  .sidebar{
    position:relative;
    height:auto;
    border-radius:0 0 24px 24px;
  }
  .right-column{height:auto;min-height:auto;grid-template-rows:auto 1fr;}
  .page-content{overflow:visible;padding:16px;}
  [data-octa-topbar]{flex-wrap:wrap;gap:10px;}
  [data-octa-topbar] .octa-topbar-title{border-right:0;padding-right:0;}
  [data-octa-topbar] .octa-school-pill{order:5;flex:1 1 100%;max-width:none;}
  [data-octa-topbar] .octa-notif-dropdown,
  [data-octa-topbar] .octa-user-dropdown{
    right:auto;
    left:0;
    width:min(92vw, 320px);
  }
}