/* Global Table Styles - Purple Theme */

/* Table wrapper for border-radius */
.table-wrapper {
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: transparent;
}

/* Clip table corners when used directly inside card (no padding) */
.card-body.p-0 {
    overflow: hidden;
}

/* Base table styling with Bootstrap 5 variables */
.table {
    margin-bottom: 0;
}

.table thead {
    border-bottom: 1px solid var(--border);
}

/* DataTables-Header-Look (docs/design/system/README.md):
   0.72rem uppercase, Farbe text-secondary (#858585 dark), eigener BG-Ton --table-header-bg. */
.table thead th {
    background: var(--table-header-bg);
    color: var(--text-secondary);
    font-weight: 600;
    border: none;
    padding: 14px 16px;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    /* Spaltenköpfe nie mitten im Wort brechen ("PROVISIO\nN") —
       Überbreite fängt der .table-responsive-Wrapper per Scroll ab. */
    white-space: nowrap;
}

/* Aktions-Zellen: Buttons bleiben nebeneinander statt zu stapeln;
   die Spaltenbreite ergibt sich aus dem Auto-Layout der Tabelle. */
.table td.table-actions {
    white-space: nowrap;
}

.table tbody tr {
    transition: background 0.15s ease;
}

.table tbody tr td {
    --bs-table-bg: var(--surface-tonal-0);
    --bs-table-color: #ffffff;
    padding: 14px 16px;
    vertical-align: middle;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--surface-tonal-20);
}

.table tbody tr:nth-of-type(even) td {
    --bs-table-bg: var(--surface-tonal-10);
}

.table tbody tr:hover td {
    --bs-table-bg: var(--surface-tonal-20);
    --bs-table-color: #ffffff;
    --bs-table-hover-color: #ffffff;
    color: #ffffff;
}

.table tbody tr td strong {
    color: #ffffff;
    font-weight: 600;
}

/* Table striped variant */
.table-striped tbody tr td {
    --bs-table-bg: var(--surface-tonal-0);
}

.table-striped tbody tr:nth-of-type(even) td {
    --bs-table-bg: var(--surface-tonal-10);
}

/* Table hover variant */
.table-hover tbody tr:hover td {
    --bs-table-bg: var(--surface-tonal-20);
    --bs-table-color: #ffffff;
    --bs-table-hover-color: #ffffff;
    color: #ffffff;
}

/* Custom class for inactive/disabled rows */
.row-inactive td {
    --bs-table-bg: var(--surface-tonal-10);
    --bs-table-color: rgba(255, 255, 255, 0.5);
    opacity: 0.6;
}

/* Custom class for rows without entries (replaces Bootstrap's .table-secondary) */
.row-no-entries td {
    --bs-table-bg: var(--surface-tonal-10);
    --bs-table-color: rgba(255, 255, 255, 0.6);
}

.row-no-entries:hover td {
    --bs-table-bg: var(--surface-tonal-20);
    --bs-table-color: #ffffff;
    --bs-table-hover-color: #ffffff;
    color: #ffffff;
}

/* Entry table specific (for dashboard) */
.entry-table {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px var(--shadow);
}

.entry-table table {
    margin: 0;
}

.entry-table thead th {
    font-size: var(--text-base);
    padding: 20px;
}

.entry-table tbody td {
    padding: 18px 20px;
    font-size: 1.1rem;
}

/* Clickable rows */
.clickable-row {
    cursor: pointer;
}

.clickable-row:hover td {
    --bs-table-bg: var(--surface-tonal-20);
    --bs-table-color: #ffffff;
    --bs-table-hover-color: #ffffff;
    color: #ffffff;
}

/* Expense rows */
.expense-row td {
    --bs-table-bg: rgba(217, 74, 74, 0.1);
}

.expense-row:hover td {
    --bs-table-bg: rgba(217, 74, 74, 0.2);
    --bs-table-color: #ffffff;
    --bs-table-hover-color: #ffffff;
    color: #ffffff;
}

.expense-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--danger);
    color: white;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
}

.expense-amount {
    color: var(--danger);
    font-weight: 600;
}

/* Time and employee styling */
.entry-time {
    font-weight: 600;
    color: var(--primary-softer);
}

.entry-employee {
    font-weight: 500;
}

.entry-amount {
    font-weight: 600;
    color: #ffffff;
}

/* =============================================
   LIGHT MODE OVERRIDES
   ============================================= */
[data-theme="light"] .table thead {
    border-bottom: 1px solid var(--border);
}

[data-theme="light"] .table thead th {
    background: var(--table-header-bg);
    color: var(--text-secondary);
}

