/* Shared Padellab app chrome: one header/footer system across the player platform. */

:root{
  --chrome-bg:rgba(5,12,21,.91);
  --chrome-line:rgba(180,205,226,.14);
  --chrome-muted:#8298ad;
  --chrome-lime:#caff28;
}

/* HEADER --------------------------------------------------------------- */
.topbar{
  position:relative!important;
  top:auto!important;
  z-index:40!important;
  min-height:68px!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding-top:max(4px,env(safe-area-inset-top))!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Samme tydelige wordmark som Padellab Live: PADEL i hvid, LAB i lime. */
.topbar .brand{
  flex:0 0 auto;
  display:inline-flex!important;
  align-items:center!important;
  color:#f8fafc!important;
  text-decoration:none!important;
  font-size:22px!important;
  font-weight:1000!important;
  letter-spacing:-.055em!important;
  line-height:1!important;
  text-shadow:none!important;
  text-transform:uppercase!important;
}
.topbar .brand span,
.topbar .brand b{
  font:inherit!important;
  letter-spacing:inherit!important;
}
.topbar .brand b{color:var(--chrome-lime)!important}
.topbar .brand:after{display:none!important}
.modal-brand{
  text-transform:uppercase!important;
  letter-spacing:-.055em!important;
  font-weight:1000!important;
}
.modal-brand b{color:var(--chrome-lime)!important}

/* Sikkerhed for sider med tidligere cached produktvælger. */
.topbar .padellab-suite-nav{display:none!important}

.topbar .top-actions{
  min-width:0;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:9px!important;
}
.topbar .account-state,
.topbar .top-actions>span,
.topbar #accountState{
  max-width:150px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--chrome-muted)!important;
  font-size:10px!important;
  font-weight:750!important;
}

.topbar .text-button,
.topbar .back,
.topbar .home-link,
.topbar .search-link{
  min-height:42px;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 4px!important;
  border:0!important;
  background:transparent!important;
  color:#a9bac9!important;
  text-decoration:none!important;
  font-size:13px!important;
  font-weight:850!important;
  line-height:1!important;
  box-shadow:none!important;
  -webkit-tap-highlight-color:transparent;
}

/* Hidden auth controls must stay hidden even though chrome uses !important display rules. */
.topbar .text-button.hidden,
.topbar .avatar.hidden{display:none!important}

.topbar .text-button:active,
.topbar .back:active,
.topbar .home-link:active,
.topbar .search-link:active{color:var(--chrome-lime)!important}

