/* PitchFlow PF-016A — Web Design System v1
   UI-only. Native-inspired visual parity without changing business logic. */
:root{
  --pf-green:#118b20;
  --pf-green-strong:#087316;
  --pf-green-soft:#e7f4e9;
  --pf-green-ink:#075a13;
  --pf-yellow:#ffd400;
  --pf-bg:#f4f5f7;
  --pf-surface:#ffffff;
  --pf-surface-2:#f8f9fa;
  --pf-text:#121417;
  --pf-muted:#73777d;
  --pf-line:#e5e7eb;
  --pf-shadow:0 12px 32px rgba(16,24,40,.08);
  --pf-radius:22px;
  --pf-radius-sm:14px;
  --navy:var(--pf-green-strong);
  --navy-mid:#0b6418;
  --navy-light:#17992a;
  --yellow:var(--pf-yellow);
  --blue:var(--pf-green);
  --blue-light:var(--pf-green-soft);
  --white:var(--pf-surface);
  --g50:var(--pf-surface-2);
  --g100:#f0f1f2;
  --g200:var(--pf-line);
  --g300:#d3d6da;
  --g400:#92969d;
  --text:var(--pf-text);
  --text-mid:#555b63;
  --text-soft:var(--pf-muted);
  --r:var(--pf-radius-sm);
  --sh:var(--pf-shadow);
  --sidebar-w:304px;
}
html,body{background:var(--pf-bg)!important;color:var(--pf-text)!important}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif!important;letter-spacing:-.01em}

/* Header — native brand identity + club context */
.hdr{height:74px!important;padding:0 22px!important;background:color-mix(in srgb,var(--pf-surface) 94%,transparent)!important;border-bottom:1px solid var(--pf-line)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 3px 18px rgba(16,24,40,.04)}
.hdr-brand{gap:12px!important}.hdr-crest{width:46px!important;height:46px!important;border-radius:14px!important;background:var(--pf-green-soft)!important;color:var(--pf-green)!important;border:1px solid rgba(17,139,32,.12)!important;font-weight:900!important}
.hdr-brand-copy{line-height:1.12}.hdr-title{color:var(--pf-muted)!important;font-size:14px!important;font-weight:650!important}.hdr-title::before{content:"PitchFlow";display:block;color:var(--pf-green-ink);font-size:22px;font-weight:900;letter-spacing:-.035em;margin-bottom:2px}.hdr-sub{display:none!important}
.menu-btn{background:var(--pf-surface-2)!important;border:1px solid var(--pf-line)!important;border-radius:50%!important;width:42px!important;height:42px!important;padding:11px!important}.menu-btn span{background:var(--pf-text)!important}
.hdr-stats{background:var(--pf-surface-2)!important;border:1px solid var(--pf-line)!important;border-radius:14px!important;padding:6px 10px!important}.hstat-n{color:var(--pf-green)!important}.hstat-l{color:var(--pf-muted)!important}
.sync-btn,#logout-btn,#settings-btn,#superadmin-btn{border-radius:12px!important;min-height:38px!important}
.sync-btn{background:var(--pf-green)!important;color:white!important;border-color:var(--pf-green)!important}
#logout-btn{background:var(--pf-surface-2)!important;color:var(--pf-text)!important;border-color:var(--pf-line)!important}

/* Desktop utility sidebar */
.layout{background:var(--pf-bg)!important}.sidebar{top:74px!important;max-height:calc(100vh - 74px)!important;background:var(--pf-surface)!important;border-right:1px solid var(--pf-line)!important;padding:10px 10px 20px!important}
.sb-section{border:0!important;margin:4px 0!important;border-radius:15px!important;overflow:hidden;background:var(--pf-surface)!important}.sb-section-hdr{padding:12px 12px!important;border-radius:13px!important;background:transparent!important}.sb-section-hdr:hover{background:var(--pf-surface-2)!important}.sb-section-title{font-weight:750!important;color:var(--pf-text)!important}.sb-section-body{border:0!important;background:var(--pf-surface-2)!important;border-radius:13px!important;margin:0 3px 8px!important;padding:12px!important}.sb-toggle{border:0!important}.btn-collapse{border-radius:12px!important}

