/* shopping-list.css Teil 4/4: Overlay-Modals (Teilen + Haushalt) und das
   Rezept-Import-Modal.
   Aufgeteilt aus shopping-list.css (Datei-Größenlimit, CLAUDE.md). */

/* =============================================
   23. OVERLAY MODALS (Teilen + Haushalt)
   ============================================= */
.sl-overlay-modal {
    position: fixed;
    inset: 0;
    /* Ueber dem Hinweis-Stapel am unteren Rand (bottom-toast-stack.css, 1200).
       Bei z-index 300 lag der Einwilligungs-Hinweis UEBER diesen Dialogen:
       gemessen bei 1280 px verdeckte er 104 der 124 Pixel des
       "uebernehmen"-Knopfes im Rezept-Import, und ein Klick in die Knopfmitte
       traf den Banner. Weil der Hinweis bei jedem neuen Konto erscheint, war
       der Massen-Import fuer jeden Neunutzer beim ersten Versuch kaputt.
       Der Kommentar in bottom-toast-stack.css nahm bereits an, dass Modals
       oberhalb liegen - fuer diese Familie stimmte das nur nicht. */
    z-index: 1300;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Safe-Area: ein hoher Dialog reicht sonst bis unter die Notch
       (siehe lint-mobile-css.cjs Regel 6). */
    padding: max(var(--space-16), env(safe-area-inset-top)) var(--space-16) var(--space-16);
}
.sl-overlay-modal[hidden] {
    display: none;
}
.sl-overlay-box {
    position: relative;
    background: var(--card);
    border-radius: 14px;
    padding: var(--space-24);
    width: 100%;
    max-width: 480px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
}
/* Sitzt oben rechts in der Ecke, siehe attachCompactProblemReportButton-Aufruf
 * in shopping-list-page-init.js - diese 5 Overlays (Teilen, Besorgung, Listen-
 * Uebersicht, Liste-schliessen, Rezept-Import) haben keine eigene Kopfzeile
 * mit Schliessen-Button, nur einen Titel + Text-Buttons unten. */
.sl-overlay-box .pr-trigger-compact {
    position: absolute;
    top: 12px;
    right: 12px;
}
.sl-overlay-title {
    margin: 0 var(--space-40) var(--space-16) 0;
    font-size: var(--text-18);
    font-weight: 700;
    color: var(--text);
}
.sl-overlay-desc {
    font-size: var(--text-14);
    color: var(--text-muted);
    margin: 0 0 var(--space-16);
}
.sl-tab-close-household-warning {
    font-size: var(--text-14);
    font-weight: 600;
    color: var(--danger-strong);
    background: var(--danger-bg);
    border: 1px solid var(--danger);
    border-radius: var(--radius-md);
    padding: var(--space-8) var(--space-12);
    margin: 0 0 var(--space-16);
}
.sl-tab-close-household-warning[hidden] {
    display: none;
}
.sl-overlay-btn {
    padding: var(--space-10) var(--space-16);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    cursor: pointer;
    font-size: var(--text-14);
    font-weight: 500;
    color: var(--text);
    transition: background 0.15s;
    white-space: nowrap;
}
.sl-overlay-btn--primary {
    /* var(--accent) gegen weisse Schrift schafft nur 2.77:1 (axe-core
       color-contrast, WCAG-AA braucht 4.5:1) - --accent-contrast ist das
       etablierte Muster fuer "gefuellter Accent-Button" (siehe base.css). */
    background: var(--accent-contrast);
    color: white;
    border-color: var(--accent-contrast);
}
.sl-overlay-btn--danger {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}
.sl-overlay-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-16);
}
.sl-share-link-row {
    display: flex;
    gap: var(--space-8);
    align-items: center;
    margin-bottom: var(--space-12);
}
.sl-share-input {
    flex: 1;
    padding: var(--space-8) var(--space-12);
    font-size: var(--text-14);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--input-bg);
    color: var(--text);
    min-width: 0;
}
.sl-share-msg {
    font-size: var(--text-13);
    color: var(--text-muted);
    min-height: 20px;
    margin: var(--space-8) 0;
}
.sl-inline-row {
    display: flex;
    gap: var(--space-8);
    align-items: center;
    margin-bottom: var(--space-12);
}
.sl-section-label {
    font-size: var(--text-12);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: var(--space-16) 0 var(--space-6);
}

