.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;
}

.site-header .container{
  display:grid;
  grid-template-columns:52px minmax(240px, 320px) minmax(0, 1fr) 44px 42px;
  align-items:center;
  gap:var(--space-4);
  min-height:72px;
  padding:14px 16px;
  border:1px solid rgba(var(--club-primary-rgb), .16);
  border-radius:28px;
  background:
    linear-gradient(140deg, var(--club-secondary) 0%, var(--club-primary) 54%, rgba(var(--club-primary-rgb), .86) 100%);
  box-shadow:0 10px 22px rgba(17, 24, 39, .08);
  backdrop-filter:blur(18px);
}

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

.brand-home-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  grid-column:1;
  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);
}

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

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);
}

.brand-team-select{
  display:block;
  width:auto;
  max-width:100%;
  min-height:0;
  margin:0 auto;
  padding:0 20px 0 0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:inherit;
  line-height:1.2;
  text-align:center;
  text-align-last:center;
  border-radius:0;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}

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

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

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

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

.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;
  pointer-events:none;
  cursor:default;
}

.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:clamp(1.06rem, 3.4vw, 1.34rem);
  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{
  grid-column:5;
  display:none;
  justify-items:center;
  justify-self:end;
  gap:4px;
  min-width:42px;
  margin-left:auto;
  position:static;
  z-index:auto;
}

.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:.64rem;
  line-height:1;
  color:rgba(255,255,255,.84);
  font-weight:800;
  text-align:center;
  white-space:nowrap;
}

#logoutBtn{
  grid-column:5;
  justify-self:end;
  align-self:center;
  position:static;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  margin:0;
  margin-left:auto;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.12);
  box-shadow:none;
  z-index:auto;
  position:relative;
  transform:translateX(-22px);
}

#logoutBtn .logout-ico{
  width:18px;
  height:18px;
  filter:brightness(0) invert(1);
}

#logoutBtn::after{
  content:attr(data-app-version-label);
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  font-size:.64rem;
  line-height:1.1;
  font-weight:800;
  color:rgba(255,255,255,.84);
  white-space:nowrap;
  pointer-events:none;
}

@media (max-width:768px){
  body.has-mobile-bottom-nav .site-nav.site-nav--mobile-bottom{
    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;
    z-index:2000 !important;
  }

  body.app-shell{
    padding-bottom:calc(var(--mobile-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(--mobile-nav-height) + 28px + env(safe-area-inset-bottom));
  }

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

  .site-header{
    padding-top:0;
  }

  .site-header .container{
    display:grid;
    grid-template-columns:52px minmax(0, 1fr) 40px;
    align-items:center;
    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-secondary) 0%, var(--club-primary) 54%, rgba(var(--club-primary-rgb), .86) 100%);
    box-shadow:0 8px 18px rgba(17, 24, 39, .09);
  }

  .brand{
    display:contents !important;
  }

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

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

  .brand-text{
    grid-column:2;
    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;
  }

  .brand-team-select{
    max-width:100%;
    color:var(--color-text-inverse);
    text-align:center;
    text-align-last:center;
    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% - 11px) calc(50% - 2px),
      calc(100% - 5px) calc(50% - 2px);
    background-size:5px 5px, 5px 5px;
    background-repeat:no-repeat;
    padding-right:22px;
  }

  .brand-team-select option{
    background:color-mix(in srgb, var(--club-primary) 86%, var(--club-secondary) 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:start;
    width:52px;
    height:52px;
    min-width:52px;
    min-height:52px;
    margin:0;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.12);
    box-shadow:none;
    overflow:visible;
    transform:translateX(-18px);
  }

  #logoutBtn .logout-ico{
    width:18px;
    height:18px;
    filter:brightness(0) invert(1);
  }

  #logoutBtn::after{
    display:block;
    top:calc(100% + 6px);
    font-size:.56rem;
    line-height:1.05;
  }

  .site-app-brand{
    display:none !important;
  }

  .site-app-brand__logo-wrap{
    width:39px;
    height:39px;
    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:.6rem;
    line-height:1;
    color:rgba(255,255,255,.82);
    font-weight:800;
    text-align:center;
    white-space:nowrap;
  }

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

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

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

  .site-nav{
    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;
    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-secondary) 0%, var(--club-primary) 100%);
    box-shadow:0 -8px 20px rgba(15, 23, 42, .20);
    backdrop-filter:blur(16px);
    z-index:2000 !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);
  }

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

  .site-nav .nav-txt{
    display:block !important;
    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);
    pointer-events:none;
    cursor:default;
  }

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