/**
 * ====================================================================
 * BS5_TABLE_COMMON.CSS
 * ====================================================================
 * Gemeinsame Styles für alle Bootstrap 5 Tabellen-Templates
 * Reduziert Duplikation und verbessert Wartbarkeit
 * ====================================================================
 */

/* ====================================================================
 * CONTENT WRAPPER PATTERN
 * ====================================================================
 * Standard-Container für alle Tabellenseiten
 * Verwendung: <div class="fm-table-content-wrapper">
 */
.fm-table-content-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Alternative für kleinere Tabellen */
.fm-table-content-wrapper--narrow {
    max-width: 1400px;
}

/* Alternative für volle Breite */
.fm-table-content-wrapper--full {
    max-width: 100%;
}

/* ====================================================================
 * RESPONSIVE BREAKPOINTS
 * ====================================================================
 * Einheitliche Padding-Anpassungen für alle Breakpoints
 */
@media (max-width: 1199px) {
    .fm-table-content-wrapper,
    .fm-table-content-wrapper--narrow,
    .fm-table-content-wrapper--full {
        padding: 1.5rem 0.75rem;
    }
}

@media (max-width: 991px) {
    .fm-table-content-wrapper,
    .fm-table-content-wrapper--narrow,
    .fm-table-content-wrapper--full {
        padding: 1rem 0.5rem;
    }
    
    /* Reduzierte Schriftgröße für Tabellen */
    .fm-sticky-table {
        font-size: 0.9rem;
    }
}

