/* scan-result-states.css
 * Zustaende und Modifikatoren der Scanner-Ergebnisanzeige: "nicht gefunden",
 * gestapelte Aktionsknoepfe, Alternativen-Vorschaubilder, die SVG-Anzeige des
 * erkannten Barcodes und die Diagnose-Einblendung.
 *
 * Warum eine eigene Datei: Das Scanner-Markup erzeugen shop-mode-scanner.js,
 * -overlay.js und -alternatives.js, und die laufen auf BEIDEN Seiten. Die
 * Grundregeln dazu stehen jedoch doppelt - barcode-scanner.css haengt nur in
 * shopping_list.html, components/einkaufsmodus-scanner.css nur am
 * Einkaufsmodus. Diese 24 Regeln gab es bisher nur in der ersten Fassung; im
 * Einkaufsmodus blieb "Produkt nicht gefunden" ohne Warnfarbe, die
 * Aktionsknoepfe standen nebeneinander statt gestapelt, und die Treffer-SVG
 * war voellig ungestaltet (im Browser nachgemessen).
 *
 * Die Datei wird NACH der jeweiligen Grundfassung geladen - .sm-scan-match
 * setzt die border-Kurzform, .sm-scan-match--notfound nur border-color; in
 * umgekehrter Reihenfolge setzte die Kurzform die Warnfarbe zurueck.
 *
 * Die restliche Doppelung der beiden Scanner-Stylesheets bleibt vorerst
 * bestehen (641 gegen 379 Zeilen, vier Regeln weichen bewusst ab) - sie ist zu
 * gross fuer diesen Fix.
 */

.sm-scan-hit-box--reason-ok {
    border-color: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

.sm-scan-hit-box--reason-invalid {
    border-color: var(--warning);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.22);
}

.sm-scan-hit-box--reason-duplicate {
    border-color: var(--muted);
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.2);
}

.sm-scan-hit-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 6;
}

.sm-scan-hit-polygon {
    fill: rgba(34, 197, 94, 0.12);
    stroke: rgba(34, 197, 94, 0.95);
    stroke-width: 0.9;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.55));
    opacity: 0;
    transition: opacity 0.15s ease;
}

.sm-scan-hit-polygon--reason-ok {
    fill: rgba(34, 197, 94, 0.12);
    stroke: rgba(34, 197, 94, 0.95);
    filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.55));
}

.sm-scan-hit-polygon--reason-invalid {
    fill: rgba(245, 158, 11, 0.12);
    stroke: rgba(245, 158, 11, 0.96);
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.55));
}

.sm-scan-hit-polygon--reason-duplicate {
    fill: rgba(148, 163, 184, 0.12);
    stroke: rgba(148, 163, 184, 0.96);
    filter: drop-shadow(0 0 4px rgba(148, 163, 184, 0.45));
}

.sm-scan-hit-polygon--active {
    animation: smScanHitPolyPulse 0.9s ease-in-out 1;
}

.sm-scanner-debug {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text-muted);
    font-size: var(--text-12);
    line-height: 1.4;
    font-family:
        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
        monospace;
}

.sm-scanner-debug-legend {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--space-6) var(--space-12);
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--input-bg) 88%, #000 12%);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.sm-scanner-debug-legend-text {
    min-width: 0;
}

.sm-scanner-debug-toggle {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-md);
    padding: 0 var(--space-6);
    font-size: var(--text-12);
    line-height: 1.2;
    cursor: pointer;
}

.sm-scanner-debug--collapsed .sm-scanner-debug-live {
    display: none;
}

.sm-scanner-debug-live {
    margin: 0;
    padding: var(--space-8) var(--space-12);
    white-space: pre-wrap;
}

.sm-scan-match--notfound {
    border-color: var(--warning);
    background: rgba(245, 158, 11, 0.06);
}

/* Resilienz-Audit 2026-09-23: eigener, visuell identischer Zustand fuer einen
   FEHLGESCHLAGENEN Abruf (503/Netz weg/Zeitlimit) - bewusst eine eigene Klasse
   statt .sm-scan-match--notfound wiederzuverwenden, deren Name selbst eine
   Tatsachenbehauptung ist ("nicht gefunden"). */
.sm-scan-match--fetcherror {
    border-color: var(--warning);
    background: rgba(245, 158, 11, 0.06);
}

.sm-scan-notfound-hint {
    font-size: var(--text-13);
    color: var(--text-muted);
    margin: 0 0 var(--space-12);
    line-height: 1.5;
}

.sm-scan-actions--col {
    flex-direction: column;
}

.sm-scan-action--off {
    display: block;
    text-align: center;
    text-decoration: none;
    background: var(--accent);
    color: white;
}

.sm-scan-action:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Vorschaubild und Eco-Zeile der Alternativen-Liste. Diese drei Klassen setzt
   shop-mode-scanner-alternatives.js, definiert waren sie nirgends: Ein
   512x512-Produktbild rendert ohne Groessenangabe mit 336x336 (gemessen) und
   blaeht die Zeile von ~56 auf 375 px auf - bei drei Vorschlaegen ueber 1100 px
   Scrollweg im Sheet. Masse wie .sl-inline-thumb, es ist dieselbe Art Zeile
   (Bild + Name + Meta). */
.sm-scan-alt-thumb {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    background: var(--input-bg);
    border: 1px solid var(--border);
}

.sm-scan-alt-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.sm-scan-alt-eco {
    font-size: var(--text-12);
    color: var(--text-muted);
}

