/**
 * Start Dashboard - Light Mode Overrides
 * Scoped to :root[data-theme="light"] — zero dark-mode impact.
 */

/* ======================================================================
   PAGE WRAPPER
   ====================================================================== */
:root[data-theme="light"] .dashboard-wrapper {
  background: linear-gradient(to top right, #f1f5f9, #ffffff, #f8fafc) !important;
}

/* Hero glow — Dark-Default (Basis; ersetzt den frueheren Inline-style am Element,
   der wegen eines doppelten class-Attributs die Light-Override tot machte). */
.dashboard-wrapper .dashboard-glow {
  background: radial-gradient(circle at 50% 50%, var(--cita-charcoal-400) 0%, var(--cita-charcoal-800) 60%);
}

/* Hero glow override — Light */
:root[data-theme="light"] .dashboard-wrapper .dashboard-glow {
  background: radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.06) 0%, transparent 60%) !important;
}

/* ======================================================================
   HERO SECTION
   ====================================================================== */
:root[data-theme="light"] .dashboard-hero {
  background: linear-gradient(to right, #ffffff, #f8fafc, #ffffff) !important;
  border-color: var(--cita-border-default) !important;
}

/* ======================================================================
   DASHBOARD SECTIONS (generic override for all panels)
   ====================================================================== */
:root[data-theme="light"] .dashboard-section {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: var(--cita-border-default) !important;
}

/* Special sections: Organizer Dashboard (details element) */
:root[data-theme="light"] .dashboard-section-org {
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.8), rgba(248, 250, 252, 0.6)) !important;
  border-color: var(--cita-border-default) !important;
}

/* Cup Dashboard (amber accent) */
:root[data-theme="light"] .dashboard-section-cup {
  background: linear-gradient(to bottom right, rgba(255, 251, 235, 0.6), rgba(248, 250, 252, 0.6)) !important;
  border-color: rgba(217, 119, 6, 0.2) !important;
}

/* Admin Dashboard (pink accent) */
:root[data-theme="light"] .dashboard-section-admin {
  background: linear-gradient(to bottom right, rgba(253, 242, 248, 0.6), rgba(248, 250, 252, 0.6)) !important;
  border-color: rgba(219, 39, 119, 0.2) !important;
}

/* Carousel sections (Meine Events, Watchlist) */
:root[data-theme="light"] .dashboard-carousel-section {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: var(--cita-border-default) !important;
}

/* Events entdecken section */
:root[data-theme="light"] .dashboard-discover-section {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: var(--cita-border-default) !important;
}

/* ======================================================================
   COMPETITION DASHBOARD — entfernt (EIN-Organizer-Quick-Action-Bar)

   Es gibt keine eigene .dashboard-section-competition mehr: die Competition-
   Werkzeuge liegen als NEUTRALE Zusatz-Kacheln im Veranstalter-Grid (genau wie
   Crew), kein eigener Gold-Block. Damit entfallen sämtliche Gold-Force-Regeln
   (sie haben die neutralen Kacheln zuvor gold übertönt). Akzent = nur Marken-
   Akzent in den Modulen selbst, nie im Startseiten-Raster.
   ====================================================================== */

/* ======================================================================
   ORGANIZER QUICK-ACTIONS — Modul-Reihen (Events / Wettbewerbe / Crew)

   EINE ruhige Bar statt 3 Dashboards: je Modul ein dünner Label-Divider +
   alle Tiles als .module-link-btn — EINE Kachelsprache, keine Chips.
   Modul-Identität NUR als dezenter Icon-Tint im Primary-Tile — kein Banner,
   kein getönter Background/Border. Plain CSS, weil diese Datei direkt
   ausgeliefert wird (Tailwind-Arbitrary-Utilities wären hier leer).
   ====================================================================== */
.qa-stack { display: flex; flex-direction: column; gap: 1.15rem; }
.qa-grouphead { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.7rem; }
.qa-label {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--cita-text-muted);
}
.qa-line { flex: 1 1 auto; height: 0; border-top: 1px solid var(--cita-border-default); }
.qa-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.625rem; }
.qa-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.qa-tiles--one { grid-template-columns: minmax(0, 1fr); }

.qa-foot {
  margin-top: 0.1rem; padding-top: 0.95rem; border-top: 1px solid var(--cita-border-default);
}

/* Modul-Identität: ein einzelner Icon-Tint im Primary-Tile, sonst nichts. */
.qa-tile-events .cita-icon { color: var(--cita-accent-cyan); }
.qa-tile-competition .cita-icon { color: var(--cita-gold-muted); } /* gedämpfter Gold-Glyph */
.qa-tile-crew .cita-icon { color: var(--cita-text-muted); }

