/* ==========================================================
   Letzte Aktivitaet
   Konfigurationsseite im selben Karten-Look wie Account, Bots,
   Werbetimer, Commands etc. (siehe style/account.css, style/bots.css,
   style/scheduled.css, style/commands.css) - eigenstaendiges, auf
   #activityPage skopiertes Stylesheet (act-* Klassenpraefix), damit
   alle Module unabhaengig voneinander bleiben.

   Layout: eine Spalte, drei eigenstaendige Boxen (Zeitraum,
   Event-Typ-Filter, Liste+Pagination). Jede Box (.act-card) nutzt die
   volle Seitenbreite (kein max-width-Cap wie bei #accountPage).

   Der Lade-Spinner (.act-loader) ist eine eigene Kopie von
   .streamLoader (style/dashboard.css) - jedes Modul haelt bewusst
   seine eigene Kopie, siehe die Toggle-Switch-Kopien in account.css
   etc.

   Vorgabe: Border-Radius in diesem Modul ist ueberall maximal 3px,
   siehe Abschnitt "Radius-Cap" am Ende.
   ========================================================== */

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

/* ---------- Karte: volle Seitenbreite ----------
   Basis (Hintergrund/Rahmen/Radius/Schatten) kommt vom globalen .card
   (boxen.css) - hier bleiben nur volle Breite und Innenabstand. */
#activityPage .act-card { width: 100%; box-sizing: border-box; padding: 20px 28px; }
/* Liste-Karte: etwas kompakteres Padding, da sie oft viele Zeilen enthaelt */
#activityPage .act-card--list { padding: 14px 20px; }

#activityPage .act-cardhead { display: flex; align-items: center; gap: 9px; }
#activityPage .act-cardhead .act-ic { font-size: 16px; line-height: 1; }
#activityPage .act-cardhead h3 {
  margin: 0; font-size: 13px; font-weight: 700; color: var(--text-primary);
  text-transform: uppercase; letter-spacing: 0.4px;
}

/* ---------- Zeitraum: Quick-Picks ---------- */
#activityPage .act-rangepicks { display: flex; gap: 8px; flex-wrap: wrap; }
#activityPage .act-rangechip {
  padding: 7px 14px; border-radius: 3px; font-size: 12.5px; font-weight: 600;
  background: var(--bg-raised); border: 1px solid var(--border-strong); color: var(--text-muted);
  cursor: pointer; user-select: none; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#activityPage .act-rangechip:hover { background: #26262e; color: #fff; }
#activityPage .act-rangechip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Zeitraum: Timeline-Balken ---------- */
#activityPage .act-timelinebars {
  display: flex; align-items: flex-end; gap: 2px; height: 84px; padding: 6px 0;
}
#activityPage .act-timelinebar {
  flex: 1 1 auto; min-width: 2px; background: var(--accent); opacity: .5;
  border-radius: 2px 2px 0 0; cursor: pointer; transition: opacity .15s ease;
}
#activityPage .act-timelinebar:hover { opacity: .8; }
#activityPage .act-timelinebar.selected { opacity: 1; box-shadow: 0 0 0 1px var(--accent); }

#activityPage .act-timelinelabels {
  display: flex; justify-content: space-between; font-size: 11px; color: var(--text-faint);
}

/* ---------- Event-Typ-Filter ---------- */
#activityPage .act-filterchips { display: flex; gap: 8px; flex-wrap: wrap; }
#activityPage .act-filterchip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 3px; font-size: 12.5px; font-weight: 600;
  background: var(--bg-raised); border: 1px solid var(--border-strong); color: var(--text-muted);
  cursor: pointer; user-select: none; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#activityPage .act-filterchip:hover { background: #26262e; color: #fff; }
#activityPage .act-filterchip.active { background: rgba(145,70,255,0.14); border-color: var(--accent); color: #fff; }
#activityPage .act-filterchip.act-filterchip--all.active { background: var(--accent); border-color: var(--accent); }

#activityPage .act-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
#activityPage .act-dot-follow  { background: var(--success); }
#activityPage .act-dot-subs    { background: #b388ff; }
#activityPage .act-dot-giftsub { background: #00c8ff; }
#activityPage .act-dot-bits    { background: var(--warning); }
#activityPage .act-dot-raid    { background: var(--danger); }
#activityPage .act-dot-donation { background: #2ecc71; }

/* ---------- Suche + Buchstaben-Anzeige ---------- */
#activityPage .act-card--search { padding: 14px 20px; }
#activityPage .act-searchrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#activityPage .act-searchinput {
  flex: 0 1 240px; min-width: 160px;
  background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: 3px;
  color: var(--text-primary); padding: 8px 12px; font-size: 13px; font-family: var(--font-family);
}
#activityPage .act-searchinput::placeholder { color: var(--text-faint); }
#activityPage .act-searchinput:focus { outline: none; border-color: var(--accent); }
#activityPage .act-searchdivider { color: var(--border-strong); font-size: 16px; flex-shrink: 0; }
#activityPage .act-letterbar { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
#activityPage .act-letter {
  width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: 3px;
  color: var(--text-muted); font-size: 11.5px; font-weight: 700; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
