/* Mobile Optimization – Comprehensive Mobile-First Styles.
 *
 * WICHTIG (Kaskade): Diese Datei muss als LETZTES Stylesheet einer Seite
 * geladen werden, damit sie Desktop-Regeln gleicher Spezifität überschreibt.
 * Sie wird deshalb bewusst NICHT mehr über main.css importiert – @import-Regeln
 * werden vor den Rest der Datei einsortiert, main.css ist auf jeder Seite das
 * erste Stylesheet, und damit hätte jedes nachfolgende <link> gewonnen.
 * Siehe frontend/tools/lint-mobile-css.cjs, das die Position erzwingt.
 *
 * Breakpoint-Skala (projektweit, siehe base.css):
 *   360 / 480 / 640 / 768 / 1024  (max-width)
 *   361 / 481 / 641 / 769 / 1025  (min-width)
 */

/* ===== BODY & BASE ===== */
@media (max-width: 768px) {
    body {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    html,
    body {
        overflow-x: hidden;
    }
}

/* ===== HEADER =====
   Der komplette mobile Header inkl. Slide-in-Menü liegt in header.css
   (Zeile 360 ff.). Er stand hier früher ein zweites Mal – mit abweichenden
   Werten und ohne die safe-area-Behandlung für die Notch. Nicht wieder
   aufnehmen: eine Quelle pro Komponente. */

/* Scroll-Sperre bei offenem Menü – gehört zum Body, nicht zum Header. */
@media (max-width: 768px) {
    body.mobile-menu-open {
        overflow: hidden;
    }
}

/* ===== CONTAINER & GRID ===== */
@media (max-width: 1024px) {
    .container {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 12px auto;
        padding: 0 12px;
    }
}

@media (max-width: 640px) {
    .container {
        margin: 8px auto;
        padding: 0 8px;
        gap: 12px;
    }

    .card {
        padding: 12px;
        margin-bottom: 12px;
    }
}

/* ===== BUTTONS - TOUCH FRIENDLY ===== */
@media (max-width: 768px) {
    button,
    [role="button"],
    .btn,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
        font-size: 0.875rem;
        border-radius: 8px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* Full width buttons on mobile by default */
    .btn-primary,
    .btn-secondary {
        width: 100%;
        /* Ohne das erzeugt ein geerbtes margin-left (z.B. .btn-secondary in
           receipt-scanner.css) zusammen mit width:100% horizontalen Overflow. */
        margin-inline: 0;
    }

    /* Except inline/small buttons */
    .btn-small,
    .store-clear-btn {
        width: auto;
        padding: 8px 12px;
        min-height: 36px;
    }
}

/* ===== INPUT & FORM FIELDS =====
   Allowlist durch Denylist ersetzt: password/date/url fehlten früher und
   bekamen dadurch weder Tap-Höhe noch 16px-Schrift (iOS zoomt sonst beim
   Fokus in das Feld hinein). */
@media (max-width: 768px) {
    input:not(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="button"],
        [type="submit"],
        [type="reset"],
        [type="hidden"],
        [type="file"],
        [type="image"],
        [type="color"]
    ),
    select,
    textarea {
        min-height: 44px;
        padding: 12px;
        font-size: 1rem;
        border-radius: 8px;
        width: 100%;
        box-sizing: border-box;
    }

    input[type="range"] {
        width: 100%;
        height: 44px;
        cursor: pointer;
    }

    /* Remove default iOS styling */
    input[type="search"] {
        -webkit-appearance: none;
        appearance: none;
        border-radius: 8px;
    }
}

/* ===== MODALS & DROPDOWNS ===== */

@media (max-width: 768px) {
    /* Gilt NUR fuer das alte `.modal`+`.active`-Muster (z. B. #off-data-modal,
       Preisverlauf). Frueher stand hier zusaetzlich `[role="dialog"]` – und das
       traf jedes Element mit der Rolle, unabhaengig davon, wie es sich selbst
       ein- und ausblendet:
         - `.sm-modal` (Einkaufsmodus: Preis, Alternative, Standort melden,
           Abschluss) und `.sl-overlay-modal` (Teilen, Besorgung, Rezept)
           schalten `--open` bzw. `[hidden]` statt `.active`. Die Regel hier ist
           spezifischer (0,3,0 gegen 0,1,0) und stand in der zuletzt geladenen
           Datei – sie erzwang `display: none`, die Modals oeffneten unter 768 px
           also nie. Die Knoepfe auf den Produkten wirkten dadurch tot.
         - Nicht-modale Banner mit `role="dialog"` (Consent-Hinweis) wurden von
           `top: 0; height: 100%` auf den ganzen Bildschirm aufgezogen und haben
           als unsichtbare Klickfalle jeden Tap der Seite geschluckt.
       Bottom Sheets (.sl-sheet, .sm-sheet) blenden per transform ein und bleiben
       weiterhin ausgenommen. */
    .modal:not(.sl-sheet):not(.sm-sheet) {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10000;
        display: none;
        align-items: flex-end;
    }
    .modal.active:not(.sl-sheet):not(.sm-sheet) {
        display: flex;
    }

    .modal-content,
    .modal > div {
        width: 100%;
        /* dvh statt vh: mit eingeblendeter Browser-Adressleiste ist 90vh
           höher als der sichtbare Bereich, die Buttons unten werden
           abgeschnitten. vh bleibt als Fallback stehen. */
        max-height: 90vh;
        max-height: 90dvh;
        border-radius: 16px 16px 0 0;
        max-width: 100%;
    }

    /* Store dropdown - full width on mobile */
    .store-results-container {
        max-height: 70vh;
        max-height: 70dvh;
        border-radius: 12px;
    }

    /* Category select - larger on mobile */
    #store-category-select {
        padding: 12px;
        font-size: 1rem;
    }
}