/*
 * Nachtraege zur Artikeltabelle (resources/views/shop/teile/produkttabelle.blade.php).
 *
 * 🚩 WARUM DIE SELEKTOREN EINE STUFE ZU HOCH SIND.
 * Der Grundblock der Tabelle steht als `<style>` am ENDE des <body> von
 * layout.blade.php (Zeile 154-376). Diese Datei wird aus der Teilansicht
 * heraus geladen und steht damit im Dokument DAVOR -- bei gleicher
 * Spezifitaet gewinnt der spaetere Block. Deshalb traegt jede Regel hier
 * `table.gmx-ptab` als Vorsilbe. Sobald die Zeilen in den Block von
 * layout.blade.php wandern duerfen, kann die Vorsilbe weg (To-do im
 * Bericht vom 18.10.2026).
 */

/*
 * Der Knopf „zum Produkt" lief aus seinem Rahmen (Befund M.W., 18.10.2026).
 *
 * Gemessen bei 1280 px auf /c/kreissaegeblaetter/alu/ (353 Zeilen):
 * Der Text braucht 79,7 px, mit dem Innenabstand des Themes (6px 16px)
 * also 111,7 px Knopfbreite. Die Spalte ist 7rem = 112 px breit, abzueglich
 * Zellenabstand bleiben dem Knopf 92,8 px -- er bricht auf zwei Zeilen um.
 * Das Theme gibt `.btn-sm` aber eine FESTE Hoehe
 * (style.css: height: calc(2px + 1.875rem) = 32 px), und so stand die
 * zweite Zeile unter dem Rand: scrollHeight 42 px gegen clientHeight 30 px,
 * in 353 von 353 Zeilen.
 *
 * Der Live-Shop hat dasselbe Etikett und dieselben Klassen, dort aber
 * 130,1 px Zellen- und 120 px Knopfbreite -- er hat die volle Seitenbreite,
 * weil neben seiner Tabelle keine Filterleiste steht.
 *
 * Gewaehlt: den Innenabstand des Knopfes in DIESER Spalte kuerzen und den
 * Umbruch verbieten, statt die Spalte zu verbreitern. Gemessen wurden
 * beide Wege: 7,5rem Spaltenbreite nimmt den Merkmalsspalten je 1,6 px,
 * 8,25rem (plus 9rem Preis) laesst dafuer den Preis in allen 353 Zeilen
 * abschneiden. Diese Fassung kostet keine andere Spalte etwas:
 * 353 von 353 Knoepfen einzeilig, Zeilenhoehe unveraendert 79,4 px.
 */
table.gmx-ptab td.gmx-ptab__zelle--link .btn {
    display: block;
    overflow: hidden;
    padding-left: .25rem;
    padding-right: .25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Auf dem Handy ist die Zeile eine Karte und der Knopf laeuft ueber die
   ganze Breite -- dort war nie zu wenig Platz, und der normale
   Innenabstand des Themes sieht besser aus. */
@media (max-width: 767.98px) {
    table.gmx-ptab td.gmx-ptab__zelle--link .btn {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/*
 * Spaltenbreiten: die Merkmalsspalten bekommen ihre Breite als
 * style-Angabe aus dem Blade (nach dem laengsten Wert, siehe dort und
 * docs/produkttabelle.md §5). Hier stehen nur die zwei Regeln, die
 * dazugehoeren und nicht an einer einzelnen Spalte haengen.
 *
 * Erstens: Die Beschreibung bekommt KEINE feste Breite mehr, sondern
 * den Rest. Bei fuenf Merkmalsspalten sind das 260 px, bei sieben
 * weniger -- genau richtig, denn dann braucht die Tabelle den Platz
 * woanders. Die 34 % aus layout.blade.php teilten dagegen immer gleich.
 *
 * Zweitens: 0,25rem statt 0,6rem Polster links und rechts in den
 * Wertspalten. Gemessen am 18.10.2026 auf /c/kreissaegeblaetter/alu/:
 * Das Polster kostete je Spalte 19,2 px von 55,3 -- bei einer Spalte
 * mit drei Ziffern mehr als ein Drittel. Mit 8 px bleibt derselben
 * Spalte genug fuer ihren Wert. Die Preisspalte behaelt ihr Polster,
 * sie ist breit genug, und der Knopf in der Linkspalte auch.
 *
 * Nur ab `md`: Unterhalb davon ist die Zeile eine Karte, dort gelten
 * Beschriftung und Wert nebeneinander und das Polster von
 * layout.blade.php.
 */
@media (min-width: 768px) {
    table.gmx-ptab th.gmx-ptab__spalte--beschreibung { width: auto; }

    table.gmx-ptab th.gmx-ptab__spalte--merkmal,
    table.gmx-ptab td[data-spalte]:not(.gmx-ptab__zelle--preis) {
        padding-left: .25rem;
        padding-right: .25rem;
    }
}

/*
 * Sortieren im Browser (js/produkttabelle.js).
 *
 * `gmx-ptab-js` setzt das Skript selbst, nachdem es sich eingehaengt hat.
 * Ohne JavaScript bleibt alles wie zuvor -- Links auf `?sort=`, der
 * Server sortiert. Deshalb haengt hier nur das Aussehen daran, nie die
 * Bedienbarkeit.
 */
.gmx-ptab-js table.gmx-ptab thead th a.gmx-ptab__sort {
    cursor: pointer;
    /* Doppelklick auf eine Ueberschrift soll die Spaltenbeschriftung
       nicht markieren -- beim zweiten Klick dreht die Richtung. */
    -webkit-user-select: none;
    user-select: none;
}

.gmx-ptab-js table.gmx-ptab thead th:hover {
    background: #efefef;
}

/* Die Pfeilmarke der Handy-Sortierleiste ist leer, solange die Spalte
   nicht die sortierte ist; sie soll dann auch keinen Platz nehmen. */
.gmx-ptab-sortleiste__pfeil:empty {
    display: none;
}