/*
 * np-mobile.css — Phase C Mobile-Overrides für die Hot-Path-Views.
 *
 * Mobile-first: Default-Regeln gelten für Mobile (<= 720 px), das
 * `@media (min-width: 721px)`-Block am Ende schaltet Desktop-Verhalten
 * dazu (z.B. Sticky-Bottom-CTA wieder ausblenden).
 *
 * Wird im Layout NACH `nicer.css` eingebunden, damit Spezifität reicht
 * ohne `!important`-Konfetti. Tokens kommen aus `np-tokens.css`.
 *
 * Scope dieser Datei:
 *   - Sticky-Bottom-CTA-Pattern (`.np-sticky-cta-bar`, `.np-has-sticky-cta`)
 *   - Cross-cutting Tap-Target-Mindestgrößen für Form-Inputs
 *   - Product-Detail-Page-Polishing (Hero, Bestpreis-Card, Tabelle-Scroll)
 *   - Produkt-Liste-Grid 720/380 px Breakpoints
 *   - Store-Detail-Polishing (Map-Höhe, Sticky-CTA)
 *   - Report-Page (Form-Input-Schriftgröße, Submit-Button-Höhe)
 *   - Listen-/Shopping-Mode-Polishing (Item-Zeile-Tap-Area)
 */

/* ──────────────────────────────────────────────────────────────────────
 * Cross-cutting: Form-Inputs immer >= 16 px (verhindert iOS-Auto-Zoom).
 * ────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .np-input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        font-size: var(--np-font-input);
    }

    /* Submit-Buttons in Forms volle Breite + großer Tap-Bereich. */
    .np-form-submit-mobile,
    .np-btn--block {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }
}

/* ──────────────────────────────────────────────────────────────────────
 * Sticky-Bottom-CTA — gemeinsames Pattern für alle Hot-Path-Views.
 *
 * Markup-Vertrag:
 *   <section class="np-section np-has-sticky-cta">…</section>
 *   <div class="np-sticky-cta-bar" role="region" aria-label="Primäraktion">
 *     <a class="np-btn np-btn--accent np-sticky-cta-bar__primary">Primary</a>
 *     <a class="np-btn np-btn--ghost np-sticky-cta-bar__secondary">Secondary</a>
 *   </div>
 *
 * Auf Mobile (<= 720 px) fixed unten am Viewport mit Safe-Area-Bottom.
 * Desktop: display:none, damit der Inline-CTA-Block normal sichtbar bleibt.
 * ────────────────────────────────────────────────────────────────────── */
.np-sticky-cta-bar {
    display: none;
}