/* Recipe import modal */
.sl-recipe-name-label {
    display: block;
    font-size: var(--text-13);
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-4);
}
.sl-recipe-name-input {
    width: 100%;
    padding: var(--space-8) var(--space-12);
    font-size: var(--text-15);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--input-bg);
    color: var(--text);
    box-sizing: border-box;
    font-family: inherit;
}
.sl-recipe-name-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}
.sl-recipe-name-hint {
    font-size: var(--text-12);
    color: var(--text-muted);
    margin: var(--space-4) 0 var(--space-10);
}
.sl-recipe-textarea {
    width: 100%;
    min-height: 120px;
    padding: var(--space-10) var(--space-12);
    font-size: var(--text-14);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--input-bg);
    color: var(--text);
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
    margin-bottom: var(--space-8);
}
.sl-recipe-textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}
.sl-recipe-items {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
    max-height: 320px;
    overflow-y: auto;
}
.sl-recipe-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-10);
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-14);
    color: var(--text);
}
.sl-recipe-item:last-child {
    border-bottom: none;
}
.sl-recipe-item-qty {
    font-size: var(--text-13);
    color: var(--text-muted);
    min-width: 60px;
    flex-shrink: 0;
}

/* Wide-Variante für die Vorschau-Tabelle */
.sl-overlay-box--wide {
    max-width: 600px;
}

/* Portions-Stepper */
.sl-recipe-servings {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-10);
    margin: var(--space-4) 0 var(--space-12);
}
.sl-recipe-servings[hidden] {
    display: none;
}
.sl-recipe-servings-label {
    font-size: var(--text-13);
    font-weight: 600;
    color: var(--text);
}
.sl-recipe-stepper {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
}
.sl-stepper-btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--text);
    font-size: var(--text-18);
    line-height: 1;
    cursor: pointer;
}
.sl-stepper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.sl-recipe-servings-value {
    min-width: 24px;
    text-align: center;
    font-weight: 700;
    color: var(--text);
}
.sl-recipe-scale-hint {
    font-size: var(--text-12);
    color: var(--accent);
}

/* Vorschau-Kopf mit "Alle"-Checkbox */
.sl-recipe-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}
.sl-recipe-selectall {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    font-size: var(--text-13);
    color: var(--text-muted);
    cursor: pointer;
}

/* Zutaten-Zeile: Checkbox + Menge + Name/Meta */
.sl-recipe-check {
    margin-top: var(--space-8);
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.sl-recipe-qty {
    width: 78px;
    flex-shrink: 0;
    padding: var(--space-6) var(--space-8);
    font-size: var(--text-13);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text);
}
.sl-recipe-namecell {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.sl-recipe-name {
    width: 100%;
    padding: var(--space-6) var(--space-8);
    font-size: var(--text-14);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text);
    box-sizing: border-box;
}
.sl-recipe-qty:focus,
.sl-recipe-name:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}
.sl-recipe-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    font-size: var(--text-12);
}
.sl-recipe-note {
    color: var(--text-muted);
    font-style: italic;
}
.sl-recipe-pantry {
    padding: 1px var(--space-6);
    border-radius: var(--radius-md);
    background: rgb(var(--accent-rgb) / 0.12);
    /* var(--accent) auf diesem Tint lag im Light-Mode nur bei 2.45:1
       (WCAG-AA verlangt 4.5:1) - Dark-Mode-Variante siehe @media unten. */
    color: var(--content-link-color);
    font-weight: 600;
}
.sl-recipe-lowhint {
    padding: 1px var(--space-6);
    border-radius: var(--radius-md);
    background: rgba(234, 179, 8, 0.16);
    color: #b45309;
    font-weight: 600;
}

/* Icon-Platzhalter (NAV_ICONS-Interpolation aus shopping-list-recipe-import.js) -
   inline-flex + leichter Vertikal-Ausgleich, analog .sl-icon/.rs-icon. */
.sl-recipe-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: -0.15em;
}

.sl-recipe-icon svg {
    flex-shrink: 0;
}
.sl-recipe-row--low .sl-recipe-name {
    border-color: #eab308;
}