/* Main navigation */
.main{padding:18px 22px 48px!important;max-width:1500px!important;width:100%!important}.tab-bar{position:sticky!important;top:86px!important;z-index:120!important;display:flex!important;gap:7px!important;padding:7px!important;margin:0 0 18px!important;background:color-mix(in srgb,var(--pf-surface) 92%,transparent)!important;border:1px solid var(--pf-line)!important;border-radius:18px!important;box-shadow:0 7px 24px rgba(16,24,40,.06)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow-x:auto!important}
.tab-btn{border:0!important;border-radius:13px!important;margin:0!important;padding:10px 14px!important;color:var(--pf-muted)!important;min-height:44px!important;font-weight:750!important}.tab-btn:hover{background:var(--pf-surface-2)!important;color:var(--pf-text)!important}.tab-btn.active{background:var(--pf-green-soft)!important;color:var(--pf-green-ink)!important;border:0!important;box-shadow:inset 0 0 0 1px rgba(17,139,32,.08)}.tab-emoji{filter:saturate(.75)}

/* Search + filters */
.filters-v2{background:var(--pf-surface)!important;border:1px solid var(--pf-line)!important;border-radius:20px!important;padding:14px!important;box-shadow:0 8px 24px rgba(16,24,40,.045)!important;margin-bottom:18px!important}.search-hero{border:1px solid var(--pf-line)!important;border-radius:15px!important;background:var(--pf-surface-2)!important;min-height:48px!important}.search-hero-input{background:transparent!important;color:var(--pf-text)!important}.filterbar-trigger{border-radius:13px!important;background:transparent!important}.filter-sheet{border-radius:16px!important;border-color:var(--pf-line)!important;background:var(--pf-surface-2)!important}.filter-sheet-chip,.filter-btn{border-radius:999px!important}.filter-sheet-chip.active,.filter-btn.active{background:var(--pf-green)!important;color:#fff!important;border-color:var(--pf-green)!important}

/* Shared native-style cards */
.card,.player-card,.kamp-card,.training-card,.tr-card,.document-card,.status-card,.team-item,.cup-card,.msg-list,.msg-thread{background:var(--pf-surface)!important;border:1px solid var(--pf-line)!important;border-radius:var(--pf-radius)!important;box-shadow:0 7px 20px rgba(16,24,40,.045)!important}
.card:hover,.kamp-card:hover,.training-card:hover,.cup-card:hover{border-color:rgba(17,139,32,.28)!important;box-shadow:var(--pf-shadow)!important;transform:translateY(-1px)}
.cards{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(350px,1fr))!important;gap:14px!important}.card{overflow:hidden!important;margin:0!important}.card-summary{padding:16px!important;min-height:84px!important;gap:13px!important}.card-summary:hover{background:var(--pf-surface-2)!important}.card-avatar-sm,.avatar{background:var(--pf-green-soft)!important;color:var(--pf-green-ink)!important;border:1px solid rgba(17,139,32,.08)!important}.card-avatar-sm{width:52px!important;height:52px!important;font-size:13px!important}.card-summary-name{font-size:16px!important;font-weight:850!important;color:var(--pf-text)!important}.card-summary-meta{gap:6px!important;margin-top:7px!important}.card-summary-pill,.team-chip{background:var(--pf-green-soft)!important;color:var(--pf-green-ink)!important;border:0!important;border-radius:999px!important;padding:5px 9px!important;font-weight:700!important}.card-body{border-top:1px solid var(--pf-line)!important;background:var(--pf-surface-2)!important}.card-chev{color:var(--pf-green)!important}