[data-theme="light"] .table tbody tr td {
    --bs-table-bg: #faf5ff;
    --bs-table-color: var(--text-primary);
    border-bottom: 1px solid #efe0ff;
}

[data-theme="light"] .table tbody tr:nth-of-type(even) td {
    --bs-table-bg: #f4ebff;
}

[data-theme="light"] .table tbody tr:hover td {
    --bs-table-bg: #e8d5ff;
    --bs-table-color: #1e1e1e;
    --bs-table-hover-color: #1e1e1e;
    color: #1e1e1e;
}

[data-theme="light"] .table tbody tr td strong {
    color: #1e1e1e;
}

[data-theme="light"] .table-striped tbody tr td {
    --bs-table-bg: #faf5ff;
}

[data-theme="light"] .table-striped tbody tr:nth-of-type(even) td {
    --bs-table-bg: #f4ebff;
}

[data-theme="light"] .table-hover tbody tr:hover td {
    --bs-table-bg: #e8d5ff;
    --bs-table-color: #1e1e1e;
    --bs-table-hover-color: #1e1e1e;
    color: #1e1e1e;
}

[data-theme="light"] .row-inactive td {
    --bs-table-bg: #f4ebff;
    --bs-table-color: rgba(30, 30, 30, 0.5);
}

[data-theme="light"] .row-no-entries td {
    --bs-table-bg: #f4ebff;
    --bs-table-color: rgba(30, 30, 30, 0.6);
}

[data-theme="light"] .clickable-row:hover td {
    --bs-table-bg: #e8d5ff;
    --bs-table-color: #1e1e1e;
    --bs-table-hover-color: #1e1e1e;
    color: #1e1e1e;
}

[data-theme="light"] .expense-row td {
    --bs-table-bg: rgba(156, 33, 33, 0.06);
}

[data-theme="light"] .expense-row:hover td {
    --bs-table-bg: rgba(156, 33, 33, 0.12);
    --bs-table-color: #1e1e1e;
    color: #1e1e1e;
}

[data-theme="light"] .entry-time {
    color: var(--primary);
}

[data-theme="light"] .entry-amount {
    color: var(--text-primary);
}

/* =============================================
   MONATS-GRUPPENKOPF (z.B. Bankeinzahlungen #27)
   Akkordeon-Kopf: Primary-Tint statt thead-Grau, damit
   Spaltenkopf und Monatszeile klar unterscheidbar sind;
   Hover neutralisiert, damit die Kopfzeile nicht wie eine
   Datenzeile wirkt. Trennlinie + Extra-Padding setzen die
   Gruppen voneinander ab.
   ============================================= */
.table tbody tr.month-group-row td,
.table-hover tbody tr.month-group-row:hover td {
    --bs-table-bg: rgba(157, 0, 255, 0.12);
    --bs-table-color: #ffffff;
    color: #ffffff;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    border-top: 2px solid var(--border-light);
}

.table tbody:first-of-type tr.month-group-row td {
    border-top: 0;
}

/* Zebra pro Monatsgruppe normalisieren: die Gruppenkopf-Zeile
   verschiebt nth-of-type um 1, dadurch stünde die erste Einzahlung
   hell statt dunkel (invertiert zum Dashboard-Look). odd/even für
   .deposit-row tauschen stellt das gewohnte Muster wieder her. */
.table tbody tr.deposit-row:nth-of-type(even) td {
    --bs-table-bg: var(--surface-tonal-0);
}

.table tbody tr.deposit-row:nth-of-type(odd) td {
    --bs-table-bg: var(--surface-tonal-10);
}

.table-hover tbody tr.deposit-row:hover td {
    --bs-table-bg: var(--surface-tonal-20);
    --bs-table-color: #ffffff;
    --bs-table-hover-color: #ffffff;
    color: #ffffff;
}

[data-theme="light"] .table tbody tr.month-group-row td,
[data-theme="light"] .table-hover tbody tr.month-group-row:hover td {
    --bs-table-bg: #e2ccff; /* kräftiger als der neutrale thead-Ton (--table-header-bg), sonst verwechselbar */
    --bs-table-color: #5a1a8a;
    color: #5a1a8a;
}

[data-theme="light"] .table tbody tr.deposit-row:nth-of-type(even) td {
    --bs-table-bg: #faf5ff;
}

[data-theme="light"] .table tbody tr.deposit-row:nth-of-type(odd) td {
    --bs-table-bg: #f4ebff;
}

[data-theme="light"] .table-hover tbody tr.deposit-row:hover td {
    --bs-table-bg: #e8d5ff;
    --bs-table-color: #1e1e1e;
    --bs-table-hover-color: #1e1e1e;
    color: #1e1e1e;
}