/* Shared SeasonCrew application header */
body{
  --app-page-bg:var(--sc-bg,var(--paper,#f7f7f9));
  background:var(--app-page-bg)!important;
}
html body .topbar.appHeader{
  background:var(--app-page-bg)!important;
  box-shadow:none!important;
}
.appHeader .topbarInner{
  min-height:104px;
  display:grid!important;
  grid-template-columns:190px minmax(180px,260px) minmax(0,1fr) auto;
  grid-template-areas:
    "brand crew runtime utilities"
    "nav nav nav nav";
  align-items:center;
  gap:7px 12px!important;
  padding-top:9px!important;
  padding-bottom:9px!important;
}
.appHeader .appBrand{
  grid-area:brand;
  min-width:0!important;
  max-width:190px;
  overflow:hidden;
  line-height:0;
}
.appHeader .appBrand img{
  display:block;
  max-width:100%!important;
  height:auto!important;
}
.appHeader .groupSwitch{
  grid-area:crew;
  display:flex!important;
  align-items:center;
  gap:7px!important;
  min-width:0!important;
  overflow:hidden;
}
.appHeader .groupSwitch label{flex:0 0 auto}
.appHeader .groupSwitch select{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.headerRuntime{
  grid-area:runtime;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  overflow:hidden;
}
.headerUtilities{
  grid-area:utilities;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}
.headerIconButton{
  width:36px;
  height:36px;
  min-width:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0!important;
  border:1px solid #d7d8de;
  border-radius:10px;
  background:#fce8ef;
  color:#9f2449;
  text-decoration:none;
  cursor:pointer;
  transition:.18s ease;
}
.headerIconButton svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.headerIconButton:hover{
  background:#e14975;
  border-color:#e14975;
  color:#fff;
  transform:translateY(-1px);
}
.headerIconButton.active,
.headerIconButton[aria-current="page"]{
  background:#15161b!important;
  border-color:#15161b!important;
  color:#fff!important;
  box-shadow:0 6px 16px rgba(21,22,27,.16);
}
.headerIconButton:disabled{opacity:.55;cursor:wait;transform:none}
.appHeaderNav{
  grid-area:nav;
  width:100%;
  margin:0!important;
  display:flex!important;
  align-items:center;
  justify-content:flex-start;
  gap:6px!important;
  min-width:0;
}
.appHeaderNav .headerButton{
  min-height:34px;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  padding:8px 12px!important;
  border-radius:10px;
  font:800 10px/1 Manrope,sans-serif!important;
  line-height:1!important;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
}
.appHeaderNav .headerButton.active,
.appHeaderNav .headerButton[aria-current="page"]{
  background:#15161b!important;
  border-color:#15161b!important;
  color:#fff!important;
  box-shadow:0 6px 16px rgba(21,22,27,.16);
}
.appHeaderNav .headerButton.active:hover,
.appHeaderNav .headerButton[aria-current="page"]:hover{
  background:#15161b!important;
  border-color:#15161b!important;
  color:#fff!important;
  transform:none;
}
@media(max-width:900px){
  .headerRuntime{display:none}
  .appHeader .topbarInner{
    grid-template-columns:170px minmax(150px,1fr) auto;
    grid-template-areas:
      "brand crew utilities"
      "nav nav nav";
  }
}
@media(max-width:700px){
  .appHeader .topbarInner{
    min-height:0;
    grid-template-columns:minmax(100px,1fr) auto;
    grid-template-areas:
      "brand utilities"
      "crew crew"
      "nav nav";
    gap:7px 8px!important;
    padding:8px!important;
  }
  .appHeader .appBrand{
    width:128px!important;
    max-width:128px!important;
  }
  html body .appHeader .appBrand img{
    width:128px!important;
    max-width:128px!important;
  }
  .appHeader .groupSwitch{
    width:100%;
    overflow:hidden;
  }
  .appHeader .groupSwitch label{display:none}
  .appHeader .groupSwitch select{
    flex:1 1 auto;
    width:100%!important;
    min-width:0!important;
  }
  .headerUtilities{gap:4px}
  .headerIconButton{
    width:32px;
    height:32px;
    min-width:32px;
    border-radius:9px;
  }
  .headerIconButton svg{width:16px;height:16px}
  .appHeaderNav{
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:1px 0 2px;
  }
  .appHeaderNav::-webkit-scrollbar{display:none}
  .appHeaderNav .headerButton{
    flex:0 0 auto;
    padding:8px 10px!important;
    font-size:9px!important;
  }
}
@media(max-width:360px){
  .appHeader .appBrand,
  html body .appHeader .appBrand img{
    width:108px!important;
    max-width:108px!important;
  }
  .headerUtilities{gap:3px}
  .headerIconButton{width:30px;height:30px;min-width:30px}
}