/* 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;
  }
}