/* Training / matches / cups */
.training-card,.kamp-card,.cup-card{margin-bottom:13px!important}.training-card-hdr,.cup-card-hdr{padding:16px!important;border-radius:var(--pf-radius)!important}.training-card-hdr:hover,.cup-card-hdr:hover{background:var(--pf-surface-2)!important}.training-date{background:var(--pf-green)!important;color:#fff!important;border-radius:999px!important}.kamp-name,.cup-title,.training-title{color:var(--pf-text)!important;font-weight:850!important}.kamp-count-badge{background:var(--pf-green-soft)!important;color:var(--pf-green-ink)!important}.btn-add-match,.btn-cup-add-hold,.btn-primary,.btn-save{background:var(--pf-green)!important;color:#fff!important;border-radius:12px!important;text-transform:none!important;letter-spacing:0!important}.btn-primary:hover,.btn-save:hover{background:var(--pf-green-strong)!important}

/* Messages */
.msg-layout{gap:14px!important}.msg-list,.msg-thread{overflow:hidden!important}.msg-toolbar,.msg-thread-head{background:var(--pf-surface)!important;border-color:var(--pf-line)!important;padding:15px!important}.msg-conv{padding:14px!important}.msg-conv:hover,.msg-conv.active{background:var(--pf-green-soft)!important}.msg-conv-title{color:var(--pf-text)!important}.msg-bubble{border-radius:17px!important;border-color:var(--pf-line)!important}.msg-bubble.mine{background:var(--pf-green-soft)!important;border-color:rgba(17,139,32,.16)!important}.msg-compose{background:var(--pf-surface)!important;border-color:var(--pf-line)!important}

/* Login — mirrors native visual language */
.login-overlay{background:linear-gradient(155deg,#075f17 0%,#087b1d 38%,#00665b 70%,#032c4b 100%)!important;padding:calc(30px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom))!important}
.login-box{max-width:410px!important;background:#1d1d1f!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:28px!important;padding:30px!important;box-shadow:0 30px 80px rgba(0,0,0,.35)!important;position:relative!important}.login-border{display:none!important}.login-crest{width:82px!important;height:82px!important;border-radius:24px!important;background:linear-gradient(145deg,#dff2e2,#bfe3c4)!important;color:var(--pf-green-ink)!important;font-size:25px!important;font-weight:950!important;box-shadow:0 10px 30px rgba(0,0,0,.18)!important}.login-title{font-size:30px!important;font-weight:900!important;color:#fff!important;letter-spacing:-.035em!important;margin-top:3px!important}.login-sub{font-size:14px!important;color:#a6a6aa!important;margin-bottom:24px!important}.login-fg label{color:#d1d1d6!important;text-transform:none!important;font-size:12px!important}.login-fg input{background:#2c2c2e!important;border:1px solid #363638!important;color:#fff!important;border-radius:14px!important;min-height:52px!important;font-size:15px!important}.login-fg input:focus{border-color:var(--pf-green)!important;box-shadow:0 0 0 3px rgba(17,139,32,.18)!important}.login-btn{min-height:54px!important;background:linear-gradient(180deg,#148d25,#0c6f1a)!important;color:#fff!important;border-radius:15px!important;font-size:16px!important;text-transform:none!important;letter-spacing:0!important}.login-err{color:#ff8a8a!important}

/* Forms + modal parity */
.modal{border-radius:24px!important;background:var(--pf-surface)!important;box-shadow:0 28px 80px rgba(0,0,0,.22)!important}.modal-head,.modal-foot{border-color:var(--pf-line)!important}.modal-title{color:var(--pf-text)!important;font-size:18px!important}.fg input,.fg select,.fg textarea,input,select,textarea{border-radius:12px!important;border-color:var(--pf-line)!important}.fg input:focus,.fg select:focus,.fg textarea:focus,input:focus,select:focus,textarea:focus{border-color:var(--pf-green)!important;outline:none!important;box-shadow:0 0 0 3px rgba(17,139,32,.10)!important}

/* Dark mode parity */
@media(prefers-color-scheme:dark){
 :root{--pf-bg:#000;--pf-surface:#1c1c1e;--pf-surface-2:#242426;--pf-text:#f5f5f7;--pf-muted:#9b9ba1;--pf-line:#343438;--pf-green-soft:#092b10;--pf-green-ink:#34c759;--white:var(--pf-surface);--g50:var(--pf-surface-2);--g100:#29292c;--g200:var(--pf-line);--g300:#48484c;--g400:#8e8e93;--text-mid:#c7c7cc}
 .hdr{background:rgba(28,28,30,.92)!important}.sidebar{background:#111!important}.layout,.main{background:#000!important}.tab-bar{background:rgba(28,28,30,.92)!important}.card,.player-card,.kamp-card,.training-card,.tr-card,.document-card,.status-card,.team-item,.cup-card,.filters-v2,.msg-list,.msg-thread,.modal{background:#1c1c1e!important}.card-body,.sb-section-body,.filter-sheet{background:#242426!important}.card-summary:hover,.training-card-hdr:hover,.cup-card-hdr:hover{background:#242426!important}.hdr-title::before,.card-summary-name,.kamp-name,.cup-title,.training-title,.modal-title,.sb-section-title{color:#f5f5f7!important}.hdr-title{color:#9b9ba1!important}.team-chip,.card-summary-pill,.tab-btn.active{background:#08280f!important;color:#34c759!important}.search-hero{background:#242426!important}.search-hero-input{color:#fff!important}
}

/* Phone / tablet */
@media(max-width:700px){
 .hdr{height:60px!important;padding:0 12px!important}.hdr-title::before{font-size:17px}.hdr-title{font-size:11px!important}.hdr-crest{width:38px!important;height:38px!important;border-radius:11px!important}.sidebar{top:calc(60px + env(safe-area-inset-top))!important;max-height:calc(100dvh - 60px - env(safe-area-inset-top))!important}.main{padding:12px 12px 92px!important}.tab-bar{top:68px!important;border-radius:16px!important;padding:5px!important}.tab-btn{padding:9px 12px!important;min-height:43px!important}.cards{display:flex!important;flex-direction:column!important;gap:10px!important}.card-summary{padding:14px!important}.filters-v2{padding:11px!important;border-radius:18px!important}.login-box{padding:26px 22px!important;border-radius:26px!important}.login-crest{width:74px!important;height:74px!important}.login-title{font-size:27px!important}
}

/* PF-016A RC2 — desktop top-navigation / overflow fix
   .main is its own scroll container, so sticky offsets are relative to .main,
   not the browser viewport. Keep the module navigation pinned to the top of
   that scroll area instead of adding the header height a second time. */
.hdr{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100vw!important;
}
.hdr-brand,.hdr-right{min-width:0!important;}
.main{
  box-sizing:border-box!important;
  min-width:0!important;
  overflow-x:hidden!important;
}
.tab-bar{
  max-width:100%!important;
  box-sizing:border-box!important;
  scrollbar-width:none!important;
}
.tab-bar::-webkit-scrollbar{display:none!important;}

@media(min-width:701px){
  .main{
    padding-top:0!important;
  }
  .tab-bar{
    top:0!important;
    margin-top:0!important;
    border-radius:0 0 18px 18px!important;
  }
}

/* PF-016A RC3 — Welcome overlay parity
   Visual-only override. Existing welcome/session logic remains untouched. */
#welcomeOverlay{
  background:
    radial-gradient(circle at 50% 18%,rgba(23,153,42,.30),transparent 34%),
    linear-gradient(155deg,#075f17 0%,#087b1d 38%,#00665b 70%,#032c4b 100%)!important;
  padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom))!important;
  overflow:auto!important;
}
#welcomeOverlay>div{
  width:min(100%,430px)!important;
  max-width:430px!important;
  padding:32px 30px 30px!important;
  border-radius:28px!important;
  background:#1d1d1f!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.38)!important;
  color:#fff!important;
  position:relative!important;
  overflow:hidden!important;
}
#welcomeOverlay>div::before{
  content:"PITCHFLOW";
  display:block;
  margin:0 0 22px;
  color:#fff;
  font-size:13px;
  font-weight:900;
  letter-spacing:.18em;
  opacity:.92;
}
#welcome-logo{
  width:88px!important;
  height:88px!important;
  margin:0 auto 18px!important;
  border-radius:24px!important;
  background:linear-gradient(145deg,#e4f4e7,#c7e9cd)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.25)!important;
  overflow:hidden!important;
  color:var(--pf-green-ink)!important;
  font-size:30px!important;
}
#welcome-logo img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
}
#welcome-klub-navn{
  margin:0 0 7px!important;
  color:#a6a6aa!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}
#welcome-msg{
  margin:0 0 8px!important;
  color:#fff!important;
  font-size:25px!important;
  font-weight:900!important;
  letter-spacing:-.03em!important;
  line-height:1.18!important;
}
#welcome-sub{
  margin:0 auto 25px!important;
  max-width:340px!important;
  color:#a6a6aa!important;
  font-size:14px!important;
  line-height:1.55!important;
}
#welcomeOverlay button{
  width:100%!important;
  min-height:54px!important;
  padding:14px 18px!important;
  border:0!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,#148d25,#0c6f1a)!important;
  color:#fff!important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif!important;
  font-size:16px!important;
  font-weight:850!important;
  letter-spacing:0!important;
  cursor:pointer!important;
  box-shadow:inset 0 1px rgba(255,255,255,.10),0 10px 22px rgba(0,0,0,.18)!important;
  transition:transform .15s ease,filter .15s ease!important;
}
#welcomeOverlay button:hover{filter:brightness(1.08)!important;transform:translateY(-1px)!important;}
#welcomeOverlay button:active{transform:translateY(0) scale(.99)!important;}

