/*
 * ====================================================================
 * GUESTSUMMARY STYLES
 * ====================================================================
 * Template: guestsummary_bs5.twig
 * Zweck: Auswärtsfahrer-Spieltag-Übersicht - zeigt Anzahl der Gästefans
 *        pro Spieltag mit Statistiken und Details
 * 
 * Enthält nur template-spezifische Styles für:
 * - Hero-Overlay Anpassungen
 * - Card-Styling für Matchday-Zusammenfassung
 * - Tabellen-spezifische Anpassungen (Guests, Location, Details)
 * - Team Logos und Score Display
 * - Guest Count Display Erweiterungen
 * 
 * Allgemeine Wrapper, Responsive-Breakpoints und Print-Styles 
 * werden über fm-table-content-wrapper gehandhabt
 * ====================================================================
 */

/* Matchday Guest Summary */
.matchday-guest-summary {
    max-width: 1200px;
    margin: 0 auto;
}

/* Hero-Overlay anpassen - weniger dunkel */
.hero-overlay {
    background: rgba(0, 0, 0, 0.15) !important;
}

/* Navigation buttons now managed by custom-bootstrap.css */
/* Use .fm-nav-btn--fixed for fixed positioning on this page */

/* Page-specific card styling - uses central .fm-card system */
.matchday-guest-summary .fm-card {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: linear-gradient(135deg, var(--fm-dark) 0%, var(--fm-dark-gray) 30%, var(--fm-gray-medium) 70%, #5a5a5a 100%) !important;
    color: var(--fm-white) !important;
}

/* Ensure card-body inherits the color */
.matchday-guest-summary .fm-card .card-body {
    background: transparent !important;
    color: var(--fm-white) !important;
}

/* Note: .fm-card--hover-subtle:hover is handled by central system in custom-bootstrap.css */

/* ====================================================================
 * TABLE STYLES - FM-Sticky-Table Integration
 * ====================================================================
 */

/* Table-spezifische Anpassungen: using fm-sticky-table defaults */

/* Guests Info in Tabelle */
.guests-info .guests-count {
    color: var(--fm-text-primary);
    font-size: 1.1rem;
}

.guests-info small {
    font-size: 0.8rem;
    line-height: 1;
}

.guests-info .bi {
    color: var(--fm-gold);
    margin-right: 0.25rem;
}

/* Location Info */
.location-info .location-city {
    font-weight: 500;
    color: var(--fm-text-primary);
}

.location-info small {
    font-size: 0.8rem;
}

/* Details Info */
.details-info .guest-percentage {
    color: var(--fm-gold);
    font-size: 1.1rem;
}

.details-info small {
    font-size: 0.8rem;
}

/* Spalten-spezifische Breiten für guestsummaryTable */
#guestsummaryTable th:nth-child(3),
#guestsummaryTable td:nth-child(3) {
    min-width: 120px; /* Gäste-Spalte */
}

#guestsummaryTable th:nth-child(4),
#guestsummaryTable td:nth-child(4) {
    min-width: 180px; /* Ort & Zeit Spalte */
}

#guestsummaryTable th:nth-child(5),
#guestsummaryTable td:nth-child(5) {
    min-width: 150px; /* Details Spalte */
}

/* Team Logos - Guestsummary specific large variant */
.fm-team-logo--large {
    width: 110px;
    height: 110px;
    object-fit: contain;
    background: transparent;
}

.team-logo-container {
    flex-shrink: 0;
}

@media (min-width: 993px) {
    .fm-team-logo--large {
        width: 140px;
        height: 140px;
    }
}


@media (max-width: 945px) {
    .fm-team-logo--large {
        width: 100px;
        height: 100px;
    }
}



@media (max-width: 767px) {
    .fm-team-logo--large {
        width: 140px;
        height: 140px;
    }
}

@media (max-width: 450px) {
    .fm-team-logo--large {
        width: 90px;
        height: 90px;
    }
}

/* Score Display */
.score-display {
    font-size: 1.5625rem; /* +25% */
    font-weight: bold;
    color: var(--fm-gold);
    letter-spacing: -1px;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    min-width: 62px; /* +25% */
    text-align: center;
}

/* Guest Count Display - Enhanced for guestsummary */
.guest-count-display {
    text-align: center;
    margin: 1rem auto; /* center horizontally */
    display: table; /* allows margin auto centering without extra wrapper */
}

.guest-number {
    display: inline-block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--fm-white);
    background: var(--fm-gold);
    padding: 1rem 2rem;
    border-radius: var(--fm-border-radius-lg);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    min-width: 120px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: -1px;
    position: relative;
}

.guest-label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--fm-gold);
    text-transform: uppercase;
    margin-top: 0.5rem;
    letter-spacing: 1px;
}

/* Distance Display - MIGRATED TO UNIFIED SYSTEM */
/* Use .fm-guest-count__distance instead */

/* Guest Stats */
.guest-stats {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.guest-stats strong {
    color: var(--fm-gold);
}

.guest-stats hr {
    border-color: rgba(255, 255, 255, 0.2);
}

/* Allgemeine Schriftgrößen-Verbesserungen */
.fm-card .card-body {
    font-size: 0.95rem;
}

.distance {
    font-size: 0.95rem !important;
}

/* Zeit und Uhrzeit heller machen */
.fm-card .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}


/* View Switching Buttons */
.btn-check:checked + .fm-btn--secondary {
    background-color: var(--fm-gold) !important;
    border-color: var(--fm-gold) !important;
    color: var(--fm-dark) !important;
    font-weight: 600;
}

.fm-btn--secondary {
    transition: all 0.2s ease;
}

.fm-btn--secondary:hover:not(.btn-check:checked + .fm-btn--secondary) {
    background-color: var(--fm-dark);
    border-color: var(--fm-dark);
    color: var(--fm-white);
}

/* Guest Number Wrapper with Edit Button */
.guest-number-wrapper {
    position: relative; /* anchor for absolute button */
    display: inline-block; /* width equals number only */
    white-space: nowrap; /* safety */
}

.guest-edit-btn {
    position: absolute; /* floats right of number */
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0.5rem; /* gap to number */
    background: var(--fm-dark);
    border: 2px solid var(--fm-gold);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

.guest-number-wrapper .guest-edit-btn:hover {
    transform: translateY(-50%) scale(1.05);
    background: var(--fm-gold) !important; /* override fm-btn--secondary:hover */
    border-color: var(--fm-dark) !important; /* black/dark border on hover */
}

.guest-number-wrapper .guest-edit-btn:hover .bi {
    color: var(--fm-dark) !important;
}

.guest-edit-btn .bi {
    color: var(--fm-gold);
    font-size: 1rem;
    margin: 0;
}

/* Responsive Typography - Template-spezifisch */
@media (max-width: 768px) {
    .matchday-guest-summary {
        padding: 1rem 0.5rem;
    }
    
    .score-display {
        font-size: 1.5rem; /* larger on small screens */
        min-width: 60px;  /* match visual weight */
    }
    
    .guest-stats {
        font-size: 0.8rem;
    }
    
    .guest-number {
        font-size: 2rem;
        padding: 0.75rem 1.5rem;
        min-width: 100px;
    }
    
    .guest-label {
        font-size: 0.9rem;
    }
}

/* Badge Styles */
.badge.bg-warning {
    color: var(--fm-dark) !important;
}

/* removed old guest-display-wrapper rules (no longer used) */