@media (max-width: 720px) {
    .np-sticky-cta-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        gap: var(--np-space-2);
        padding: var(--np-space-3) var(--np-space-4)
                 calc(var(--np-space-3) + var(--np-safe-bottom));
        background: var(--np-paper, #fbf6ec);
        border-top: 1.5px solid var(--np-ink, #111114);
        box-shadow: 0 -6px 20px -10px rgba(17, 17, 20, 0.25);
        z-index: 50;
        align-items: stretch;
    }
    .np-sticky-cta-bar > .np-btn {
        flex: 1 1 auto;
        justify-content: center;
        min-height: var(--np-tap-min);
        padding: 12px 16px;
        font-size: 14px;
        white-space: nowrap;
    }
    .np-sticky-cta-bar__primary {
        flex: 2 1 auto;
    }
    .np-sticky-cta-bar__secondary {
        flex: 1 1 auto;
    }
    /* Section, die einen Sticky-Bottom-CTA trägt, braucht unten genug
       Luft, sonst verdeckt der Bar den letzten Content-Block. 88 px =
       12 px padding + 48 px Button + 12 px padding + Safe-Area-Reserve. */
    .np-has-sticky-cta {
        padding-bottom: calc(88px + var(--np-safe-bottom)) !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────
 * C.1 — Home (`/`): kleinere H1, 1-Spalten-Grid, kein horizontaler Scroll.
 * ────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .np-hero__h1 {
        font-size: var(--np-font-h1-mobile);
        line-height: 1.05;
    }
    /* Action-Tile-Grid (3er-Cards) auf Mobile in eine Spalte. */
    .np-grid-cards {
        grid-template-columns: 1fr;
        gap: var(--np-space-3);
    }
}
@media (max-width: 480px) {
    .np-grid-cards {
        gap: var(--np-space-2);
    }
}

/* Globaler Schutz gegen horizontalen Scroll durch lange unbreakbare
 * Wörter (typisch in Datenschutz/Credits/AGB: "Datenschutzerklärung",
 * E-Mail-Links, lange URLs). overflow-wrap erlaubt der Engine, in der
 * Mitte zu brechen, wenn sonst Container überflössen. */
@media (max-width: 720px) {
    .np-surface-paper p,
    .np-surface-paper li,
    .np-surface-paper a {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    /* Inline-gesetzte Multi-Spalten-Grids (z.B. credits.php
     * "grid-template-columns: 1.2fr 1fr") werden auf mobile zu single-column.
     * !important nötig weil inline-style die höhere Spezifität hat. */
    .np-surface-paper [style*="grid-template-columns: 1.2fr"],
    .np-surface-paper [style*="grid-template-columns: 1fr 1fr"],
    .np-surface-paper [style*="grid-template-columns: 1.35fr"] {
        grid-template-columns: 1fr !important;
    }
    /* Sehr große inline font-sizes (Credits Display-Headlines: 42-44 px)
     * dürfen den Viewport nicht sprengen. */
    .np-surface-paper [style*="font-size: 42px"],
    .np-surface-paper [style*="font-size: 44px"] {
        font-size: clamp(28px, 8vw, 42px) !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────
 * C.2 — Product-Detail: Hero-Image, Tabellen-Scroll, sticky CTA.
 *
 * Die Best-per-Store-Tabelle bekommt einen horizontal-scroll Wrapper,
 * damit sie nicht den Viewport sprengt. Phase E baut daraus später
 * eine echte Card-Variante.
 * ────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    /* Tabelle in Wrapper — overflow-x bleibt, page-overflow nicht. */
    .np-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* min-width nur wenn KEIN responsive-table-Layout — sonst kollidiert
     * der erzwungene 480-px-Scroll mit der Card-Variante aus Phase E und
     * sprengt den Viewport. */
    .np-table:not(.np-responsive-table) {
        min-width: 480px;
    }

    /* Hero-Image volle Breite. */
    .np-split__photo img {
        max-width: 100% !important;
    }

    /* Action-Buttons auf der Produktdetail-Seite (Amazon, Korrigieren, etc.)
       bleiben inline, aber gebrochen werden sie über `flex-wrap`. Block-Action-
       Karten (Alarm, Korrigieren, Amazon-Link-Hinzufügen) stapeln vertical. */
    .np-product-action-card {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .np-product-action-card > a,
    .np-product-action-card > button {
        width: 100%;
        justify-content: center;
    }
}

/* ──────────────────────────────────────────────────────────────────────
 * C.3 — Produkt-Liste: Grid kollabiert sauber.
 * ────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .np-offer-row,
    .np-product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--np-space-3) !important;
    }
}
@media (max-width: 380px) {
    .np-offer-row,
    .np-product-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────
 * C.4 — Store-Detail: Map fixed-height, "Einkauf starten" sticky.
 * ────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    #np-store-map-view {
        height: 280px !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────
 * C.5 — Preis-melden: form-inputs lesbar, submit groß.
 * Die Stepper-Layout-Spalten (1.35fr 1fr) ist im Inline-Style auf
 * report.php — wir patchen sie hier per Selektor. Sticky-Sidebar wird
 * auf Mobile statisch.
 * ────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .np-step > div[style*="grid-template-columns: 1.35fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: var(--np-space-4) !important;
    }
    .np-summary-bon {
        position: static !important;
        top: auto !important;
    }
    .np-price-input__field {
        font-size: var(--np-font-input);
        min-width: 0 !important;
    }
    .np-step-actions {
        flex-wrap: wrap;
        gap: var(--np-space-2);
    }
    .np-step-actions .np-btn {
        flex: 1 1 auto;
        min-height: 48px;
        justify-content: center;
    }
}

/* ──────────────────────────────────────────────────────────────────────
 * C.6 — Listen-View + Shopping-Active: Item-Tap-Area, Sticky-Header.
 * ────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    /* Item-Zeilen in Shopping-Active sollen mind. 56 px hoch sein. */
    li[data-list-item-id] {
        min-height: 56px;
    }
    li[data-list-item-id] .np-item-counter {
        min-height: var(--np-tap-min);
    }
    li[data-list-item-id] .np-item-counter__btn,
    li[data-list-item-id] .np-item-counter__value {
        min-height: var(--np-tap-min);
        min-width: var(--np-tap-min);
    }

    /* Quick-Inc/Dec Buttons als 44px-runde Tap-Targets. */
    .np-qty-btn {
        min-width: var(--np-tap-min);
        min-height: var(--np-tap-min);
    }
}

/* Sticky-Header für den Shopping-Active-Mode (Liste-Name + Cart-Total). */
.np-shopping-sticky-head {
    position: sticky;
    top: var(--np-safe-top, 0px);
    z-index: 10;
    background: var(--np-paper, #fbf6ec);
    margin-left: calc(-1 * var(--np-space-4));
    margin-right: calc(-1 * var(--np-space-4));
    padding: var(--np-space-3) var(--np-space-4);
    border-bottom: 1px dashed var(--np-line-soft, #d8d3c5);
}

/* ──────────────────────────────────────────────────────────────────────
 * D — Secondary surfaces (Phase D).
 *
 * Cross-cutting Mobile-Polish für Auth, Settings, Alerts, Listen-Index,
 * Community/Leaderboard, Content-Pages (FAQ, Impressum, Datenschutz, AGB,
 * Credits, Error, How-It-Works).
 *
 * Strategie: keine Layout-Rewrites — wir greifen ein paar generische
 * Inline-Style-Pattern auf, die im Code mehrfach vorkommen und auf 320 px
 * brechen würden (fixed-width Grids, Side-by-Side-Flex-Forms, breite
 * Tabellen).
 * ────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    /* Body-Text-Mindestgröße. Tokens setzen --np-font-body schon, aber
       wir patchen ein paar Stellen, an denen Inline-`font-size: 12px`
       die Lesbarkeit auf 320 px killt. Größenangaben über Inline-Styles
       kleiner als 13 px werden auf 13 px gehoben — bewusst defensiv, nur
       als Fallback. */
    .np-section p,
    .np-section li {
        font-size: var(--np-font-body);
    }

    /* Defensive Fallback: Tabellen, die noch keine `.np-table-wrap`-
       Hülle haben, dürfen den Viewport nicht sprengen. Phase E baut
       daraus später echte Cards; hier nur scrollbar machen. Opt-out
       per Marker-Klasse `.np-responsive-table`, falls eine View
       explizit ein eigenes Mobile-Layout liefert. */
    .np-section table:not(.np-responsive-table) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Inline-Flex-Forms (z.B. Settings → Kundenkarten-Add, Settings →
       Favoriten-Add). Markup nutzt `display: flex; gap: 10px; align-
       items: stretch; flex-wrap: wrap;` — auf Mobile wollen wir
       garantiert eine Spalte, jedes Feld volle Breite. */
    form > div[style*="display: flex"][style*="gap"],
    form[style*="display: flex"][style*="gap"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    form > div[style*="display: flex"][style*="gap"] > input,
    form > div[style*="display: flex"][style*="gap"] > select,
    form > div[style*="display: flex"][style*="gap"] > button,
    form[style*="display: flex"][style*="gap"] > input,
    form[style*="display: flex"][style*="gap"] > select,
    form[style*="display: flex"][style*="gap"] > button {
        width: 100%;
        min-width: 0 !important;
    }

    /* Auth-Form-Container: Inline-Style nutzt 30 px padding + 10 px
       Schatten — auf 320 px Viewport ist das eng. Padding etwas
       reduzieren, Schatten beibehalten (Design-Signature). */
    form[action*="/auth/"] {
        padding: var(--np-space-4) var(--np-space-4) !important;
    }

    /* Inputs in Auth/Settings/Alert-Forms — `.np-input` + inline-styled
       <input>. Cross-cutting-Regel oben deckt Font-Size schon, hier nur
       Mindesthöhe für Tap-Target. */
    .np-input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        min-height: var(--np-tap-min);
        box-sizing: border-box;
    }

    /* Listen-Index Tab-Buttons (Einkaufszettel/Merklisten/Wunschzettel) —
       sollen auf Mobile volle Breite haben, eine Reihe pro Tab. */
    .np-listen-tabs .np-btn {
        width: 100%;
        justify-content: center;
    }

    /* Leaderboard-Podium (3 Spalten 1fr 1.25fr 1fr) — auf Mobile
       übereinander. Das Markup nutzt Inline-Style, daher Attribut-
       Selektor. */
    .np-leaderboard-podium {
        grid-template-columns: 1fr !important;
        gap: var(--np-space-3) !important;
    }
    section.np-section > div[style*="grid-template-columns: 1fr 1.25fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: var(--np-space-3) !important;
    }

    /* How-It-Works Step-Cards (120px 1fr 240px Grid) — auf Mobile
       single-column. */
    section.np-section > div > div[style*="grid-template-columns: 120px 1fr 240px"] {
        grid-template-columns: 1fr !important;
        gap: var(--np-space-3) !important;
        padding: var(--np-space-5) var(--np-space-4) !important;
    }
    /* "Versprechen"-2-Spalten-Block. */
    section.np-section > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: var(--np-space-4) !important;
    }

    /* Credits-Page: Font-Karte (1.2fr 1fr) — single column. */
    article[style*="grid-template-columns: 1.2fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: var(--np-space-4) !important;
        padding: var(--np-space-4) !important;
    }

    /* Error-Page Headline ist gigantisch (clamp 72-160px). Auf 320 px
       wirkt das wie ein Eintürer ins Layout. Cap auf den Mobile-Wert. */
    .np-section h1.font-display[style*="clamp(72px"] {
        font-size: 72px !important;
    }

    /* Settings: "Datenexport" / "Gefahrenzone" Boxen — padding zu groß
       auf Mobile. */
    section.np-section > div[style*="border: 2px solid #c0392b"],
    section.np-section > div[style*="border: 1.5px solid var(--np-line)"][style*="padding: 24px"] {
        padding: var(--np-space-4) !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────
 * E — Tabellen als Mobile-Cards (`.np-responsive-table`).
 *
 * Markup-Vertrag:
 *   <table class="np-responsive-table">
 *     <thead><tr><th>…</th>…</tr></thead>
 *     <tbody>
 *       <tr>
 *         <td data-primary>…visueller Card-Anker (Name/Title)…</td>
 *         <td data-label="Preis">…</td>
 *         <td data-label="Gemeldet">…</td>
 *       </tr>
 *     </tbody>
 *   </table>
 *
 * Auf <= 720 px wird die Tabelle zur 1-Spalten-Card pro <tr>: thead
 * versteckt, jedes <td> zeigt sein `data-label` links und den Inhalt
 * rechts. `data-primary`-Zellen werden zum großen Titel oben in der
 * Card (ohne ::before). Desktop bleibt unverändert — die Tabelle
 * rendert ganz normal mit `<thead>`.
 * ────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .np-responsive-table thead {
        display: none;
    }
    .np-responsive-table,
    .np-responsive-table tbody,
    .np-responsive-table tr,
    .np-responsive-table td {
        display: block;
        width: 100%;
    }
    .np-responsive-table tr {
        padding: 12px 0;
        border-bottom: 1px dashed var(--np-line-soft);
    }
    .np-responsive-table tr:last-child {
        border-bottom: 0;
    }
    .np-responsive-table td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 4px 0;
        text-align: right;
    }
    .np-responsive-table td::before {
        content: attr(data-label);
        font-family: var(--font-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--np-graphite);
        flex: 0 0 auto;
    }
    /* Wenn ein td den `data-primary`-Marker trägt, ist es der visuelle
       Card-Anker (Name/Title) — größer, eigenes Padding, ohne ::before. */
    .np-responsive-table td[data-primary] {
        justify-content: flex-start;
        font-size: 15px;
        font-weight: 500;
        padding-bottom: 8px;
        text-align: left;
    }
    .np-responsive-table td[data-primary]::before {
        display: none;
    }
}

/* ──────────────────────────────────────────────────────────────────────
 * Desktop-Reset — viele Mobile-Overrides werden über `@media (max-width:
 * 720px)` greifend; die hier listen wir ergänzend für Klarheit, falls
 * sich später jemand wundert.
 * ────────────────────────────────────────────────────────────────────── */
@media (min-width: 721px) {
    /* Sticky-CTA-Bar ist Mobile-Only (default `display: none` reicht). */
    .np-sticky-cta-bar {
        display: none;
    }
}