/* responsive.css — Mobile-First Layout-Schema für ideer Backend
   Ladereihenfolge: NACH materialize.min.css und addwild.css, VOR screen-spezifischem CSS.
   Breakpoints (Materialize-Standard):
     s : 0–600px   (phone)
     m : 601–992px (tablet)
     l : 993–1200px (small desktop)
     xl: 1201px+   (desktop)
*/

/* ---------- 1. Layout-Schema "Filter + Liste + Detail" ---------- */

/* Mobile-first: alles vertikal gestapelt, full-width */
.rwd-shell {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 0.5rem;
}
.rwd-filter,
.rwd-list,
.rwd-detail {
    width: 100%;
    min-width: 0;
}

/* Tablet: Liste + Detail nebeneinander, Filter darüber */
@media (min-width: 601px) {
    .rwd-shell {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "filter filter"
            "list   detail";
        gap: 0.75rem;
    }
    .rwd-filter { grid-area: filter; }
    .rwd-list   { grid-area: list; }
    .rwd-detail { grid-area: detail; }
}

/* Desktop: 3-Spalten Filter | Liste | Detail */
@media (min-width: 993px) {
    .rwd-shell {
        grid-template-columns: 18% 38% auto;
        grid-template-areas: "filter list detail";
    }
}

/* ---------- 2. Tabellen-Wrap ---------- */

.rwd-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.rwd-table-wrap > table {
    min-width: 600px; /* erzwingt horizontalen Scroll auf phone */
}

/* ---------- 3. Mobile-Nav-Trigger ---------- */

.rwd-nav-trigger {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    margin-right: 0.5rem;
    cursor: pointer;
    color: rgba(59, 50, 52, 0.7);
}
.rwd-nav-trigger i { font-size: 1.6rem; vertical-align: middle; }

@media (min-width: 993px) {
    .rwd-nav-trigger { display: none; }
}

/* Desktop-Nav (rechte ul) auf phone/tablet ausblenden */
@media (max-width: 992px) {
    nav .nav-wrapper > ul.right.hide-on-med-and-down,
    nav .nav-wrapper > ul#nav-mobile.right { display: none !important; }
}

/* ---------- 4. Modal-Sicherung ---------- */

@media (max-width: 600px) {
    .modal { width: 95% !important; max-width: 95vw; }
    .modal.smlmodal { width: 95% !important; }
    .modal .modal-content { padding: 1rem; }
}

/* ---------- 5. Form-Helper ---------- */

/* Inputs auf phone vollständig in Card */
@media (max-width: 600px) {
    .rwd-shell .input-field { width: 100%; }
    .rwd-shell .row { margin-left: 0; margin-right: 0; }
}

/* ---------- 6. Footer ---------- */

@media (max-width: 600px) {
    .footer { font-size: 0.85rem; line-height: 1.4rem; }
}

/* ---------- 6b. Print-Area (billingprint.html) ---------- */

/* Beim Drucken muss der Print-Bereich A4-breit sein, unabhängig davon
   wie das mobile-stacking auf dem Bildschirm aussieht. */
@media print {
    .print-area {
        width: 210mm !important;
        max-width: none !important;
    }
}

/* ---------- 7. Map / nur-Desktop-Bereiche ---------- */

@media (max-width: 992px) {
    .rwd-hide-mobile { display: none !important; }
}

/* ---------- 8a. 3-Spalten-Screens auf Phone: Liste auf aktives Item kollabieren ---------- */

/* Auf Phone werden Filter, Liste, Detail vertikal gestapelt. Bei langen
   Listen ist der Detail-Bereich sonst unerreichbar weit unten. Wenn ein
   Listen-Item via Materialize-Collapsible geöffnet wird (li bekommt
   automatisch .active), blenden wir alle nachfolgenden li-Geschwister aus,
   sodass der Detail-Bereich unmittelbar nach dem geöffneten Item folgt.
   Items ÜBER dem aktiven bleiben sichtbar (Navigation per Hochscrollen). */
@media (max-width: 600px) {
    .rwd-shell .rwd-list ul.collapsible > li.active ~ li {
        display: none;
    }
}

/* ---------- 8. Legacy Layout-Klassen innerhalb .rwd-shell entkoppeln ---------- */

/* wild_form.css / wild_dash.css definieren .filterrow / .docrow / .linesrow
   mit position: fixed + festen Prozent-Breiten. Innerhalb des Grid-basierten
   .rwd-shell muss das Grid das Layout steuern, sonst springen die Inner-
   Container aus dem Flow und überlappen. Scope ist .rwd-shell — andere
   Screens (die noch nicht migriert sind) sind nicht betroffen.
   Hinweis: height NICHT auf auto erzwingen — .mapcol braucht z.B. 45rem
   für die Google-Maps-Anzeige, sonst kollabiert #map { height: 100% } auf 0. */
