/* Dynamic Club Theme - Generated from Database */
:root {
  /* Primary brand colors */
  --color-primary: #003366 !important;
  --color-secondary: #fdb813 !important;
  --primary-rgb: 0, 51, 102 !important;
  
  /* Aliases for theme-utilities.css compatibility */
  --primary-color: #003366 !important;
  --secondary-color: #fdb813 !important;
  --accent-color: #fdb813 !important;
  
  /* Derived shades of primary color */
  --color-primary-light: #1a4d80 !important;
  --color-primary-dark: #000d40 !important;
  --primary-light: #1a4d80 !important;
  --primary-dark: #000d40 !important;
  
  /* Background gradients and colors */
  --bg-dark: #fdb813 !important;
  --mobile-bg-primary: #003366 !important;
  --mobile-bg-secondary: #fdb813 !important;
  --club-background: url('/images/backgrounds/1763943525786-chatgpt-image-nov-24-2025-12_18_27-am.png') !important;
  --club-background-attachment: fixed !important;
  --club-background-size: cover !important;
  --club-background-position: center center !important;
  --club-background-repeat: no-repeat !important;
  --club-background-text: #ffffff !important;
  
  /* Text colors - automatically contrast with background */
  --text-primary: #003366 !important;
  --text-on-primary: #ffffff !important;
  --text-on-secondary: #1f2937 !important;
  
  /* Contrast text colors for theme-utilities.css button/tab system */
  --primary-text: #ffffff !important;
  --secondary-text: #1f2937 !important;
  --accent-text: #1f2937 !important;
  
  /* Opacity controls */
  --card-opacity: 1 !important;
  --nav-opacity: 1 !important;
  --background-opacity: 0.54 !important;
}

/* Body background - handled by body::before pseudo-element in spa.css for opacity control */
body,
body.mobile-view {
  /* Don't set background here - let spa.css body::before handle it for opacity support */
  color: var(--club-background-text) !important;
}

/* Header background with transparency */
.header {
  background: rgba(0, 51, 102, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  color: #ffffff !important;
}

.header h1, .header p, .header-left h1, .header-left p {
  color: #ffffff !important;
}

/* Header icons - use contrasting color */
.header .icon-btn {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

.header .icon-btn:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

.header .icon-btn svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

.header-right .icon-btn {
  color: #ffffff !important;
}

.header-right .icon-btn svg {
  stroke: #ffffff !important;
}

/* Settings button - only highlight when active (on settings page) */
.header-right #settings-btn.active,
button#settings-btn.icon-btn.active {
  background: #fdb813 !important;
  color: #1f2937 !important;
  border: 2px solid #e39e00 !important;
}

.header-right #settings-btn:hover,
button#settings-btn.icon-btn:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

.header-right #settings-btn.active:hover,
button#settings-btn.icon-btn.active:hover {
  background: #e39e00 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 0 12px #fdb813 !important;
}

.header-right #settings-btn.active svg,
button#settings-btn.icon-btn.active svg {
  stroke: #1f2937 !important;
  color: #1f2937 !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)) !important;
}

/* Bottom navigation */
.bottom-nav {
  background: rgba(0, 51, 102, 0.98) !important;
  backdrop-filter: blur(10px) !important;
}

.nav-item {
  color: rgba(255, 255, 255, 0.6) !important;
}

.nav-item:hover,
.nav-item.active {
  color: #fdb813 !important;
}

/* Mobile bottom navigation */
body.mobile-view .mobile-bottom-nav {
  background: #003366 !important;
}

body.mobile-view .bottom-nav {
  background: #003366 !important;
}

/* Cards - text on white backgrounds should use primary color */
.card {
  background: white !important;
  color: #1f2937 !important;
}

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
  color: #003366 !important;
}

.card p, .card span, .card div {
  color: #1f2937 !important;
}

/* Tab navigation styling - settings page tabs */
.settings-tab {
  color: var(--color-gray-500) !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
  border: none !important;
  cursor: pointer !important;
}

.settings-tab svg {
  stroke: var(--color-gray-500) !important;
}

.settings-tab span {
  color: var(--color-gray-500) !important;
}

.settings-tab:hover {
  color: #003366 !important;
  background: var(--color-gray-50) !important;
}

.settings-tab:hover svg {
  stroke: #003366 !important;
}

.settings-tab:hover span {
  color: #003366 !important;
}

.settings-tab.active {
  color: #1f2937 !important;
  background: #fdb813 !important;
  font-weight: 600 !important;
}

.settings-tab.active svg {
  stroke: #1f2937 !important;
}

.settings-tab.active span {
  color: #1f2937 !important;
}

/* Settings page specific - ensure readability on white cards */
#app-content .card h2,
#app-content .card h3,
#app-content .card label,
#app-content .card strong {
  color: #003366 !important;
}

#app-content .card p,
#app-content .card span:not(.badge) {
  color: #4b5563 !important;
}

/* NOTE: Button styling handled by theme-utilities.css with dynamic --primary-text variables */