.topbar .avatar{
  flex:0 0 40px!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:linear-gradient(180deg,#e7ff94,#caff28)!important;
  color:#07111e!important;
  text-decoration:none!important;
  display:grid!important;
  place-items:center!important;
  font-size:14px!important;
  font-weight:950!important;
  box-shadow:0 9px 25px rgba(202,255,40,.12),inset 0 1px 0 rgba(255,255,255,.55)!important;
}

/* FOOTER / PRIMARY NAV ------------------------------------------------ */
.app-shell,.page-shell{
  padding-bottom:calc(104px + env(safe-area-inset-bottom))!important;
}

.bottom-nav{
  position:fixed!important;
  z-index:80!important;
  left:12px!important;
  right:12px!important;
  bottom:calc(10px + env(safe-area-inset-bottom))!important;
  width:auto!important;
  height:66px!important;
  min-height:66px!important;
  padding:5px 6px!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:stretch!important;
  transform:none!important;
  border:1px solid var(--chrome-line)!important;
  border-radius:21px!important;
  background:var(--chrome-bg)!important;
  box-shadow:0 20px 55px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.035)!important;
  backdrop-filter:blur(22px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(135%)!important;
  overflow:hidden!important;
}

/* Live er kontekstuelt i Padellab og må aldrig være et fast menupunkt. */
.bottom-nav>[data-nav="live"],
.bottom-nav>a[href*="padellab-live.vercel.app"]{display:none!important}

.bottom-nav>a,
.bottom-nav>button{
  min-width:0!important;
  min-height:54px!important;
  margin:0!important;
  padding:4px 2px!important;
  border:0!important;
  border-radius:15px!important;
  background:transparent!important;
  color:var(--chrome-muted)!important;
  text-decoration:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  font:inherit!important;
  cursor:pointer!important;
  box-shadow:none!important;
  -webkit-tap-highlight-color:transparent;
  transition:color .16s ease,background .16s ease,transform .16s ease!important;
}
.bottom-nav>a span,
.bottom-nav>button span{
  display:block!important;
  font-size:20px!important;
  line-height:18px!important;
  font-weight:500!important;
}
.bottom-nav>a b,
.bottom-nav>button b{
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:10px!important;
  line-height:12px!important;
  font-weight:800!important;
  letter-spacing:-.01em!important;
}
.bottom-nav>a.active,
.bottom-nav>button.active{
  color:var(--chrome-lime)!important;
  background:rgba(202,255,40,.055)!important;
}
.bottom-nav>a:active,
.bottom-nav>button:active{transform:scale(.96)!important}

/* Keep overlays above navigation. */
.modal-backdrop{z-index:200!important}
.toast{z-index:260!important}

/* A completed profile is no longer an onboarding metric on Home. */
@media(min-width:680px){
  .metric-grid.profile-complete{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Cross-document transitions keep internal routes feeling like one app where supported. */
@view-transition{navigation:auto}
.topbar{view-transition-name:padellab-header}
.bottom-nav{view-transition-name:padellab-nav}
main{view-transition-name:padellab-content}
::view-transition-old(padellab-content){animation:padellab-out .12s ease both}
::view-transition-new(padellab-content){animation:padellab-in .18s ease both}
@keyframes padellab-out{to{opacity:.35;transform:translateY(3px)}}
@keyframes padellab-in{from{opacity:.35;transform:translateY(4px)}}

/* Tournament finder: compact, scan-friendly mobile cards and safe date inputs. */
@media(max-width:679px){
  .finder-panel .date-row{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .finder-panel .date-row label,
  .finder-panel .date-row input{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }
  .finder-panel .date-row .reset{grid-column:auto!important}

  .tournament-list{gap:8px!important}
  .tournament-list .tournament-card{
    padding:12px!important;
    gap:10px!important;
    border-radius:17px!important;
  }
  .tournament-list .card-top{gap:10px!important}
  .tournament-list .card-title{font-size:17px!important;line-height:1.08!important}
  .tournament-list .card-place{font-size:11px!important;margin-top:4px!important}
  .tournament-list .favorite-btn{
    width:38px!important;
    height:38px!important;
    border-radius:12px!important;
    font-size:19px!important;
  }
  .tournament-list .info-grid{
    grid-template-columns:1fr 1.35fr!important;
    gap:7px!important;
    padding-top:9px!important;
    border-top:1px solid rgba(158,183,211,.1)!important;
  }
  .tournament-list .info{
    border:0!important;
    background:transparent!important;
    padding:0!important;
    border-radius:0!important;
  }
  .tournament-list .info:nth-child(3){grid-column:1/-1!important}
  .tournament-list .info:nth-child(4){display:none!important}
  .tournament-list .info-label{font-size:8px!important}
  .tournament-list .info-value{font-size:11px!important;margin-top:2px!important;line-height:1.3!important}
  .tournament-list .class-row{gap:4px!important}
  .tournament-list .class-pill{padding:5px 7px!important;font-size:9px!important}
  .tournament-list .class-pill:nth-child(n+4){display:none!important}
  .tournament-list .card-actions{display:block!important}
  .tournament-list .details-button{display:none!important}
  .tournament-list .card-link{
    min-height:39px!important;
    border-radius:11px!important;
    padding:0 11px!important;
    font-size:12px!important;
  }
}

@media(max-width:430px){
  .topbar{min-height:64px!important}
  .topbar .brand{font-size:21px!important}
  .topbar .account-state,
  .topbar .top-actions>span,
  .topbar #accountState{display:none!important}
  .topbar .back span{display:none}
  .bottom-nav{left:9px!important;right:9px!important;bottom:calc(8px + env(safe-area-inset-bottom))!important}
}

@media(min-width:680px){
  .topbar{min-height:78px!important}
  .app-shell,.page-shell{padding-bottom:120px!important}
  .bottom-nav{
    left:50%!important;
    right:auto!important;
    bottom:18px!important;
    width:min(640px,calc(100vw - 40px))!important;
    height:68px!important;
    transform:translateX(-50%)!important;
    border-radius:22px!important;
  }
  .bottom-nav>a:hover,
  .bottom-nav>button:hover{color:#dce5ed!important;background:rgba(255,255,255,.035)!important}
  .bottom-nav>a.active:hover,
  .bottom-nav>button.active:hover{color:var(--chrome-lime)!important;background:rgba(202,255,40,.07)!important}
}