/* ==========================================
RESET & BASE
========================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html {
scroll-behavior: smooth;
}

body {
min-height: 100vh;
background-color: #0f0f0f;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 800' preserveAspectRatio='none'%3E%3Cg stroke='rgba(243,178,4,0.4)' stroke-width='3.5' fill='none'%3E%3C!-- Linea di metà campo --%3E%3Cline x1='500' y1='0' x2='500' y2='800'/%3E%3C!-- Cerchio di centrocampo --%3E%3Ccircle cx='500' cy='400' r='90'/%3E%3Ccircle cx='500' cy='400' r='4' fill='rgba(243,178,4,0.4)'/%3E%3C!-- Area di rigore Sinistra --%3E%3Crect x='0' y='180' width='160' height='440'/%3E%3C!-- Area piccola Sinistra --%3E%3Crect x='0' y='280' width='60' height='240'/%3E%3C!-- Dischetto e Mezzaluna Sinistra --%3E%3Ccircle cx='110' cy='400' r='4' fill='rgba(243,178,4,0.4)'/%3E%3Cpath d='M 160 338 A 80 80 0 0 1 160 462'/%3E%3C!-- Area di rigore Destra --%3E%3Crect x='840' y='180' width='160' height='440'/%3E%3C!-- Area piccola Destra --%3E%3Crect x='940' y='280' width='60' height='240'/%3E%3C!-- Dischetto e Mezzaluna Destra --%3E%3Ccircle cx='890' cy='400' r='4' fill='rgba(243,178,4,0.4)'/%3E%3Cpath d='M 840 338 A 80 80 0 0 0 840 462'/%3E%3C/g%3E%3C/svg%3E"),
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
repeating-linear-gradient(90deg, #141414, #141414 90px, #0f0f0f 90px, #0f0f0f 180px);
background-size: 100% 100%, cover, auto;
background-attachment: fixed;
color: #e2d9c2;
}

/* ==========================================
HEADER
========================================== */
header {
background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
color: white;
text-align: center;
padding: 2.5rem 1rem;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
border-bottom: 6px solid #d4af37;
position: relative;
z-index: 2;
}

header h1 {
font-size: 2.5rem;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 900;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
color: #f5f0e1;
}

header p {
margin-top: 8px;
opacity: 0.95;
font-size: 1.1rem;
color: #e2d9c2;
}

header a {
color: #facc15;
text-decoration: underline;
font-weight: bold;
}

/* ==========================================
MAIN & SEZIONI (BOX NERI OPACHI / GRIGIO TOPO)
========================================== */
main {
max-width: 1100px;
margin: 2.5rem auto;
padding: 0 1rem;
position: relative;
z-index: 2;
}

section {
background: #242424;
border-radius: 16px;
padding: 2.5rem;
margin-bottom: 2.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.05);
color: #e2d9c2;
}

h2 {
text-align: center;
color: #f5f0e1;
margin-bottom: 2rem;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 800;
}

h3 {
margin-bottom: 1.2rem;
padding-bottom: 8px;
border-bottom: 3px solid #d4af37;
color: #d4af37;
font-size: 1.3rem;
text-transform: uppercase;
}

/* ==========================================
GIRONI & TABELLE
========================================== */
.gironi-container {
display: flex;
flex-direction: column;
gap: 2.5rem;
}

@media(min-width: 768px) {
.gironi-container {
flex-direction: row;
}
.girone {
flex: 1;
}
}

.table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 10px;
}

table {
width: 100%;
border-collapse: collapse;
text-align: center;
white-space: nowrap;
}

.text-left {
text-align: left !important;
}

th {
background: #151515;
color: #d4af37;
font-size: 0.85rem;
padding: 12px 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid #d4af37;
}

td {
padding: 11px 10px;
background: #2a2a2a;
color: #f5f0e1;
border-bottom: 1px solid #333;
font-size: 0.95rem;
}

tr:nth-child(even) td {
background: #242424;
}

tr:hover td {
background: #363636;
}

/* COLONNA GOL GIALLO ORO */
table td:nth-child(3), 
table th:nth-child(3) {
color: #facc15 !important;
font-weight: bold;
}