/* "#" ist etwas schmaler als ein Buchstabe - eigene Breite fuer den Alle-Button
   (Textlaenge variiert je nach Sprache: "Alle"/"All"). */
#activityPage .act-letter.act-letter-all { width: auto; padding: 0 10px; }

/* Buchstaben ohne passende User sind unauffaellig und nicht klickbar - nur
   Buchstaben mit tatsaechlichen Treffern (.is-available) "leuchten". Der
   Alle-Button ist immer aktiv/klickbar. */
#activityPage .act-letter[data-letter] { opacity: .35; cursor: default; }
#activityPage .act-letter[data-letter].is-available { opacity: 1; cursor: pointer; }
#activityPage .act-letter[data-letter]:not(.is-available):hover { background: var(--bg-raised); color: var(--text-muted); }
#activityPage .act-letter.is-available:hover,
#activityPage .act-letter.act-letter-all:hover { background: #26262e; color: #fff; }
#activityPage .act-letter.active { background: var(--accent); border-color: var(--accent); color: #fff; opacity: 1; }

/* ---------- Liste: 4-3-2-1 Spalten-Raster (newspaper-style, Elemente
   fuellen jede Spalte von oben nach unten, bevor die naechste beginnt -
   "wie vorher"). Mindestbreite pro Spalte 280px, max. 4 Spalten - der
   Browser waehlt selbststaendig 4/3/2/1 je nach verfuegbarem Platz
   (funktioniert unabhaengig davon, wie viel Platz die Sidebar wegnimmt). */
#activityPage .act-grid { columns: 280px 4; column-gap: 14px; }
#activityPage .act-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin-bottom: 4px;
  border-radius: 3px; background: var(--bg-raised);
  break-inside: avoid;
}
#activityPage .act-item:hover { background: #22222a; }

#activityPage .act-badge {
  flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; padding: 3px 8px; border-radius: 3px;
}
#activityPage .act-badge-follow   { background: rgba(70,209,96,0.15); color: var(--success); }
#activityPage .act-badge-raid     { background: rgba(255,102,102,0.15); color: var(--danger); }
#activityPage .act-badge-bits     { background: rgba(242,185,12,0.15); color: var(--warning); }
#activityPage .act-badge-subscribe,
#activityPage .act-badge-resub    { background: rgba(179,136,255,0.15); color: #b388ff; }
#activityPage .act-badge-giftsub  { background: rgba(0,200,255,0.15); color: #00c8ff; }
#activityPage .act-badge-donation { background: rgba(46,204,113,0.15); color: #2ecc71; }

/* Spenden-Name ist kein Link (siehe buildCompactItem()) - optisch trotzdem
   wie ein Item-Name, nur ohne Link-Unterstreichung/Hover-Farbwechsel. */
#activityPage .act-item-name--plain { text-decoration: none; cursor: default; }

#activityPage .act-item-name {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none;
}
#activityPage .act-item-name:hover { color: var(--accent); text-decoration: underline; }

#activityPage .act-item-time {
  flex-shrink: 0; font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums;
}

#activityPage .act-item-delete {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 3px;
  border: 1px solid transparent; background: transparent; color: var(--text-faint);
  font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#activityPage .act-item-delete:hover {
  background: var(--button-danger-bg); color: var(--button-danger-text); border-color: var(--button-danger-bg-hover);
}

/* .act-empty/-empty-ic -> globales .empty-state/.empty-state-ic;
   .act-pagination/-pagebtn/-pageinfo -> globales .pagination/.page-btn/
   .page-info; .act-loader/-loader-bars -> globales .loader/.loader-bars
   (boxen.css). */

/* ---------- Radius-Cap: max. 3px ---------- */
#activityPage button {
  border-radius: 3px;
}

@media (max-width: 900px) {
  #activityPage .act-card { padding: 16px 18px; }
  #activityPage .act-card--list { padding: 12px 14px; }
  #activityPage .act-card--search { padding: 14px 18px; }
}

@media (max-width: 560px) {
  #activityPage .act-searchdivider { display: none; }
  #activityPage .act-searchinput { flex: 1 1 100%; }
}

/* Schnellmenue */
#activityPage .act-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; margin-top: 12px; }
#activityPage .act-quickbtn {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--bg-raised); border: 1px solid var(--border); color: var(--text-primary);
  text-decoration: none; font-weight: 600; font-size: 14px;
  transition: border-color .15s ease, background .15s ease;
}
#activityPage .act-quickbtn:hover { border-color: var(--accent); background: rgba(145,70,255,0.08); }
#activityPage .act-quickic { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: rgba(145,70,255,0.16); font-size: 14px; flex-shrink: 0; }
#activityPage .act-quickarrow { margin-left: auto; color: var(--text-faint); }