.table-wrap{overflow-x:auto}
.table-wide{width:100%;border-collapse:collapse}
.table-wide th,
.table-wide td{padding:10px 12px;white-space:nowrap}
.table-wide thead th{
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-muted);
  border-bottom:1px solid var(--color-border);
}
.table-wide tbody tr:nth-child(even){background:var(--color-overlay-dark-subtle)}

.container,
main.container,
.container.my-3,
.container.my-4{
  width:min(calc(100% - 32px), var(--page-max));
  max-width:var(--page-max);
  margin-left:auto;
  margin-right:auto;
}

body.app-shell{
  padding-bottom:calc(var(--mobile-nav-height) + 30px + env(safe-area-inset-bottom));
}

.site-header{
  position:sticky;
  top:0;
  z-index:1100;
  padding-top:12px;
}

body:not(.login-body):not(.app-shell-ready) .site-header,
body:not(.login-body):not(.app-shell-ready) .app-nav--mobile{
  visibility:hidden;
}

body.app-shell-ready .site-header,
body.app-shell-ready .app-nav--mobile{
  visibility:visible;
}

body.public-auth-body .site-header,
body.public-auth-body .site-nav{
  display:none;
}

.site-header .container{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto auto;
  align-items:center;
  gap:clamp(12px, 2.4vw, 24px);
  box-sizing:border-box;
  min-height:72px;
  padding:14px 16px;
  border:1px solid rgba(var(--club-primary-rgb), .16);
  border-radius:28px;
  background:
    linear-gradient(140deg, var(--club-primary-strong) 0%, var(--club-primary) 54%, var(--club-primary-strong) 100%);
  box-shadow:0 10px 22px rgba(17, 24, 39, .08);
  backdrop-filter:blur(18px);
}

body.app-shell .site-header .container{
  border-color:color-mix(in srgb, var(--appadel-secondary-color) 48%, transparent);
}

.brand{
  min-width:0;
  display:contents !important;
}

.app-header-left{
  grid-column:1;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
}

.app-header-center{
  grid-column:2;
  display:grid;
  justify-items:center;
  align-items:center;
  min-width:0;
  width:100%;
}

.app-header-right{
  grid-column:4;
  display:grid;
  justify-items:center;
  align-items:center;
  gap:3px;
  width:52px;
  min-width:52px;
}

.brand-home-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.brand-logo{
  width:52px;
  height:52px;
  padding:4px;
  border-radius:16px;
  object-fit:contain;
  background:var(--color-white);
  border:1px solid var(--color-primary-border-soft);
  box-shadow:0 8px 18px rgba(15, 23, 42, .08);
}

body.app-shell .brand-logo{
  border-color:color-mix(in srgb, var(--appadel-secondary-color) 58%, transparent);
}

.brand-text{
  min-width:0;
  display:grid;
  gap:2px;
  text-align:center;
  justify-items:center;
  justify-self:center;
  width:min(100%, 340px);
  position:static;
  z-index:auto;
  opacity:0;
}

html[data-branding-ready="true"] .brand-text,
body.app-shell-ready .brand-text{
  opacity:1;
}

.brand-title{
  font-size:1.02rem;
  font-weight:900;
  letter-spacing:.01em;
  color:var(--color-text-inverse);
  min-height:1.25em;
  display:grid;
  align-items:center;
  justify-items:center;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.brand-team-selector{
  position:relative;
  display:inline-grid;
  grid-template-columns:minmax(0, auto) auto;
  align-items:center;
  justify-content:center;
  gap:6px;
  max-width:100%;
  min-width:0;
  color:var(--color-text-inverse);
  cursor:pointer;
}

.brand-team-selector.is-disabled{
  cursor:default;
}

.brand-team-selector__label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.brand-team-selector__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  color:rgba(255,255,255,.78);
  font-size:.7rem;
  line-height:1;
  transform:translateY(1px);
  flex:0 0 auto;
}

.brand-team-select{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  min-height:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-size:.92rem;
  font-weight:inherit;
  line-height:1.2;
  text-align:left;
  text-align-last:left;
  border-radius:0;
  opacity:0;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}

.brand-team-select:disabled{
  cursor:default;
}

.brand-team-select:focus{
  outline:none;
}