@media(max-width:700px){
  #welcomeOverlay{padding-left:16px!important;padding-right:16px!important;}
  #welcomeOverlay>div{padding:28px 22px 24px!important;border-radius:26px!important;}
  #welcomeOverlay>div::before{margin-bottom:18px!important;}
  #welcome-logo{width:78px!important;height:78px!important;border-radius:22px!important;}
  #welcome-msg{font-size:23px!important;}
}

/* PF-016A RC4 — iPhone top-navigation overflow fix
   Mobile .main is also a scroll container. Keep the tab bar at the top of
   that container and constrain all horizontal scrolling to the tab bar only. */
html,body{
  max-width:100%!important;
  overflow-x:hidden!important;
}
.layout{
  min-width:0!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}

@media(max-width:700px){
  .hdr{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .hdr-brand{
    min-width:0!important;
    flex:1 1 auto!important;
    overflow:hidden!important;
  }
  .hdr-brand-copy{
    min-width:0!important;
    overflow:hidden!important;
  }
  .hdr-title{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .hdr-right{
    flex:0 0 auto!important;
    max-width:48%!important;
    overflow:hidden!important;
  }

  .main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding-top:0!important;
    overflow-x:hidden!important;
  }
  .tab-bar{
    top:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0 0 12px!important;
    border-radius:0 0 16px 16px!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x!important;
    scrollbar-width:none!important;
  }
  .tab-bar::-webkit-scrollbar{display:none!important;}
  .tab-btn{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
    max-width:none!important;
    white-space:nowrap!important;
  }

  /* Prevent wide utility content from widening the mobile document. */
  .cards,.filters-v2,.msg-layout,.msg-list,.msg-thread,.card,.kamp-card,
  .training-card,.cup-card,.document-card,.status-card,.team-item{
    min-width:0!important;
    max-width:100%!important;
  }
}


/* PF-016A RC7 — vertical scrolling fix
   Keep header outside the app scroll area, and give the flex children a real
   viewport height. min-height:0 is required for overflow scrolling inside a
   flex layout, especially on iOS Safari. */
.layout{
  height:calc(100dvh - 52px)!important;
  min-height:0!important;
  overflow-y:hidden!important;
}
.main{
  height:100%!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:contain!important;
  touch-action:pan-y!important;
}
.sidebar{
  min-height:0!important;
  max-height:100%!important;
  -webkit-overflow-scrolling:touch!important;
}

@supports not (height: 100dvh){
  .layout{height:calc(100vh - 52px)!important;}
}

@media(max-width:700px){
  .layout{
    height:calc(100dvh - 52px)!important;
    min-height:0!important;
  }
  .main{
    height:100%!important;
    min-height:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:calc(80px + env(safe-area-inset-bottom))!important;
  }
  /* Horizontal tab swipe stays horizontal while page content remains vertical. */
  .tab-bar{touch-action:pan-x!important;}
}


/* PF-016A RC8 — Sidebar scrolling fix */
.sidebar{
  height:100%!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:contain!important;
  touch-action:pan-y!important;
  scrollbar-gutter:stable;
}

.sidebar .nav,
.sidebar nav{
  min-height:max-content!important;
}

@media(max-width:700px){
  .sidebar{
    max-height:100%!important;
    padding-bottom:calc(20px + env(safe-area-inset-bottom))!important;
  }
}


/* PF-016A RC9 — definitive independent sidebar scroll
   The legacy stylesheet keeps .sidebar position:sticky. That conflicts with
   the new fixed-height flex shell. On desktop the sidebar must be a normal
   flex child with its own scrolling viewport. */
@media(min-width:701px){
  .layout{
    align-items:stretch!important;
  }

  .sidebar{
    position:relative!important;
    top:auto!important;
    bottom:auto!important;
    align-self:stretch!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    flex:0 0 var(--sidebar-w)!important;
    overflow-x:hidden!important;
    overflow-y:scroll!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
  }

  .sidebar.collapsed{
    flex-basis:0!important;
    width:0!important;
    min-width:0!important;
    overflow:hidden!important;
  }
}

/* Mobile remains a fixed drawer, but the drawer itself owns the scroll. */
@media(max-width:700px){
  .sidebar{
    position:fixed!important;
    top:calc(60px + env(safe-area-inset-top))!important;
    bottom:0!important;
    left:0!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:scroll!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
  }
}


/* PF-016A RC10 — User management internal scrolling
   Brugerstyring renders a potentially long dynamic list inside #user-list.
   Give only that list its own bounded scrolling viewport so it cannot make the
   expanded sidebar section effectively unscrollable. */
#sb-users-body{
  min-height:0!important;
  overflow:visible!important;
}

