/* ===== TABELLEN ===== */
/* border-collapse:separate + border-spacing:0 ist visuell identisch zu collapse
   (nur border-bottom auf th/td, kein border-top → keine Doppelborder),
   ermöglicht aber border-radius auf einzelnen Zellen. */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; }
.table th {
    text-align: left;
    padding: 0.625rem 0.875rem;
    background: var(--color-surface-alt);
    border-bottom: 2px solid var(--color-border);
    font-weight: 600;
    color: var(--color-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sort-th-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
}
.sort-th-link:hover { color: var(--color-primary); }
.table td { padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--color-border); }
.table tbody tr { transition: background 0.14s ease; }
.table tbody tr:hover { background: var(--color-hover); }
.table tbody tr:last-child td { border-bottom: none; }

/* Verkauf-Positionen: Rabattzeile (kein !important → :hover greift) */
.table tbody tr.row-sale-discount { background: rgba(245,158,11,0.07); }
.table tbody tr.row-sale-discount:hover { background: rgba(245,158,11,0.18); }
.table .text-right { text-align: right; }

/* Obere Ecken aller Tabellen in Cards runden (padding:0 → Tabelle bündig mit Card-Rand) */
.card .table thead tr:first-child th:first-child { border-top-left-radius: var(--radius); }
.card .table thead tr:first-child th:last-child  { border-top-right-radius: var(--radius); }

/* Produkte: Tabellenkopf sticky unter Navbar + Suchleiste.
   Direktkind-Selektor (>), damit nested <thead> in den per JS generierten
   Seriennummern-Sub-Tabellen NICHT fälschlich sticky wird. */
.table-products-sticky-head > thead > tr > th {
    position: sticky;
    top: calc(
        var(--products-sticky-navbar-offset, 3.85rem)
        + var(--products-sticky-search-offset, 3.2rem)
    );
    z-index: 20;
    background: var(--color-surface-alt);
    box-shadow: inset 0 -1px 0 var(--color-border);
}

/* Produkte: Produkt-Gruppenzeile sticky unter Navbar + Suchleiste + Thead.
   Sticky auf <td> (nicht <tr>), weil position:sticky auf <tr> in Firefox nicht
   funktioniert und in Chrome/Edge Rendering-Glitches verursacht — analog zur
   Container-Variante (.table-cp-sticky-head tr.cp-product-row td). */
.table-products-sticky-head > tbody > tr.product-parent-row > td {
    position: sticky;
    top: calc(
        var(--products-sticky-navbar-offset, 3.85rem)
        + var(--products-sticky-search-offset, 3.2rem)
        + var(--products-sticky-thead-offset, 2.5rem)
    );
    z-index: 10;
    background: var(--color-surface);
    box-shadow: inset 0 -1px 0 var(--color-border);
}

/* Row-overstock (Produkt > 30 Tage im Bestand) muss auf der sticky <td>
   sichtbar bleiben — td-Hintergrund oben überdeckt sonst die tr.row-overstock-Regel.
   WICHTIG: opakes Surface drunter + orange Tint als background-image schichten.
   Andernfalls zeigt das rgba(…, 0.18) die scrollenden Seriennummer-Zeilen
   durch (→ Text/Farb-Überschneidung in der gepinnten Zeile). */
.table-products-sticky-head > tbody > tr.product-parent-row.row-overstock > td {
    background-color: var(--color-surface);
    background-image: linear-gradient(rgba(217, 119, 6, 0.144), rgba(217, 119, 6, 0.144));
}
[data-theme="dark"]
.table-products-sticky-head > tbody > tr.product-parent-row.row-overstock > td {
    background-image: linear-gradient(rgba(217, 119, 6, 0.176), rgba(217, 119, 6, 0.176));
}

/* Row-sold-out (stock = 0) — Zwei-Lagen-Schichtung: opakes Surface drunter,
   roter Tint als background-image drüber. Analog zur row-overstock-Lösung,
   damit Scroll-Inhalte nicht durch das transparente rgba durchscheinen. */
