/*
 * 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;
}

.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); }
/* Einheitliche Icon-Größe in allen Popups (überschreibt das globale button img.iconset = 3rem). */
.popup img.iconset          { width: 1.8rem; height: 1.8rem; }
.popup div.text img.iconset { filter: invert(0); }
.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
   Ladetext oben, darunter ein animierter CSS-Ring-Spinner.
   (Der Spinner wird per ::after als letztes Flex-Element gerendert
    und steht damit IMMER unterhalb des Textes – nicht mehr im Text.)
   ============================================================ */
#pwa-popup-pleasewait div.spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    text-align: center;
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    min-height: 8rem;
    width: 100%;
    padding: var(--space-3) 0;
}
#pwa-popup-pleasewait div.spinner h3 {
    margin: 0;
    padding: 0;
    color: var(--color-text);
}
/* Rotierender Ring-Spinner – erscheint unterhalb des Ladetextes. */
#pwa-popup-pleasewait div.spinner::after {
    content: "";
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border: .3rem solid var(--color-border-strong);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: pleasewait-spin .8s linear infinite;
}
@keyframes pleasewait-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    #pwa-popup-pleasewait div.spinner::after { animation-duration: 2.4s; }
}

/* ============================================================
   ERROR
   ============================================================ */
#pwa-popup-error div.text {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--color-text);
}
#pwa-popup-error #close-popup,
#pwa-popup-driverhistory #driverhistory-close {
    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,
#pwa-popup-driverhistory #driverhistory-close: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-cleaningfailed 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-cleaningfailed 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,
#pwa-popup-choice #choice-failed {
    background: linear-gradient(135deg, var(--color-danger), var(--color-danger-strong));
}

/* „KEINE REINIGUNG": Text mit den beiden Warn-Icons mittig ausrichten
   (überschreibt die linksbündige Basis-Ausrichtung + Einrück-Padding). */
#pwa-popup-choice #choice-failed {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

/* „KEINE REINIGUNG" gesperrt (Liefer-/Holaufträge): sichtbar ausgegraut,
   gleiche Optik wie .button-record:disabled (components-buttons.css). */
#pwa-popup-choice #choice-failed:disabled {
    opacity: .35;
    cursor: not-allowed;
    filter: grayscale(.6);
}

/* 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);
}

/* Gründe-Buttons im „KEINE REINIGUNG"-Popup: blau wie „AUFNAHME STARTEN"
   (--color-info) sowie kleinerer, fetter Text, damit lange Gründe komplett
   in eine Zeile passen (Smartphone-Bedienung). */
#pwa-popup-cleaningfailed button[data-reason] {
    background: linear-gradient(135deg, var(--color-info), var(--color-info-strong));
    font-size: 1.3rem;
    font-weight: bold;
}

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

/* Gruppen-Trenner: graue 3px-Linie zwischen den abgesetzten Button-Gruppen.
   Übernimmt zugleich den Abstand, damit die Linie mittig in der Lücke sitzt. */
#pwa-popup-choice .group-divider,
#pwa-popup-cleaningfailed .group-divider {
    height: 3px;
    background: var(--color-spacer);
    border-radius: 2px;
    margin: var(--space-3) auto;
}

#pwa-popup-choice #choice-record {
    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); }

/* ============================================================
   FAHRER-HISTORIE-POPUP (#pwa-popup-driverhistory)
   Tabelle: Zeitpunkt | Status | Fahrer
   ============================================================ */
/* Festes Layout: Spalten teilen die volle Breite, kein horizontales Scrollen. */
#pwa-popup-driverhistory div.text {
    padding: var(--space-2) 0;
    overflow-x: hidden;
}
#pwa-popup-driverhistory table.driverhistory-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--text-sm);
    font-weight: normal;
}
/* Zellen einzeilig; bei Überlänge sauber mit Ellipsis kürzen statt Umbruch/Scroll. */
#pwa-popup-driverhistory table.driverhistory-table th,
#pwa-popup-driverhistory table.driverhistory-table td {
    text-align: left;
    padding: var(--space-1) .4rem;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text);
}
#pwa-popup-driverhistory table.driverhistory-table th { font-weight: bold; }
/* Zebra-Streifen für bessere Zeilen-Unterscheidung. */
#pwa-popup-driverhistory table.driverhistory-table tbody tr:nth-child(odd)  td { background: var(--color-surface); }
#pwa-popup-driverhistory table.driverhistory-table tbody tr:nth-child(even) td { background: var(--color-surface-2); }
/* Spaltenbreiten: Zeitpunkt + Status fix bemessen, Fahrer nimmt den Rest. */
#pwa-popup-driverhistory table.driverhistory-table th:nth-child(1),
#pwa-popup-driverhistory table.driverhistory-table td:nth-child(1) { width: 35%; }
#pwa-popup-driverhistory table.driverhistory-table th:nth-child(2),
#pwa-popup-driverhistory table.driverhistory-table td:nth-child(2) { width: 28%; }
/* Erklärender Hinweis unter der Liste. */
#pwa-popup-driverhistory .driverhistory-hint {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    font-weight: normal;
    line-height: 1.3;
    color: var(--color-text-muted);
    text-align: left;
    white-space: normal;
}