/*
 * Bestellliste – Frontend & Print Stylesheet
 *
 * Einbinden: NUR im Frontend, NICHT im Gutenberg-Editor.
 * In WordPress via wp_enqueue_style() in wp_enqueue_scripts.
 *
 * Spalten-Index:
 *   1 = Sichtbarkeit (Checkbox) — Editor-only, öffentlich versteckt
 *   2 = Kategorie (select → label)
 *   3 = Produkt
 *   4 = Verf. Gläser   — versteckt
 *   5 = Kartons im Lager — versteckt
 *   6 = Preis
 *   7 = Karton-Nr.     — versteckt
 */


/* ── Editor-only Spalten + Wert1, Wert2, Box verstecken ── */
.bestellliste th:nth-child(1),
.bestellliste td:nth-child(1),
.bestellliste th:nth-child(4),
.bestellliste td:nth-child(4),
.bestellliste th:nth-child(5),
.bestellliste td:nth-child(5),
.bestellliste th:nth-child(7),
.bestellliste td:nth-child(7) {
    display: none;
}


/* ── Select wie ein normales Label/Span darstellen ── */
.bestellliste select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    pointer-events: none;
    cursor: default;
    outline: none;
}


/* ── Zeilen mit deaktivierter Sichtbarkeits-Checkbox verstecken ── */
.bestellliste tr:has(input[type="checkbox"]:not(:checked)) {
    display: none;
}


/* ── Tabellen-Basis-Styles ── */
.bestellliste-wrapper {
    overflow-x: auto;
}

.bestellliste {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    table-layout: fixed; /* Spaltenbreiten bleiben beim Filtern stabil */
}

/* Sichtbare Spalten (2 = Kategorie, 3 = Produkt, 6 = Preis) */
.bestellliste th:nth-child(2) { width: 250px; }
.bestellliste th:nth-child(3) { width: auto; }   /* nimmt restlichen Platz */
.bestellliste th:nth-child(6) { width: 90px; }

.bestellliste th,
.bestellliste td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bestellliste thead th {
    background: #f5f5f5;
    font-weight: 600;
    border-bottom: 2px solid #ccc;
}

.bestellliste tbody tr:hover {
    background: #fafafa;
}


/* ── Filter-Buttons ── */
.bestellliste-filter {
    margin-bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bestellliste-filter-btn {
    padding: 4px 12px;
    border: 1px solid #bbb;
    background: #fff;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
}

.bestellliste-filter-btn:hover {
    background: #f0f0f0;
}

.bestellliste-filter-btn.active {
    background: #333;
    color: #fff;
    border-color: #333;
}


/* ── Print ── */
@media print {
    .bestellliste-filter {
        display: none;
    }

    .bestellliste th,
    .bestellliste td {
        border: 1px solid #999;
        padding: 4px 8px;
        font-size: 12px;
    }

    .bestellliste thead th {
        background: #e0e0e0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}