.table-products-sticky-head > tbody > tr.product-parent-row.row-sold-out > td {
    background-color: var(--color-surface);
    background-image: linear-gradient(rgba(239, 68, 68, 0.02975), rgba(239, 68, 68, 0.02975));
}
[data-theme="dark"]
.table-products-sticky-head > tbody > tr.product-parent-row.row-sold-out > td {
    background-image: linear-gradient(rgba(239, 68, 68, 0.04165), rgba(239, 68, 68, 0.04165));
}

/* Hover auf der Produkt-Gruppenzeile: muss auf <td> zielen, weil die sticky td
   einen eigenen Hintergrund hat und die generische .table tbody tr:hover-Regel
   sonst überdeckt. Overstock-/Sold-out-Tint bleibt durch verstärkte Opazität
   erhalten, statt vom Hover-Hintergrund geschluckt zu werden. */
.table-products-sticky-head > tbody > tr.product-parent-row > td {
    transition: background-color 0.15s ease, background-image 0.15s ease;
}
.table-products-sticky-head > tbody > tr.product-parent-row:hover > td {
    background-color: var(--color-hover);
}
.table-products-sticky-head > tbody > tr.product-parent-row.row-overstock:hover > td {
    background-image: linear-gradient(rgba(217, 119, 6, 0.224), rgba(217, 119, 6, 0.224));
}
[data-theme="dark"]
.table-products-sticky-head > tbody > tr.product-parent-row.row-overstock:hover > td {
    background-image: linear-gradient(rgba(217, 119, 6, 0.256), rgba(217, 119, 6, 0.256));
}
.table-products-sticky-head > tbody > tr.product-parent-row.row-sold-out:hover > td {
    background-image: linear-gradient(rgba(239, 68, 68, 0.06), rgba(239, 68, 68, 0.06));
}
[data-theme="dark"]
.table-products-sticky-head > tbody > tr.product-parent-row.row-sold-out:hover > td {
    background-image: linear-gradient(rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.08));
}

/* Produkte: innerer Seriennummer-Sub-Header sticky unter Produkt-Gruppenzeile.
   Dadurch bleiben "Seriennummer | Status | Container | ..." beim Scrollen durch
   viele Serien immer sichtbar. z-index niedriger als Gruppenzeile (10),
   damit die Gruppenzeile beim Übergang zum nächsten Produkt darüber liegt. */
.pserials-inner-table > thead > tr > th {
    position: sticky;
    top: calc(
        var(--products-sticky-navbar-offset, 3.85rem)
        + var(--products-sticky-search-offset, 3.2rem)
        + var(--products-sticky-thead-offset, 2.5rem)
        + var(--products-sticky-parent-row-offset, 3rem)
    );
    z-index: 5;
    background: var(--color-surface-alt);
    box-shadow: inset 0 -1px 0 var(--color-border);
}

@media (max-width: 1100px) {
    .table-products-sticky-head > thead > tr > th {
        position: static;
        top: auto;
        box-shadow: none;
    }
    .table-products-sticky-head > tbody > tr.product-parent-row > td {
        position: static;
        top: auto;
        box-shadow: none;
    }
    .pserials-inner-table > thead > tr > th {
        position: static;
        top: auto;
        box-shadow: none;
    }
}

