/* ==========================================
   TAVOLOZZE DEI COLORI (VARIABILI CSS)
   ========================================== */
:root {
    /* Colori Costanti */
    --color-blue: #007bff;
    --color-blue-hover: #0056b3;
    --color-green: #28a745;
    --color-green-hover: #218838;
    --color-emerald: #10b981;
    --color-emerald-hover: #059669;
    --color-orange: #f97316;
    --color-amber: #f59e0b;
    --color-amber-hover: #d97706;
    --color-red: #dc3545;
    --color-red-hover: #bd2130;
    --color-sky: #38bdf8;
    --color-yellow-rank: #eab308;

    /* Assegnazione condizionale Light / Dark tramite PHP */
            /* TEMA LIGHT */
        --bg-body: #f4f6f9;
        --bg-box: #ffffff;
        --bg-navbar: #1e293b;
        --bg-secondary: #f1f5f9;
        --bg-secondary-hover: #e2e8f0;
        --border-color: #cbd5e1;
        --text-main: #333333;
        --text-muted: #64748b;
        --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

        --bg-admin-panel: #ecfdf5;
        --border-admin-panel: #a7f3d0;
        --text-admin-panel-title: #065f46;

        /* Specifiche Light per Layout Pronostici/Classifica e Strutture Torneo */
        --bg-official-score: #e2e8f0;
        --text-official-score: #1e293b;
        --border-match-row: #f1f5f9;
        --bg-server-badge: #334155;
        
        --bg-section-box: #ffffff;
        --bg-playoff-stage: #f8fafc;
        --bg-playoff-card: #ffffff;
        --bg-table-th: #f8fafc;
        --text-winner: #0284c7;
        --bg-row-qualify: rgba(56, 189, 248, 0.05);
    }

/* ==========================================
   STILI STRUTTURALI E RESET UNIFICATI
   ========================================== */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-body);
    color: var(--text-main);
    transition: background-color 0.3s, color 0.3s;
}

h2 {
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
    margin-top: 0;
    color: var(--text-main);
}

/* Contenitori Generali */
.main-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.container {
    max-width: 650px;
    background: var(--bg-box);
    padding: 25px;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    margin: 0 auto;
}

.box {
    max-width: 850px;
    background: var(--bg-box);
    padding: 30px;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
}

.welcome-box {
    background: var(--bg-box);
    padding: 25px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    margin-bottom: 30px;
}

.welcome-box h1 {
    margin: 0 0 10px 0;
    font-size: 28px;
    color: var(--text-main);
}

.content {
    padding: 40px;
    text-align: center;
}

/* ==========================================
   NUOVO LAYOUT AFFIANCATO (DASHBOARD / PRONOSTICI)
   ========================================== */
.layout {
    display: flex;
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Colonna Principale Partite */
.col-matches {
    flex: 2;
    background: var(--bg-box);
    padding: 25px;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
}

/* Colonna Laterale Classifica */
.col-ranking {
    flex: 1;
    background: var(--bg-box);
    padding: 25px;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    height: fit-content;
}

/* Riga singolo Match */
.match-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-match-row);
}

.match-info {
    flex: 1;
    font-size: 12px;
    color: var(--text-muted);
}

.match-teams {
    flex: 2;
    font-size: 16px;
    font-weight: bold;
    padding: 0 10px;
    color: var(--text-main);
}

/* Input Punteggi e Risultati Ufficiali */
.match-inputs-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.match-inputs {
    display: flex;
    gap: 5px;
    align-items: center;
}

.match-inputs input {
    width: 45px;
    padding: 6px;
    text-align: center;
    font-size: 16px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-body);
    color: var(--text-main);
}

.official-score {
    background: var(--bg-official-score);
    color: var(--text-official-score);
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: bold;
    margin-bottom: 2px;
}

.points-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 800; /* Testo molto marcato */
    padding: 4px 10px;
    
    /* SFONDO PIÙ CHIARO: Verde semitrasparente (15% di opacità) */
    background-color: rgba(16, 185, 129, 0.15); 
    
    /* TESTO BEN VISIBILE: Verde acceso e saturo */
    color: #10b981; 
    
    /* BORDO MARCATO: Spesso 2px dello stesso colore del testo */
    border: 2px solid #10b981; 
    
    border-radius: 20px;
    margin-left: 8px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nopoints-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 800; /* Testo molto marcato */
    padding: 4px 10px;
    
    /* SFONDO PIÙ CHIARO: Rosso semitrasparente (15% di opacità) */
    background-color: rgba(239, 68, 68, 0.15); 
    
    /* TESTO BEN VISIBILE: Rosso acceso e saturo */
    color: #ef4444; 
    
    /* BORDO MARCATO: Spesso 2px dello stesso colore del testo */
    border: 2px solid #ef4444; 
    
    border-radius: 20px;
    margin-left: 8px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tabella Ranking/Classifica */
