/* PrJ/public/assets/css/views/upcoming-preview.css - FINAL VERSION (Inkl. H2H Zentrierung & Player Stats Korrekturen) */

/* ============================================= */
/* === GLOBALES LAYOUT (Header & Container) === */
/* ============================================= */
.preview-container {
    display: flex;
    flex-direction: column;
    gap: 1.rem; /* Abstand zwischen den Hauptabschnitten */
    position: relative; /* Für Nav-Link Positionierung */
}

.preview-header {
    text-align: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color-light);
}
.preview-header h3 { /* Team Namen (Matchup) */
    font-size: var(--font-size-xxxl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.preview-header p { /* Datum/Woche */
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
}

/* ============================================= */
/* === ZWEI-SPALTEN-LAYOUT (Form & Last 5) === */
/* ============================================= */
.preview-columns {
    display: flex;
    flex-direction: column; /* Standard: Untereinander (Mobile) */
    gap: 1.5rem; /* Abstand zwischen den Spalten/Karten */
}

/* Dein Breakpoint */
@media (min-width: 10rem) {
    .preview-columns {
        flex-direction: row; /* Wechsel zu Nebeneinander */
    }
}

.preview-column {
    flex: 1;
    min-width: 0;
    /* Karte-Effekt */
    padding: 10px; /* Deine Präferenz */
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary);
}



/* ============================================= */
/* === TEAM-BLOCKS: ALLGEMEINE STILE === */
/* ============================================= */
.team-stats-header.compact-header { /* Enthält nur noch das Team-Label */
    justify-content: center;
    align-items: baseline;
    margin-bottom: 0.5rem;
    padding: 0;
    border-bottom: none;
}
.team-label { /* Überschrift des Teams */
    font-size: var(--font-size-lg); /* Deine Größe */
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color-light);
    width: 100%;
    text-align: left; /* Standard: Links */
}

.team-form.form-box { /* Formkurve (W/D/L) Zeile */
    letter-spacing: 1px; /* Deine Anpassung */
    font-size: var(--font-size-small); /* Deine Anpassung */
    display: flex;
    justify-content: flex-start; /* Standard: Links */
    margin-bottom: 0.5rem; /* Deine Anpassung */
    padding-bottom: 0.5rem;
    border-bottom: 0.5px solid var(--border-color-light); /* Deine Anpassung */
}
.preview-column h6 { /* Last 5 Games Überschrift */
    font-size: 0.9rem; /* Deine Größe */
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--text-accent);
}

/* ============================================= */
/* === HEAD-TO-HEAD BEREICH (Preview Overlay) === */
/* ============================================= */

/* --- 1. H2H Header (Das 3-Spalten-Layout) --- */

.h2h-overall-header {
    display: flex;
    justify-content: space-between; /* Hält die 3 Spalten auseinander */
    align-items: center;            /* Zentriert alles vertikal */
    padding: 0 0 0.2rem 0;
    border-bottom: 2px solid var(--brand-orange);
    margin-bottom: 0.2rem;
}

/* 1a. Spalte 1 & 3 (Text + Chart) */
.h2h-side-column {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Abstand zwischen Text und Chart */
    flex-basis: 33%; /* Gibt den Seiten Platz, aber Titel kann wachsen */
}

/* 1b. Spalte 1 (linksbündig) - braucht keine extra Regel */

/* 1c. Spalte 3 (rechtsbündig) */
.h2h-side-column.align-right {
    justify-content: flex-end;
}
.h2h-side-column:not(.align-right) .h2h-chart-wrapper {
    /* Diese Zeile spiegelt das Element an der Y-Achse */
    transform: scaleX(-1);
}

/* 1d. Der Text (z.B. "57%") */
.h2h-percentage-text {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap; 
}

/* 1e. Der Chart-Wrapper */
.h2h-chart-wrapper {
    width: 4em;  
    height: 4em;
    position: relative;
    flex-shrink: 0;
}

