/* =========================================================
   MOBILIZON DUAL THEME (Vollständig)
========================================================= */

/* LIGHT MODE (Standard) */
:root {
  --color-background: #ffffff;
  --color-navbar-footer: #f7f9fb;
  --color-text: #212529;
  --color-text-muted: #5a6268;
  --color-primary: #0d6efd;
  --color-card-bg: #ffffff;
  --color-border: #dee2e6;
}

/* DARK MODE */
html.dark {
  --color-background: #1a1a2e;
  --color-navbar-footer: #16213e;
  --color-text: #e4e4e4;
  --color-text-muted: #c0c0c0;
  --color-primary: #6ea8fe;
  --color-card-bg: #212140;
  --color-border: #404060;
}

/* Globale Anwendung der Farben */
body, .application, .main-content {
  background-color: var(--color-background) !important;
  color: var(--color-text) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6, .title, .subtitle, p {
  color: var(--color-text) !important;
}

.card, .box {
  background-color: var(--color-card-bg) !important;
  border: 1px solid var(--color-border) !important;
}

a {
  color: var(--color-primary) !important;
}


/* =========================================================
   FOOTER-INTEGRATION (Clean & Nahtlos - Kein Lila mehr)
========================================================= */
footer {
  background-color: transparent !important;
  border-top: 1px solid var(--color-border) !important;
  margin-top: 4rem;
  padding: 2rem 1rem !important;
}

footer ul {
  justify-content: center !important;
  gap: 1.5rem !important;
}

footer li a, footer a {
  color: var(--color-text-muted) !important;
  text-decoration: none !important;
}

footer li a:hover, footer a:hover {
  color: var(--color-primary) !important;
}

/* Ko-fi & Lübeck Erweiterung */
#kofi-footer-extension {
  text-align: center;
  padding: 1.5rem 1rem 0.5rem 1rem;
  background-color: transparent !important;
}

#kofi-footer-extension a {
  display: inline-block;
  background-color: var(--color-primary);
  color: #ffffff !important;
  padding: 0.5rem 1.5rem;
  border-radius: 50px;
  text-decoration: none !important;
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

#kofi-footer-extension a:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

#luebeck-info {
  text-align: center;
  padding: 0.5rem 1rem 3rem 1rem;
  font-size: 0.85rem;
  color: var(--color-text-muted) !important;
  background-color: transparent !important;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.5;
}

#luebeck-info a {
  color: var(--color-primary) !important;
  text-decoration: underline;
}


/* =========================================================
   DER UNTERE MOBILIZON-PROMO-KASTEN (Entschärft & modern)
========================================================= */
main .bg-secondary, 
main [class*="bg-secondary"] {
  background-color: #f8f9fa !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 12px !important;
  max-width: 900px !important;
  margin: 3rem auto !important;
  padding: 2.5rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

html.dark main .bg-secondary, 
html.dark main [class*="bg-secondary"] {
  background-color: var(--color-card-bg) !important;
  border-color: var(--color-border) !important;
}

main .bg-secondary h1, 
main [class*="bg-secondary"] h1 {
  color: var(--color-text) !important;
}

main .bg-secondary p, 
main [class*="bg-secondary"] p {
  color: var(--color-text-muted) !important;
}


/* =========================================================
   KONTRAST-FIX FÜR FEED-BUTTONS & AKTIONEN
========================================================= */

/* Gezielter Fix für die Feed-Buttons (RSS, ICS) und ähnliche Buttons mit .btn */
a.o-button.btn, 
.o-button.btn, 
.search-Event, 
.search-Activity, 
.search-Group {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  border-color: var(--color-primary) !important;
}

/* Erzwinge, dass Text und Icons in diesen Buttons weiß sind */
a.o-button.btn *, 
.o-button.btn *, 
.search-Event *, 
.search-Activity *, 
.search-Group * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.text-violet-3, 
[class*="text-violet"] {
  color: var(--color-text) !important;
}

.btn:hover, .o-button:hover {
  opacity: 0.9;
}


/* =========================================================
   SUBPAGE SIDEBAR & CONTENT BOXEN
========================================================= */
aside .bg-gray-50 {
  background-color: var(--color-navbar-footer) !important;
  border: 1px solid var(--color-border);
}

.container.mx-auto.flex-1.bg-white {
  background-color: var(--color-card-bg) !important;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.5rem;
}