/* Reference-inspired classroom toolbar. This file is the single final authority
   for the header and intentionally loads after the legacy dashboard styles. */
body .dashboard-header{
  position:sticky!important;
  top:10px!important;
  z-index:50!important;
  width:min(1400px,calc(100% - 24px))!important;
  min-height:64px!important;
  height:auto!important;
  margin:10px auto 6px!important;
  padding:8px 12px 8px 18px!important;
  display:grid!important;
  grid-template-columns:max-content minmax(220px,1fr) minmax(340px,max-content)!important;
  align-items:center!important;
  gap:10px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.91)!important;
  box-shadow:0 12px 32px var(--theme-shadow),0 0 0 1px rgba(255,255,255,.72)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
}

body .dashboard-header button{
  font-family:inherit!important;
}

body .dashboard-header .header-brand,
body .dashboard-header .main-nav,
body .dashboard-header .header-right{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
}

body .dashboard-header .header-brand{
  gap:7px!important;
  overflow:visible!important;
}

body .dashboard-header .strawberry-logo{
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:50%!important;
  background:linear-gradient(135deg,var(--theme-2),var(--theme))!important;
  box-shadow:0 5px 12px var(--theme-shadow)!important;
  transition:transform .2s ease!important;
}

body .dashboard-header .strawberry-logo::before{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  background:linear-gradient(145deg,rgba(255,255,255,.3),transparent 55%);
  pointer-events:none;
}

body .dashboard-header .strawberry-logo{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  color:#fff!important;
}

body .dashboard-header .strawberry-mark{
  position:relative;
  z-index:1;
  width:28px!important;
  height:28px!important;
  overflow:visible!important;
  filter:drop-shadow(0 2px 3px rgba(71,32,46,.15));
}

body .dashboard-header .strawberry-leaf{
  fill:#fff;
  opacity:.96;
}

body .dashboard-header .strawberry-fruit{
  fill:rgba(255,255,255,.2);
  stroke:#fff;
  stroke-width:2.6;
  stroke-linejoin:round;
}

body .dashboard-header .strawberry-seeds{
  fill:#fff;
  opacity:.9;
}

body .dashboard-header .strawberry-logo:hover{
  transform:scale(1.05)!important;
}

body .dashboard-header .class-selector{
  min-width:0!important;
  max-width:145px!important;
  height:40px!important;
  padding:0 7px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  border:0!important;
  background:transparent!important;
  color:var(--theme-text)!important;
  box-shadow:none!important;
  line-height:1!important;
}

body .dashboard-header .class-selector strong{
  min-width:0!important;
  overflow:hidden!important;
  color:inherit!important;
  font-size:14px!important;
  font-weight:950!important;
  line-height:1!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

body .dashboard-header .class-selector span{
  flex:0 0 auto!important;
  color:inherit!important;
  line-height:1!important;
  opacity:.55!important;
}

.top-primary-tool,
body .dashboard-header .main-nav .nav-item,
.top-icon-tool,
.top-utility-tool,
body .dashboard-header .teacher-avatar.more-trigger{
  min-width:40px!important;
  min-height:40px!important;
  height:40px!important;
  margin:0!important;
  padding:0 11px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  border:1px solid transparent!important;
  border-radius:999px!important;
  background:transparent!important;
  color:var(--theme-text)!important;
  box-shadow:none!important;
  font-size:13px!important;
  font-weight:850!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
  vertical-align:middle!important;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}

.top-primary-tool{
  border-color:var(--theme-border)!important;
  background:var(--theme-soft)!important;
  box-shadow:0 2px 6px rgba(15,23,42,.04)!important;
}

.top-primary-tool:hover,
.top-primary-tool.active,
.top-primary-tool[aria-expanded="true"]{
  background:var(--theme-soft-2)!important;
  border-color:var(--theme)!important;
  box-shadow:0 6px 14px var(--theme-shadow)!important;
  transform:translateY(-1px)!important;
}

.top-primary-tool.active{
  color:#fff!important;
  background:linear-gradient(135deg,var(--theme-2),var(--theme))!important;
}

.top-primary-tool svg,
body .dashboard-header .main-nav .nav-item svg,
.top-icon-tool svg,
.top-utility-tool svg{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:18px!important;
  height:18px!important;
  margin:0!important;
  flex:0 0 18px!important;
  color:currentColor!important;
  overflow:visible!important;
}

.top-primary-tool span,
body .dashboard-header .main-nav .nav-item span,
.top-icon-tool span,
.top-utility-tool span,
body .dashboard-header .teacher-avatar.more-trigger span{
  display:inline-flex!important;
  height:auto!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
}

.top-primary-tool i,
body .dashboard-header .teacher-avatar.more-trigger i{
  margin:0 0 0 -2px!important;
  color:currentColor!important;
  font-size:11px!important;
  font-style:normal!important;
  line-height:1!important;
  opacity:.55!important;
  transition:transform .2s ease!important;
}

.top-primary-tool[aria-expanded="true"] i,
body .dashboard-header .teacher-avatar.more-trigger[aria-expanded="true"] i{
  transform:rotate(180deg)!important;
}

.top-sort-wrap,
.top-display-wrap,
body .dashboard-header .more-wrap{
  position:relative!important;
  flex:0 0 auto!important;
}

.top-display-wrap{
  display:flex!important;
  align-items:center!important;
}

.top-display-menu{
  left:50%!important;
  width:176px!important;
  transform:translateX(-50%)!important;
}

body .dashboard-header #topDisplayButton i{
  margin-left:-2px!important;
  color:currentColor!important;
  font-size:11px!important;
  font-style:normal!important;
  line-height:1!important;
  opacity:.55!important;
  transition:transform .2s ease!important;
}