@media (min-width: 640px) {
  .qa-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ======================================================================
   TEXT COLOR OVERRIDES
   Override hard-coded Tailwind dark text classes within dashboard scope.
   ====================================================================== */

/* Primary text (was text-white) */
:root[data-theme="light"] .dashboard-wrapper .text-white {
  color: #0f172a !important;
}

/* Muted text tiers */
:root[data-theme="light"] .dashboard-wrapper .text-slate-100 {
  color: #0f172a !important;
}

:root[data-theme="light"] .dashboard-wrapper .text-slate-200 {
  color: #1e293b !important;
}

:root[data-theme="light"] .dashboard-wrapper .text-slate-300 {
  color: #334155 !important;
}

:root[data-theme="light"] .dashboard-wrapper .text-slate-400 {
  color: #475569 !important;
}

:root[data-theme="light"] .dashboard-wrapper .text-slate-500 {
  color: #64748b !important;
}

/* Blue accent text */
:root[data-theme="light"] .dashboard-wrapper .text-blue-200 {
  color: #1e40af !important;
}

:root[data-theme="light"] .dashboard-wrapper .text-blue-300 {
  color: #1d4ed8 !important;
}

:root[data-theme="light"] .dashboard-wrapper .text-blue-400 {
  color: #2563eb !important;
}

/* Cyan accent text */
:root[data-theme="light"] .dashboard-wrapper .text-cyan-100 {
  color: #0e7490 !important;
}

:root[data-theme="light"] .dashboard-wrapper .text-cyan-200 {
  color: #0891b2 !important;
}

:root[data-theme="light"] .dashboard-wrapper .text-cyan-300 {
  color: #06b6d4 !important;
}

:root[data-theme="light"] .dashboard-wrapper .text-cyan-400 {
  color: var(--cita-accent-cyan) !important;
}

/* Green accent text */
:root[data-theme="light"] .dashboard-wrapper .text-green-200 {
  color: #15803d !important;
}

:root[data-theme="light"] .dashboard-wrapper .text-green-400 {
  color: #16a34a !important;
}

/* Red accent text */
:root[data-theme="light"] .dashboard-wrapper .text-red-300 {
  color: #dc2626 !important;
}

:root[data-theme="light"] .dashboard-wrapper .text-red-400 {
  color: #dc2626 !important;
}

/* Purple accent text */
:root[data-theme="light"] .dashboard-wrapper .text-purple-300 {
  color: #7c3aed !important;
}

:root[data-theme="light"] .dashboard-wrapper .text-purple-400 {
  color: #7c3aed !important;
}

/* Amber accent text */
:root[data-theme="light"] .dashboard-wrapper .text-amber-100 {
  color: #92400e !important;
}

:root[data-theme="light"] .dashboard-wrapper .text-amber-200\/80 {
  color: #b45309 !important;
}

:root[data-theme="light"] .dashboard-wrapper .text-amber-400 {
  color: #d97706 !important;
}

/* Pink accent text */
:root[data-theme="light"] .dashboard-wrapper .text-pink-100 {
  color: #9d174d !important;
}

:root[data-theme="light"] .dashboard-wrapper .text-pink-200\/80 {
  color: #be185d !important;
}

:root[data-theme="light"] .dashboard-wrapper .text-pink-400 {
  color: #db2777 !important;
}

/* ======================================================================
   BACKGROUND COLOR OVERRIDES
   ====================================================================== */

/* Section internal backgrounds (icon containers, small panels) */
:root[data-theme="light"] .dashboard-wrapper .bg-slate-600\/30 {
  background-color: rgba(241, 245, 249, 0.6) !important;
}

:root[data-theme="light"] .dashboard-wrapper .bg-slate-700\/50 {
  background-color: rgba(241, 245, 249, 0.8) !important;
}

:root[data-theme="light"] .dashboard-wrapper .bg-slate-800\/40 {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

/* Accent backgrounds — slightly adjusted for light */
:root[data-theme="light"] .dashboard-wrapper .bg-cyan-500\/10 {
  background-color: rgba(6, 182, 212, 0.06) !important;
}

:root[data-theme="light"] .dashboard-wrapper .bg-cyan-500\/20 {
  background-color: rgba(6, 182, 212, 0.08) !important;
}

:root[data-theme="light"] .dashboard-wrapper .bg-purple-500\/20 {
  background-color: rgba(124, 58, 237, 0.08) !important;
}

:root[data-theme="light"] .dashboard-wrapper .bg-red-500\/20 {
  background-color: rgba(220, 38, 38, 0.06) !important;
}

:root[data-theme="light"] .dashboard-wrapper .bg-amber-500\/10 {
  background-color: rgba(217, 119, 6, 0.06) !important;
}

:root[data-theme="light"] .dashboard-wrapper .bg-pink-500\/10 {
  background-color: rgba(219, 39, 119, 0.06) !important;
}

/* ======================================================================
   BORDER COLOR OVERRIDES
   ====================================================================== */
:root[data-theme="light"] .dashboard-wrapper .border-slate-700,
:root[data-theme="light"] .dashboard-wrapper .border-slate-700\/30,
:root[data-theme="light"] .dashboard-wrapper .border-slate-700\/40,
:root[data-theme="light"] .dashboard-wrapper .border-slate-700\/50,
:root[data-theme="light"] .dashboard-wrapper .border-slate-800 {
  border-color: var(--cita-border-default) !important;
}

:root[data-theme="light"] .dashboard-wrapper .border-slate-500\/30 {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Accent borders — keep color, reduce opacity */
:root[data-theme="light"] .dashboard-wrapper .border-cyan-500\/20,
:root[data-theme="light"] .dashboard-wrapper .border-cyan-500\/25,
:root[data-theme="light"] .dashboard-wrapper .border-cyan-500\/30,
:root[data-theme="light"] .dashboard-wrapper .border-cyan-500\/50 {
  border-color: rgba(6, 182, 212, 0.2) !important;
}

:root[data-theme="light"] .dashboard-wrapper .border-purple-500\/30 {
  border-color: rgba(124, 58, 237, 0.2) !important;
}

:root[data-theme="light"] .dashboard-wrapper .border-red-500\/30 {
  border-color: rgba(220, 38, 38, 0.15) !important;
}

:root[data-theme="light"] .dashboard-wrapper .border-amber-500\/30,
:root[data-theme="light"] .dashboard-wrapper .border-amber-700\/50 {
  border-color: rgba(217, 119, 6, 0.2) !important;
}

:root[data-theme="light"] .dashboard-wrapper .border-pink-500\/30,
:root[data-theme="light"] .dashboard-wrapper .border-pink-700\/50 {
  border-color: rgba(219, 39, 119, 0.2) !important;
}

:root[data-theme="light"] .dashboard-wrapper .border-blue-500 {
  border-color: rgba(37, 99, 235, 0.4) !important;
}

:root[data-theme="light"] .dashboard-wrapper .border-blue-400 {
  border-color: rgba(37, 99, 235, 0.3) !important;
}

:root[data-theme="light"] .dashboard-wrapper .border-green-500 {
  border-color: rgba(22, 163, 74, 0.4) !important;
}

/* ======================================================================
   SHADOW OVERRIDES (lighter for light theme)
   ====================================================================== */
:root[data-theme="light"] .dashboard-hero {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.06) !important;
}

:root[data-theme="light"] .dashboard-section,
:root[data-theme="light"] .dashboard-section-org,
:root[data-theme="light"] .dashboard-section-cup,
:root[data-theme="light"] .dashboard-section-admin,
:root[data-theme="light"] .dashboard-carousel-section,
:root[data-theme="light"] .dashboard-discover-section {
  box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.04) !important;
}

/* ======================================================================
   BADGE CLASSES (used by public_events.js)
   ====================================================================== */
.badge-sold-out {
  background: rgba(239, 68, 68, 0.9);
  color: white;
}

.badge-low-stock {
  background: rgba(249, 115, 22, 0.9);
  color: white;
}

.badge-highlight {
  background: linear-gradient(to right, var(--cita-accent-cyan), var(--cita-accent-blue));
  color: white;
}

.badge-watched {
  background: var(--cita-accent-red-subtle);
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--cita-accent-red);
}