.brand-team-select option{
  background:color-mix(in srgb, var(--club-primary) 86%, var(--club-primary-strong) 14%);
  color:#fff;
  text-align:left;
}

.brand-subtitle{
  color:var(--color-text-inverse-muted);
  font-size:.78rem;
  font-weight:700;
  line-height:1.25;
  text-align:center;
  max-width:100%;
}

.brand-subtitle div{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.site-nav{
  grid-column:3;
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:0 !important;
  justify-self:end;
  min-width:0;
  flex-wrap:nowrap;
  position:static;
  z-index:auto;
}

.site-nav.has-more-menu-open{
  position:relative;
}

.app-nav--mobile{
  display:none !important;
}

.app-nav-link,
.site-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:10px 14px;
  border-radius:18px;
  color:var(--color-text-inverse-soft);
  text-decoration:none;
  font-weight:900;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

.app-nav-link:hover,
.site-nav a:hover{
  color:var(--color-text-inverse);
  background:rgba(255,255,255,.10);
  transform:translateY(-1px);
}

.app-nav-link.active,
.site-nav a.active{
  color:var(--color-text-inverse);
  background:rgba(255,255,255,.12);
  box-shadow:none;
  cursor:default;
}

body.app-shell .app-nav-link.active,
body.app-shell .site-nav a.active{
  box-shadow:inset 0 -2px 0 var(--appadel-secondary-color);
}

.app-nav-link.active:not([data-app-nav-more-toggle]),
.site-nav a.active:not([data-app-nav-more-toggle]){
  pointer-events:none;
}

.app-nav-more-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  display:grid;
  gap:6px;
  width:min(245px, calc(100vw - 20px));
  padding:8px;
  border:1px solid rgba(var(--club-primary-rgb), .24);
  border-radius:18px;
  background:
    linear-gradient(140deg, var(--club-primary-strong) 0%, var(--club-primary) 100%);
  box-shadow:0 12px 28px rgba(15, 23, 42, .26);
  z-index:2010;
}

.app-nav-more-menu[hidden]{
  display:none !important;
}

.app-nav-more-menu .app-nav-more-link{
  min-height:44px;
  flex-direction:row;
  justify-content:flex-start;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
}

.app-nav-more-menu .nav-txt{
  font-size:.78rem;
}

.site-nav .nav-ico{
  width:20px;
  height:20px;
  filter:brightness(0) invert(1);
}

.app-nav-link.active .nav-ico,
.site-nav a.active .nav-ico{
  filter:brightness(0) invert(1);
}

.app-main{
  margin-top:18px;
  display:grid;
  gap:18px;
}

.app-page-intro{display:none !important;}

.app-page-intro__body{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:14px;
}

.app-page-intro__content{
  min-width:0;
}

.app-page-intro__eyebrow{
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.82;
}

.app-page-intro__title{
  margin:0;
  color:var(--color-text-inverse);
  font-size:clamp(1.45rem, 4vw, 2.2rem);
  line-height:1.08;
}

.app-page-intro__meta{
  margin:0;
  color:var(--color-text-inverse-muted);
  font-weight:700;
  font-size:.92rem;
}

.app-page-intro__meta-line{
  display:block;
}

.app-page-intro__logo-wrap{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  padding:8px;
  border-radius:20px;
  background:var(--color-white);
  border:1px solid var(--color-primary-border-soft);
  box-shadow:0 10px 24px rgba(15, 23, 42, .12);
  flex-shrink:0;
}

.app-page-intro__logo{
  width:100%;
  height:100%;
  object-fit:contain;
}

.app-page-intro__title .brand-team-select{
  width:auto;
  max-width:100%;
  min-height:0;
  padding:2px 26px 2px 0;
  border:0;
  background-color:transparent;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.92) 50%),
    linear-gradient(135deg, rgba(255,255,255,.92) 50%, transparent 50%);
  background-position:
    calc(100% - 13px) calc(50% - 2px),
    calc(100% - 7px) calc(50% - 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  color:#fff;
  font:inherit;
  font-size:1rem;
  font-weight:900;
  line-height:1.08;
  letter-spacing:.01em;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

.app-page-intro__title .brand-team-select option{
  color:#102a24;
}

.home-shell{width:100%}
.home-grid{
  display:grid;
  gap:18px;
}

@media (min-width:992px){
  .home-grid{
    grid-template-columns:3fr 2fr;
    grid-template-areas:
      "clas calendar"
      "photos top";
    align-items:start;
  }

  .home-grid > .card-soft{min-width:0}
}

.home-clas{grid-area:clas}
.home-next{grid-area:calendar}
.home-photos{grid-area:photos}
.home-top{grid-area:top}

.app-version-badge{
  position:fixed;
  top:18px;
  right:20px;
  z-index:2100;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:6px 12px;
  border:1px solid rgba(var(--club-primary-rgb), .16);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.88);
  color:var(--color-muted);
  box-shadow:var(--shadow-sm);
  font-size:.74rem;
  font-weight:800;
  line-height:1;
  backdrop-filter:blur(10px);
}

