/**
 * Club theme inspired by Club.jpg poster
 * - Dark indigo background, bright yellow accents, rainbow bands
 * - Playful vibrant palette: red, orange, yellow, green, blue, pink, purple
 */

:root {
  --club-indigo: #1B1464;
  --club-indigo-dark: #0f0c29;
  --club-yellow: #FACC15;
  --club-yellow-bright: #FDE047;
  --club-rainbow-red: #ef4444;
  --club-rainbow-orange: #f97316;
  --club-rainbow-yellow: #eab308;
  --club-rainbow-green: #22c55e;
  --club-rainbow-blue: #3b82f6;
  --club-rainbow-pink: #ec4899;
  --club-rainbow-purple: #a855f7;
}

/* Rainbow arc band - like poster bottom */
.club-rainbow-arc {
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--club-rainbow-red),
    var(--club-rainbow-orange),
    var(--club-rainbow-yellow),
    var(--club-rainbow-green),
    var(--club-rainbow-blue),
    var(--club-rainbow-pink),
    var(--club-rainbow-purple)
  );
  border-radius: 0 0 3px 3px;
}

/* Confetti / scattered dots decoration */
.club-confetti {
  position: relative;
  overflow: hidden;
}
.club-confetti::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(253, 224, 71, 0.15) 2px, transparent 2px),
    radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.12) 2px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(34, 197, 94, 0.1) 2px, transparent 2px),
    radial-gradient(circle at 80% 10%, rgba(59, 130, 246, 0.12) 2px, transparent 2px),
    radial-gradient(circle at 20% 90%, rgba(248, 113, 22, 0.1) 2px, transparent 2px);
  background-size: 80px 80px, 120px 120px, 100px 100px, 90px 90px, 110px 110px;
  pointer-events: none;
}

/* Poster-style title (bright yellow) */
.club-title-poster {
  color: var(--club-yellow) !important;
  font-weight: 800;
  text-shadow: 0 0 20px rgba(250, 204, 21, 0.3);
}

/* Primary button in poster yellow */
.btn-club-primary {
  background: linear-gradient(135deg, var(--club-yellow) 0%, #eab308 100%) !important;
  color: #1B1464 !important;
  border: none;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(250, 204, 21, 0.4);
}
.btn-club-primary:hover {
  background: linear-gradient(135deg, var(--club-yellow-bright) 0%, var(--club-yellow) 100%) !important;
  color: #1B1464 !important;
  box-shadow: 0 6px 20px rgba(250, 204, 21, 0.5);
}

/* Card with rainbow bottom border */
.card-club-rainbow {
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(
    90deg,
    var(--club-rainbow-red),
    var(--club-rainbow-orange),
    var(--club-rainbow-yellow),
    var(--club-rainbow-green),
    var(--club-rainbow-blue),
    var(--club-rainbow-pink),
    var(--club-rainbow-purple)
  ) 1;
}

/* Sidebar accent with indigo */
.app-sidebar.club-theme-sidebar {
  background: linear-gradient(180deg, var(--club-indigo-dark) 0%, var(--club-indigo) 100%) !important;
}
.app-sidebar.club-theme-sidebar .menu-link.active {
  background: rgba(250, 204, 21, 0.15) !important;
  color: var(--club-yellow) !important;
}

/* Header subtle rainbow underline */
.club-header-rainbow {
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(
    90deg,
    var(--club-rainbow-red),
    var(--club-rainbow-orange),
    var(--club-rainbow-yellow),
    var(--club-rainbow-green),
    var(--club-rainbow-blue)
  ) 1;
}