/* Produktvorschlag: Trefferqualität (Text+Icon) + Fair-Score-Badge, gestapelt */
.sl-recipe-suggestion {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    font-size: var(--text-12);
    color: var(--text-muted);
    min-height: 18px;
}
.sl-recipe-matchline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
}
.sl-recipe-match-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}
/* Trefferqualität – Text+Icon, kein reines Farbsignal (barrierefrei). */
.sl-recipe-matchmark {
    padding: 1px var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 600;
}
.sl-recipe-matchmark:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.sl-recipe-matchmark--sure {
    background: rgba(22, 163, 74, 0.14);
    color: #15803d;
}
.sl-recipe-matchmark--unsure {
    background: rgba(234, 179, 8, 0.16);
    color: #b45309;
}
.sl-recipe-matchmark--none {
    font-style: italic;
    opacity: 0.7;
}
.sl-recipe-matchreason {
    font-style: italic;
    opacity: 0.8;
}
.sl-recipe-fair-unknown {
    font-style: italic;
    opacity: 0.7;
}
/* Alternativen-Auswahl bei unsicherem Treffer (bereits geladene Vorschläge). */
.sl-recipe-alts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
}
.sl-recipe-alts-label {
    opacity: 0.8;
}
.sl-recipe-alt-btn {
    padding: var(--space-2) var(--space-8);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text);
    font-size: var(--text-12);
    cursor: pointer;
}
.sl-recipe-alt-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.sl-recipe-fairbadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: var(--text-11);
    color: white;
}
/* Dieselbe Fair-Score-Gut/Mittel-Schlecht-Skala wie die Autocomplete-
   Trefferliste (--score-good/-ok/-bad in base.css), nicht eine eigene
   Interpretation - derselbe Fair-Score-Prozentbereich soll überall gleich
   aussehen. */
.sl-recipe-fairbadge--good {
    background: var(--score-good);
}
.sl-recipe-fairbadge--mid {
    background: var(--score-ok);
}
.sl-recipe-fairbadge--low {
    background: var(--score-bad);
}

/* Section-Header innerhalb der Vorschau */
.sl-recipe-section {
    list-style: none;
    padding: var(--space-10) 0 var(--space-4);
    font-size: var(--text-12);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    border-bottom: none;
}
.sl-recipe-hint {
    font-size: var(--text-12);
    color: var(--text-muted);
    margin: var(--space-8) 0 0;
}

/* Undo-Button im Toast */
.sl-recipe-undo-btn {
    margin-left: var(--space-12);
    padding: var(--space-2) var(--space-10);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-md);
    background: transparent;
    color: white;
    font-weight: 700;
    font-size: var(--text-13);
    cursor: pointer;
}

/* Kontrast-Korrektur fuer Dark-Mode (Repo-Audit 2026-07): die Light-Mode-
   Textfarbe oben ist fuer den dunklen Hintergrund zu dunkel, eine hellere
   Variante ist noetig um weiterhin WCAG-AA 4.5:1 zu erreichen. */
@media (prefers-color-scheme: dark) {
    .sl-recipe-pantry {
        color: var(--accent-dark);
    }
}

/* ─── Besorgungs-Auftrag (Gast-Freigabe einzelner Artikel) ─────────────────── */

.sl-errand-input,
.sl-errand-select {
    width: 100%;
    padding: var(--space-10) var(--space-12);
    margin-bottom: var(--space-12);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: var(--text-15);
    background: var(--input-bg);
    color: var(--text);
}

.sl-errand-label-text {
    display: block;
    margin-bottom: var(--space-6);
    font-size: var(--text-13);
    font-weight: 600;
    color: var(--text);
}

.sl-errand-fieldset {
    margin: 0 0 var(--space-12);
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.sl-errand-legend {
    padding: 0 var(--space-6);
    font-size: var(--text-13);
    font-weight: 600;
    color: var(--text);
}

.sl-errand-items {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}

.sl-errand-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-10);
    padding: 7px var(--space-2);
}

.sl-errand-checkbox {
    inline-size: 20px;
    block-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    cursor: pointer;
    accent-color: var(--accent);
}

.sl-errand-checkbox:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.sl-errand-item-label {
    flex: 1;
    font-size: var(--text-14);
    color: var(--text);
    cursor: pointer;
    word-break: break-word;
}

.sl-errand-by {
    color: var(--text-muted);
    font-size: var(--text-13);
}

.sl-errand-empty {
    padding: var(--space-12) var(--space-2);
    font-size: var(--text-14);
    color: var(--text-muted);
}

.sl-errand-options {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-12);
    margin-bottom: var(--space-8);
}

.sl-errand-check-option {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
    font-size: var(--text-14);
    color: var(--text);
    cursor: pointer;
}

.sl-errand-subtitle {
    margin: 14px 0 var(--space-8);
    font-size: var(--text-14);
    font-weight: 700;
    color: var(--text);
}

.sl-errand-active {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sl-errand-active-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--border);
}

.sl-errand-active-item:last-child {
    border-bottom: none;
}

.sl-errand-active-text {
    font-size: var(--text-14);
    color: var(--text);
}