/* 1f. Spalte 2 (Der Titel) */
.h2h-title {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: var(--text-primary);
    
    margin: 0;
    padding: 0 0.5rem; 
    border: none;
    
    flex-grow: 1; /* Nimmt den Platz in der Mitte ein */
    text-align: center;
    align-self: center; /* Korrekte vertikale Zentrierung */
}


/* --- 2. H2H Match List (Der Verlauf darunter) --- */

.h2h-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-base);
}

.h2h-list li {
    display: flex;
    justify-content: center; 
    align-items: center;
    padding: 8px 4px;
    border-bottom: 1px dashed var(--border-color-light);
}

.h2h-list li:last-child {
    border-bottom: none;
}

.h2h-line-content { 
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    width: auto;
    max-width: 100%;
}

.h2h-date {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.h2h-teams {
    text-align: center !important;
    flex-grow: 0;
    flex-shrink: 1; /* Darf schrumpfen */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; /* ... mit "..." */
    
    color: var(--text-primary);
    font-weight: 500;
}

.h2h-score {
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
    white-space: nowrap;
}

.h2h-separator {
    color: var(--text-secondary);
    padding: 0 8px;
    flex-shrink: 0;
}

/* ============================================= */
/* === LAST 5 GAMES LISTE (Detail-Stile mit Week) === */
/* ============================================= */
.last5-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-base); /* Deine Größe */
}
.last5-list li {
    display: flex;
    align-items: baseline;
    padding: 4px 2px; /* Dein Padding */
    border-bottom: 1px dashed var(--border-color-light);
}
.last5-list li:last-child { border-bottom: none; }

.last5-week { /* Wochenanzeige */
    color: var(--text-secondary);
    font-size: var(--font-size-small); /* Deine Größe */
    width: 15%; min-width:20px; /* Deine Breite */
    flex-shrink: 0;
    margin-right: 4px; /* Dein Abstand */
    text-align: left;
}
.last5-result { /* Win/Loss/Draw Text */
    font-weight: 700;
    flex-shrink: 0;
    width: 10%; min-width:20px; /* Deine Breite */
    margin-right: 4px; /* Dein Abstand */
    text-align: left;
}
/* Farben für W/L/D */
.last5-result.form-W { color: var(--status-success); }
.last5-result.form-L { color: var(--status-error); }
.last5-result.form-D { color: var(--text-secondary); }

.last5-details { /* (H/A) vs Opponent */
    color: var(--text-secondary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    flex-grow: 1;
    margin: 0 6px; /* Dein Abstand */
}
.last5-score-perspective { /* Perspektivischer Score */
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
    white-space: nowrap;
    text-align: right;
    margin-left: 6px; /* Dein Abstand */
}


/* ============================================= */
/* === PLAYER STATS ROWS LAYOUT & CARDS === */
/* ============================================= */
.player-stats-rows-container {
    margin-top: 1.5rem; /* Space above player stats section */
}

/* Main heading for the entire Player Stats section */
.player-stats-section-title {
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--brand-orange); /* Orange Accent */
}

/* A row containing one Home card and one Away card for a specific Game Kind */
.player-stats-kind-row {
    display: flex;
    flex-direction: column; /* Stacked on mobile by default */
    gap: 1rem; /* Space between cards on mobile */
    margin-bottom: 1.5rem; /* Space between game kind rows */
}

/* Side-by-side layout on wider screens */
@media (min-width: 15rem) { /* Or your preferred breakpoint (e.g., 31.25rem) */
    .player-stats-kind-row {
        flex-direction: row; /* Switch to side-by-side */
        gap: 1.5rem; /* Match gap of preview-columns */
    }
}

/* Individual card for Home or Away stats of one Game Kind */
.player-stats-card {
    flex: 1; /* Takes 50% width in the row */
    min-width: 0;
    border: 1px solid var(--border-color-medium);
    border-radius: var(--radius-sm);
    overflow: hidden; /* Contains the table */
    background-color: var(--bg-secondary); /* Ensure background for card */
    margin-top: 0;  /* Reset margin, handled by gap */
    margin-bottom: 0; /* Reset margin, handled by row margin */
}