body .dashboard-header #topDisplayButton[aria-expanded="true"] i{
  transform:rotate(180deg)!important;
}

.top-sort-menu{
  position:absolute!important;
  z-index:80!important;
  top:calc(100% + 9px)!important;
  left:0!important;
  width:198px!important;
  padding:8px!important;
  border:1px solid #e2e8f0!important;
  border-radius:17px!important;
  background:rgba(255,255,255,.97)!important;
  box-shadow:0 18px 40px rgba(30,41,59,.17)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

.top-sort-menu>p{
  margin:2px 9px 6px!important;
  color:#94a3b8!important;
  font-size:11px!important;
  font-weight:850!important;
}

.top-sort-menu>button{
  width:100%!important;
  min-height:38px!important;
  padding:0 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  border:0!important;
  border-radius:11px!important;
  background:transparent!important;
  color:#64748b!important;
  font-size:13px!important;
  font-weight:850!important;
}

.top-sort-menu>button:hover,
.top-sort-menu>button.active{
  background:var(--theme-soft)!important;
  color:var(--theme-text)!important;
}

.top-sort-menu>button em{
  color:#10b981!important;
  font-size:10px!important;
  font-style:normal!important;
}

body .dashboard-header .main-nav{
  width:100%!important;
  justify-content:center!important;
  gap:1px!important;
  overflow:visible!important;
}

body .dashboard-header .main-nav .nav-item{
  width:auto!important;
  padding-inline:10px!important;
}

body .dashboard-header .main-nav .nav-item:hover,
body .dashboard-header .main-nav .nav-item.active{
  border-color:transparent!important;
  background:var(--theme-soft)!important;
  color:var(--theme-text)!important;
  box-shadow:none!important;
  transform:none!important;
}

body .dashboard-header #topDisplayButton{
  border-color:var(--theme-border)!important;
  background:var(--theme-soft)!important;
  box-shadow:0 2px 6px rgba(15,23,42,.04)!important;
}

body .dashboard-header #topDisplayButton:hover,
body .dashboard-header #topDisplayButton[aria-expanded="true"]{
  border-color:var(--theme)!important;
  background:var(--theme-soft-2)!important;
  color:var(--theme-text)!important;
  box-shadow:0 6px 14px var(--theme-shadow)!important;
  transform:translateY(-1px)!important;
}

body .dashboard-header .main-nav .nav-item:active,
.top-icon-tool:active,
.top-utility-tool:active,
body .dashboard-header .teacher-avatar.more-trigger:active{
  transform:scale(.95)!important;
}

body .dashboard-header #topDisplayButton:active{
  transform:scale(.95)!important;
}