/* ─── Angenommene Besorgungen für andere Haushalte ─────────────────────────── */

.sl-my-errands {
    margin: 0 0 var(--space-16);
    padding: var(--space-12) 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
}

.sl-my-errands-title {
    margin: 0 0 var(--space-10);
    font-size: var(--text-15);
    font-weight: 700;
    color: var(--text);
}

.sl-my-errands-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sl-my-errand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--border);
}

.sl-my-errand:last-child {
    border-bottom: none;
}

.sl-my-errand-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 150px;
}

.sl-my-errand-label {
    font-size: var(--text-15);
    font-weight: 600;
    color: var(--text);
}

.sl-my-errand-meta {
    font-size: var(--text-13);
    color: var(--text-muted);
}

.sl-my-errand-actions {
    display: flex;
    gap: var(--space-8);
}

.sl-my-errand-btn {
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--text);
    font-size: var(--text-13);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.sl-my-errand-btn--primary {
    border-color: var(--accent);
    /* --accent-contrast waere im Dark Mode auf dem geerbten dunklen Hintergrund
       zu dunkel - --content-link-color hat fuer beide Themes einen passenden
       Wert (siehe base.css). */
    color: var(--content-link-color);
}

.sl-my-errand-btn:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.sl-my-errand-btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

.sl-my-errands-msg {
    margin: var(--space-8) 0 0;
    font-size: var(--text-13);
    color: var(--text-muted);
}

@media (prefers-color-scheme: dark) {
    .sl-my-errand-btn--primary {
        color: var(--accent-hover);
    }
}

/* ===== Listen-Übersicht (alle Listen, gruppiert nach Herkunft) ===== */

.sl-overview-body {
    max-height: 60vh;
    max-height: 60dvh;
    overflow-y: auto;
    margin: var(--space-8) 0;
}

.sl-overview-group {
    margin-bottom: var(--space-20);
}

.sl-overview-group:last-child {
    margin-bottom: 0;
}

.sl-overview-group-title {
    font-size: var(--text-14);
    font-weight: 600;
    color: var(--text);
    margin: 0 0 var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.sl-overview-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-8);
}

.sl-overview-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.sl-overview-item:last-child {
    border-bottom: none;
}

.sl-overview-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-2);
    flex: 1;
    /* Ohne das gewinnt die Standard-min-width:auto von Flex-Kindern gegen den
       Delete-Button daneben - lange Listentitel liefen bei 360px über den
       Rand statt umzubrechen. */
    min-width: 0;
    padding: var(--space-10) var(--space-4);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.sl-overview-open:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: -2px;
}

.sl-overview-item-title {
    font-size: var(--text-15);
    color: var(--text);
    overflow-wrap: anywhere;
}

.sl-overview-item-meta {
    font-size: var(--text-13);
    color: var(--text-muted);
}

.sl-overview-empty {
    padding: var(--space-10) var(--space-4);
    font-size: var(--text-14);
    color: var(--text-muted);
}

.sl-overview-delete {
    flex-shrink: 0;
    align-self: center;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--text-16);
}

.sl-overview-delete:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: -2px;
}

.sl-overview-delete:disabled {
    opacity: 0.5;
    cursor: default;
}

.sl-overview-new,
.sl-overview-move {
    font-size: var(--text-13);
}

/* Verschieben ist der seltenere, folgenreichere Schritt (die Liste wechselt
   ihre Sichtbarkeit) - deshalb optisch zurueckhaltender als "Neue Liste". */
.sl-overview-move {
    margin-top: var(--space-4);
    color: var(--text-muted);
}

/* Hover-Effekte nur für echte Zeigegeräte: auf Touch bleibt der
   Hover-Zustand nach dem Tap kleben, bis woanders hingetippt wird. */
@media (hover: hover) and (pointer: fine) {
    .sl-overlay-btn:hover {
        background: var(--input-bg);
    }

    .sl-overlay-btn--primary:hover {
        opacity: 0.9;
        background: var(--accent-contrast);
    }

    .sl-overlay-btn--danger:hover {
        opacity: 0.9;
        background: var(--danger);
    }

    .sl-overview-delete:hover {
        background: var(--danger-bg);
        color: var(--danger-strong);
    }

    .sl-stepper-btn:hover:not(:disabled) {
        background: var(--input-bg);
    }

    .sl-recipe-alt-btn:hover {
        border-color: var(--accent);
    }

    .sl-recipe-undo-btn:hover {
        background: rgba(255, 255, 255, 0.18);
    }

    .sl-overview-open:hover {
        background: var(--accent-soft);
    }
}