.rank-table {
    width: 100%;
    border-collapse: collapse;
}

.rank-table th, .rank-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
}

/* Evidenziazione primo in classifica */
.rank-table tr:first-child td {
    font-weight: bold;
    color: var(--color-yellow-rank);
}

/* Server Time Badge */
.datetime-container {
    display: inline-flex;
    gap: 8px;
    margin-top: 5px;
}

.server-time-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(8px);
    font-family: 'Courier New', Courier, monospace;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    border: 1px solid rgba(71, 85, 105, 0.5);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.5px;
}

/* Date specific color styling */
.date-badge {
    color: #94a3b8; /* Muted silver-grey */
}

/* Time specific color styling */
.time-badge {
    color: #f8fafc;
}

#live-server-time {
    color: #38bdf8; /* Vibrant light blue */
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

/* Live pulsing dot */
.live-dot {
    width: 6px;
    height: 6px;
    background-color: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 8px #22c55e;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.5; }
    50% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.5; }
}

/* ==========================================
   BARRA DI NAVIGAZIONE (NAVBAR)
   ========================================== */
.navbar {
    background-color: var(--bg-navbar);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar .logo {
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
    color: var(--color-sky);
}

.navbar .user-menu, 
.navbar .user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ==========================================
   ELEMENTI DEI FORM E INPUT GENERALI
   ========================================== */
.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
    color: var(--text-main);
}

input[type="text"], 
input[type="number"], 
input[type="datetime-local"], 
select {
    width: 100%;
    padding: 10px;
   
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-box);
    color: var(--text-main);
}

.input-score {
    width: 50px !important;
    text-align: center;
    padding: 5px;
    margin: 0 3px;
    display: inline-block;
}

.vs-label {
    font-weight: bold;
    color: var(--text-main);
}

.form-creazione {
    background: var(--bg-secondary);
    padding: 20px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    margin-top: 15px;
}

.select-box-admin {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 25px;
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.select-box-admin select {
    margin-bottom: 0;
}

.fase-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    background: var(--bg-secondary);
    padding: 10px;
    border-radius: 4px;
    align-items: center;
}

/* ==========================================
   BOTTONI E COMPONENTI INTERATTIVI
   ========================================== */
button, .btn, .btn-submit {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    transition: background-color 0.2s, color 0.2s;
}

button, .btn-submit {
    width: 100%; 
}

/* Varianti pulsanti submit */
.btn-submit {
    background: var(--color-blue);
    color: white;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 6px;
    margin-top: 20px;
}
.btn-submit:hover {
    background: var(--color-blue-hover);
}

.btn-primary {
    background-color: var(--color-green);
    color: white;
}
.btn-primary:hover {
    background-color: var(--color-green-hover);
}

.btn-secondary {
    background-color: var(--color-blue);
    color: white;
}
.btn-secondary:hover {
    background-color: var(--color-blue-hover);
}

.btn-blue {
    background-color: var(--color-blue);
    color: white;
}
.btn-blue:hover {
    background-color: var(--color-blue-hover);
}

.btn-green {
    background-color: var(--color-green);
    color: white;
    width: auto;
    padding: 10px 25px;
}
.btn-green:hover {
    background-color: var(--color-green-hover);
}

.btn-login {
    background-color: var(--color-blue);
    color: white;
}

.btn-logout {
    background-color: var(--color-red);
    color: white;
}
.btn-logout:hover {
    background-color: var(--color-red-hover);
}

.btn-admin {
    background-color: var(--color-emerald);
    color: white;
}
.btn-admin:hover {
    background-color: var(--color-emerald-hover);
}

.btn-danger {
    background-color: var(--color-red);
    color: white;
    padding: 8px 12px;
}
.btn-danger:hover {
    background-color: var(--color-red-hover);
}

.btn-edit {
    background-color: var(--color-amber);
    color: white;
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 4px;
}
.btn-edit:hover {
    background-color: var(--color-amber-hover);
}

.btn-delete-inline {
    background-color: var(--color-red);
    color: white;
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 4px;
    width: auto;
    margin-bottom: 0;
}
.btn-delete-inline:hover {
    background-color: var(--color-red-hover);
}

.btn-filter {
    background-color: var(--bg-secondary-hover);
    color: var(--text-main);
    padding: 10px 15px;
    margin-bottom: 0;
    margin-top: 0;
    width: auto;
}
.btn-filter:hover {
    background-color: var(--border-color);
}

.btn-action {
    background-color: var(--color-blue);
    color: white;
    margin-top: 15px;
}
.btn-action:hover {
    background-color: var(--color-blue-hover);
}

/* ==========================================
   PANNELLO AMMINISTRATIVO QUICK LINKS
   ========================================== */