/* Title within the card (e.g., Singles) */
.player-stats-title {
    font-size: var(--font-size-xs); /* Your size preference */
    font-weight: 600;
    padding: 4px 6px; /* Your padding preference */
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color-light);
    color: var(--text-secondary);
    text-align: left; /* Default: Left */
}

/* Specific right alignment for the title ONLY in the away card */
.away-column .player-stats-card .player-stats-title, /* If card is inside .away-column (old structure) */
.player-stats-card.away-card .player-stats-title { /* If card uses .away-card (new structure) */
    text-align: right;
}


/* ============================================= */
/* === PLAYER STATS TABLE STYLES === */
/* ============================================= */
.player-stats-table { /* The table inside the card */
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-small); /* Your size preference */
}

.player-stats-table th,
.player-stats-table td {
    padding: 4px 3px; /* Your padding preference */
    text-align: left; /* Default alignment */
    border-bottom: 1px solid var(--border-color-light);
    vertical-align: middle;
}

.player-stats-table th { /* Table header */
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
}

.player-stats-table tbody tr:nth-child(even) { /* Zebra stripes */
    background-color: var(--table-row-even);
}

/* Column Alignment (Applies equally to Home & Away tables) */
.player-stats-table th:first-child, /* Header Player Name */
.player-stats-table td:first-child { /* Cell Player Name */
    text-align: center !important; /* Center */
    width: auto; /* Allow flexible width */
}

/* Centering for specific columns by class */
.player-stats-table .col-type-pos,          /* Header & Cell Last Week? */
.player-stats-table .col-type-numeric-short, /* Header & Cell #G */
.player-stats-table .col-type-numeric-medium { /* Header & Cell WL% */
     width: auto; /* Allow flexible width */
     text-align: center !important; /* Center */
     white-space: nowrap;
     padding-left: 2px; /* Your padding preference */
     padding-right: 2px; /* Your padding preference */
}

/* Ensure Headers for centered columns are also centered */
.player-stats-table th.col-type-pos,
.player-stats-table th.col-type-numeric-short,
.player-stats-table th.col-type-numeric-medium {
    text-align: center !important;
}

/* ============================================= */
/* === END PLAYER STATS SECTION === */
/* ============================================= */

/* ============================================= */
/* === SPEZIFISCHE AWAY-SPALTEN-AUSRICHTUNG (NUR Layout-Elemente AUSSERHALB der Player Stats Table) === */
/* ============================================= */
/* Formkurve rechts ausrichten */
.away-column .team-form.form-box {
    justify-content: flex-end;
}
/* Team-Label rechts ausrichten */
.away-column .team-label {
    text-align: right;
}
/* Rechtsbündigkeit für Last 5 List in Away Column */
.away-column .last5-list li {
    flex-direction: row-reverse;
}
.away-column .last5-list li strong:first-child { /* W/L/D Stempel */
    margin-left: 8px; margin-right: 0;
}
.away-column .last5-list li span { /* Details */
    text-align: right;
}
.away-column .last5-week { /* Week */
    text-align: right;
    margin-left: 6px;
    margin-right: 0;
}

/* ============================================= */
/* === ABSOLUT POSITIONIERTER NAV-LINK (FIXED STYLE) === */
/* ============================================= */
.venue-nav-link {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    padding: 0.375rem;
    border-radius: 50%;
    background-color: var(--brand-orange);
    border: 1px solid var(--brand-orange);
    color: var(--text-on-accent, #000);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
}
.venue-nav-link svg {
    width: 1.5625rem;
    height: 1.5625rem;
    stroke: var(--text-on-accent, #000);
    fill: none;
    transition: stroke 0.2s ease;
}
.venue-nav-link:hover {
    background-color: #e0b42f; /* Beispiel: Etwas dunkleres Orange */
    border-color: #e0b42f;
}
.venue-nav-link:hover svg {
     stroke: var(--text-on-accent, #000); /* Behält Schwarz bei */
}
.green-check {
    color:var(--status-success); /* Ein schönes Grün */
    font-weight: bold;
}