/*
 * ====================================================================
 * AWAYTICKETOWNERS TABLE STYLES
 * ====================================================================
 * Template: awayticketowners_bs5.twig
 * Zweck: Auswärtsdauerkarten-Tabelle - zeigt Anzahl der Auswärts-
 *        dauerkarten und Gesamtkilometer pro Verein
 * 
 * Enthält nur template-spezifische Styles für:
 * - Hero-Hintergrundbild (50er Jahre Bundesliga)
 * - Away Tickets Info (Anzahl mit grüner Farbe)
 * - Total Distance Info (Kilometer mit oranger Farbe)
 * - Tabellen-spezifische Hover-Effekte (Green glow)
 * 
 * Wrapper, Responsive-Breakpoints, Print-Styles und Sticky-Backgrounds
 * werden zentral gehandhabt
 * ====================================================================
 */

/* Hero Specific Background */
.awayticketowners-hero {
    background-image: url('https://www.fussballmafia.de/cms/images/news/bundesliga-in-den-50igern-min.jpg');
    background-size: cover;
    background-position: center;
    min-height: 400px;
}

/* Away Tickets Info */
.away-tickets-info .away-tickets-count {
    color: var(--fm-green);
    font-size: 1.1rem;
}

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

/* Total Distance Info */
.total-distance-info .total-distance {
    color: var(--fm-orange);
    font-size: 1.1rem;
    font-weight: 700;
}

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

/* Hover-Effekte */
#awayticketownersTable tbody tr:hover {
    background-color: rgba(34, 139, 34, 0.1); /* Green glow for away tickets */
}

#awayticketownersTable tbody tr:hover .team-name {
    color: var(--fm-green);
}

#awayticketownersTable tbody tr:hover .away-tickets-count,
#awayticketownersTable tbody tr:hover .total-distance {
    color: var(--fm-green);
}

/* Alert Styling - Using global FM design from custom-bootstrap.css */
/* Alerts now use consistent FM styling:
   - Golden border (1px solid var(--fm-gold))
   - Light gray background (var(--fm-light-gray))
   - Black text (var(--fm-black))
   See custom-bootstrap.css for global alert definitions */

/* Mobile-spezifische Anpassungen */
@media (max-width: 1199px) {
    #awayticketownersTable {
        font-size: 0.9rem;
    }
    
    .away-tickets-info .away-tickets-count,
    .total-distance-info .total-distance {
        font-size: 1rem;
    }
}

@media (max-width: 991px) {
    /* Kompaktere Darstellung */
    #awayticketownersTable td,
    #awayticketownersTable th {
        padding: 0.5rem 0.3rem;
    }
    
    .away-tickets-info small,
    .total-distance-info small {
        font-size: 0.75rem;
    }
}

@media (max-width: 767px) {
    #awayticketownersTable {
        font-size: 0.85rem;
    }
    
    #awayticketownersTable td,
    #awayticketownersTable th {
        padding: 0.4rem 0.2rem;
    }
    
    .away-tickets-info .away-tickets-count,
    .total-distance-info .total-distance {
        font-size: 0.9rem;
    }
    
    .away-tickets-info small,
    .total-distance-info small {
        font-size: 0.7rem;
    }
}

@media (max-width: 576px) {
    #awayticketownersTable {
        font-size: 0.8rem;
    }
    
    #awayticketownersTable td,
    #awayticketownersTable th {
        padding: 0.3rem 0.15rem;
    }
    
    .away-tickets-info .away-tickets-count,
    .total-distance-info .total-distance {
        font-size: 0.85rem;
    }
    
    .away-tickets-info small,
    .total-distance-info small {
        font-size: 0.65rem;
    }
}