/* ============================================================================
 * Kairos Superadmin — shared navigation CSS (SA-NAV-A1).
 * Scoped to the canonical mount markers so it CANNOT leak to Cube / Tetrahedron
 * / Octahedron / Auth. The visual identity of the sidebar list itself comes from
 * each page's existing inline `.nav` / `.nav-icon` / `.nav-label` / `.active`
 * styles — this file only guarantees the a11y + touch + drawer additions.
 * ==========================================================================*/

/* aria-current mirrors the existing .active look (renderer sets both). */
nav[data-superadmin-nav] a[aria-current="page"] { font-weight: 800; }

/* 44px touch-target guarantee for the rendered sidebar links. */
nav[data-superadmin-nav] a { min-height: 44px; }

/* Canonical grouped navigation. The renderer marks every Superadmin mount
 * explicitly opts in, so the established navigation remains untouched across
 * every other Superadmin route until the hierarchy is approved. */
nav[data-superadmin-nav][data-nav-layout="grouped"]{display:flex;flex-direction:column;gap:4px;}
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group{display:flex;flex-direction:column;}
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group-trigger{
  width:100%;min-height:44px;display:flex;align-items:center;gap:10px;padding:10px 12px;
  border:0;border-radius:12px;background:transparent;color:#fff;font:inherit;font-size:14px;
  text-align:left;cursor:pointer;opacity:.95;
}
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group-trigger::-webkit-details-marker{display:none;}
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group-trigger::marker{content:"";}
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group-trigger:hover,
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group[open] > .sa-nav-group-trigger,
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group.has-active > .sa-nav-group-trigger{
  background:rgba(255,255,255,.12);
}
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group-trigger:focus-visible{
  outline:2px solid rgba(255,255,255,.85);outline-offset:2px;
}
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group-trigger .nav-label{flex:1;}
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group-hamburger{width:15px;display:grid;gap:2px;margin-left:auto;opacity:.7;}
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group-hamburger i{display:block;height:1px;border-radius:1px;background:currentColor;transition:transform .15s ease,opacity .15s ease;}
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group[open] .sa-nav-group-hamburger i:first-child{transform:translateY(3px) rotate(45deg);}
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group[open] .sa-nav-group-hamburger i:nth-child(2){opacity:0;}
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group[open] .sa-nav-group-hamburger i:last-child{transform:translateY(-3px) rotate(-45deg);}
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-submenu{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px 28px;padding-left:10px;border-left:1px solid rgba(255,255,255,.18);}
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group:not([open]) .sa-nav-submenu{display:none;}
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-submenu a{
  min-height:34px;margin:0;padding:7px 10px;border-radius:9px;font-size:12.5px;color:rgba(255,255,255,.82);
}
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-submenu a:hover,
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-submenu a.active{color:#fff;background:rgba(255,255,255,.12);}
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-flyout-title{display:none;}
nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-ai{margin-top:auto;border-top:1px solid rgba(255,255,255,.16);border-radius:0;padding-top:14px;}
body.sidebar-collapsed nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group-trigger{justify-content:center;padding-left:10px;padding-right:10px;}
body.sidebar-collapsed nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group-trigger .sa-nav-group-hamburger{display:none!important;}
body.sidebar-collapsed nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group{position:static;}
body.sidebar-collapsed nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group:not([open]) .sa-nav-submenu{display:none!important;}
body.sidebar-collapsed nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group[open] .sa-nav-submenu{
  position:fixed;z-index:1400;top:var(--sa-flyout-top,100px);left:var(--sa-flyout-left,86px);
  display:flex!important;width:244px;max-height:calc(100vh - 24px);overflow:auto;gap:4px;
  margin:0;padding:10px;border:1px solid rgba(255,255,255,.15);border-radius:16px;
  background:linear-gradient(155deg,rgba(64,36,132,.99),rgba(31,22,66,.99));
  box-shadow:0 18px 46px rgba(20,12,49,.48),inset 0 1px 0 rgba(255,255,255,.06);
  animation:sa-nav-flyout-in .16s ease-out;
}
body.sidebar-collapsed nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-group[open] .sa-nav-submenu::before{
  content:"";position:fixed;left:calc(var(--sa-flyout-left,86px) - 7px);top:calc(var(--sa-flyout-top,100px) + 18px);
  width:12px;height:12px;transform:rotate(45deg);
  border-left:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15);background:#402484;
}
body.sidebar-collapsed nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-flyout-title{
  display:block;padding:7px 10px 10px;border-bottom:1px solid rgba(255,255,255,.12);
  color:#fff;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
}
body.sidebar-collapsed nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-submenu a{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-start;
  min-height:38px;margin:0;padding:9px 10px;border-radius:10px;color:rgba(255,255,255,.82);font-size:13px;text-align:left;
}
body.sidebar-collapsed nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-submenu a:hover,
body.sidebar-collapsed nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-submenu a:focus-visible,
body.sidebar-collapsed nav[data-superadmin-nav][data-nav-layout="grouped"] .sa-nav-submenu a.active{
  background:linear-gradient(90deg,rgba(167,139,250,.24),rgba(82,190,255,.10));color:#fff;outline:none;
  box-shadow:inset 2px 0 0 #a78bfa;
}
@keyframes sa-nav-flyout-in{from{opacity:0;transform:translateX(-5px) scale(.985)}to{opacity:1;transform:translateX(0) scale(1)}}