@media (max-width: 767px) {
    .fm-table-content-wrapper,
    .fm-table-content-wrapper--narrow,
    .fm-table-content-wrapper--full {
        padding: 1rem 0.25rem;
    }
    
    /* Noch kleinere Schrift auf Mobile */
    .fm-sticky-table {
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {
    .fm-table-content-wrapper,
    .fm-table-content-wrapper--narrow,
    .fm-table-content-wrapper--full {
        padding: 0.75rem 0.125rem;
    }
    
    /* Minimale Schriftgröße */
    .fm-sticky-table {
        font-size: 0.8rem;
    }
}

/* ====================================================================
 * PRINT STYLES
 * ====================================================================
 * Einheitliche Druckoptimierung für alle Tabellen
 */
@media print {
    /* Content Wrapper Anpassungen */
    .fm-table-content-wrapper,
    .fm-table-content-wrapper--narrow,
    .fm-table-content-wrapper--full {
        max-width: none;
        padding: 0;
    }
    
    /* Tabellen-Optimierungen */
    .sticky-table-container {
        overflow: visible !important;
        max-height: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* Keine Hover-Effekte beim Drucken */
    .fm-sticky-table tbody tr:hover {
        background-color: transparent !important;
    }
    
    .fm-sticky-table tbody tr:hover td {
        background-color: transparent !important;
    }
    
    /* Sticky Columns beim Drucken deaktivieren */
    .fm-sticky-table th,
    .fm-sticky-table td {
        position: static !important;
    }
    
    /* Team-Links in Schwarz */
    .team-link {
        color: #000 !important;
    }
    
    /* Ausblenden von UI-Elementen */
    .alert-dismissible .btn-close,
    .fm-sticky-footer,
    .mobile-info,
    select.form-select {
        display: none !important;
    }
}

/* ====================================================================
 * COMMON TABLE INFO PATTERNS
 * ====================================================================
 * Wiederverwendbare Styles für Zahlen, Stats und Info-Displays
 */

/* Große Zahlenwerte (z.B. Mitglieder, Zuschauer) */
.fm-info-value {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--fm-text-primary);
}

.fm-info-value--large {
    font-size: 1.25rem;
}

.fm-info-value--small {
    font-size: 0.95rem;
}

/* Kleine Labels unter Werten */
.fm-info-label {
    font-size: 0.75rem;
    color: var(--fm-text-secondary);
    line-height: 1.2;
    display: block;
    margin-top: 0.125rem;
}

/* Info-Container (für Mitglieder, Dauerkarten, etc.) */
.fm-info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

/* ====================================================================
 * COMMON HOVER EFFECTS
 * ====================================================================
 * Einheitliche Hover-Effekte für verschiedene Tabellen-Typen
 */

/* Gold Hover (Standard) */
.fm-table-hover--gold tbody tr:hover {
    background-color: rgba(182, 139, 71, 0.1);
}

/* Rot Hover (für Strafen) */
.fm-table-hover--red tbody tr:hover {
    background-color: rgba(220, 53, 69, 0.05);
}

/* Grün Hover (für Auswärts) */
.fm-table-hover--green tbody tr:hover {
    background-color: rgba(40, 167, 69, 0.05);
}

/* Orange Hover (für Pyro) */
.fm-table-hover--orange tbody tr:hover {
    background-color: rgba(255, 152, 0, 0.05);
}

/* ====================================================================
 * COMMON NUMERIC COLUMN STYLES
 * ====================================================================
 */
.fm-numeric-column {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ====================================================================
 * COLUMN WIDTH UTILITIES
 * ====================================================================
 * Gemeinsame Spaltenbreiten für häufige Anwendungsfälle
 */

/* Position column */
.fm-col-position {
    width: 50px;
    min-width: 40px;
    text-align: center !important;
}

/* Team column responsive widths */
.fm-col-team {
    min-width: 60px;
}

@media (min-width: 576px) {
    .fm-col-team {
        min-width: 100px;
    }
}

@media (min-width: 768px) {
    .fm-col-team {
        min-width: 120px;
    }
}

@media (min-width: 992px) {
    .fm-col-team {
        min-width: 180px;
        max-width: 230px;
    }
}

/* Numeric columns standard widths */
.fm-col-numeric-sm {
    min-width: 80px;
}

.fm-col-numeric-md {
    min-width: 100px;
}

.fm-col-numeric-lg {
    min-width: 120px;
}

/* ====================================================================
 * FOOTER STYLES
 * ====================================================================
 * Gemeinsame Footer-Styles für Tabellen mit Summen
 */
.fm-table-footer {
    background-color: var(--fm-dark);
    color: var(--fm-white);
    font-weight: 700;
}

.fm-table-footer td {
    border-top: 2px solid var(--fm-gold);
    padding: 0.75rem;
}

/* ====================================================================
 * DROPDOWN FILTER STYLES
 * ====================================================================
 * Einheitliche Styles für Saison/Liga-Dropdown-Filter
 */
.fm-table-filters {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.fm-table-filters .form-select {
    max-width: 200px;
}

@media (max-width: 576px) {
    .fm-table-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .fm-table-filters .form-select {
        max-width: 100%;
    }
}

/* ====================================================================
 * LOADING STATES
 * ====================================================================
 */
.fm-table-loading {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}

.fm-table-loading::after {
    content: 'Lade...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--fm-gold);
    color: var(--fm-white);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 600;
    z-index: 100;
}

/* ====================================================================
 * UTILITY CLASSES
 * ====================================================================
 */

/* Text utilities */
.fm-text-gold {
    color: var(--fm-gold) !important;
}

.fm-text-red {
    color: var(--fm-red) !important;
}

.fm-text-green {
    color: #28a745 !important;
}

/* Background utilities */
.fm-bg-gold-light {
    background-color: rgba(182, 139, 71, 0.1) !important;
}

.fm-bg-red-light {
    background-color: rgba(220, 53, 69, 0.1) !important;
}

.fm-bg-green-light {
    background-color: rgba(40, 167, 69, 0.1) !important;
}

/* Badge utilities */
.fm-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

.fm-badge--gold {
    background-color: var(--fm-gold);
    color: var(--fm-white);
}

.fm-badge--red {
    background-color: var(--fm-red);
    color: var(--fm-white);
}

.fm-badge--green {
    background-color: #28a745;
    color: var(--fm-white);
}