/* FORZA IL TESTO A NERO DENTRO TUTTI I BOX BIANCHI (COME IL BOX MVP) */
div[style*="background: white"] *, 
div[style*="background:white"] *, 
div[style*="background: #fff"] *, 
div[style*="background:#fff"] *,
div[style*="background-color: white"] *, 
div[style*="background-color:white"] *, 
div[style*="background-color: #fff"] *, 
div[style*="background-color:#fff"] * {
color: #121212 !important;
}

.qualificato {
background: #3b2f15 !important;
color: #facc15 !important;
font-weight: bold;
}

.secondo {
background: #333333 !important;
color: #d4af37 !important;
font-weight: bold;
}

/* ==========================================
MENU A SCORRIMENTO INTERNO PARTITE
========================================== */
#lista-partite-pubbliche,
#lista-partite-storico,
#admin-partite {
max-height: 400px;
overflow-y: auto;
padding-right: 8px;
}

#lista-partite-pubbliche::-webkit-scrollbar,
#lista-partite-storico::-webkit-scrollbar,
#admin-partite::-webkit-scrollbar {
width: 6px;
}

#lista-partite-pubbliche::-webkit-scrollbar-track,
#lista-partite-storico::-webkit-scrollbar-track,
#admin-partite::-webkit-scrollbar-track {
background: #1a1a1a;
border-radius: 4px;
}

#lista-partite-pubbliche::-webkit-scrollbar-thumb,
#lista-partite-storico::-webkit-scrollbar-thumb,
#admin-partite::-webkit-scrollbar-thumb {
background: #d4af37;
border-radius: 4px;
}

/* Card Partite Standard */
.partita-card {
background: #2c2c2c;
border: 1px solid #3a3a3a;
border-left: 6px solid #d4af37;
border-radius: 12px;
padding: 15px;
margin-bottom: 15px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.partita-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0,0,0,0.5);
border-color: #555;
}

.partita-card h4 {
color: #d4af37;
font-size: 0.95rem;
margin-bottom: 10px;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.5px;
}

.squadre {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
font-size: 1rem;
margin-bottom: 6px;
color: #f5f0e1;
}

.risultato {
font-size: 1.1rem;
color: #facc15;
background: #151515;
padding: 2px 8px;
border-radius: 6px;
border: 1px solid #3b2f15;
}

/* ==========================================
FASI FINALI & TABELLONE
========================================== */
.fasi-finali-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}

#fasi-finali .partita-card h4 {
font-size: 1.15rem;
font-weight: 800;
margin-bottom: 14px;

}

#fasi-finali .squadre {
font-size: 1.2rem;
}

#fasi-finali .risultato {
font-size: 1.35rem;
padding: 4px 12px;
}

#fasi-finali .squadre span[style*="font-size"] {
font-size: 0.95rem !important;
}

/* ==========================================
BOTTONI E INPUT
========================================== */
button {
cursor: pointer;
border: none;
border-radius: 8px;
padding: 10px 18px;
background: #d4af37;
color: #121212;
font-weight: 800;
text-transform: uppercase;
font-size: 0.85rem;
transition: background 0.2s, transform 0.1s;
}

button:hover {
background: #e6be47;
transform: translateY(-1px);
}

input[type="text"], input[type="number"], select {
padding: 10px;
background: #2a2a2a;
color: #f5f0e1;
border: 1px solid #444;
border-radius: 8px;
font-size: 0.95rem;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input::placeholder {
color: #888;
}

input:focus, select:focus {
border-color: #d4af37;
background: #333;
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.25);
}

/* ==========================================
FOOTER
========================================== */
footer {
text-align: center;
padding: 2.5rem;
font-weight: bold;
color: white;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
position: relative;
z-index: 2;
}
/* ==========================================
   NASCONDI FRECCETTE DA INPUT NUMBER
   ========================================== */