/* Container: KPI-Header sticky unter Navbar */
.cp-sticky-header {
    position: sticky;
    top: var(--cp-navbar-offset, 3.85rem);
    z-index: 30;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

/* Container: Tabellenkopf sticky unter Navbar + KPI-Header */
.table-cp-sticky-head thead th {
    position: sticky;
    top: calc(
        var(--cp-navbar-offset, 3.85rem)
        + var(--cp-header-offset, 4.5rem)
    );
    z-index: 20;
    background: var(--color-surface-alt);
    box-shadow: inset 0 -1px 0 var(--color-border);
}

/* Container: Produkt-Gruppenzeile sticky unter Navbar + KPI-Header + Thead */
.table-cp-sticky-head tbody tr.cp-product-row td {
    position: sticky;
    top: calc(
        var(--cp-navbar-offset, 3.85rem)
        + var(--cp-header-offset, 4.5rem)
        + var(--cp-thead-offset, 2.5rem)
    );
    z-index: 10;
    background: var(--color-surface);
    box-shadow: inset 0 -1px 0 var(--color-border);
}

/* Container: Row-sold-out (alle Serials des Containers verkauft) muss auf sticky
   <td> sichtbar bleiben — analog zur Produkt-Variante. Zwei-Lagen-Schichtung:
   opakes Surface + roter Tint als linear-gradient-background-image. */
.table-cp-sticky-head tbody tr.cp-product-row.row-sold-out td {
    background-color: var(--color-surface);
    background-image: linear-gradient(rgba(239, 68, 68, 0.02975), rgba(239, 68, 68, 0.02975));
}
[data-theme="dark"]
.table-cp-sticky-head tbody tr.cp-product-row.row-sold-out td {
    background-image: linear-gradient(rgba(239, 68, 68, 0.04165), rgba(239, 68, 68, 0.04165));
}

/* Hover auf Container-Parent-Row (cp-product-row): gleiche Logik wie bei
   product-parent-row — sticky <td> hat eigenen Hintergrund, der tr:hover
   sonst überdeckt. Sold-out-Tint über background-image stärken, damit
   die Status-Markierung beim Hover nicht verschwindet. */
.table-cp-sticky-head tbody tr.cp-product-row td {
    transition: background-color 0.15s ease, background-image 0.15s ease;
}
.table-cp-sticky-head tbody tr.cp-product-row:hover td {
    background-color: var(--color-hover);
}
.table-cp-sticky-head tbody tr.cp-product-row.row-sold-out:hover td {
    background-image: linear-gradient(rgba(239, 68, 68, 0.06), rgba(239, 68, 68, 0.06));
}
[data-theme="dark"]
.table-cp-sticky-head tbody tr.cp-product-row.row-sold-out:hover td {
    background-image: linear-gradient(rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.08));
}

/* Container: KPI-Strip (Stat-Chips im sticky Header) */
.cp-kpi-strip {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.cp-kpi-chip {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.375rem 0.75rem;
    background: var(--color-bg);
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid var(--color-border);
    text-align: right;
}
.cp-kpi-chip-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    white-space: nowrap;
}
.cp-kpi-chip-value {
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}
.cp-kpi-divider {
    width: 1px;
    height: 2.25rem;
    background: var(--color-border);
    margin: 0 0.375rem;
    flex-shrink: 0;
    align-self: center;
}

/* Serial-Child-Row: Grundfarbe per CSS (nicht mehr inline im <tr>), damit
   :hover die Hintergrundfarbe regulär überschreiben kann. */
.table-cp-sticky-head tbody tr.cp-serial-row > td {
    background: var(--color-surface-alt);
    transition: background-color 0.15s ease;
}
.table-cp-sticky-head tbody tr.cp-serial-row:hover > td {
    background-color: var(--color-hover);
}

@media (max-width: 1100px) {
    .cp-sticky-header { position: static; top: auto; }
    .table-cp-sticky-head thead th { position: static; top: auto; box-shadow: none; }
    .table-cp-sticky-head tbody tr.cp-product-row td { position: static; top: auto; box-shadow: none; }
}

/* Container-Detail: lange URL-/Textinhalte in Kosten und Metadaten umbrechen,
   damit Aktionsbuttons (Bearbeiten/Löschen) sichtbar bleiben */