/* Mobile / tablet drawer nav list (used with the shared .sa-drawer). */
.sa-nav-mobile { display: flex; flex-direction: column; gap: 4px; }
.sa-nav-mobile a {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 8px 12px; border-radius: 10px;
  text-decoration: none; color: var(--text, #1f2430); font-weight: 700; font-size: 14px;
}
.sa-nav-mobile a:hover { background: var(--accent, rgba(167,139,250,.14)); }
.sa-nav-mobile a[aria-current="page"], .sa-nav-mobile a.active {
  background: var(--primary, #4b2aad); color: #fff;
}
.sa-nav-mobile a:focus-visible { outline: 2px solid var(--primary, #4b2aad); outline-offset: 2px; }
.sa-nav-mobile .nav-icon { display: inline-flex; width: 22px; height: 22px; }
.sa-nav-mobile .nav-icon svg { width: 22px; height: 22px; }

/* ── Collapsed-sidebar tooltip (SA-BRINGFORWARD-A1) ─────────────────────────
 * ONE body-level, position:fixed element (positioned by the shared renderer) so
 * it never clips against a page's sidebar overflow and never collides via
 * arbitrary z-index. Shown on hover AND keyboard focus of collapsed nav icons. */
.sa-nav-tooltip {
  position: fixed; left: 0; top: 0; z-index: 2147483000;
  max-width: 260px; padding: 6px 10px; border-radius: 8px;
  background: #1a1236; color: #fff; font: 700 12.5px/1.35 "Inter", system-ui, sans-serif;
  white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.38);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease;
}
.sa-nav-tooltip.visible { opacity: 1; visibility: visible; }
/* Pages historically supplied their own pseudo-element hover labels. Suppress
 * those once the shared controller is present so only one tooltip is exposed. */
body.sidebar-collapsed nav[data-superadmin-nav] a[data-tooltip]::before,
body.sidebar-collapsed nav[data-superadmin-nav] a[data-tooltip]::after {
  content: none !important; display: none !important;
}
/* Expanding the sidebar must hide a tooltip synchronously, even before the
 * class observer updates aria-hidden. */
body:not(.sidebar-collapsed) .sa-nav-tooltip {
  opacity: 0; visibility: hidden;
}

/* Canonical Superadmin tablet rail.
 * Schools Operations is the reference: the rail owns exactly one viewport,
 * while its navigation scrolls internally. Page content can never make the
 * sidebar taller or wider. Mobile remains the shared off-canvas drawer. */
@media (min-width:769px) and (max-width:1100px){
  .app-shell{
    grid-template-columns:var(--sidebar-w,224px) minmax(0,1fr)!important;
    width:100%!important;
    max-width:100%!important;
    height:100dvh!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body.sidebar-collapsed .app-shell{
    grid-template-columns:var(--sidebar-collapsed,78px) minmax(0,1fr)!important;
  }
  .app-shell > .sidebar{
    position:relative!important;
    inset:auto!important;
    width:var(--sidebar-w,224px)!important;
    min-width:var(--sidebar-w,224px)!important;
    max-width:var(--sidebar-w,224px)!important;
    height:100dvh!important;
    min-height:0!important;
    padding:18px 14px!important;
    overflow:hidden!important;
    border-radius:0 18px 18px 0!important;
    display:flex!important;
    flex-direction:column!important;
  }
  body.sidebar-collapsed .app-shell > .sidebar{
    width:var(--sidebar-collapsed,78px)!important;
    min-width:var(--sidebar-collapsed,78px)!important;
    max-width:var(--sidebar-collapsed,78px)!important;
    padding:18px 10px!important;
  }
  body.sidebar-collapsed .app-shell > .sidebar .brand-copy,
  body.sidebar-collapsed .app-shell > .sidebar .portal-chip,
  body.sidebar-collapsed .app-shell > .sidebar .nav-label,
  body.sidebar-collapsed .app-shell > .sidebar .sa-nav-group-hamburger,
  body.sidebar-collapsed .app-shell > .sidebar .sa-nav-submenu{display:none!important}
  body.sidebar-collapsed .app-shell > .sidebar .brand-wrap,
  body.sidebar-collapsed .app-shell > .sidebar nav[data-superadmin-nav] > a,
  body.sidebar-collapsed .app-shell > .sidebar .sa-nav-group-trigger{
    justify-content:center!important;
    padding-inline:10px!important;
  }
  .app-shell > .sidebar nav[data-superadmin-nav]{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    scrollbar-width:none!important;
    padding:0!important;
  }
  .app-shell > .sidebar nav[data-superadmin-nav]::-webkit-scrollbar{display:none!important}
  .app-shell > .sidebar .sidebar-footer,
  .app-shell > .sidebar .sidebar-footer-row{
    flex:0 0 auto!important;
    width:100%!important;
    margin-top:8px!important;
    padding-top:10px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    gap:8px!important;
  }
  .app-shell > .sidebar .sidebar-brand-mark{width:24px!important;max-width:24px!important}
  .right-column{
    min-width:0!important;
    height:100dvh!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .right-column > .page-content,
  .right-column > main.page-content{
    min-width:0!important;
    min-height:0!important;
    overflow:auto!important;
  }
}

@media (prefers-reduced-motion: reduce) {
  nav[data-superadmin-nav] a, .sa-nav-mobile a { transition: none !important; }
  .sa-nav-tooltip { transition: none !important; }
}
/* Verbatim Tetrahedron guide rig, adapted only from .k-nav-icon to .nav-icon. */
.nav-icon.has-guide{position:relative!important;width:26px!important;height:26px!important;margin:-4px!important;flex:0 0 auto!important;overflow:visible!important}
.nav-icon.has-guide::before{content:'';position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 0deg,var(--kng-accent,#7b6cf6),transparent 30%,transparent 70%,var(--kng-accent,#7b6cf6));animation:sa-nav-ai-ring 7s linear infinite}
.nav-icon.has-guide .guide-avatar{position:relative;display:block;width:100%;height:100%;border-radius:50%}
.nav-icon.has-guide .gf-disc{position:absolute;inset:1px;border-radius:50%;overflow:hidden;display:block;background:#3a3170}
.nav-icon.has-guide .gf-disc svg{width:100%!important;height:100%!important;display:block}
.nav-icon.has-guide .gf-bg{fill:#3a3170}
.nav-icon.has-guide .gf-breath{transform-box:fill-box;transform-origin:50% 100%;animation:sa-nav-ai-breath 4.4s ease-in-out infinite}
.nav-icon.has-guide .gf-eye{transform-box:fill-box;transform-origin:center;animation:sa-nav-ai-blink 5.6s infinite}
.nav-icon.has-guide .gf-mouth{opacity:0}
.nav a.active .nav-icon.has-guide::before{inset:-3px;animation-duration:5s}
@keyframes sa-nav-ai-ring{to{transform:rotate(360deg)}}
@keyframes sa-nav-ai-breath{0%,100%{transform:scaleY(1)}50%{transform:translateY(-.7px) scaleY(1.012)}}
@keyframes sa-nav-ai-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@media(prefers-reduced-motion:reduce){.nav-icon.has-guide::before,.nav-icon.has-guide .gf-breath,.nav-icon.has-guide .gf-eye{animation:none}}