/*
 * File: components-popup.css
 * Project: ABC Miet-WC Touren-Planer PWA
 *
 * Modal-Dialog-System der PWA. Alle Popups teilen sich die Basis
 * (.popup) und unterscheiden sich nur in Inhalt und Aktionsfarben.
 *
 *   – Generelle Basis: #pwa-popup-modal (Backdrop) + .popup (Karte)
 *   – Spezialvarianten:
 *       #pwa-popup-pleasewait (Loader)
 *       #pwa-popup-error      (Fehlerdialog)
 *       #pwa-popup-favorite   (Favoriten-Verwaltung)
 *       #pwa-popup-choice     (Auftragsabschluss)
 *       #pwa-popup-unset      (Auftrag aufheben)
 *       #pwa-popup-option     (Optionsmenü)
 *       #pwa-popup-wastewaterplant (Klärwerk)
 *       #pwa-popup-zef        (Zeiterfassung Start/Ende)
 *       #pwa-popup-offline    (Offline-Hinweis)
 */

/* ============================================================
   BACKDROP (Glass-Effekt)
   ============================================================ */
#pwa-popup-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 998;
    display: none;
    background-color: var(--popup-backdrop);
    backdrop-filter: blur(var(--popup-blur));
    -webkit-backdrop-filter: blur(var(--popup-blur));
    overflow: hidden;
}

/* ============================================================
   POPUP-KARTE (Basis)
   Springt mit cubic-bezier-Sprung-Effekt von oben ein.
   ============================================================ */
.popup {
    position: absolute;
    top: -99rem;
    left: 5%;
    right: 5%;
    margin: 0 auto;
    padding: var(--space-3);
    z-index: 999;
    display: block;
    border-radius: var(--popup-radius);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-border-subtle);
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    text-align: center;
    min-height: 10rem;
    transition: top var(--duration-slow) var(--ease-spring);
}

.popup button.w50            { width: calc(100% - 52%) !important; display: inline-block; }
.popup .button-record        { width: calc(50% - 1.5rem); }

.yes {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong)) !important;
    font-weight: bold;
    color: var(--color-text-inv) !important;
    margin-right: .5%;
}
.no {
    background: linear-gradient(135deg, var(--color-danger), var(--color-danger-strong)) !important;
    font-weight: bold;
    color: var(--color-text-inv) !important;
}

.popup h2 {
    background: linear-gradient(135deg, var(--color-neutral-700), var(--color-neutral-600));
    color: var(--color-text-inv);
    font-weight: bold;
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    letter-spacing: .02em;
}
.popup div                  { font-size: 1.3rem; margin-bottom: var(--space-2); }
.popup div.text             { padding: var(--space-4) 0; font-weight: bold; color: var(--color-text); }
.popup div.text img.iconset { filter: invert(0); height: 1.5rem; }
.popup img.onefiverem       { margin-top: .2rem; margin-right: .4rem; }
.popup div.submit-container {
    font-size: 1.3rem;
    font-weight: bold;
    margin-top: var(--space-1);
    padding-top: var(--space-1);
    border-top: .0625rem solid var(--color-border);
}

/* ============================================================
   PLEASE WAIT
   Lade-Spinner zentriert; ajax-loader.gif als Hintergrundbild.
   ============================================================ */
#pwa-popup-pleasewait div.spinner {
    text-align: center;
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    position: relative;
    background-image: url(../../images/ajax-loader.gif);
    background-size: 3rem;
    background-repeat: no-repeat;
    background-position: center 86%;
    height: 8rem;
    width: 100%;
    display: block;
}
#pwa-popup-pleasewait div.spinner h3 {
    margin: var(--space-2) 0;
    padding: 0;
    color: var(--color-text);
}

/* ============================================================
   ERROR
   ============================================================ */
#pwa-popup-error div.text {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--color-text);
}
#pwa-popup-error #close-popup {
    width: calc(66% - .5rem);
    padding: var(--space-2);
    margin: var(--space-1);
    border: none;
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-strong));
    font-weight: bold;
    color: var(--color-on-accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-height: var(--touch-target);
    transition: filter var(--transition), transform var(--transition);
}
#pwa-popup-error #close-popup:active { filter: brightness(.92); transform: scale(.97); }