.container-meta-text {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.container-costs-table-wrap { overflow-x: auto; }
.container-costs-table td,
.container-costs-table th { vertical-align: top; }
.container-cost-desc {
    min-width: 18rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.container-cost-notes {
    display: block;
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.container-cost-actions {
    white-space: nowrap;
    width: 1%;
}
.container-cost-actions-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.container-add-cost-toggle,
.expenses-add-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-weight: 600;
    text-align: left;
    border-color: var(--color-primary);
    background: var(--color-surface-alt);
    color: var(--color-text);
    box-shadow: var(--shadow);
}
.container-add-cost-toggle:hover,
.expenses-add-toggle:hover {
    background: var(--color-hover);
    border-color: var(--color-primary-d);
    color: var(--color-text);
    transform: translateY(-1px);
}
.container-add-cost-toggle:focus-visible,
.expenses-add-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.28), var(--shadow);
}
.container-add-cost-toggle.is-open,
.expenses-add-toggle.is-open {
    background: rgba(59,130,246,0.08);
    border-color: var(--color-primary-d);
}
.container-add-cost-toggle-label,
.expenses-add-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}
.container-add-cost-toggle-label .fa-plus,
.expenses-add-toggle-label .fa-plus-circle {
    color: var(--color-primary);
}
.container-add-cost-chevron,
.expenses-add-chevron {
    flex: 0 0 auto;
    color: var(--color-primary);
    transition: transform 0.18s ease;
}
.container-add-cost-toggle.is-open .container-add-cost-chevron,
.expenses-add-toggle.is-open .expenses-add-chevron {
    transform: rotate(180deg);
}
.container-add-cost-panel,
.expenses-add-panel {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

/* Zeilen-Hervorhebungen */
.row-warning   { background: rgba(245,158,11,0.08) !important; }
.row-danger    { background: rgba(239,68,68,0.072) !important; box-shadow: inset 3px 0 0 var(--color-danger); }
.row-paid      { background: rgba(22,163,74,0.07)  !important; box-shadow: inset 3px 0 0 var(--color-success); }
.row-open      { background: rgba(217,119,6,0.07)  !important; box-shadow: inset 3px 0 0 var(--color-warning); }

.cost-status-card {
    overflow: clip;
    overflow-clip-margin: 8px;
}
.cost-status-table-wrap {
    overflow: visible;
}

.cost-status-hover-table tbody tr.row-paid,
.cost-status-hover-table tbody tr.row-open,
.cost-status-hover-table tbody tr.row-danger,
.cost-status-hover-table tbody tr.row-warning {
    transition: background 0.16s ease, filter 0.16s ease;
}
.cost-status-hover-table tbody tr.cost-row-highlight {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .cost-status-table-wrap {
        overflow-x: auto;
    }
}

@media (hover: hover) and (pointer: fine) {
    .cost-status-hover-table tbody tr.row-paid:hover {
        background: rgba(22,163,74,0.14) !important;
        filter: brightness(1.02);
    }

    .cost-status-hover-table tbody tr.row-open:hover {
        background: rgba(217,119,6,0.14) !important;
        filter: brightness(1.02);
    }

    .cost-status-hover-table tbody tr.row-danger:hover {
        background: rgba(239,68,68,0.14) !important;
        filter: brightness(1.02);
    }

    .cost-status-hover-table tbody tr.row-warning:hover {
        background: rgba(245,158,11,0.16) !important;
        filter: brightness(1.02);
    }
}

/* Zeile: Orange-Hintergrund wenn Produkt > 30 Tage im Bestand */
.row-overstock { background: rgba(217, 119, 6, 0.144) !important; }
[data-theme="dark"] .row-overstock { background: rgba(217, 119, 6, 0.176) !important; }

/* Zeile: Leicht rötlicher Hintergrund wenn Produkt ausverkauft (stock = 0).
   Darf mit row-overstock nicht gleichzeitig auftreten (Overstock setzt stock > 0
   voraus). Rotton stammt aus der --color-danger-Familie (analog zu row-danger). */
.row-sold-out { background: rgba(239, 68, 68, 0.02975) !important; }
[data-theme="dark"] .row-sold-out { background: rgba(239, 68, 68, 0.04165) !important; }

/* Generische Sort-Icons (Auf/Ab-Pfeile neben Spaltenköpfen) */
.sort-icons {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    margin-left: 4px;
    vertical-align: middle;
}
.sort-icons i {
    font-size: 0.65rem;
    color: var(--color-muted);
    opacity: 0.4;
}
.sort-icons i.is-active {
    color: var(--color-primary);
    opacity: 1;
}

/* Sortierbare Spalten-Köpfe */
.sort-header,
.sort-header:visited,
.sort-header:active {
    display: inline-flex;
    align-items: center;
    gap: 0;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}
.sort-header:hover { color: var(--color-primary); }

/* Code in Tabellen (z.B. Artikelnummer) */
code {
    background: var(--color-code-bg);
    color: var(--color-text);
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.85em;
    font-family: 'Consolas', 'Monaco', monospace;
}

/* =====================================================
   _table.css
   Zweck:          Core-CSS-Modul (Components)
   Verwendet von:  Core-Basis auf allen Seiten (main.php/auth.php)
   Abhaengigkeiten: Reihenfolge base -> layout -> components
   Verantwortlich: Core-Styles
   ===================================================== */