#user-list{
  display:block!important;
  min-height:0!important;
  max-height:min(52dvh, 520px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:contain!important;
  touch-action:pan-y!important;
  padding-right:3px!important;
}

/* Keep the filter control visible while the user rows scroll underneath it. */
#user-list > select:first-child{
  position:sticky!important;
  top:0!important;
  z-index:2!important;
  background:var(--pf-surface-2, #fff)!important;
}

@supports not (height: 100dvh){
  #user-list{max-height:min(52vh, 520px)!important;}
}

@media(max-width:700px){
  #user-list{
    max-height:46dvh!important;
  }
}


/* PF-016A RC11 — Tilføj spiller internal scrolling
   The add-player form is much taller than the other sidebar sections.
   Give only its body a bounded vertical scroll area so opening it does not
   consume the entire sidebar viewport. */
#sb-add-player{
  min-height:0!important;
}

#sb-add-player .sb-section-body{
  min-height:0!important;
  max-height:min(62dvh, 620px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:contain!important;
  touch-action:pan-y!important;
  padding-right:10px!important;
}

@supports not (height: 100dvh){
  #sb-add-player .sb-section-body{
    max-height:min(62vh, 620px)!important;
  }
}

@media(max-width:700px){
  #sb-add-player .sb-section-body{
    max-height:54dvh!important;
    padding-bottom:calc(16px + env(safe-area-inset-bottom))!important;
  }
}


