/* Water Polo Theme Overrides for iOS App */
/* This CSS is loaded directly to ensure water polo theming appears in the iOS app */

/* Import Water Polo Athletic Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');

/* Override default fonts with athletic theme */
body, * {
  font-family: 'Oswald', system-ui, -apple-system, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bebas Neue', 'Oswald', sans-serif !important;
  letter-spacing: 0.05em !important;
}

/* Water Polo Primary Colors */
:root {
  --water-primary: #0088a3 !important;
  --water-secondary: #005577 !important;
  --water-accent: #00bcd4 !important;
  --water-dark: #001a33 !important;
  --water-light: #48cae4 !important;
}

/* Override template gradients with water theme */
.animated-bg,
.bg-gradient-to-r,
.bg-gradient-to-b,
.bg-gradient-to-br,
[class*="from-blue-900"],
[class*="from-purple-900"],
[class*="from-pink-900"],
[class*="via-purple-900"] {
  background: linear-gradient(147deg, #001a33 0%, #003d5c 22%, #005577 48%, #006b8a 74%, #0088a3 100%) !important;
  background-size: 200% 200% !important;
  animation: water-flow 15s ease infinite !important;
}

/* Water flow animation */
@keyframes water-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Override primary buttons with water theme */
button[class*="bg-primary"],
button[class*="bg-blue"],
.btn-primary,
[class*="bg-primary-500"],
[class*="bg-blue-500"],
[class*="bg-blue-600"] {
  background: linear-gradient(135deg, #0088a3 0%, #005577 100%) !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(0, 136, 163, 0.25) !important;
  transition: all 0.3s ease !important;
}

button[class*="bg-primary"]:hover,
button[class*="bg-blue"]:hover,
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 30px rgba(0, 136, 163, 0.35) !important;
}

/* Override text colors */
.text-primary,
[class*="text-blue-"],
[class*="text-purple-"] {
  color: #0088a3 !important;
}

/* Override glowing effects */
.glow-text,
[class*="text-shadow"] {
  text-shadow: 
    0 0 12px rgba(0, 188, 212, 0.8),
    0 0 24px rgba(0, 150, 199, 0.6),
    0 0 36px rgba(0, 119, 182, 0.4) !important;
}

/* Override cards and panels */
.card,
[class*="bg-card"],
[class*="bg-gray-800"],
[class*="bg-gray-900"] {
  background: linear-gradient(135deg, #001a33 0%, #002541 100%) !important;
  border: 1px solid rgba(0, 136, 163, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 136, 163, 0.15) !important;
}

/* Override achievement colors */
[class*="bg-yellow"],
[class*="bg-gold"],
.achievement-gold {
  background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%) !important;
}

/* Water ripple effect for interactive elements */
button, a, .clickable, [role="button"] {
  position: relative;
  overflow: hidden;
}

button::after, a::after, .clickable::after, [role="button"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(0, 188, 212, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

button:active::after, a:active::after, .clickable:active::after, [role="button"]:active::after {
  width: 300px;
  height: 300px;
}

/* Override progress bars with water theme */
.progress-bar,
[class*="bg-progress"],
[role="progressbar"] > div {
  background: linear-gradient(90deg, #00bcd4 0%, #0088a3 50%, #005577 100%) !important;
  background-size: 200% 100% !important;
  animation: water-wave 2s linear infinite !important;
}

@keyframes water-wave {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Override badges and chips */
.badge,
.chip,
[class*="rounded-full"][class*="px-"],
[class*="rounded-pill"] {
  background: linear-gradient(135deg, #0088a3 0%, #005577 100%) !important;
  color: white !important;
  border: 1px solid rgba(0, 188, 212, 0.3) !important;
}

/* Override input fields with water theme */
input, textarea, select {
  border: 1px solid rgba(0, 136, 163, 0.3) !important;
  background: rgba(0, 26, 51, 0.5) !important;
  color: white !important;
}

input:focus, textarea:focus, select:focus {
  border-color: #0088a3 !important;
  box-shadow: 0 0 20px rgba(0, 136, 163, 0.3) !important;
  outline: none !important;
}

/* Override navigation with water theme */
nav, header, [role="navigation"] {
  background: linear-gradient(180deg, #001a33 0%, #002541 100%) !important;
  border-bottom: 1px solid rgba(0, 136, 163, 0.2) !important;
}

/* Make sure water theme is prominent */
.bg-secondary,
.dark .bg-secondary,
.dark .bg-background {
  background: linear-gradient(135deg, #001a33 0%, #002541 100%) !important;
}

/* Force athletic font on all text */
p, span, div, li, td, th {
  font-family: 'Oswald', system-ui, -apple-system, sans-serif !important;
}

/* Water polo specific logo treatment */
.logo, [class*="text-4xl"], [class*="text-5xl"], [class*="text-6xl"] {
  font-family: 'Russo One', 'Bebas Neue', sans-serif !important;
  background: linear-gradient(135deg, #00bcd4 0%, #0088a3 50%, #005577 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none !important;
}

/* Important: Remove all purple/pink template colors */
[class*="purple"],
[class*="pink"],
[class*="violet"],
[class*="fuchsia"] {
  color: #0088a3 !important;
}

[class*="bg-purple"],
[class*="bg-pink"],
[class*="bg-violet"],
[class*="bg-fuchsia"] {
  background: linear-gradient(135deg, #0088a3 0%, #005577 100%) !important;
}

[class*="from-purple"],
[class*="from-pink"],
[class*="via-purple"],
[class*="via-pink"],
[class*="to-purple"],
[class*="to-pink"] {
  background: linear-gradient(147deg, #001a33 0%, #003d5c 22%, #005577 48%, #006b8a 74%, #0088a3 100%) !important;
}