/**
 * Einheitliches Tabellen-Design für alle Tabellen
 * Basierend auf .thema-table als Referenz
 */

/* Allgemeine Tabellen-Basis */
.unified-table,
.thema-table,
.benutzer-tabelle,
.kalkulation-tabelle,
.kalkulation-liste-tabelle,
.aufgaben-tabelle,
.statistik-aufgaben-tabelle,
.statistik-vergleich-tabelle {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.unified-table thead,
.thema-table thead,
.benutzer-tabelle thead,
.kalkulation-tabelle thead,
.kalkulation-liste-tabelle thead,
.aufgaben-tabelle thead,
.statistik-aufgaben-tabelle thead,
.statistik-vergleich-tabelle thead {
    background: var(--primary-color);
    color: #fff;
}

.unified-table th,
.thema-table th,
.benutzer-tabelle th,
.kalkulation-tabelle th,
.kalkulation-liste-tabelle th,
.aufgaben-tabelle th,
.statistik-aufgaben-tabelle th,
.statistik-vergleich-tabelle th {
    padding: var(--spacing-md);
    text-align: left;
    font-weight: 600;
    color: #fff;
}

.unified-table th.sortable,
.thema-table th.sortable,
.benutzer-tabelle th.sortable,
.kalkulation-tabelle th.sortable,
.kalkulation-liste-tabelle th.sortable,
.aufgaben-tabelle th.sortable,
.statistik-aufgaben-tabelle th.sortable,
.statistik-vergleich-tabelle th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.unified-table th.sortable:hover,
.thema-table th.sortable:hover,
.benutzer-tabelle th.sortable:hover,
.kalkulation-tabelle th.sortable:hover,
.kalkulation-liste-tabelle th.sortable:hover,
.aufgaben-tabelle th.sortable:hover,
.statistik-aufgaben-tabelle th.sortable:hover,
.statistik-vergleich-tabelle th.sortable:hover,
table th.sortable:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

.unified-table th.sortable .sort-indicator,
.thema-table th.sortable .sort-indicator,
.benutzer-tabelle th.sortable .sort-indicator,
.kalkulation-tabelle th.sortable .sort-indicator,
.kalkulation-liste-tabelle th.sortable .sort-indicator,
.aufgaben-tabelle th.sortable .sort-indicator,
.statistik-aufgaben-tabelle th.sortable .sort-indicator,
.statistik-vergleich-tabelle th.sortable .sort-indicator,
table th.sortable .sort-indicator {
    margin-left: 5px;
    font-size: 0.8em;
    opacity: 0.8;
    color: rgba(255, 255, 255, 0.9);
}

.unified-table .checkbox-column,
.thema-table .checkbox-column,
.benutzer-tabelle .checkbox-column,
.kalkulation-tabelle .checkbox-column,
.kalkulation-liste-tabelle .checkbox-column,
.aufgaben-tabelle .checkbox-column {
    width: 40px;
    text-align: center;
    padding: var(--spacing-md) var(--spacing-xs);
}

.unified-table td,
.thema-table td,
.benutzer-tabelle td,
.kalkulation-tabelle td,
.kalkulation-liste-tabelle td,
.aufgaben-tabelle td,
.statistik-aufgaben-tabelle td,
.statistik-vergleich-tabelle td {
    padding: var(--spacing-md);
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
    position: relative;
}

/* Tabellenzeilen: border-bottom auf tr setzen für durchgehende Linie */
.unified-table tbody tr,
.thema-table tbody tr,
.benutzer-tabelle tbody tr,
.kalkulation-tabelle tbody tr,
.kalkulation-liste-tabelle tbody tr,
.aufgaben-tabelle tbody tr,
.statistik-aufgaben-tabelle tbody tr,
.statistik-vergleich-tabelle tbody tr {
    border-bottom: 1px solid #e0e0e0;
}

/* Entferne border-bottom von einzelnen td, wenn tr bereits border-bottom hat */
.unified-table tbody tr td,
.thema-table tbody tr td,
.benutzer-tabelle tbody tr td,
.kalkulation-tabelle tbody tr td,
.kalkulation-liste-tabelle tbody tr td,
.aufgaben-tabelle tbody tr td,
.statistik-aufgaben-tabelle tbody tr td,
.statistik-vergleich-tabelle tbody tr td {
    border-bottom: none;
}

/* Action-Buttons-Zelle: vertikal zentriert */
.action-buttons-cell,
.unified-table td.action-buttons-cell,
.thema-table td.action-buttons-cell,
.benutzer-tabelle td.action-buttons-cell,
.kalkulation-tabelle td.action-buttons-cell,
.kalkulation-liste-tabelle td.action-buttons-cell,
.aufgaben-tabelle td.action-buttons-cell,
.unified-table td[onclick*="stopPropagation"],
.thema-table td[onclick*="stopPropagation"],
.benutzer-tabelle td[onclick*="stopPropagation"],
.kalkulation-tabelle td[onclick*="stopPropagation"],
.kalkulation-liste-tabelle td[onclick*="stopPropagation"],
.aufgaben-tabelle td[onclick*="stopPropagation"] {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    padding: var(--spacing-md) !important;
    position: relative !important;
    height: 100% !important;
}

/* Abwechselnde Zeilenfarben - Global für alle Tabellen */
.unified-table tbody tr:nth-child(even),
.thema-table tbody tr:nth-child(even),
.benutzer-tabelle tbody tr:nth-child(even),
.kalkulation-tabelle tbody tr:nth-child(even),
.kalkulation-liste-tabelle tbody tr:nth-child(even),
.aufgaben-tabelle tbody tr:nth-child(even),
.statistik-aufgaben-tabelle tbody tr:nth-child(even),
.statistik-vergleich-tabelle tbody tr:nth-child(even),
table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.unified-table tbody tr:nth-child(odd),
.thema-table tbody tr:nth-child(odd),
.benutzer-tabelle tbody tr:nth-child(odd),
.kalkulation-tabelle tbody tr:nth-child(odd),
.kalkulation-liste-tabelle tbody tr:nth-child(odd),
.aufgaben-tabelle tbody tr:nth-child(odd),
.statistik-aufgaben-tabelle tbody tr:nth-child(odd),
.statistik-vergleich-tabelle tbody tr:nth-child(odd),
table tbody tr:nth-child(odd) {
    background: #fff;
}

.unified-table tbody tr:hover,
.thema-table tbody tr:hover,
.benutzer-tabelle tbody tr:hover,
.kalkulation-tabelle tbody tr:hover,
.kalkulation-liste-tabelle tbody tr:hover,
.aufgaben-tabelle tbody tr:hover,
.statistik-aufgaben-tabelle tbody tr:hover,
.statistik-vergleich-tabelle tbody tr:hover,
table tbody tr:hover {
    background: #f0f4ff !important;
}

.unified-table tbody tr.row-clickable:hover,
.thema-table tbody tr.thema-row-clickable:hover,
.benutzer-tabelle tbody tr.benutzer-row-clickable:hover,
.kalkulation-tabelle tbody tr.kalkulation-row-clickable:hover,
.kalkulation-liste-tabelle tbody tr.kalkulation-row-clickable:hover,
.aufgaben-tabelle tbody tr.aufgabe-row-clickable:hover {
    background-color: #f0f0ff;
    cursor: pointer;
}

.unified-table tbody tr:last-child,
.thema-table tbody tr:last-child,
.benutzer-tabelle tbody tr:last-child,
.kalkulation-tabelle tbody tr:last-child,
.kalkulation-liste-tabelle tbody tr:last-child,
.aufgaben-tabelle tbody tr:last-child,
.statistik-aufgaben-tabelle tbody tr:last-child,
.statistik-vergleich-tabelle tbody tr:last-child {
    border-bottom: none;
}

.unified-table .action-buttons,
.thema-table .action-buttons,
.benutzer-tabelle .action-buttons,
.kalkulation-tabelle .action-buttons,
.kalkulation-liste-tabelle .action-buttons,
.aufgaben-tabelle .action-buttons {
    display: flex;
    gap: var(--spacing-sm);
}

.unified-table .edit-button,
.thema-table .edit-button,
.benutzer-tabelle .edit-button,
.kalkulation-tabelle .edit-button,
.kalkulation-liste-tabelle .edit-button,
.aufgaben-tabelle .edit-button {
    padding: var(--spacing-xs) var(--spacing-md);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.3s;
    background: #28a745;
    color: #fff;
}

.unified-table .edit-button:hover,
.thema-table .edit-button:hover,
.kalkulation-tabelle .edit-button:hover,
.kalkulation-liste-tabelle .edit-button:hover,
.aufgaben-tabelle .edit-button:hover {
    background: #218838;
    transform: translateY(-1px);
}

.unified-table .delete-button,
.thema-table .delete-button,
.benutzer-tabelle .delete-button,
.kalkulation-tabelle .delete-button,
.kalkulation-liste-tabelle .delete-button,
.aufgaben-tabelle .delete-button {
    padding: var(--spacing-xs) var(--spacing-md);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.3s;
    background: #dc3545;
    color: #fff;
}

.unified-table .delete-button:hover,
.thema-table .delete-button:hover,
.kalkulation-tabelle .delete-button:hover,
.kalkulation-liste-tabelle .delete-button:hover,
.aufgaben-tabelle .delete-button:hover {
    background: #c82333;
    transform: translateY(-1px);
}

/* Spezifische Styles für Statistik-Tabellen */
.statistik-aufgaben-tabelle th:first-child,
.statistik-vergleich-tabelle th:first-child {
    text-align: center;
}

.statistik-aufgaben-tabelle td:first-child,
.statistik-vergleich-tabelle td:first-child {
    text-align: center;
}

.statistik-aufgaben-tabelle input[type="checkbox"],
.statistik-vergleich-tabelle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color);
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .unified-table,
    .thema-table,
    .benutzer-tabelle,
    .kalkulation-tabelle,
    .kalkulation-liste-tabelle,
    .aufgaben-tabelle,
    .statistik-aufgaben-tabelle,
    .statistik-vergleich-tabelle {
        font-size: 0.9em;
    }
    
    .unified-table th,
    .unified-table td,
    .thema-table th,
    .thema-table td,
    .benutzer-tabelle th,
    .benutzer-tabelle td,
    .kalkulation-tabelle th,
    .kalkulation-tabelle td,
    .kalkulation-liste-tabelle th,
    .kalkulation-liste-tabelle td,
    .aufgaben-tabelle th,
    .aufgaben-tabelle td,
    .statistik-aufgaben-tabelle th,
    .statistik-aufgaben-tabelle td,
    .statistik-vergleich-tabelle th,
    .statistik-vergleich-tabelle td {
        padding: var(--spacing-sm);
    }
    
    .unified-table .action-buttons,
    .thema-table .action-buttons,
    .benutzer-tabelle .action-buttons,
    .kalkulation-tabelle .action-buttons,
    .kalkulation-liste-tabelle .action-buttons,
    .aufgaben-tabelle .action-buttons {
        flex-direction: column;
    }
    
    .unified-table .edit-button,
    .unified-table .delete-button,
    .thema-table .edit-button,
    .thema-table .delete-button,
    .benutzer-tabelle .edit-button,
    .benutzer-tabelle .delete-button,
    .kalkulation-tabelle .edit-button,
    .kalkulation-tabelle .delete-button,
    .kalkulation-liste-tabelle .edit-button,
    .kalkulation-liste-tabelle .delete-button,
    .aufgaben-tabelle .edit-button,
    .aufgaben-tabelle .delete-button {
        width: 100%;
    }
}