/*
 * ====================================================================
 * PENALTY TABLE STYLES (penalty_bs5.twig)
 * ====================================================================
 * Styles für die Strafen-Tabelle
 */

/* Team-Logo Styling */
.team-logo {
    width: var(--fm-logo-md);
    height: var(--fm-logo-md);
    object-fit: contain;
}

/* Penalty Table - spezifische Anpassungen für Sticky Table */

/* Container sollte NICHT overflow haben - das macht sticky-table-container */
.fm-table-content-wrapper {
    width: 100%;
}

/* Sicherstellen dass die Tabelle breiter als Container werden kann */
#penaltyTable {
    min-width: 900px; /* Mindestbreite für horizontales Scrollen */
    width: 100%;
}

/* Spaltenbreiten definieren */
#penaltyTable th:nth-child(3),
#penaltyTable td:nth-child(3) {
    min-width: 80px;
    white-space: nowrap;
}

/* DFB-Urteile Spalte - nur wenn vorhanden */
#penaltyTable th:nth-child(4),
#penaltyTable td:nth-child(4) {
    min-width: 180px;
}

/* Schaden Spalte - kann 4. oder 5. sein */
#penaltyTable th:last-child,
#penaltyTable td:last-child {
    min-width: 150px;
    white-space: nowrap;
}

/* WICHTIG: Sticky-Eigenschaften mit Klassen statt nth-child */
/* Verwende Klassen-Selektoren für mehr Kontrolle */

/* Position Column - immer erste Spalte */
#penaltyTable .position-column {
    position: sticky !important;
    left: 0 !important;
    z-index: 20 !important;
    min-width: 30px !important;
    max-width: 30px !important;
}

/* Team Column - verwende Klasse statt nth-child */
#penaltyTable .team-column {
    position: sticky !important;
    left: 30px !important; /* Default mobile */
    z-index: 19 !important;
    background-color: var(--bs-body-bg, #fff) !important;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1) !important;
}

/* Anpassung der left Position für größere Screens */
@media (min-width: 768px) {
    #penaltyTable .position-column {
        min-width: 50px !important;
        max-width: 50px !important;
    }
    
    #penaltyTable .team-column {
        left: 50px !important;
    }
}

/* Spaltenbreiten für Team-Spalte - Mobile First */
@media (max-width: 767px) {
    /* Team-Spalte nur für Logo */
    #penaltyTable .team-column {
        min-width: 50px !important;
        max-width: 60px !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /* Team-Spalte für Logo + Kürzel */
    #penaltyTable .team-column {
        min-width: 100px !important;
        max-width: 120px !important;
    }
}

@media (min-width: 992px) {
    /* Team-Spalte für Logo + voller Name */
    #penaltyTable .team-column {
        min-width: 180px !important;
        max-width: 200px !important;
    }
}

/* Hintergrundfarben für sticky Spalten - nutze Klassen */
#penaltyTable .position-column,
#penaltyTable .team-column {
    background-color: var(--bs-body-bg, #fff) !important;
}

/* Header Hintergrund */
#penaltyTable thead .position-column,
#penaltyTable thead .team-column {
    background-color: var(--fm-dark, #212529) !important;
    z-index: 31 !important; /* Höher als tbody sticky columns */
}

/* Hover State */
#penaltyTable tbody tr:hover .position-column,
#penaltyTable tbody tr:hover .team-column {
    background-color: rgba(182, 139, 71, 0.1) !important;
}

/* Team Logo Größen */
@media (min-width: 768px) and (max-width: 991px) {
    #penaltyTable .team-logo {
        width: 30px !important;
        height: 30px !important;
    }
}

/* Numerische Werte in Gold */
#penaltyTable .numeric-column strong {
    color: var(--fm-gold);
}


/* KPI Boxes */
.kpi-box {
    background: var(--fm-bg-light);
    border: 1px solid var(--fm-border);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fm-gold);
    line-height: 1.2;
}

.kpi-label {
    font-size: 0.85rem;
    color: var(--fm-text-secondary);
    margin-top: 0.25rem;
}