.badge-watched:hover {
  background: var(--cita-accent-red-subtle);
  opacity: 0.8;
}

:root[data-theme="light"] .badge-sold-out {
  background: rgba(220, 38, 38, 0.9);
}

:root[data-theme="light"] .badge-low-stock {
  background: rgba(234, 88, 12, 0.9);
}

/* ======================================================================
   NOTIFICATION WIDGET — additional Tailwind overrides for JS-generated HTML
   ====================================================================== */

/* Alert severity text */
:root[data-theme="light"] .dashboard-wrapper .text-red-300 {
  color: #dc2626 !important;
}

:root[data-theme="light"] .dashboard-wrapper .text-amber-300 {
  color: #d97706 !important;
}

:root[data-theme="light"] .dashboard-wrapper .text-amber-200 {
  color: #b45309 !important;
}

/* Notification text with opacity modifiers */
:root[data-theme="light"] .dashboard-wrapper .text-cyan-300\/70 {
  color: rgba(6, 182, 212, 0.85) !important;
}

:root[data-theme="light"] .dashboard-wrapper .text-amber-300\/70 {
  color: rgba(217, 119, 6, 0.85) !important;
}

/* Alert/Notification backgrounds */
:root[data-theme="light"] .dashboard-wrapper .bg-red-500\/20 {
  background-color: rgba(220, 38, 38, 0.06) !important;
}

:root[data-theme="light"] .dashboard-wrapper .bg-amber-500\/20 {
  background-color: rgba(217, 119, 6, 0.06) !important;
}

/* Alert/Notification borders */
:root[data-theme="light"] .dashboard-wrapper .border-red-500\/50 {
  border-color: rgba(220, 38, 38, 0.2) !important;
}

:root[data-theme="light"] .dashboard-wrapper .border-amber-500\/50 {
  border-color: rgba(217, 119, 6, 0.2) !important;
}

:root[data-theme="light"] .dashboard-wrapper .border-cyan-500\/30 {
  border-color: rgba(6, 182, 212, 0.2) !important;
}

:root[data-theme="light"] .dashboard-wrapper .border-amber-500\/30 {
  border-color: rgba(217, 119, 6, 0.15) !important;
}

/* Announcement action link hover */
:root[data-theme="light"] .dashboard-wrapper .hover\:text-white:hover {
  color: #0f172a !important;
}