/**
 * ====================================================================
 * BS5_TABLE_SHARED_THEME.CSS
 * ====================================================================
 * WICHTIG: Diese Datei enthält NUR visuelle Theming-Styles!
 *
 * ERLAUBT:
 * ✅ Farben (color, background-color, border-color)
 * ✅ Typografie (font-family, font-size, font-weight, line-height)
 * ✅ Visuelle Effekte (box-shadow, text-shadow, opacity)
 * ✅ Transitions & Hover-Farben
 *
 * VERBOTEN (gehört in page-specific CSS):
 * ❌ Layout (width, height, padding, margin, flex, grid)
 * ❌ Positioning (position, top, left, z-index)
 * ❌ Display-Modi (display, visibility)
 *
 * GRUND: Theme-Änderungen dürfen NIEMALS das Layout brechen!
 *
 * Bei Unsicherheit: Lieber in page-specific CSS auslagern!
 * ====================================================================
 */

/* ====================================================================
 * ABSCHNITT 1: TABLE HEADER THEMING
 * ==================================================================== */

.fm-table-sortable thead.table-dark th {
    background-color: #212529 !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.875rem;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}

.fm-table-sortable thead.table-dark th:hover {
    background-color: #212529 !important;
}

/* ====================================================================
 * ABSCHNITT 2: SORTING INTERACTION COLORS
 * ==================================================================== */

/* Nicht-sortierte Spalten */
.fm-table-sortable thead th.sortable:not(.sorted) a,
.fm-table-sortable thead th.sortable:not(.sorted) a:link,
.fm-table-sortable thead th.sortable:not(.sorted) a:visited {
    color: #ffffff !important;
    transition: color 0.2s ease;
}

.fm-table-sortable thead th.sortable:not(.sorted):hover a {
    color: var(--fm-gold, #ffd700) !important;
}

/* Sortierte Spalte - Gold Background */
.fm-table-sortable thead th.sorted,
.fm-table-sortable thead th.sorted:hover {
    background-color: var(--fm-gold, #ffd700) !important;
}

.fm-table-sortable thead th.sorted a,
.fm-table-sortable thead th.sorted a:link,
.fm-table-sortable thead th.sorted a:visited,
.fm-table-sortable thead th.sorted a:hover {
    color: #000000 !important;
    font-weight: 700;
}

/* Sort Arrow */
.fm-table-sortable thead th .sort-arrow {
    font-size: 1.17rem;
    font-weight: bold;
    line-height: 0.8;
}

/* ====================================================================
 * ABSCHNITT 3: TBODY STYLING
 * ==================================================================== */

.fm-table-sortable tbody tr:hover {
    background-color: rgba(182, 139, 71, 0.1);
}

.fm-table-sortable .team-link {
    color: var(--bs-body-color);
    transition: color 0.2s ease;
}

.fm-table-sortable .team-link:hover {
    color: var(--fm-gold, #ffd700);
}

/* ====================================================================
 * ABSCHNITT 4: TYPOGRAPHY
 * ==================================================================== */

.fm-table-sortable {
    font-size: 0.95rem;
}

.fm-table-sortable small {
    font-size: 0.8125rem;
    line-height: 1.3;
}

/* SEO Content Block */
.fm-table-seo-content {
    color: var(--bs-body-color);
    font-size: 1rem;
    line-height: 1.6;
}

.fm-table-seo-content strong {
    color: var(--fm-gold);
    font-weight: 600;
}

/* ====================================================================
 * ABSCHNITT 5: SPEZIELLE KOMPONENTEN (Badges, Progress)
 * ==================================================================== */

/* Badge-Styles für Geisterspiele etc. */
.fm-table-sortable .badge.bg-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
}

/* Progress-Bar (z.B. Stadionauslastung) */
.fm-table-sortable .attendance-progress {
    background-color: rgba(0, 0, 0, 0.1);
}

.fm-table-sortable .attendance-progress .progress-bar {
    background-color: var(--fm-gold);
    transition: width 0.3s ease;
}

/* ====================================================================
 * ABSCHNITT 6: FOOTER
 * ==================================================================== */

.fm-table-sortable tfoot tr.table-dark td {
    background-color: #212529 !important;
    color: white !important;
    border-color: #212529 !important;
}

/* ====================================================================
 * ABSCHNITT 7: RESPONSIVE FONT SIZES
 * ==================================================================== */

@media (max-width: 992px) {
    .fm-table-sortable {
        font-size: 0.875rem;
    }

    .fm-table-sortable thead th {
        font-size: 0.8125rem;
    }

    .fm-table-sortable small {
        font-size: 0.75rem;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .fm-table-sortable {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .fm-table-seo-content {
        font-size: 0.95rem;
    }
}

/* ====================================================================
 * ABSCHNITT 8: TICKETPRICES - COST BREAKDOWN THEME
 * ====================================================================
 * Visuelle Styles für Kostenaufschlüsselung in Ticketpreis-Tabelle
 * ==================================================================== */

.cost-breakdown {
    background-color: rgba(182, 139, 71, 0.1);
    border: 1px solid rgba(182, 139, 71, 0.2);
}

.fm-table-sortable tbody tr:hover .cost-breakdown {
    background-color: rgba(182, 139, 71, 0.2);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .cost-breakdown {
        background-color: rgba(182, 139, 71, 0.2);
        border-color: rgba(182, 139, 71, 0.3);
    }

    .fm-table-sortable tbody tr:hover .cost-breakdown {
        background-color: rgba(182, 139, 71, 0.3);
    }
}

/* ====================================================================
 * ABSCHNITT 9: PRINT STYLES (nur Farben!)
 * ==================================================================== */

@media print {
    .fm-table-sortable {
        font-size: 0.75rem;
    }

    .fm-table-sortable thead th a {
        color: #000 !important;
    }

    .fm-table-sortable .team-link {
        color: #000 !important;
    }
}