.admin-panel {
    background: var(--bg-admin-panel);
    border: 1px solid var(--border-admin-panel);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.admin-panel h3 {
    margin-top: 0;
    color: var(--text-admin-panel-title);
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.btn-admin-nav {
    background: var(--color-emerald);
    color: white;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
}
.btn-admin-nav:hover {
    background: var(--color-emerald-hover);
}

/* ==========================================
   TABELLE (ES: CALENDARIO PARTITE)
   ========================================== */
.table-partite {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom: 15px;
}

.table-partite th, 
.table-partite td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.table-partite th {
    background-color: var(--bg-secondary);
    color: var(--text-main);
}

.actions-cell {
    white-space: nowrap;
    width: 130px;
}

/* ==========================================
   COMPONENTI MINORI (BADGES & CARDS)
   ========================================== */
.mode-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
    background-color: var(--bg-secondary);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

.top-link {
    display: inline-block;
    margin-bottom: 20px;
    color: var(--color-blue);
    text-decoration: none;
    font-weight: bold;
}

.section-title {
    font-size: 22px;
    color: var(--text-main);
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 8px;
}

/* Griglia e Schede Torneo */
.grid-tornei {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.card-torneo {
    background: var(--bg-box);
    border-radius: 10px;
    padding: 20px;
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.card-torneo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
}

.card-calcio::before { background-color: var(--color-green); }
.card-hockey::before { background-color: var(--color-sky); }
.card-basket::before { background-color: var(--color-orange); }

.badge-sport {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.card-torneo h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
    color: var(--text-main);
}

.card-torneo .anno {
    font-size: 14px;
    color: var(--text-muted);
}

.no-data {
    text-align: center;
    padding: 40px;
    background: var(--bg-box);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 16px;
    border: 1px dashed var(--border-color);
}


/* ==========================================================================
   NUOVE AGGIUNTE - SPECIFICHE STRUTTURE PER FILE VISUALIZZA-TORNEO.PHP
   ========================================================================== */

/* Layout Intestazione dell'Hub */
.hub-header {
    background: var(--bg-navbar);
    padding: 15px;
    color: white;
    text-align: center;
}
.hub-header h1 {
    margin: 0;
}
.navigation-back {
    margin-top: 8px;
}
.navigation-back a {
    color: var(--color-sky);
    text-decoration: none;
    font-size: 14px;
}

/* Layout Principale a Due Colonne Asimmetriche */
.layout-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}
.col-left {
    display: flex;
    flex-direction: column;
}
.col-right {
    display: flex;
    flex-direction: column;
}

/* Nuovi Box Contenitori di Sezione del Torneo */
.section-box {
    background: var(--bg-section-box);
    border-radius: 8px;
    padding: 20px;
    box-shadow: var(--box-shadow);
    margin-bottom: 25px;
    border: 1px solid var(--border-color);
}

/* Griglia e Tabelle di visualizzazione dei Gironi */
.grid-gironi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 15px;
}
.girone-wrapper {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    background: var(--bg-box);
}
.girone-title {
    margin-top: 0;
    font-size: 15px;
    color: var(--text-main);
}
.table-girone {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: center;
}
.table-girone th {
    background: var(--bg-table-th);
    color: var(--text-muted);
    padding: 8px;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
}
.table-header-left {
    text-align: left !important;
}
.table-girone td {
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
}
/* Evidenziazione righe di qualificazione automatica */
.table-girone tr:nth-child(-n+2) td {
    background-color: var(--bg-row-qualify);
}
.team-cell-left {
    text-align: left;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}
.points-cell {
    font-weight: bold;
    color: var(--color-sky);
}

/* Differenza Reti Dinamica e Colorata */
.diff-cell {
    font-weight: 500;
}
.diff-positive { color: var(--color-emerald); }
.diff-negative { color: var(--color-red); }
.diff-neutral { color: var(--text-muted); }

/* Bandiere e Stemmi Squadra */
.girone-flag {
    width: 20px;
    border-radius: 2px;
}
.playoff-flag {
    width: 16px;
    margin-right: 4px;
    vertical-align: middle;
}
.flag-img {
    width: 28px;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* Tabellone Fasi Finali ad Eliminazione Diretta (Playoff) */
.playoff-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
}
.playoff-stage {
    flex: 1;
    min-width: 240px;
    background: var(--bg-playoff-stage);
    border-radius: 6px;
    padding: 12px;
    border: 1px solid var(--border-color);
}
.playoff-stage h4 {
    margin: 0 0 10px 0;
    color: var(--text-main);
    font-size: 14px;
    border-bottom: 2px solid var(--color-sky);
    padding-bottom: 4px;
}
.playoff-match-card {
    background: var(--bg-playoff-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    box-shadow: var(--box-shadow);
}
.playoff-time {
    color: var(--text-muted);
    font-size: 10px;
    margin-bottom: 4px;
}
.playoff-team-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    color: var(--text-main);
}
.winner {
    font-weight: bold;
    color: var(--text-winner) !important;
}

/* Ottimizzazione Liste Match */
.match-time-text {
    color: var(--text-muted);
    font-size: 11px;
}
.match-teams-container {
    display: grid;
    grid-template-columns: 1fr 35px 1fr;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    font-size: 15px;
}
.team-box {
    display: flex;
    align-items: center;
    gap: 8px;
    word-break: break-word;
}
.team-box.home {
    justify-content: flex-end;
    text-align: right;
}
.team-box.away {
    justify-content: flex-start;
    text-align: left;
}
.match-vs {
    color: var(--text-muted);
    font-size: 13px;
    text-transform: uppercase;
    text-align: center;
    font-weight: normal;
}

/* Modifiche avanzate ad Input Pronostici */
.vote-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}
.hyphen-separator {
    color: var(--border-color);
    font-weight: bold;
}
.match-inputs input[type="number"] {
    width: 60px !important;
    height: 32px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0 4px;
    -moz-appearance: textfield;
}
.match-inputs input[type="number"]::-webkit-outer-spin-button,
.match-inputs input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.input-disabled {
    background: var(--bg-body) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
    border-color: var(--border-color) !important;
}