/* Per Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Per Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}
/* ==========================================
👑 OTTIMIZZAZIONE PER SMARTPHONE
========================================== */
@media (max-width: 768px) {
body {
background-color: #0f0f0f;
background-image:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
repeating-linear-gradient(0deg, #141414, #141414 50px, #0f0f0f 50px, #0f0f0f 100px);
background-size: cover;
}

main {
margin: 1rem auto;
padding: 0 10px;
}

section {
padding: 1rem;
border-radius: 14px;
margin-bottom: 1rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

header {
padding: 1.5rem 1rem;
border-bottom: 4px solid #d4af37;
}

header h1 {
font-size: 1.5rem;
}

h2 {
font-size: 1.25rem;
margin-bottom: 1rem;
}

@media(min-width: 768px) {
  .gironi-container {
    flex-direction: column; /* Trasforma la riga in colonna */
  }
  .girone {
    flex: 1;
  }
  
}

.girone {
flex: 0 0 90%;
scroll-snap-align: center;
}

#lista-partite-pubbliche,
#lista-partite-storico,
#admin-partite {
max-height: 50vh;
}

.partita-card {
padding: 10px 12px;
margin-bottom: 10px;
}

button, select, input[type="text"], input[type="number"] {
padding: 12px;
font-size: 1rem;
}

#crea-partita-manuale select,
#crea-partita-manuale input,
#gestione-squadre input,
#gestione-squadre select,
#pannello-admin button {
width: 100%;
margin-bottom: 8px;
}
}

/* ==========================================
   SISTEMA A SCHEDE (TABS)
   ========================================== */
.tabs-container {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.tab-btn {
  background: #1a1a1a;
  color: #e2d9c2;
  border: 2px solid #333;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
  text-transform: uppercase;
}

.tab-btn:hover {
  background: #2a2a2a;
  border-color: #d4af37;
}

.tab-btn.active {
  background: #d4af37;
  color: #121212;
  border-color: #d4af37;
}

/* Effetto di transizione morbida al cambio scheda */
.scheda-content {
  animation: fadeInScheda 0.4s ease;
}

@keyframes fadeInScheda {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Contenitore principale delle fasi finali con scorrimento */
#fasi-finali {
    max-height: 500px;        /* Altezza massima prima di attivare lo scroll verticale */
    overflow-y: auto;         /* Attiva lo scroll verticale se i contenuti sono troppi */
    overflow-x: auto;         /* Attiva lo scroll orizzontale se le colonne escono dallo schermo */
    padding: 10px;
    border-radius: 8px;
}

/* Personalizzazione della barra di scorrimento (opzionale, per renderla più elegante) */
#fasi-finali::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

#fasi-finali::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#fasi-finali::-webkit-scrollbar-thumb {
    background: #d4af37;
    border-radius: 4px;
}

#fasi-finali::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/* Contenitore delle statistiche (es. Area Admin o vista pubblica) */
#admin-statistiche {
    max-height: 450px;
    overflow-y: scroll; /* 'scroll' forza la barra a rimanere sempre visibile */
    overflow-x: auto;
    padding-right: 5px; /* Evita che il contenuto si sovrapponga alla barra */
}

.table-scroll-container {
    max-height: 280px;
    overflow-y: auto !important;
    overflow-x: auto !important;
    
    /* CAMBIA DA 'contain' A 'auto': in questo modo, arrivato in fondo, lo scroll passa alla pagina principale */
    overscroll-behavior-y: auto !important; 
    
    scrollbar-width: auto !important;
    scrollbar-color: #ffffff #2a2a2a !important;
    -webkit-overflow-scrolling: touch;
}

.table-scroll-container::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    display: block !important;
}

.table-scroll-container::-webkit-scrollbar-track {
    background: #2a2a2a !important;
    border-radius: 5px !important;
}

.table-scroll-container::-webkit-scrollbar-thumb {
    background: #145214 !important;
    border-radius: 5px !important;
}

.table-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #1e701e !important;
}
/* Impedisce ai box con scroll nell'admin di "intrappolare" o bloccare lo scroll della pagina */
#admin-partite,
#lista-partite-correnti,
#admin-statistiche,
.table-scroll-container {
    overscroll-behavior-y: contain; /* Evita il rimbalzo e il blocco del browser */
    -webkit-overflow-scrolling: touch; /* Rende lo scroll fluido su dispositivi mobili */
}