/* ── Melde-Block im Scan-Ergebnis ──────────────────────────────────────
 * Hierher umgezogen aus components/einkaufsmodus-scanner.css am
 * 14.09.2026. shop-mode-scanner.js::_renderNewProduct() haengt den Block
 * BEDINGUNGSLOS ein (ohne Laden eben mit "Kein Laden ausgewaehlt"), und
 * den Scanner startet auch die Einkaufsliste - shopping-list-main.js
 * ruft initScanner(). Auf der Einkaufsliste stand der Block deshalb
 * voellig ungestaltet da: gemessen border-radius 0px statt 8px. */

/* Ein-Tap "Gibt's hier"-Meldung (Fall 2: Produkt steht im Regal, OFF kennt
   die Kette dafür noch nicht) – siehe shop-mode-scanner-report.js. */
.sm-scan-report {
    padding: var(--space-10) var(--space-12);
    margin-bottom: var(--space-10);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
}
.sm-scan-report-store-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}
.sm-scan-report-label {
    font-size: var(--text-13);
    color: var(--text-muted);
}
.sm-scan-report-store-name {
    font-size: var(--text-13);
    font-weight: 600;
    color: var(--text);
    flex: 1 1 auto;
    min-width: 0;
}
.sm-scan-report-store-name--missing {
    font-weight: 400;
    color: var(--text-muted);
    font-style: italic;
}
.sm-scan-report-change {
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--accent-text);
    font-size: var(--text-13);
    font-weight: 600;
    cursor: pointer;
    padding: var(--space-4) var(--space-6);
    min-height: 26px;
}
.sm-scan-report-change:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.sm-scan-report-search {
    margin-bottom: var(--space-8);
}
.sm-scan-report-search-input {
    width: 100%;
    padding: var(--space-8) var(--space-10);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text);
    font-size: var(--text-14);
    margin-bottom: var(--space-6);
}
.sm-scan-report-search-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-height: 160px;
    overflow-y: auto;
}
.sm-scan-report-search-result {
    text-align: left;
    /* WCAG 2.5.8 (AA): mindestens 24x24 px Tap-Ziel, etwas Puffer wegen
       Sub-Pixel-Rendering des 1px-Rands (siehe .sm-alt-kind-btn). */
    min-height: 26px;
    padding: var(--space-8) var(--space-10);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text);
    font-size: var(--text-13);
    cursor: pointer;
}
.sm-scan-report-search-status {
    font-size: var(--text-12);
    color: var(--text-muted);
    padding: var(--space-4) 0;
}
.sm-scan-report-known {
    font-size: var(--text-12);
    color: var(--text-muted);
    margin-bottom: var(--space-8);
}
.sm-scan-action--report-location {
    width: 100%;
    background: var(--success);
    color: white;
}
.sm-scan-action--report-location:disabled {
    opacity: 0.5;
    cursor: default;
}
/* Optionaler Folge-Chip "Auch anderswo in der Kette?" – erscheint erst nach
   erfolgreichem Report, damit dieser selbst ein echter Ein-Tap bleibt. */
.sm-scan-report-followup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-8);
}
.sm-scan-report-followup-text {
    font-size: var(--text-12);
    color: var(--text-muted);
    flex: 1 1 auto;
    min-width: 0;
}
.sm-scan-report-followup-btn {
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text);
    font-size: var(--text-12);
    font-weight: 600;
    cursor: pointer;
    padding: var(--space-4) var(--space-8);
    /* WCAG 2.5.8 (AA): mindestens 24x24 px Tap-Ziel, etwas Puffer wegen
       Sub-Pixel-Rendering des 1px-Rands (siehe .sm-alt-kind-btn). */
    min-height: 26px;
}
.sm-scan-report-followup-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* "Lade Produktdaten..." waehrend der Scan-Aufloesung. Aus
 * components/einkaufsmodus-modals.css hierher umgezogen (14.09.2026):
 * shop-mode-scanner.js schreibt die Meldung auf beiden Seiten, die
 * Regel stand nur im Einkaufsmodus-Stylesheet. */
.sm-scanner-loading {
    text-align: center;
    padding: var(--space-20);
    color: var(--text-muted);
}

/* ── "Foto fehlt?" - Produktfoto an OpenFoodFacts (shop-mode-produktfoto.js) ──
   Steht im Scan-Ergebnis (beide Seiten laden diese Datei) und aufgeklappt in
   der Checkliste des Einkaufsmodus. */
.sm-foto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6) var(--space-8);
    margin-top: var(--space-8);
    font-size: var(--text-13);
}
/* display:flex schlaegt sonst das hidden-Attribut (dieselbe Falle wie bei
   .bl-picker, siehe CLAUDE.md). */
.sm-foto[hidden] {
    display: none;
}
.sm-foto-titel {
    font-weight: 600;
    color: var(--text);
}
.sm-foto-art {
    /* WCAG 2.5.8: mindestens 24 px Tippziel. */
    min-height: 32px;
    padding: var(--space-4) var(--space-10);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--input-bg);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}
.sm-foto-art:disabled {
    opacity: 0.6;
    cursor: default;
}
.sm-foto-art:focus-visible,
.sm-foto-verknuepfen:focus-visible {
    outline: 2px solid var(--accent-dark);
    outline-offset: 2px;
}
.sm-foto-hinweis,
.sm-foto-status {
    flex-basis: 100%;
    font-size: var(--text-12);
    color: var(--text-muted);
}
.sm-foto-status:empty {
    display: none;
}
.sm-foto-status[data-art="ok"] {
    color: var(--success-text, var(--text));
}
.sm-foto-status[data-art="fehler"] {
    color: var(--danger-text, var(--text));
}
.sm-foto-verknuepfen {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--accent-dark);
    font-weight: 600;
}