/* ==========================================================
   Event-Listen-Modul
   Konfigurationsseite im selben Karten-/Akkordeon-Look wie das
   Alerts-, Chatbox- und Emote-Wand-Modul (siehe style/alerts.css,
   style/chat.css, style/emotewall.css) - eigenstaendiges, auf
   #eventListPage skopiertes Stylesheet (el-* Klassenpraefix), damit
   alle Module unabhaengig voneinander bleiben.

   Vorgabe: Border-Radius in diesem Modul ist ueberall maximal 3px, analog
   zur Vorgabe in Alerts/Chatbox/Emote-Wand - siehe Abschnitt "Radius-Cap".
   ========================================================== */

#eventListPage { display: flex; flex-direction: column; gap: 18px; }

/* ---------- OBS-Link-Zeile ---------- */
#eventListPage .el-topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 3px; padding: 12px 16px;
}
#eventListPage .el-topbar label {
  color: var(--text-faint); font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; flex-shrink: 0;
}
#eventListPage .el-topbar .url-box { flex: 1; min-width: 220px; }

/* ---------- Layout ---------- */
#eventListPage .el-layout { display: flex; gap: 20px; align-items: flex-start; }

/* ---------- Event-Typen Sidebar (analog Alerts-Modul) ---------- */
#eventListPage .el-sidebar {
  flex: 0 0 210px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 3px; padding: 10px; display: flex; flex-direction: column; gap: 2px;
}
#eventListPage .el-sidebar-label {
  color: var(--text-faint); font-size: 12px; font-weight: 700; text-transform: uppercase;
  padding: 8px 10px 6px; letter-spacing: .5px;
}
#eventListPage .el-type {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px; border-radius: 3px; cursor: pointer; font-size: 14.5px; color: var(--text-tertiary);
}
#eventListPage .el-type:hover { background: var(--bg-raised); }
#eventListPage .el-type-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#eventListPage .el-panel { flex: 1.3; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
#eventListPage .el-side { flex: 1; min-width: 0; position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- Karten ---------- */
#eventListPage .el-cardbody { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Grids & Felder ---------- */
#eventListPage .el-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

#eventListPage .el-rangerow { display: flex; flex-direction: column; gap: 6px; }
#eventListPage .el-rangetop { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
#eventListPage .el-rangetop .el-val { color: var(--text-primary); font-weight: 700; text-transform: none; letter-spacing: 0; }

/* ---------- Vorschau-Spalte ---------- */
#eventListPage .el-side h3 { margin: 0; }
#eventListPage .el-stage {
  --el-custom-bg: #000000;
  --el-custom-bg-rgb: 0, 0, 0;
  --el-custom-text: #ffffff;
  --el-opacity: 0.55;
  --el-font: 'Inter', sans-serif;
  --el-font-size: 16px;
  position: relative;
  flex: 1;
  min-height: 220px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 4px;
  font-family: var(--el-font);
  font-size: var(--el-font-size);
}
#eventListPage .el-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
#eventListPage .el-status { font-size: 13px; color: var(--mono-text); font-weight: 600; }

/* ---------- Preview-Rendering der Event-Zeilen ---------- */
.el-stage.theme-light { background: #f0f0f0; }
.el-stage.theme-custom { background: var(--el-custom-bg); }

.elRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  /* Bewusst FEST weiss statt Theme-Variable: das ist die Vorschau der echten
     OBS-Overlay-Zeile, deren Textfarbe der Streamer selbst ueber die
     Overlay-UserStyles (Standard/Hell/Dunkel/Eigene Farbe, siehe
     .el-stage.theme-* weiter unten) einstellt - folgt NICHT dem Seiten-Theme. */
  color: #fff;
  background: rgba(0, 0, 0, var(--el-opacity));
  border-left: 4px solid var(--el-bar-color, var(--accent));
  margin-bottom: 8px;
}
.el-stage.theme-light .elRow { color: #1a1a1a; background: rgba(255, 255, 255, var(--el-opacity)); }
.el-stage.theme-custom .elRow { color: var(--el-custom-text); background: rgba(var(--el-custom-bg-rgb), var(--el-opacity)); }

.el-stage.bar-top .elRow { border-left: none; border-top: 4px solid var(--el-bar-color, var(--accent)); }
.el-stage.bar-right .elRow { border-left: none; border-right: 4px solid var(--el-bar-color, var(--accent)); }
.el-stage.bar-none .elRow { border-left: none; }

.el-stage.text-center .elRow { justify-content: center; }
.el-stage.text-right .elRow { justify-content: flex-end; }

.elRow.type-follow    { --el-bar-color: var(--success); }
.elRow.type-subscribe { --el-bar-color: var(--accent); }
.elRow.type-resub     { --el-bar-color: #b983ff; }
.elRow.type-giftsub   { --el-bar-color: #ff70c2; }
.elRow.type-bits      { --el-bar-color: #00c8ff; }
.elRow.type-raid      { --el-bar-color: var(--warning); }
.elRow.type-donation  { --el-bar-color: #2ecc71; }

.elRowIcon { font-size: 1.1em; flex-shrink: 0; }
.elRowUser { font-weight: 700; }
.elRowText { color: inherit; opacity: 0.9; }

.anim-in-fadeUp      { animation: elFadeUp 0.4s ease both; }
.anim-in-fade         { animation: elFade 0.4s ease both; }
.anim-in-fadeDown    { animation: elFadeDown 0.4s ease both; }
.anim-in-slideLeft   { animation: elSlideLeft 0.4s ease both; }
.anim-in-slideRight  { animation: elSlideRight 0.4s ease both; }
.anim-in-zoom         { animation: elZoom 0.35s ease both; }
.anim-in-bounce       { animation: elBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.anim-in-flip         { animation: elFlip 0.5s ease both; }
.anim-in-typewriter  { animation: elTypewriter 0.25s ease both; }
.anim-in-none         { }

@keyframes elFadeUp     { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes elFade        { from { opacity: 0; } to { opacity: 1; } }
@keyframes elFadeDown   { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes elSlideLeft  { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes elSlideRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes elZoom        { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
@keyframes elBounce      { 0% { opacity: 0; transform: scale(0.4); } 60% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes elFlip        { from { opacity: 0; transform: rotateX(90deg); } to { opacity: 1; transform: rotateX(0); } }
@keyframes elTypewriter { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Radius-Cap: max. 3px ---------- */
#eventListPage select,
#eventListPage input[type="text"],
#eventListPage input[type="number"],
#eventListPage input[type="color"],
#eventListPage textarea,
#eventListPage .url-box,
#eventListPage .back-btn,
#eventListPage button {
  border-radius: 3px;
}

@media (max-width: 980px) {
  #eventListPage .el-layout { flex-direction: column; }
  #eventListPage .el-sidebar { flex: 0 0 auto; width: 100%; }
  #eventListPage .el-side { position: static; width: 100%; }
  #eventListPage .el-grid2 { grid-template-columns: 1fr; }
}