/* ==========================================================
   Alert-Vorschau innerhalb von /commands
   Dieses Stylesheet wird ausschliesslich zusaetzlich zu commands.css
   auf der Commands-Seite geladen (siehe $pageCSSMap in style.php) - fuer
   das Vorschau-/Test-Popup eines Command-Alerts (#alertPreviewBox,
   .alertPopup) sowie ein paar generische Formular-Hilfsklassen
   (.fieldRow/.fieldTopRow/.klipyPickerBox), die nur hier gebraucht
   werden.

   War frueher eine vollstaendige, eigene Kopie der kompletten
   Alerts-Konfigurationsseite (Presets, Typ-Sidebar, Vorschau-Spalte
   etc.) aus einer aelteren Version der Seite - der grösste Teil davon
   wird von module/commands/index.php laengst nicht mehr referenziert
   und wurde beim Globalisieren entfernt (siehe Auftrag: nur noch
   tatsaechlich genutzte, modul-spezifische Regeln). .row/.fieldLabel-
   artige Basis-Sachen kommen jetzt aus basis.css/formulare.css, der
   Toggle aus dem globalen .switch (formulare.css).
   ========================================================== */

/* ---------- Zwei-Spalten-Formularzeile ---------- */
.fieldRow { display: flex; gap: 12px; margin-bottom: 12px; }
.fieldRow > .row { flex: 1; }

.fieldTopRow { display: flex; justify-content: space-between; align-items: center; }
.fieldTopRow .val { color: var(--text-muted); font-size:13px; font-weight: 600; }

/* ---------- Klipy-Picker (GIF/Clip-Auswahl) ---------- */
.klipyPickerBox { display: flex; flex-direction: column; gap: 8px; }
.klipyLinkRow { display: flex; gap: 8px; }
.klipyBrowseBtn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #26262e; color: #ddd; border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 8px 14px; font-size:14px; font-weight: 600; text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.klipyBrowseBtn:hover { background: #322645; border-color: var(--accent); color: #fff; }
.klipyBrowseBtn.clips { background: #2a1f1a; }
.klipyBrowseBtn.clips:hover { background: #3a2a1f; border-color: var(--warning); }
.klipyResolveStatus { display: block; color: var(--warning); font-size:13px; min-height: 14px; }
.klipyLoopLabel { display: flex; align-items: center; gap: 6px; font-size:14px; color: var(--text-tertiary); cursor: pointer; font-weight: 400; }
.klipyPreview {
  max-width: 240px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.klipyPreview img, .klipyPreview video { display: block; width: 100%; max-height: 160px; object-fit: cover; }

/* ---------- Vorschau-Popup (Test-Alert) ---------- */
/* #alertPreviewBox selbst wird per Inline-Style positioniert/gefaerbt
   (siehe module/commands/index.php) - hier bleibt nur das ::before mit
   dem Platzhaltertext, das eine Inline-Style nicht abdecken kann. */
#alertPreviewBox::before { content: "Vorschau – klicke auf \"Testen\""; color: var(--text-faint); font-size:15px; text-align: center; padding: 0 20px; }
#alertPreviewBox.hasAlert::before { display: none; }

.alertPopup {
  position: absolute; max-width: 85%; text-align: center; padding: 16px 24px; border-radius: 10px;
  background: var(--alert-bg, rgba(20,20,24,0.92)); border: var(--alert-border-width, 2px) solid var(--alert-color, var(--accent)); box-shadow: 0 0 24px rgba(0,0,0,0.5);
}
.alertPopup .alertPopupText { color: #fff; font-size:20px; font-weight: 700; text-shadow: none; }
.alertPopup .alertPopupMedia {
  display: block;
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  margin-bottom: 10px;
}

@keyframes anim-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes anim-fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes anim-slideLeft { from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: translateX(0); } }
@keyframes anim-slideRight { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: translateX(0); } }
@keyframes anim-zoom { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
@keyframes anim-bounce { 0% { opacity: 0; transform: translateY(-30px) scale(0.9); } 60% { opacity: 1; transform: translateY(6px) scale(1.03); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.alertPopup.in-fade { animation: anim-fade 0.35s ease forwards; }
.alertPopup.in-fadeUp { animation: anim-fadeUp 0.4s ease forwards; }
.alertPopup.in-slideLeft { animation: anim-slideLeft 0.45s cubic-bezier(.25,.8,.35,1) forwards; }
.alertPopup.in-slideRight { animation: anim-slideRight 0.45s cubic-bezier(.25,.8,.35,1) forwards; }
.alertPopup.in-zoom { animation: anim-zoom 0.35s cubic-bezier(.34,1.56,.64,1) forwards; }
.alertPopup.in-bounce { animation: anim-bounce 0.55s cubic-bezier(.34,1.56,.64,1) forwards; }
.alertPopup.out { animation: anim-fade 0.4s ease reverse forwards; }

@media (max-width: 900px) {
  .fieldRow { flex-direction: column; }
}