@media (max-width: 768px) {

  /* ===== Στατιστικά (μένουν όπως τα έχεις, απλά καθαρισμένα) ===== */
  .stats-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px 12px;
    background: #f7f7f7;
    border: 2px solid #FF9800;
    border-radius: 12px;
  }
  .stats-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }
  .stat-card {
    flex: 1 1 30%;
    min-width: 80px;
    max-width: 120px;
    background: #fff;
    padding: 12px;
    border: 1px solid #999;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
  }
  .stat-card.stat-won { background-color: #d4edda; }
  .stat-card.stat-lost { background-color: #f8d7da; }
  .stat-card.stat-profit .profit-positive { color: #24963E; }
  .stat-card.stat-profit .profit-negative { color: #E4392C; }
  .stat-label { font-size: 12px; color: #333; margin-bottom: 4px; font-weight: bold; }
  .stat-value { font-size: 16px; font-weight: bold; color: #333; }

  /* ===== Πίνακας σε mobile κάρτες ===== */
  .history-table thead { display: none; }
  .history-table,
  .history-table tbody,
  .history-table tr,
  .history-table td {
    display: block;
    width: 100%;
    border: none;
  }

  .history-table tr {
    background-color: #DDDCDC;
    border: 2px solid #FF9800;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    text-align: center;
  }

  .history-table td {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    text-align: center;
    vertical-align: top;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #333;
    font-weight: bold;
    background-color: #fff;
  }

  .history-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    color: #333;
    margin-bottom: 4px;
    font-weight: bold;
  }

  /* Κρύψε το flag cell σε mobile */
  .history-table td[title] { display: none !important; }

  /* 👉 Κρύψε τις αρχικές φόρμες (στήλες 3 & 5) στο mobile */
  .history-table td.home-form-col,
  .history-table td.away-form-col {
    display: none !important;
  }

  /* 👉 Δείξε τις mobile-only φόρμες κάτω από τα ονόματα */
  .mobile-only { display: flex !important; }

  /* 👉 Τα ονόματα οριζόντια + WDL από κάτω για κάθε ομάδα */
  .history-table td.teams-cell {
    background: transparent;
    border: none;
    padding: 0;
  }

  .teams-row {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 16px;
        padding: 10px 0 0;
    }

    .team {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 120px;
    }

  .team-name {
    font-size: 16px;
    font-weight: 800;
    color: #333;
    margin-bottom: 6px;
    word-break: keep-all;
	white-space: nowrap;      /* αποτρέπει το wrapping */
    overflow: hidden;         /* κρύβει το υπερβάλλον κείμενο */
    text-overflow: ellipsis;
  }

  .team-form {
    display: flex;
    gap: 4px;
    font-size: 14px;
  }

  .vs-text {
    font-size: 14px;
    font-weight: 800;
    color: #FF9800;
    align-self: center;
    margin: 0 4px;
  }
}

   /* Default συμπεριφορά για desktop */
.mobile-only {
    display: none !important;
}
.desktop-only {
    display: table-cell !important;
}

/* Desktop: Ονόματα inline */
.teams-row {
    display: inline !important;
}
.teams-row .team {
    display: inline !important;
    margin: 0 6px !important;
	white-space: nowrap;      /* αποτρέπει το wrapping */
    overflow: hidden;         /* κρύβει το υπερβάλλον κείμενο */
    text-overflow: ellipsis;
}
.vs-text {
    display: inline !important;
    margin: 0 4px !important;
}

/* Στυλ για τα ονόματα στο desktop */
.team-name {
    font-weight: bold;
    font-size: 16px;
	color: #626262;
}

/* === Mobile Styles === */
@media (max-width: 768px) {
    .mobile-only {
        display: flex !important;
    }
    .desktop-only {
        display: none !important;
    }

    /* Οι γραμμές γίνονται κάρτες */
    .history-table thead { display: none; }
    .history-table,
    .history-table tbody,
    .history-table tr,
    .history-table td {
        display: block;
        width: 100%;
        border: none;
    }

    .history-table tr {
        background-color: #DDDCDC;
        border: 2px solid #FF9800;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 20px;
        text-align: center;
    }

    .history-table td {
        display: block;
        width: 100%;
        margin-bottom: 12px;
        text-align: center;
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #333;
        background-color: #fff;
        font-weight: bold;
    }

    .history-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 12px;
        color: #333;
        margin-bottom: 4px;
        font-weight: bold;
    }

    /* Κρύψε σημαίες */
    .history-table td[title] { display: none !important; }

    /* Τμήμα ομάδων σε mobile */
    .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: block !important;
    }

   .teams-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
}

.team {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px; /* για να μην κολλάνε */
}

.vs-text {
    align-self: center;
    font-size: 22px;
    font-weight: bold;
    color: #FF9800;
}

.team-form {
    display: flex;
    gap: 2px; /* λίγο μεγαλύτερο */
    font-size: 14px;
}
	
.odds-row {
    display: flex;
    justify-content: center;
    gap: 6px; /* λίγο πιο μικρό gap για compact εμφάνιση */
    margin-top: 8px;
}

.mobile-only.odds-cell {
    background: transparent !important;
    border: none !important;
    padding: 0;
}

.odd-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f9f9f9;         /* απαλό γκρι για να ξεχωρίζει από το row */
    border: 3px solid #ccc;       /* ελαφρύ περίγραμμα */
    border-radius: 8px;           /* πιο στρογγυλεμένες γωνίες */
    padding: 4px 11px;
    min-width: 100px;
    transition: transform 0.2s;
    margin-top: 10px;              /* κενό από πάνω */
}


.odd-label {
    font-size: 14px;
    font-weight: bold;
    color: #626262 ;                  /* πιο απαλή απόχρωση */
    margin-bottom: 4px;
    text-align: center;
}

.odd-value {
    font-size: 14px;
    font-weight: bold;
    color: #626262;                  /* έντονο για εύκολη ανάγνωση */
    text-align: center;
}
	
@media (max-width: 768px) {
    /* Βασικά για όλα τα td prediction + score */
    td.prediction-cell,
    td.score-correct,
    td.score-incorrect,
    td.score-pending {
        display: inline-block !important;
        vertical-align: top;
        width: 45%;        /* περίπου μισό το καθένα */
        box-sizing: border-box;
        margin-right: 3%;  /* κενό ανάμεσα οριζόντια */
        margin-top: 4px;   /* κενό από πάνω */
        padding: 6px;
        border: none !important;
        border-radius: 6px;
        text-align: center;
        font-size: 14px;
    }

    /* Προσθέτουμε label πάνω από το text μέσω pseudo-element */
    td.prediction-cell::before {
        content: "Prediction";
        display: block;
        font-weight: bold;
		color: #626262;
        font-size: 14px;
        margin-bottom: 0px;
    }

    td.score-correct::before,
    td.score-incorrect::before,
    td.score-pending::before {
        content: "Score";
        display: block;
        font-weight: bold;
        font-size: 14px;
		color: #626262;
        margin-bottom: 0px;
    }

    /* Χρώματα για κάθε τύπο */
    td.prediction-cell {
        background: #FFF3E0 !important;
        color: #626262 !important;
        border: 3px solid #ccc !important;
    }

    td.score-correct {
        background: #B0EBBE !important;
        color: #626262 !important;
        border: 3px solid #ccc !important;
    }

    td.score-incorrect {
        background: #F6BCC1  !important;
        color: #626262 !important;
        border: 3px solid #ccc !important;
    }

    td.score-pending {
        background: #FFF3E0 !important;
        color: #626262 !important;
        border: 3px solid #ccc !important;
    }

    /* Αφαιρούμε το margin δεξιά από το τελευταίο στοιχείο της σειράς */
    td.score-correct:last-child,
    td.score-incorrect:last-child,
    td.score-pending:last-child,
    td.prediction-cell:last-child {
        margin-right: 0;
    }
}
	
.history-table td.date-cell {
    display: flex !important;          /* horizontal layout */
    flex-direction: row !important;    
    justify-content: center !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    font-size: 15px !important;
	color: #626262!important;
    padding: 0 !important;
    gap: 6px;
    position: relative;                /* απαραίτητο για ::after */
}

/* Η γραμμή από κάτω, 60% πλάτος, κεντραρισμένη */
.history-table td.date-cell::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;                        /* πλάτος της γραμμής */
    height: 1px;
    background-color: #626262;
    border-radius: 1px;
}

    .history-table td.date-cell .date::before {
        content: "Date: ";
        font-weight: bold;
		font-size: 15px;
		color: #FF9800 ; 
    }

    .history-table td.date-cell .time::before {
        content: "Time: ";
        font-weight: bold;
		font-size: 15px;
		color: #FF9800 ; 
    }
}

.mobile-only .team-logo {
    width: 70px;       /* μέγεθος λογοτύπου */
    height: auto;
    margin-bottom: 4px; /* απόσταση από το όνομα */
}