.rwd-shell .filterrow,
.rwd-shell .docrow,
.rwd-shell .linesrow,
.rwd-shell .evallinesrow,
.rwd-shell .mapcol {
    position: static !important;
    width: 100% !important;
    right: auto !important;
}

/* wild_form.css:50 setzt .linescol auf height: 45rem mit overflow-y:scroll
   - das erzeugt eine fixe Listen-Hoehe mit eigenem Scrollbalken. Innerhalb
   .rwd-shell wollen wir stattdessen natuerliche Hoehe + Page-Scroll
   (gleiches Verhalten wie pickup, billing etc., die kein .linescol nutzen).
   Betrifft pricetab und posallocation. */
.rwd-shell .linescol {
    height: auto !important;
    overflow: visible !important;
}

/* ---------- 9. Modifier: Filter spans top auch auf Desktop ---------- */

/* Standard-Schema legt Filter auf Desktop (>=993px) in eine schmale linke
   Spalte (18%). Manche Screens (z.B. codriver) brauchen den Filter aber
   auch auf Desktop full-width oben — Liste + Detail darunter. Mit der
   Modifier-Klasse .rwd-shell-stack-filter zusätzlich zu .rwd-shell. */
@media (min-width: 993px) {
    .rwd-shell.rwd-shell-stack-filter {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "filter filter"
            "list   detail";
    }
}

/* ---------- 10. Modifier: Single-Column Stack (für Filter+Liste-only) ---------- */

/* Für Screens ohne .rwd-detail (z.B. tourevaluation, menu, user,
   usercode): vermeidet die schmale 3-Spalten-Aufteilung auf Desktop
   (Filter 18% | Liste 38% | leeres Drittel 44%). Stattdessen: Filter
   spans top, Liste full-width darunter, auch auf Tablet+Desktop.
   Phone-Verhalten unverändert (war ohnehin schon Stack). */
@media (min-width: 601px) {
    .rwd-shell.rwd-shell-stacked {
        grid-template-columns: 1fr;
        grid-template-areas:
            "filter"
            "list"
            "detail";
    }
}

/* ---------- 11. Modifier: Filter über Liste, Detail rechts daneben ---------- */

/* Für 3-Pane-Map-Screens wie hunt.html: Filter spannt nur über die
   Liste-Spalte (links), Detail (Map) spannt beide Rows auf der rechten
   Seite. Spaltenverhältnis 5:7 entspricht den ursprünglichen Materialize-
   Klassen col l5 (Filter+Liste) / col l7 (Map). Tablet bleibt beim
   Default (filter spans top, list+detail nebeneinander). */
@media (min-width: 993px) {
    .rwd-shell.rwd-shell-filter-over-list {
        grid-template-columns: 5fr 7fr;
        grid-template-areas:
            "filter detail"
            "list   detail";
    }
}

/* ---------- 12. Modifier: Schmaler Single-Column Stack (~33% Breite) ---------- */

/* Für Screens mit kompaktem Filter+Liste, die auf Desktop nicht die
   ganze Breite einnehmen sollen (z.B. tour). Filter über Liste,
   beides ~33% breit, linksbündig. Tablet bleibt beim Default. */
@media (min-width: 993px) {
    .rwd-shell.rwd-shell-narrow {
        grid-template-columns: 33%;
        grid-template-areas:
            "filter"
            "list";
    }
}

/* ---------- 13. Modifier: Filter links als eigene Spalte ---------- */

/* Für 2-Pane-Screens wo der Filter prominent in einer eigenen Spalte
   links stehen soll (statt oben oder schmaler Standard-Spalte). Liste
   nimmt den restlichen Platz rechts. Tablet+Desktop. Phone bleibt
   beim default flex-column. Bei diesem Modifier werden zusätzlich auf
   Phone die collapsible-bodies in der Liste ausgeblendet (Detail-
   Aufklapp ist auf Phone nicht praktikabel). */
@media (min-width: 601px) {
    .rwd-shell.rwd-shell-filter-left {
        grid-template-columns: 2fr 10fr;
        grid-template-areas: "filter list";
    }
}

/* Auf Phone: Detail-Aufklapp der Liste stapelt die zwei Haupt-Bereiche
   (Kategorien-Liste + Artikel-Detail) untereinander statt nebeneinander. */