body .dashboard-header .header-right{
  width:100%!important;
  justify-content:flex-end!important;
  gap:3px!important;
  overflow:visible!important;
  border-radius:999px!important;
  background:transparent!important;
}

.top-icon-tool{
  width:auto!important;
  min-width:58px!important;
  padding:0 11px!important;
  background:transparent!important;
}

.top-icon-tool:hover,
.top-icon-tool.fullscreen-active{
  background:var(--theme-soft-2)!important;
}

.top-icon-tool span{
  display:inline-flex!important;
}

.top-divider{
  width:1px!important;
  height:24px!important;
  flex:0 0 1px!important;
  margin:0 5px!important;
  background:#e2e8f0!important;
}

.top-utility-tool.undo-nav,
.top-utility-tool.undo-nav:hover{
  border-color:transparent!important;
  background:transparent!important;
  color:#f43f5e!important;
  box-shadow:none!important;
}

.top-utility-tool.undo-nav:hover{
  background:#fff1f2!important;
}

body .dashboard-header .teacher-avatar.more-trigger{
  width:auto!important;
  min-width:66px!important;
  padding:0 10px!important;
  overflow:visible!important;
  border-color:transparent!important;
  background:transparent!important;
}

body .dashboard-header .teacher-avatar.more-trigger:hover,
body .dashboard-header .teacher-avatar.more-trigger[aria-expanded="true"]{
  border-color:transparent!important;
  background:var(--theme-soft)!important;
  color:var(--theme-text)!important;
  box-shadow:none!important;
  transform:none!important;
}

body .dashboard-header .more-menu{
  z-index:90!important;
  top:calc(100% + 9px)!important;
  right:0!important;
}

body .dashboard-header .dashboard-search{
  position:relative!important;
  width:clamp(180px,18vw,240px)!important;
  min-width:150px!important;
  flex:0 1 auto!important;
  margin-left:5px!important;
}

body .dashboard-header .dashboard-search svg{
  position:absolute!important;
  z-index:2!important;
  left:14px!important;
  right:auto!important;
  top:50%!important;
  width:18px!important;
  height:18px!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  color:var(--theme)!important;
  transform:translateY(-50%)!important;
  pointer-events:none!important;
}

body .dashboard-header .dashboard-search input{
  width:100%!important;
  height:40px!important;
  padding:0 14px 0 42px!important;
  border:1px solid transparent!important;
  border-radius:999px!important;
  outline:0!important;
  background:rgba(241,245,249,.68)!important;
  color:var(--theme-text)!important;
  box-shadow:inset 0 2px 4px rgba(100,116,139,.08)!important;
  font-size:13px!important;
  font-weight:750!important;
}

body .dashboard-header .dashboard-search input:focus{
  border-color:var(--theme-border)!important;
  background:#fff!important;
  box-shadow:0 0 0 3px var(--theme-soft-2),0 5px 14px var(--theme-shadow)!important;
}

/* Wide screens: keep every adjacent toolbar item on one consistent rhythm and
   let the outer pill shrink to the actual controls instead of stretching grids. */
@media(min-width:1501px){
  body .dashboard-header{
    width:fit-content!important;
    max-width:calc(100% - 24px)!important;
    display:flex!important;
    justify-content:center!important;
    gap:7px!important;
  }
  body .dashboard-header .header-brand,
  body .dashboard-header .main-nav,
  body .dashboard-header .header-right{
    width:auto!important;
    flex:0 1 auto!important;
    gap:7px!important;
  }
  body .dashboard-header .dashboard-search{
    margin-left:0!important;
  }
  body .dashboard-header .top-divider{
    margin-inline:-4px!important;
  }
}