.site-app-brand{
  display:grid;
  justify-items:center;
  justify-self:center;
  gap:3px;
  width:52px;
  min-width:52px;
  margin-left:0;
  position:static;
  z-index:auto;
}

.app-header-right .site-app-brand__logo-wrap{
  display:none;
}

.site-app-brand__logo-wrap{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:0;
  background:transparent;
  border:0;
  box-shadow:none;
}

.site-app-brand__logo{
  width:100%;
  height:100%;
  object-fit:contain;
}

.site-app-brand__version{
  font-size:.62rem;
  line-height:1;
  color:#fff;
  font-weight:900;
  text-align:center;
  white-space:nowrap;
  width:100%;
}

#logoutBtn{
  justify-self:center;
  align-self:center;
  position:static;
  width:52px;
  height:52px;
  min-width:52px;
  min-height:52px;
  margin:0;
  border-radius:16px;
  border:1px solid var(--color-primary-border-soft);
  background:#fff;
  box-shadow:0 8px 18px rgba(15, 23, 42, .08);
  z-index:auto;
  position:relative;
  transform:none;
}

#logoutBtn .logout-ico{
  width:22px;
  height:22px;
  filter:brightness(0) saturate(100%) invert(32%) sepia(69%) saturate(870%) hue-rotate(101deg) brightness(89%) contrast(88%);
}

#logoutBtn::after{
  display:none;
}