@media (max-width: 600px) {
    .rwd-shell.rwd-shell-filter-left .rwd-list .collapsible-body > .row > .col.s4,
    .rwd-shell.rwd-shell-filter-left .rwd-list .collapsible-body > .row > .col.s8 {
        width: 100% !important;
    }

    /* Article-Detail-Items (in #artDetail* gerendert) auf Phone in 3 Zeilen:
       Zeile 1: artNr Bezeichnung (cols 1+2 = 50%/50%)
       Zeile 2: Stk + %-Satz + Balken (cols 3+4+5 = 30%/15%/55%)
       Zeile 3: kg + %-Satz + Balken (cols 6+7+8 = 30%/15%/55%)
       Verwendet flex statt float, damit Wrap deterministisch ist
       (mit float wrapt der letzte col bei Subpixel-Rounding). Col-
       Padding auf 0 fuer exakte Breiten. */
    [id^="artDetail"] .collection-item .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    [id^="artDetail"] .collection-item .row > .col {
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    [id^="artDetail"] .collection-item .row > .col:nth-child(1),
    [id^="artDetail"] .collection-item .row > .col:nth-child(2) {
        flex-basis: 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    [id^="artDetail"] .collection-item .row > .col:nth-child(3),
    [id^="artDetail"] .collection-item .row > .col:nth-child(6) {
        flex-basis: 30% !important;
        max-width: 30% !important;
        width: 30% !important;
    }
    [id^="artDetail"] .collection-item .row > .col:nth-child(4),
    [id^="artDetail"] .collection-item .row > .col:nth-child(7) {
        flex-basis: 15% !important;
        max-width: 15% !important;
        width: 15% !important;
    }
    [id^="artDetail"] .collection-item .row > .col:nth-child(5),
    [id^="artDetail"] .collection-item .row > .col:nth-child(8) {
        flex-basis: 55% !important;
        max-width: 55% !important;
        width: 55% !important;
    }
}

/* ---------- 14. Modifier: Zwei zentrierte Spalten (Liste + Detail) ---------- */

/* Für 2-Pane-Screens ohne separaten Filter (z.B. admin.html mit
   Wildarten-Liste + Artikel-Liste, beide mit eigenem internen Filter).
   Liste links, Detail rechts (5fr/7fr - Detail bekommt mehr Platz für
   mehrere Spalten). max-width zentriert das Ganze auf grossen Screens.
   Tablet bleibt beim Default. */
@media (min-width: 993px) {
    .rwd-shell.rwd-shell-two-col-centered {
        grid-template-columns: 5fr 7fr;
        grid-template-areas: "list detail";
        max-width: 83.333%; /* 10 von 12 Materialize-Cols, 1 Col-Margin links + rechts */
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------- 15. Modifier: Padded (1 oder 2 Col Margin links + rechts) ---------- */

/* Kombinierbar mit anderen Layout-Modifiern. Macht den Shell-Container
   schmaler (10 bzw 8 von 12 Materialize-Cols) und zentriert ihn.
   Verwendung typischerweise mit .rwd-shell-stacked. */
@media (min-width: 601px) {
    .rwd-shell.rwd-shell-padded {
        max-width: 83.333%;  /* 10 von 12 Cols, 1 Col-Margin pro Seite */
        margin-left: auto;
        margin-right: auto;
    }
    .rwd-shell.rwd-shell-padded-2 {
        max-width: 66.667%;  /* 8 von 12 Cols, 2 Col-Margin pro Seite */
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------- 16. Modifier: 50% linksbuendig ---------- */

/* Filter ueber Liste, beides 50% breit linksbuendig. Fuer kompakte
   Filter+Listen-Screens auf Desktop. Tablet bleibt beim Default. */
@media (min-width: 993px) {
    .rwd-shell.rwd-shell-half {
        grid-template-columns: 50%;
        grid-template-areas:
            "filter"
            "list";
    }
}

/* usercode Detail-Form auf Phone: Registrierungscode + QR-Code (und
   die anderen Felder) jeweils in eigener Zeile statt nebeneinander.
   usercodeadmin.js rendert die Felder als col s4/s3/s2/s1/s1 direkt
   in der <form> - auf Phone alle full-width. */
@media (max-width: 600px) {
    .rwd-shell.rwd-shell-half .collapsible-body > form > .col {
        width: 100% !important;
    }
    /* Materialize macht .input-field label per Default position: absolute
       (fuer floating-Labels bei Text-Inputs). Beim Checkbox-Label ohne
       .active-Klasse (gueltig-Checkbox) faellt der Inhalt aus dem Flow
       -> Col kollabiert auf 0 Hoehe -> auf Phone ueberlappt das naechste
       Element (QR-Canvas) den unsichtbaren Checkbox-Bereich. */
    .rwd-shell.rwd-shell-half form .input-field > label:not(.active) {
        position: static !important;
    }
}

/* ---------- 17. Modifier: Sticky-Filter + interne Scroll-Panes ---------- */

/* Fuer Screens mit langen Listen, bei denen die ganze Seite zu scrollen
   stoerend waere - z.B. pricetab: User selektiert eine Tabelle (mittig)
   und scrollt dann die Artikel (rechts). Bei Page-Scroll wuerde die
   Tabellen-Auswahl verschwinden. Loesung: Filter sticky am Top,
   Listen scrollen intern, kein Page-Scroll im Main-Bereich. Nur Desktop. */
@media (min-width: 993px) {
    .rwd-shell.rwd-shell-fixed-panes {
        align-items: start; /* Grid-Items strecken nicht auf Row-Hoehe */
    }
    .rwd-shell.rwd-shell-fixed-panes .rwd-filter {
        position: sticky;
        top: 5rem; /* unter Materialize navbar-fixed (4rem) + Buffer */
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
    }
    .rwd-shell.rwd-shell-fixed-panes .rwd-list,
    .rwd-shell.rwd-shell-fixed-panes .rwd-detail {
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
    }
}

/* ---------- 18. Modifier: Fixed list panes (Filter im Pane oben, Liste scrollt) ---------- */

/* Fuer Screens ohne separaten .rwd-filter, wo jedes Pane einen eigenen
   internen Filter oben + scrollbare Liste/Inhalt darunter hat. Beispiele:
   admin (Wildart-Liste + Artikel-Liste, jeweils mit eigenem Filter),
   sscc (Einstellungs-Form + palPreview). Pane selbst ist scrollbar;
   das erste Kind (typischerweise die Filter-Zeile) klebt via sticky am
   oberen Pane-Rand. Bewusst KEIN flex-column auf dem Pane, weil das
   Materialize-Floats (.col-Breiten) stoeren wuerde. Kombinierbar mit
   anderen Layout-Modifiern wie rwd-shell-two-col-centered. Nur Desktop. */
@media (min-width: 993px) {
    .rwd-shell.rwd-shell-fixed-list-panes {
        align-items: start;
    }
    .rwd-shell.rwd-shell-fixed-list-panes .rwd-list,
    .rwd-shell.rwd-shell-fixed-list-panes .rwd-detail {
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
    }
    .rwd-shell.rwd-shell-fixed-list-panes .rwd-list > *:first-child:not(:only-child),
    .rwd-shell.rwd-shell-fixed-list-panes .rwd-detail > *:first-child:not(:only-child) {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #eeeeee; /* grey lighten-3, deckt durchscrollende Liste */
    }
}

/* ---------- 19. Startseite (index.html): Kategorie-Accordion ---------- */

/* Struktur (index.js): .cat-accordion > .cat-row > (.cat-badge + .cat-detail).
   Phone (<=600px): vertikales Stacking, .cat-detail nur sichtbar wenn die
     umgebende .cat-row .active hat (Akkordeon-Verhalten).
   Tablet+Desktop (>=601px): CSS-Grid 25%/75%. Badges links untereinander,
     aktives Detail-Panel rechts, spannt alle 4 Badge-Rows.
   display:contents auf .cat-row entkoppelt die DOM-Gruppierung vom Grid-Layout,
     sodass die Kinder direkte Grid-Items werden. */

.cat-accordion .cat-detail { display: none; }
.cat-accordion .cat-row.active .cat-detail { display: block; }

@media (max-width: 600px) {
    .cat-accordion {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    /* Schrift in den Badges: wild_form.css setzt .badgeheader auf 1vw und
       .badgecontent auf 0.8vw — auf Phone unleserlich klein. Hier rem-Werte. */
    .cat-accordion .badgeheader { font-size: 1.05rem; }
    .cat-accordion .badgecontent { font-size: 0.85rem; }
    /* Detail-Rows: in index.js bekommen sie einen .col.s1-Spacer (Desktop-
       Einrückung unter die Badge-Spalte) und in der Master-Zeile zusätzlich
       einen leeren .col.s11-Platzhalter (Paletten-Ausrichtung). Auf Phone
       beide ausblenden, Card-Cols (.s11 nicht-leer) auf volle Breite,
       damit die Cards bündig mit den Badges starten. > kombinator schützt
       die inneren .col-Spacer der Card selbst (Icon/Text-Trenner). */
    .cat-accordion .cat-detail > .row > .col:empty { display: none; }
    .cat-accordion .cat-detail > .row > .col.s11 { width: 100%; }
}

@media (min-width: 601px) {
    .cat-accordion {
        display: grid;
        grid-template-columns: 25% 75%;
        column-gap: 0.5rem;
    }
    .cat-accordion .cat-row { display: contents; }
    .cat-accordion .cat-badge { grid-column: 1; }
    .cat-accordion .cat-detail {
        grid-column: 2;
        grid-row: 1 / span 4;
    }
}