/* ============================================================
   AKTIONS-POPUPS (CHOICE / FAVORITE / UNSET / OPTION / WASTEWATERPLANT)
   Gemeinsame Button-Stile + textarea-Styling.
   ============================================================ */
#pwa-popup-favorite textarea,
#pwa-popup-choice textarea {
    height: 8rem;
    width: calc(100% - 1rem);
    background-color: var(--color-surface-2);
    color: var(--color-text);
    border: .0625rem solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: var(--space-1);
    font-family: var(--font-brand);
    font-size: var(--text-md);
    box-shadow: var(--shadow-inset);
}
#pwa-popup-favorite textarea:focus-visible,
#pwa-popup-choice textarea:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

#pwa-popup-favorite button,
#pwa-popup-wastewaterplant button,
#pwa-popup-choice button,
#pwa-popup-unset button,
#pwa-popup-option button {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
    color: var(--color-text-inv);
    border: none;
    margin-bottom: .3rem;
    padding: .55rem 0 .55rem 1.5rem;
    font-size: 1.6rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    transition: filter var(--transition), transform var(--transition);
    min-height: var(--touch-target);
}
#pwa-popup-favorite button:active,
#pwa-popup-wastewaterplant button:active,
#pwa-popup-choice button:active,
#pwa-popup-unset button:active,
#pwa-popup-option button:active { filter: brightness(.9); transform: scale(.98); }

/* Destruktive Aktionen (rot) */
#pwa-popup-unset #unset-set,
#pwa-popup-choice #choice-repair {
    background: linear-gradient(135deg, var(--color-danger), var(--color-danger-strong));
}

/* Positiv-/Negativ-Antworten (JA = grün, NEIN = rot).
   Gilt für alle Bestätigungs-Popups mit binärer Ja/Nein-Frage. */
#pwa-popup-favorite #favorite-set,
#pwa-popup-wastewaterplant #wastewaterplant-set {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
}
#pwa-popup-favorite #favorite-back,
#pwa-popup-wastewaterplant #wastewaterplant-back {
    background: linear-gradient(135deg, var(--color-danger), var(--color-danger-strong));
    color: var(--color-text-inv);
}

/* Zurück-Buttons (gelb) – nur Popups OHNE binäre Ja/Nein-Semantik. */
#pwa-popup-choice #choice-back,
#pwa-popup-unset #unset-back,
#pwa-popup-option #option-back {
    background: var(--color-accent);
    color: #1a1a1a;
    font-weight: bold;
}

#pwa-popup-choice #choice-record {
    margin-top: var(--space-4);
    background: linear-gradient(135deg, var(--color-info), var(--color-info-strong));
}
#pwa-popup-choice #choice-commentset {
    background: linear-gradient(135deg, #b85b04, #8f4502);
}

/* ============================================================
   ZEF (Zeiterfassung)
   ============================================================ */
#pwa-popup-zef button {
    background: linear-gradient(135deg, var(--color-primary-strong), #1a3d2c);
    color: var(--color-text-inv);
    border: none;
    width: 100%;
    margin-bottom: .3rem;
    padding: .55rem var(--space-1);
    font-size: 1.6rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    transition: filter var(--transition), transform var(--transition);
    min-height: var(--touch-target);
}
#pwa-popup-zef button:active { filter: brightness(.9); transform: scale(.98); }
#pwa-popup-zef #choice-zef-false {
    background: linear-gradient(135deg, var(--color-danger), var(--color-danger-strong));
    color: var(--color-text-inv);
}
#pwa-popup-zef #choice-zef-true {
    background: linear-gradient(135deg, #1fcf18, #17a511);
    color: var(--color-on-accent);
    margin-top: var(--space-6);
}

/* ============================================================
   OFFLINE
   Roter Hintergrund unterstreicht den kritischen Zustand.
   ============================================================ */
#pwa-popup-offline {
    background-color: var(--color-danger);
    border-color: var(--color-danger-strong);
    color: var(--color-text-inv);
}
#pwa-popup-offline div.text { color: var(--color-text-inv); }