/* Filter Buttons */
.penalty-filter-group .btn {
    font-size: 0.85rem;
    padding: 0.375rem 0.75rem;
}

.penalty-filter-group .btn.active {
    background-color: var(--fm-gold);
    border-color: var(--fm-gold);
    color: white;
}



/* Mobile-spezifische Anpassungen für horizontales Scrollen */
@media (max-width: 991px) {
    /* Tabelle muss ihre Mindestbreite behalten */
    #penaltyTable {
        min-width: 650px !important;
    }
    
    /* Kompaktere Spalten auf Mobile */
    #penaltyTable th,
    #penaltyTable td {
        padding: 0.4rem 0.3rem;
        font-size: 0.75rem;
    }
    
    /* Kleine Schrift für Details */
    #penaltyTable small {
        font-size: 0.65rem !important;
    }
    
    /* Logo kleiner auf Mobile */
    #penaltyTable .team-logo {
        width: 25px !important;
        height: 25px !important;
    }
    
    /* Team Cell kompakter */
    #penaltyTable .team-cell {
        gap: 0.25rem !important;
    }
    
    /* Numerische Spalten kompakter */
    #penaltyTable th:nth-child(3),
    #penaltyTable td:nth-child(3) {
        min-width: 60px;
    }
    
    #penaltyTable th:nth-child(4),
    #penaltyTable td:nth-child(4) {
        min-width: 80px;
    }
    
    #penaltyTable th:last-child,
    #penaltyTable td:last-child {
        min-width: 90px;
    }
}

/* Responsive Anpassungen */
@media (max-width: 1199px) {
    #penaltyTable {
        font-size: 0.9rem;
    }
    
    .team-logo {
        width: var(--fm-logo-sm);
        height: var(--fm-logo-sm);
    }
    
    
    .kpi-value {
        font-size: 1.3rem;
    }
}

@media (max-width: 991px) {
    /* Kompaktere Darstellung */
    #penaltyTable td,
    #penaltyTable th {
        padding: 0.5rem 0.3rem;
    }
    
    
    .kpi-box {
        padding: 0.75rem;
    }
    
    .kpi-value {
        font-size: 1.2rem;
    }
    
    .kpi-label {
        font-size: 0.8rem;
    }
}

@media (max-width: 767px) {
    #penaltyTable {
        font-size: 0.85rem;
    }
    
    #penaltyTable td,
    #penaltyTable th {
        padding: 0.4rem 0.2rem;
    }
    
    .team-logo {
        width: var(--fm-logo-xs);
        height: var(--fm-logo-xs);
    }
    
    
    .kpi-box {
        padding: 0.5rem;
        margin-bottom: 0.75rem;
    }
    
    .kpi-value {
        font-size: 1.1rem;
    }
    
    .kpi-label {
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    #penaltyTable {
        font-size: 0.8rem;
    }
    
    #penaltyTable td,
    #penaltyTable th {
        padding: 0.3rem 0.15rem;
    }
    
    .team-logo {
        width: 20px;
        height: 20px;
    }
    
    
    .kpi-value {
        font-size: 1rem;
    }
    
    .kpi-label {
        font-size: 0.7rem;
    }
}

/* Wichtig: Sicherstellen dass Container scrollbar ist */
.sticky-table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling auf iOS */
}

/* Explizit Scrollbar zeigen auf Touch Devices */
@media (hover: none) and (pointer: coarse) {
    .sticky-table-container::-webkit-scrollbar {
        height: 8px;
    }
    
    .sticky-table-container::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    .sticky-table-container::-webkit-scrollbar-thumb {
        background: var(--fm-gold);
        border-radius: 4px;
    }
}

/* Print Styles */
@media print {
    .team-logo {
        width: var(--fm-logo-sm);
        height: var(--fm-logo-sm);
    }
    
    .kpi-box {
        border: 1px solid #ccc;
        background-color: transparent;
    }
    
    .penalty-filter-group {
        display: none !important;
    }
}