@media (max-width:768px){
  body:not(.login-body){
    padding-top:var(--app-header-height);
    padding-bottom:calc(var(--app-bottom-nav-height) + 24px + env(safe-area-inset-bottom));
  }

  .site-header .app-nav--desktop{
    display:none !important;
  }

  .app-nav--mobile:empty{
    display:none !important;
  }

  .app-nav--mobile.site-nav:not(:empty),
  body.has-mobile-bottom-nav .app-nav--mobile.site-nav.site-nav--mobile-bottom:not(:empty){
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    box-sizing:border-box;
    overflow:hidden;
    display:grid !important;
    z-index:2000 !important;
  }

  body.app-shell{
    padding-bottom:calc(var(--app-bottom-nav-height) + 24px + env(safe-area-inset-bottom));
  }

  .container,
  main.container,
  .container.my-3,
  .container.my-4{
    width:min(calc(100% - 24px), var(--app-max));
    max-width:var(--app-max);
    padding-bottom:calc(var(--app-bottom-nav-height) + 28px + env(safe-area-inset-bottom));
  }

  .app-main{
    margin-top:0;
    padding-top:var(--mobile-header-gap);
    padding-bottom:calc(var(--app-bottom-nav-height) + 18px + env(safe-area-inset-bottom));
  }

  .site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1100;
    padding-top:0;
  }

  .site-header .container{
    display:grid;
    grid-template-columns:58px minmax(0, 1fr) 58px;
    align-items:center;
    box-sizing:border-box;
    min-height:88px;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:14px 12px;
    gap:10px;
    border-radius:0 0 24px 24px;
    background:
      linear-gradient(140deg, var(--club-primary-strong) 0%, var(--club-primary) 54%, var(--club-primary-strong) 100%);
    box-shadow:0 8px 18px rgba(17, 24, 39, .09);
  }

  .brand{
    display:contents !important;
  }

  .app-header-left{
    grid-column:1;
    justify-self:start;
  }

  .app-header-center{
    grid-column:2;
    min-width:0;
  }

  .app-header-right{
    grid-column:3;
    justify-self:end;
    justify-items:center;
    gap:3px;
    width:52px;
    min-width:52px;
  }

  .brand-home-link{
    justify-self:start;
  }

  .brand-logo{
    width:52px;
    height:52px;
    padding:4px;
    border-radius:16px;
    background:#fff;
    justify-self:start;
  }

  .brand-text{
    text-align:center;
    justify-items:center;
    gap:3px;
    width:auto;
    position:static;
    z-index:auto;
  }

  .brand-title{
    width:100%;
    font-size:1rem;
    color:var(--color-text-inverse);
    line-height:1.05;
    min-height:1.25em;
  }

  .brand-team-select{
    max-width:100%;
    color:var(--color-text-inverse);
    text-align:left;
    text-align-last:left;
  }

  .brand-team-select option{
    background:color-mix(in srgb, var(--club-primary) 86%, var(--club-primary-strong) 14%);
    color:#fff;
  }

  .brand-subtitle{
    color:rgba(255,255,255,.86);
    font-size:.72rem;
    line-height:1.2;
  }

  .brand-subtitle div{
    white-space:nowrap;
  }

  #logoutBtn{
    position:relative !important;
    justify-self:center;
    width:52px;
    height:52px;
    min-width:52px;
    min-height:52px;
    margin:0;
    border-radius:16px;
    border:1px solid var(--color-primary-border-soft);
    background:#fff;
    box-shadow:0 8px 18px rgba(15, 23, 42, .08);
    overflow:visible;
    transform:none;
  }

  #logoutBtn .logout-ico{
    width:22px;
    height:22px;
    filter:brightness(0) saturate(100%) invert(32%) sepia(69%) saturate(870%) hue-rotate(101deg) brightness(89%) contrast(88%);
  }

  #logoutBtn::after{
    display:none;
  }

  .site-app-brand{
    display:grid !important;
    grid-column:auto;
    width:52px;
    min-width:52px;
    margin-left:0;
    justify-self:center;
  }

  .site-app-brand__logo-wrap{
    display:none;
  }

  .site-app-brand__logo{
    width:100%;
    height:100%;
    object-fit:contain;
  }

  .site-app-brand__version{
    font-size:.6rem;
    line-height:1;
    color:#fff;
    font-weight:900;
    text-align:center;
    white-space:nowrap;
    width:100%;
  }

  .home-menu-btn{
    display:none !important;
  }

  .app-page-intro{
    display:none !important;
  }

  .home-grid{grid-template-columns:1fr}

  .app-nav--mobile.site-nav:not(:empty){
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    box-sizing:border-box;
    overflow:hidden;
    display:grid !important;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:6px !important;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    border-radius:0 !important;
    border:1px solid rgba(var(--club-primary-rgb), .34);
    border-radius:22px 22px 0 0 !important;
    background:
      linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.28)),
      linear-gradient(140deg, var(--club-primary-strong) 0%, var(--club-primary) 100%);
    box-shadow:0 -8px 20px rgba(15, 23, 42, .20);
    backdrop-filter:blur(16px);
    z-index:2000 !important;
  }

  .app-nav--mobile.site-nav.has-more-menu-open{
    overflow:visible !important;
  }

  .site-nav > .only-desktop{
    display:none !important;
  }

  .app-nav-link,
  .site-nav a{
    min-height:54px;
    padding:8px 4px;
    gap:4px;
    border-radius:16px;
    flex-direction:column;
    color:var(--color-text-inverse);
  }

  .app-nav-more-menu{
    top:auto;
    right:10px;
    bottom:calc(100% + 8px);
  }

  .app-nav--mobile .app-nav-link,
  .app-nav--mobile.site-nav a{
    min-width:0;
    overflow:hidden;
  }

  .site-nav .nav-ico{
    width:22px !important;
    height:22px !important;
    filter:brightness(0) invert(1);
  }

  .site-nav .nav-txt{
    display:block !important;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:.64rem;
    line-height:1;
    white-space:nowrap;
  }

  .app-nav-link.active,
  .site-nav a.active{
    background:rgba(255,255,255,.12);
    color:var(--color-text-inverse);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
    cursor:default;
  }

  .app-nav-link.active:not([data-app-nav-more-toggle]),
  .site-nav a.active:not([data-app-nav-more-toggle]){
    pointer-events:none;
  }

  .app-version-badge{
    top:auto;
    bottom:84px;
    right:14px;
    padding:4px 10px;
    font-size:.68rem;
  }
}