.panel-sidebar {
  background: #17384a;
  border: 1px solid #376377;
  border-radius: 14px;
  box-shadow: 0 8px 24px #07162226;
}
.panel-sidebar .panel-nav-btn { color: #e3edf1; text-align: start; }
.panel-sidebar .panel-nav-btn:hover { background: #285269; color: white; }
.panel-sidebar .panel-nav-btn.active { background: #f5a623; color: #152b3a; }
.panel-sidebar .panel-nav-btn:focus-visible { outline: 2px solid #92dfeb; outline-offset: -2px; }
@media (min-width: 901px) { .panel-sidebar { padding: 8px; } }
@media (max-width: 900px) { .panel-sidebar#panelSidebar { background: #17384a; } }

#dashboard:has(> .school-logo-watermark) { isolation: isolate; }
.school-logo-watermark {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.school-logo-watermark::before {
  content: '';
  position: absolute;
  inset: 18% 14%;
  background: url('school-logo.png') center / min(55vw, 430px) auto no-repeat;
  opacity: .075;
  animation: school-watermark-drift 32s ease-in-out infinite alternate;
}
@keyframes school-watermark-drift {
  from { transform: translate(-2%, -3%); }
  to { transform: translate(3%, 4%); }
}
@media (prefers-reduced-motion: reduce) {
  .school-logo-watermark::before { animation: none; }
}
@media print {
  .school-logo-watermark { display: none; }
}

@media (min-width: 901px) {
  #panelSidebar {
    top: 16px;
    max-height: max(180px, calc(100dvh - 160px));
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #6c96a7 transparent;
  }
  #panelSidebar > * { flex-shrink: 0; }
}

@media (max-width:900px) {
  body:has(#panelSidebar.open) { overflow:hidden; }
  #panelSidebar {
    position:fixed; inset-block-start:0; height:100dvh; max-height:100dvh;
    padding-block-start:calc(20px + env(safe-area-inset-top,0px));
    padding-block-end:calc(70px + env(safe-area-inset-bottom,0px));
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    box-sizing:border-box; z-index:1003;
  }
  #panelSidebar > * { flex-shrink:0; }
  #sidebarBackdrop { z-index:1002; }
  header.topbar { flex-wrap:wrap; gap:10px; padding:12px; }
  header.topbar .brand { min-width:0; gap:8px; flex:1; }
  header.topbar .brand h1 { font-size:14px; }
  header.topbar > * { max-width:100%; }
}

@media(max-width:900px) {
 html:has(#panelSidebar), body:has(#panelSidebar) { overflow-x:clip; }
}

@media(max-width:900px){
 header.topbar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:12px}
 header.topbar .brand{width:100%;min-width:0;display:flex;gap:9px}
 header.topbar .brand>div{flex:1;min-width:0}
 header.topbar .brand h1{font-size:14px;line-height:1.6;white-space:normal;word-break:normal;overflow-wrap:normal;margin:0}
 header.topbar .brand span{white-space:normal;word-break:normal;line-height:1.5}
 header.topbar>div:not(.brand){justify-content:flex-end;flex-wrap:wrap;gap:8px!important}
 header.topbar .logout{padding:7px 11px;min-height:40px;white-space:nowrap}
}