:root{
  --bg:#000000;
  --panel:#0b0c0f;
  --panel2:#10151c;
  --line:rgba(255,255,255,.10);

  --text:#ffffff;
  --muted:rgba(255,255,255,.70);

  --celeste:#43b5ff;
  --viola:#b06cff;
  --giallo:#ffd400;

  --green:#2ecc71;
  --red:#ff3b30;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

/* TOP BAR */
.top,
.topbar{
  position:sticky; top:0; z-index:10;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}
.top-inner,
.topbar-inner{
  max-width:1100px;
  margin:0 auto;
  padding:12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap; /* Admin sempre in alto a destra */
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;}
.brand img{width:44px;height:44px;object-fit:contain;}
.brand-text{min-width:0;line-height:1.1}
.brand-text .title{font-weight:900;letter-spacing:.6px;text-transform:uppercase;}
.brand-text .subtitle{color:var(--muted);font-size:13px;margin-top:2px}

/* Admin button right */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:12px;
  border:1px solid var(--line);
  background:#0f1218;
  color:var(--text);
  text-decoration:none;
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
  white-space:nowrap;
}
.btn:hover{border-color:rgba(255,255,255,.22);}

/* Mobile: recupero spazio nel topbar (logo sx, ADMIN dx) */
@media (max-width: 480px){
  .brand img{width:38px;height:38px;}
  .brand-text .title{font-size:14px;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62vw;}
  .brand-text .subtitle{font-size:12px;}
  .btn{padding:8px 10px;border-radius:10px;font-size:12px;}
}

.container{max-width:1100px;margin:0 auto;padding:14px 12px 28px;}
.hero{padding:6px 0 10px;}
.hero h1{margin:0;font-size:22px;letter-spacing:.6px;text-transform:uppercase;}
.hero-sub{margin-top:6px;color:var(--muted);}

/* Mobile: recupera spazio eliminando il titolo duplicato */
@media (max-width: 480px){
  .hero{padding:0;}
  .hero h1{display:none;}
}

/* Tools */
.tools{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  justify-content:space-between;
}
.search{
  flex:1;
  min-width:240px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0f1218;
  color:var(--text);
  font-weight:700;
  outline:none;
}
.search::placeholder{color:rgba(255,255,255,.55);}
.search:focus{border-color:rgba(67,181,255,.45); box-shadow:0 0 0 3px rgba(67,181,255,.12);}

select, .select{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0f1218;
  color:var(--text);
  font-weight:800;
}

/* Cards */
.card{
  margin-top:12px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
}
.table-wrap{overflow:auto;}

/* Table */
#rank{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}

/* PUNTI column: keep it compact (auto width) */
#rank thead th:nth-child(7),
#rank tbody td:nth-child(7){
  width:1%;
  white-space:nowrap;
  text-align:right;
}
#rank thead th{
  background:var(--panel2);
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size:12px;
  padding:10px 10px;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:68px;
  z-index:2;
}
#rank tbody td{
  padding:10px 10px;
  border-bottom:1px solid var(--line);
  color:var(--text);
}
#rank tbody tr:nth-child(even){background:rgba(255,255,255,.02);}
#rank tbody tr:hover{background:rgba(255,255,255,.04);}

/* Column colors */
#rank thead th:nth-child(1),
#rank tbody td:nth-child(1){ color: var(--celeste); font-weight:900; }

#rank thead th:nth-child(2),
#rank thead th:nth-child(3),
#rank thead th:nth-child(4),
#rank thead th:nth-child(5){ color: var(--celeste); }

#rank tbody td:nth-child(2),
#rank tbody td:nth-child(3),
#rank tbody td:nth-child(4),
#rank tbody td:nth-child(5){ color: var(--text); }

#rank thead th:nth-child(7),
#rank thead th:nth-child(8){ color: var(--viola); }

#rank tbody td:nth-child(7),
#rank tbody td:nth-child(8){ color: var(--giallo); font-weight:900; }

