/**
 * 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 override */
: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;
}

/* ======================================================================
   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;
}