/* 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 — samme opbygning som appens loginskaerm.
   Appen viser maerke og overskrift paa en groen forloebning og selve
   formularen paa et hvidt kort ovenpaa. Web gjorde det i ét lag; nu er det
   delt i to paa samme maade: .login-box baerer forloebningen, .login-card
   er den hvide inderside.
   Forloebningen er den samme som velkomstskaermens nedenfor, saa de to
   skaerme ligner soeskende og ikke to forskellige produkter.
   Baggrunden udenom bliver moerkegraa som foer -- #212529, samme som
   pitchflow.dk -- saa den der klikker fra forsiden ikke skifter verden.
   Maal foelger PFCard og PFPrimaryButtonStyle i PFBrand.swift: hjoerner 20
   paa kortet og 15 paa knappen, felter og knap 52 px hoeje. */
.login-overlay{background:#212529!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:
    radial-gradient(circle at 50% 14%,rgba(23,153,42,.32),transparent 38%),
    linear-gradient(155deg,#075f17 0%,#087b1d 38%,#00665b 70%,#032c4b 100%)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:28px!important;
  padding:30px 22px 22px!important;
  box-shadow:0 30px 80px rgba(0,0,0,.40)!important;
  position:relative!important;
  overflow:hidden!important;
}
.login-border{display:none!important}
/* Klubmaerket staar frit paa forloebningen. Flisen og kanten bagved gjorde
   det til et skilt i et skilt -- logoet har sin egen baggrund i forvejen.
   Stoerrelsen roeres ikke; det er kun dekorationen der ryger. */
.login-crest{
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  color:#fff!important;
  font-size:26px!important;font-weight:950!important;
  margin:0 auto 14px!important;
  overflow:visible!important;
}
.login-crest img{border-radius:16px!important;object-fit:contain!important}
.login-title{font-size:27px!important;font-weight:900!important;color:#fff!important;letter-spacing:-.035em!important;margin-bottom:6px!important}
.login-sub{font-size:14px!important;color:rgba(255,255,255,.82)!important;margin-bottom:22px!important;line-height:1.45!important}

/* Den hvide inderside — appens PFCard. */
.login-card{
  background:var(--pf-surface)!important;
  border:1px solid rgba(60,60,67,.10)!important;
  border-radius:20px!important;
  padding:20px 18px 18px!important;
  box-shadow:0 10px 28px rgba(0,0,0,.18)!important;
  text-align:left!important;
}
.login-card .login-fg{margin-bottom:14px!important}
.login-fg label{color:var(--pf-muted)!important;text-transform:none!important;font-size:12px!important;font-weight:650!important;letter-spacing:0!important;margin-bottom:6px!important}
.login-fg input{
  background:var(--pf-surface-2)!important;
  border:1px solid rgba(3,33,74,.12)!important;
  color:var(--pf-text)!important;
  border-radius:14px!important;min-height:52px!important;font-size:15px!important;
}
.login-fg input::placeholder{color:var(--pf-muted)!important;opacity:1!important}
.login-fg input:focus{border-color:var(--pf-green)!important;box-shadow:0 0 0 3px rgba(17,139,32,.16)!important}
.login-btn{
  min-height:52px!important;
  background:linear-gradient(180deg,var(--pf-green),var(--pf-green-strong))!important;
  color:#fff!important;border:0!important;border-radius:15px!important;
  font-size:16px!important;font-weight:850!important;text-transform:none!important;letter-spacing:0!important;
  box-shadow:0 8px 20px rgba(8,115,22,.22)!important;margin-top:4px!important;
}
.login-btn:hover{filter:brightness(1.06)!important}
.login-err{color:#c62828!important;font-weight:650!important;text-align:center!important}

@media(max-width:700px){
  .login-box{padding:26px 16px 18px!important;border-radius:26px!important}
  .login-title{font-size:24px!important}
  .login-card{padding:18px 15px 16px!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 - SLAAET FRA 25. september 2026

   Temaet var halvfaerdigt, og halvfaerdigt er vaerre end slet ikke.

   Det satte html/body til sort og vendte farvevariablerne (--white blev
   #1c1c1e, --text-soft blev #9b9ba1), og det gav de kendte kortklasser en
   moerk baggrund. Men forsidens felter - de tre taellere, "Naeste op" og
   "Forbundet" - staar med background:#fff skrevet direkte i index.html og i
   parity-filerne. De blev hvide, mens teksten ovenpaa blev lys. Resultatet
   var lys tekst paa hvid baggrund: ulaeseligt for enhver med moerkt tema i
   Windows eller paa Android.

   Det er IKKE nok at udvide klasselisten nedenfor. index.html er 650 kB med
   flere hundrede faste #fff, og parity-filerne bygger deres flader med
   inline style. Et rigtigt moerkt tema kraever, at de farver bliver til
   variabler foerst. Det er en opgave for sig, ikke en rettelse.

   Kommer den opgave: erstat foerst #fff og #0A2342 i index.html og i
   pf016a-native-master-parity-rc1.js med var(--pf-surface) og var(--pf-text),
   slaa saa blokken til igen, og gennemgaa hver skaerm.

   index.html erklaerer desuden color-scheme:only light. Den linje handler om
   noget andet - den forhindrer browseren i selv at moerklaegge siden - og skal
   blive staaende. Den paavirker ikke blokken her, for prefers-color-scheme
   spoerger til styresystemets indstilling, ikke til sidens egen palet.

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