@media(min-width:1121px) and (max-width:1500px){
  body .dashboard-header{
    width:fit-content!important;
    max-width:calc(100% - 18px)!important;
    display:flex!important;
    justify-content:center!important;
    gap:5px!important;
    padding:8px 10px!important;
  }
  body .dashboard-header .header-brand,
  body .dashboard-header .main-nav,
  body .dashboard-header .header-right{
    width:auto!important;
    flex:0 1 auto!important;
    gap:5px!important;
  }
  body .dashboard-header .strawberry-logo{
    width:40px!important;
    height:40px!important;
    flex-basis:40px!important;
  }
  body .dashboard-header .class-selector{
    max-width:118px!important;
    padding-inline:4px!important;
  }
  body .dashboard-header .class-selector strong{
    font-size:13px!important;
  }
  .top-primary-tool,
  body .dashboard-header .main-nav .nav-item,
  .top-icon-tool,
  .top-utility-tool,
  body .dashboard-header .teacher-avatar.more-trigger{
    padding-inline:8px!important;
    font-size:12px!important;
  }
  body .dashboard-header .main-nav{
    justify-content:center!important;
  }
  body .dashboard-header .main-nav .nav-item{
    width:auto!important;
    min-width:0!important;
  }
  body .dashboard-header .main-nav .nav-item span{
    display:inline-flex!important;
  }
  .top-icon-tool{min-width:50px!important}
  body .dashboard-header .teacher-avatar.more-trigger{min-width:58px!important}
  body .dashboard-header .dashboard-search{
    width:150px!important;
    min-width:140px!important;
    margin-left:0!important;
  }
  body .dashboard-header .top-divider{
    margin-inline:-3px!important;
  }
}

@media(max-width:1120px){
  body .dashboard-header{
    grid-template-columns:minmax(0,1fr) minmax(300px,auto)!important;
    grid-template-areas:"brand right" "nav nav"!important;
    gap:6px!important;
    border-radius:24px!important;
    padding:8px 10px!important;
  }
  body .dashboard-header .header-brand{grid-area:brand!important}
  body .dashboard-header .main-nav{grid-area:nav!important}
  body .dashboard-header .header-right{grid-area:right!important}
  body .dashboard-header .main-nav{
    padding-top:2px!important;
    justify-content:center!important;
  }
  body .dashboard-header .main-nav .nav-item{
    width:auto!important;
    min-width:82px!important;
    padding:0 11px!important;
  }
  body .dashboard-header .main-nav .nav-item span{
    display:inline-flex!important;
  }
  body .dashboard-header .dashboard-search{
    width:clamp(165px,17vw,230px)!important;
  }
  .dashboard-main{
    padding-top:10px!important;
  }
}

@media(max-width:760px){
  body .dashboard-header{
    top:6px!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"brand" "nav" "right"!important;
    gap:6px!important;
    border-radius:22px!important;
  }
  body .dashboard-header .header-brand,
  body .dashboard-header .main-nav,
  body .dashboard-header .header-right{
    width:100%!important;
  }
  body .dashboard-header .header-brand{
    justify-content:flex-start!important;
  }
  body .dashboard-header .class-selector{
    max-width:none!important;
    flex:1 1 auto!important;
    justify-content:flex-start!important;
  }
  body .dashboard-header .main-nav{
    justify-content:space-around!important;
  }
  body .dashboard-header .header-right{
    justify-content:center!important;
    flex-wrap:wrap!important;
  }
  body .dashboard-header .dashboard-search{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    flex:1 0 100%!important;
    margin:0!important;
    order:99!important;
  }
  .top-divider{
    display:none!important;
  }
}

@media(max-width:540px){
  body .dashboard-header .header-brand{
    gap:4px!important;
  }
  body .dashboard-header .strawberry-logo{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
  }
  body .dashboard-header .class-selector{
    padding-inline:4px!important;
  }
  body .dashboard-header .class-selector strong{
    font-size:12px!important;
  }
  .top-primary-tool{
    padding-inline:8px!important;
    font-size:12px!important;
  }
  body .dashboard-header .main-nav{
    flex-wrap:wrap!important;
    gap:3px!important;
  }
  body .dashboard-header .main-nav .nav-item{
    min-width:calc(33.333% - 3px)!important;
    padding-inline:5px!important;
    font-size:11px!important;
  }
  body .dashboard-header .main-nav .top-display-wrap{
    width:calc(33.333% - 3px)!important;
  }
  body .dashboard-header .main-nav .top-display-wrap .nav-item{
    width:100%!important;
    min-width:0!important;
  }
}

/* View switching must remain independent from header styling. */
.dashboard-main>.view:not(.active-view){display:none!important}
.dashboard-main>#classroom.active-view{display:grid!important}
.dashboard-main>.overlay-page.active-view{display:block!important}