/* Mobile navigation: consistent icon-only bottom bar across every page */
.nav-item[data-view="dashboard"]::before{content:"⌂"}
.nav-item[data-view="players"]::before{content:"♟"}
.nav-item[data-view="games"]::before{content:"⚽"}
.nav-item[data-view="finance"]::before{content:"€"}
.nav-item[data-view="admin"]::before{content:"⚙"}

.nav-item::before{
  display:inline-grid;
  place-items:center;
  width:18px;
  margin-right:7px;
  font-size:15px;
  line-height:1;
  font-weight:900;
}

@media(max-width:720px){
  html,body{overflow-x:hidden}
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
  #app{min-height:100vh;padding-bottom:0}
  .container{padding:15px 12px calc(92px + env(safe-area-inset-bottom))}

  .nav{
    position:fixed !important;
    left:10px !important;
    right:10px !important;
    bottom:calc(10px + env(safe-area-inset-bottom)) !important;
    width:auto !important;
    height:62px !important;
    z-index:1000 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-around !important;
    gap:4px !important;
    margin:0 !important;
    padding:6px !important;
    background:rgba(255,255,255,.97) !important;
    border:1px solid #d8e5dc !important;
    border-radius:18px !important;
    box-shadow:0 12px 34px rgba(7,27,18,.18),0 2px 8px rgba(7,27,18,.07) !important;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }

  .nav-item{
    flex:1 1 0 !important;
    min-width:0 !important;
    width:auto !important;
    height:50px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:13px !important;
    display:grid !important;
    place-items:center !important;
    color:#617168 !important;
    font-size:0 !important;
    line-height:1 !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:none !important;
    transition:background .15s ease,color .15s ease,transform .15s ease;
  }

  .nav-item::before{
    width:auto !important;
    margin:0 !important;
    font-size:20px !important;
    line-height:1 !important;
  }

  .nav-item:hover{background:#f1f6f2 !important}
  .nav-item.active{
    background:#e7f7ec !important;
    color:#126733 !important;
    border:1px solid #ccebd4 !important;
    box-shadow:none !important;
  }

  .nav-item:active{transform:scale(.94) !important}

  /* Finance uses wider cards/tables; keep them inside the viewport so they
     cannot affect the fixed navigation bar's horizontal positioning. */
  .finance-toolbar,.finance-stats,.finance-card,.finance-outlook,.forecast-list{max-width:100%;min-width:0}
  .finance-toolbar{margin-left:0;margin-right:0;border-radius:15px}
  .finance-card{overflow:hidden}
  .finance-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media(min-width:721px){
  .nav-item{display:inline-flex;align-items:center}
}

.players-count{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-top:7px;
  padding:4px 9px;
  border-radius:999px;
  background:#e7f7ec;
  border:1px solid #ccebd4;
  color:#126733;
  font-size:11px;
  font-weight:850;
}