/* Classifica Utenti e Gestione Messaggi Globali */
.username-cell {
    text-align: left;
}
.no-matches-text, .no-ranking-text {
    color: var(--text-muted);
}
.btn-bets-submit {
    margin-top: 20px;
    width: 100%;
}
.alert-message {
    padding: 12px;
    border-radius: 6px;
    font-weight: bold;
    margin-bottom: 20px;
}
.alert-warning {
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
}
.alert-success {
    color: #15803d;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}
.alert-danger {
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #fca5a5;
}

/* ==========================================================================
   STRUTTURE DI ALLINEAMENTO AVANZATO PER LE PARTITE (visualizza-torneo.php)
   ========================================================================== */

/* Riga principale: gestisce lo spazio totale in modo fluido ed evita overflow */
.match-row-aligned {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 10px;
    border-top: 1px solid var(--border-match-row);
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* 1. Blocco Informazioni (Fase e Data) - Ridotto leggermente al 18.5% */
.ma-info-block {
    flex: 0 0 18.5%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ma-stage-badge {
    font-size: 11px;
    background: var(--bg-secondary);
    color: var(--text-main);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    width: fit-content;
    border: 1px solid var(--border-color);
}

.ma-time-text {
    font-size: 11px;
    color: var(--text-muted);
}

/* 2. Blocco Centrale Squadre: Allargato al 53% totale per dare respiro */
.ma-teams-block {
    flex: 0 0 53%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

/* Ogni squadra prende il 40% del blocco centrale */
.ma-team {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: bold;
    min-width: 0;
}

/* Allineamento specchiato */
.ma-team.home {
    justify-content: flex-end;
    text-align: right;
}

.ma-team.away {
    justify-content: flex-start;
    text-align: left;
}

.ma-team-name {
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* MODIFICATO: Il punteggio/VS ora ha il 20% dello spazio centrale (invece del 16%) */
.ma-vs {
    flex: 0 0 20%;
    display: flex;             /* Forza gli elementi figli ad allinearsi in riga */
    justify-content: center;   /* Centra il risultato */
    align-items: center;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: var(--text-main);
    white-space: nowrap;       /* Impedisce categoricamente di andare a capo */
}

/* Forza la stringa del punteggio (es. 10 - 10) a restare su una sola linea e distesa */
.ma-vs strong {
    display: inline-block;
    white-space: nowrap;
    letter-spacing: 0.5px;      /* Dà una spaziatura pulita tra i numeri e il trattino */
}

.ma-vs:has(strong) {
    background: transparent;
    border: none;
    font-size: 15px;
}

.ma-vs-results {
    font-size: 12px;
    font-weight: normal;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 50%;
}

/* 3. Blocco di Inserimento degli Input a Destra - Adattato al 28.5% */
.ma-inputs-block {
    flex: 0 0 28.5%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
}

/* Disposizione Classifiche Squadre in Verticale per colonna Laterale */
.grid-gironi-vertical {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 15px;
}

.playoff-stage-vertical {
    width: 100%;
    background: var(--bg-playoff-stage);
    border-radius: 6px;
    padding: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 10px;
    box-sizing: border-box;
}

.playoff-stage-vertical h4 {
    margin: 0 0 10px 0;
    color: var(--text-main);
    font-size: 14px;
    border-bottom: 2px solid var(--color-sky);
    padding-bottom: 4px;
}