/* Status badges */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.3px;
  border:1px solid rgba(255,255,255,.16);
  background:#0f1218;
  white-space:nowrap;
}
.badge.ok{
  color:#dbffe8;
  border-color:rgba(46,204,113,.45);
  background:rgba(46,204,113,.10);
}
.badge.warn{
  color:#ffe6e3;
  border-color:rgba(255,59,48,.55);
  background:rgba(255,59,48,.12);
}

/* bottom explanations (if present) */
.explain{
  margin-top:14px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
}
.explain h2{margin:0 0 8px; font-size:14px; text-transform:uppercase; letter-spacing:.6px;}
.explain ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.45;}
.explain b{color:var(--text);}

/* Responsive: 1 row per record */
@media (max-width: 720px){
  /* Mobile: mostra solo la classifica (niente filtri/ricerca/spiegazioni) */
  .tools{display:none !important;}
  main .hero-sub{display:none !important;}
  .card{margin-top:0;}
  .container{padding-top:10px;}

  #rank{min-width:0;}
  #rank thead th{top:64px;}
  /* hide less useful columns to keep single line */
  #rank th:nth-child(2), #rank td:nth-child(2), /* Tessera */
  #rank th:nth-child(5), #rank td:nth-child(5), /* Città */
  #rank th:nth-child(9), #rank td:nth-child(9)  /* Raduni validati */
  { display:none; }

  #rank tbody td, #rank thead th{ padding:9px 8px; }
  #rank tbody td{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #rank tbody td:nth-child(3){ max-width:160px; } /* Nome */
  #rank tbody td:nth-child(4){ max-width:140px; } /* Club */
}

/* extra small */
@media (max-width: 420px){
  /* Keep CLUB visible on smartphone */
  #rank th:nth-child(4), #rank td:nth-child(4){ display:table-cell !important; }
  /* reduce font slightly to fit: Posizione, Nome, Club, Punti */
  #rank thead th{ font-size:11px; }
  #rank tbody td{ font-size:13px; }
  #rank tbody td:nth-child(3){ max-width:220px; }
}



/* FIX: intestazione tabella sempre sopra la prima riga (non sticky) */
#rank thead{display:table-header-group;}
#rank thead th{position:static !important; top:auto !important;}



/* MOBILE PRIORITY: mostra solo Posizione, Nome, Club, Punteggio */
@media (max-width: 720px){
  /* nascondi: Tessera(2), Città(5), Stato(6), KM(8), Raduni validati(9) */
  #rank th:nth-child(2), #rank td:nth-child(2),
  #rank th:nth-child(5), #rank td:nth-child(5),
  #rank th:nth-child(6), #rank td:nth-child(6),
  #rank th:nth-child(8), #rank td:nth-child(8),
  #rank th:nth-child(9), #rank td:nth-child(9){
    display:none !important;
  }

  /* riga singola + ellissi */
  #rank td:nth-child(3), /* Nome */
  #rank td:nth-child(4){ /* Club */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #rank td:nth-child(3){max-width:200px;}
  #rank td:nth-child(4){max-width:160px;}
  #rank td{white-space:nowrap;}
}
@media (max-width: 420px){
  #rank td:nth-child(3){max-width:170px;}
  #rank td:nth-child(4){max-width:120px;}
}

/* Footer author (optional) */
.footer .footer-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer .footer-left{
  flex:1;
}
.footer .footer-author{
  margin-left:auto;
  font-size:13px;
  opacity:.85;
  text-align:right;
  white-space:nowrap;
}
.footer .footer-author a{
  color:inherit;
  text-decoration:underline;
}

@media (max-width: 520px){
  /* se manca spazio, va a capo ma resta allineato a destra */
  .footer .footer-row{flex-wrap:wrap;}
  .footer .footer-author{white-space:normal; width:100%; text-align:right;}
}