/* PF-016A RC12 — Add Player natural sidebar scrolling
   RC11 used a nested internal scroll area. On some browsers that caused the
   lower form controls to be clipped unless the page was zoomed out.
   RC12 removes the nested scroll and lets the sidebar itself own the full
   vertical scrolling range. */

#sb-add-player{
  min-height:auto!important;
  overflow:visible!important;
}

#sb-add-player .sb-section-body{
  min-height:auto!important;
  max-height:none!important;
  height:auto!important;
  overflow:visible!important;
  touch-action:auto!important;
  padding-right:0!important;
  padding-bottom:20px!important;
}

/* Ensure expanded sidebar sections contribute their real height to the
   sidebar scroll range. */
.sidebar .sb-section,
.sidebar .sb-section-body,
.sidebar .nav,
.sidebar nav{
  flex-shrink:0!important;
}

.sidebar{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:contain!important;
  touch-action:pan-y!important;
}

/* Give the sidebar content enough bottom room to scroll the last control fully
   above the viewport edge / iOS safe area. */
.sidebar nav,
.sidebar .nav{
  padding-bottom:calc(32px + env(safe-area-inset-bottom))!important;
}

@media(max-width:700px){
  #sb-add-player .sb-section-body{
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:24px!important;
  }

  .sidebar nav,
  .sidebar .nav{
    padding-bottom:calc(48px + env(safe-area-inset-bottom))!important;
  }
}