/*
 * ====================================================================
 * TEAMS DATA TABLE STYLES
 * ====================================================================
 * Template: teams_data_bs5.twig
 * Zweck: Vereins-Daten-Tabelle - zeigt Mitgliederzahlen, Gründungsdatum,
 *        Rechtsform und Anteilsverhältnisse der Vereine
 * 
 * Enthält nur template-spezifische Styles für:
 * - Members Info Styling (Mitgliederzahl mit Stand)
 * - Founded Date Styling (Gründungsjahr)
 * - Legal Form Styling (Rechtsform-Badge)
 * - Shares Percentage Styling (Prozentwerte)
 * - Tabellen-spezifische Spaltenbreiten
 * - Numerische Spalten rechtsbündig
 * - Hover- und Focus-Styles
 * 
 * CSS Counter, Wrapper, Responsive-Breakpoints, Print-Styles und
 * Sticky-Backgrounds werden zentral gehandhabt
 * ====================================================================
 */

/* Members Info Styling */
.members-info strong {
    color: var(--fm-text-primary);
    font-size: 1.1rem;
    display: block;
}

.members-info small {
    font-size: 0.8rem;
    line-height: 1.2;
    margin-top: 0.1rem;
}

/* Founded Date Styling */
.founded-date {
    font-weight: 500;
    color: var(--fm-text-primary);
}

/* Legal Form Styling */
.legal-form {
    font-weight: 500;
    color: var(--fm-text-secondary);
    padding: 0.25rem 0.5rem;
    background-color: var(--fm-bg-light);
    border-radius: 4px;
    font-size: 0.9rem;
    display: inline-block;
}

/* Shares Percentage Styling */
.shares-percentage {
    color: var(--fm-gold);
    font-size: 1.1rem;
}

/* Spalten-spezifische Breiten */
#teamsDataTable th:nth-child(3),
#teamsDataTable td:nth-child(3) {
    min-width: 140px; /* Mitglieder */
}

#teamsDataTable th:nth-child(4),
#teamsDataTable td:nth-child(4) {
    min-width: 120px; /* Gründungsdatum */
}

#teamsDataTable th:nth-child(5),
#teamsDataTable td:nth-child(5) {
    min-width: 130px; /* Rechtsform */
}

#teamsDataTable th:nth-child(6),
#teamsDataTable td:nth-child(6) {
    min-width: 120px; /* Anteile */
}

/* Numerische Spalten rechtsbündig */
#teamsDataTable .numeric-column {
    text-align: right;
}

/* Mobile-spezifische Anpassungen */
@media (max-width: 991px) {
    /* Spaltenbreiten anpassen */
    #teamsDataTable th:nth-child(3),
    #teamsDataTable td:nth-child(3) {
        min-width: 120px;
    }
    
    #teamsDataTable th:nth-child(4),
    #teamsDataTable td:nth-child(4) {
        min-width: 100px;
    }
    
    #teamsDataTable th:nth-child(5),
    #teamsDataTable td:nth-child(5) {
        min-width: 110px;
    }
    
    #teamsDataTable th:nth-child(6),
    #teamsDataTable td:nth-child(6) {
        min-width: 100px;
    }
}

@media (max-width: 767px) {
    /* Kleinere Schriftgrößen auf Mobile */
    .members-info strong {
        font-size: 1rem;
    }
    
    .members-info small {
        font-size: 0.75rem;
    }
    
    .founded-date {
        font-size: 0.9rem;
    }
    
    .legal-form {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem;
    }
    
    .shares-percentage {
        font-size: 1rem;
    }
    
    /* Spaltenbreiten für Mobile */
    #teamsDataTable th:nth-child(3),
    #teamsDataTable td:nth-child(3) {
        min-width: 100px;
    }
    
    #teamsDataTable th:nth-child(4),
    #teamsDataTable td:nth-child(4) {
        min-width: 90px;
    }
    
    #teamsDataTable th:nth-child(5),
    #teamsDataTable td:nth-child(5) {
        min-width: 90px;
    }
    
    #teamsDataTable th:nth-child(6),
    #teamsDataTable td:nth-child(6) {
        min-width: 80px;
    }
}

@media (max-width: 576px) {
    .legal-form {
        font-size: 0.75rem;
    }
}

/* Hover-Effekte für bessere Interaktivität */
#teamsDataTable tbody tr {
    transition: background-color 0.2s ease;
}

#teamsDataTable tbody tr:hover {
    background-color: rgba(182, 139, 71, 0.1);
}

/* Focus-Styles für Accessibility */
#teamsDataTable .team-link:focus {
    outline: 2px solid var(--fm-gold);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Sortier-Indikator aktive Spalte */
#teamsDataTable th.sortable.sorted-asc,
#teamsDataTable th.sortable.sorted-desc {
    background-color: rgba(182, 139, 71, 0.2);
}