/* ECSA Theme Overrides - Professional styling inspired by ecsa.co.za */
/* This file must be loaded AFTER Tailwind utilities */

/* ===== TYPOGRAPHY ===== */
[data-theme="ecsa"] body {
  font-family: 'Gill Sans', 'Gill Sans MT', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

[data-theme="ecsa"] h1,
[data-theme="ecsa"] h2,
[data-theme="ecsa"] h3,
[data-theme="ecsa"] h4,
[data-theme="ecsa"] h5,
[data-theme="ecsa"] h6 {
  font-family: 'Gill Sans', 'Gill Sans MT', 'Montserrat', sans-serif;
  font-weight: 700;
}

/* ===== BUTTONS ===== */
[data-theme="ecsa"] .btn,
[data-theme="ecsa"] button.btn-primary,
[data-theme="ecsa"] a.btn-primary {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

[data-theme="ecsa"] .btn:hover,
[data-theme="ecsa"] button.btn-primary:hover,
[data-theme="ecsa"] a.btn-primary:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

/* Secondary buttons with yellow accent */
[data-theme="ecsa"] .btn-secondary:hover {
  background-color: #FFC53A !important;
  color: #1c2347 !important;
  border-color: #FFC53A !important;
}

/* ===== NAVIGATION ===== */
[data-theme="ecsa"] nav {
  background-color: #2E5090 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* Logo container - always white background */
[data-theme="ecsa"] nav .bg-white {
  background-color: #FFFFFF !important;
}

[data-theme="ecsa"] nav a {
  color: #FFFFFF !important;
  transition: color 0.2s ease;
}

[data-theme="ecsa"] nav a:hover {
  color: #FFC53A !important;
}

/* Keep logo link styling neutral (no white text) */
[data-theme="ecsa"] nav a.bg-white {
  color: inherit !important;
}

/* Remove shadow from Discover menu container */
[data-theme="ecsa"] .isolate.z-50.shadow {
  box-shadow: none !important;
}

/* ===== CARDS & CONTAINERS ===== */
[data-theme="ecsa"] .bg-white.shadow,
[data-theme="ecsa"] .bg-white.rounded,
[data-theme="ecsa"] [class*="card"],
[data-theme="ecsa"] [class*="panel"] {
  border-radius: 8px;
  border: 1px solid #dddddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

[data-theme="ecsa"] .bg-white.shadow:hover,
[data-theme="ecsa"] [class*="card"]:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Card headers - make them more visible */
[data-theme="ecsa"] h2.text-gray-400,
[data-theme="ecsa"] h3.text-gray-400,
[data-theme="ecsa"] .text-gray-400.uppercase {
  color: #4A7C7E !important;
  font-weight: 600;
}

/* Table styling */
[data-theme="ecsa"] table thead {
  background-color: #f8f9fa;
  color: #00364C;
}

[data-theme="ecsa"] table tbody tr {
  background-color: #FFFFFF !important;
  transition: background-color 0.2s ease;
}

[data-theme="ecsa"] table tbody tr:hover {
  background-color: #f0f7fc !important;
}

/* Override any dark backgrounds in tables */
[data-theme="ecsa"] .bg-gray-800.hover\:bg-gray-700:hover,
[data-theme="ecsa"] tr.bg-gray-800:hover {
  background-color: #f0f7fc !important;
}

/* ===== LAYOUT & SPACING ===== */
[data-theme="ecsa"] .container,
[data-theme="ecsa"] .max-w-7xl {
  max-width: 1260px;
}

/* ===== LINKS ===== */
[data-theme="ecsa"] a {
  transition: color 0.2s ease;
}

[data-theme="ecsa"] a:hover:not(.btn) {
  color: #FFC53A !important;
}

/* ===== IMAGES & MEDIA ===== */
[data-theme="ecsa"] img {
  transition: transform 0.3s ease;
}

[data-theme="ecsa"] a:hover img {
  transform: scale(1.02);
}

/* ===== FORMS ===== */
[data-theme="ecsa"] input,
[data-theme="ecsa"] textarea,
[data-theme="ecsa"] select {
  border-radius: 6px;
  border-color: #dddddd;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="ecsa"] input:focus,
[data-theme="ecsa"] textarea:focus,
[data-theme="ecsa"] select:focus {
  border-color: #0072CE;
  box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.1);
}

/* ===== FORCED LIGHT MODE COLORS ===== */
[data-theme="ecsa"] .bg-gray-800,
[data-theme="ecsa"] .bg-gray-900,
[data-theme="ecsa"] .bg-slate-800,
[data-theme="ecsa"] .bg-slate-900,
[data-theme="ecsa"].dark .bg-gray-800,
[data-theme="ecsa"].dark .bg-gray-900,
[data-theme="ecsa"].dark .bg-slate-800,
[data-theme="ecsa"].dark .bg-slate-900 {
  background-color: #FFFFFF !important;
}

[data-theme="ecsa"] .text-white,
[data-theme="ecsa"] h1.text-white,
[data-theme="ecsa"] h2.text-white,
[data-theme="ecsa"] h3.text-white,
[data-theme="ecsa"] h4.text-white,
[data-theme="ecsa"] h5.text-white,
[data-theme="ecsa"] h6.text-white,
[data-theme="ecsa"].dark .text-white,
[data-theme="ecsa"].dark h1.text-white,
[data-theme="ecsa"].dark h2.text-white,
[data-theme="ecsa"].dark h3.text-white {
  color: #00364C !important;
}

/* Exception: Keep white text on dark/semi-transparent backgrounds */
[data-theme="ecsa"] .bg-black.text-white,
[data-theme="ecsa"] .bg-opacity-50.text-white,
[data-theme="ecsa"] button.bg-black.text-white,
[data-theme="ecsa"] button.bg-opacity-50.text-white {
  color: #FFFFFF !important;
}

[data-theme="ecsa"] .text-gray-50,
[data-theme="ecsa"] .text-gray-100,
[data-theme="ecsa"] .text-gray-200,
[data-theme="ecsa"] .text-gray-300,
[data-theme="ecsa"].dark .text-gray-50,
[data-theme="ecsa"].dark .text-gray-100,
[data-theme="ecsa"].dark .text-gray-200,
[data-theme="ecsa"].dark .text-gray-300 {
  color: #00364C !important;
}

[data-theme="ecsa"] .text-gray-400,
[data-theme="ecsa"].dark .text-gray-400 {
  color: #4A7C7E !important;
}

[data-theme="ecsa"] .text-gray-500,
[data-theme="ecsa"].dark .text-gray-500 {
  color: #4A7C7E !important;
}

[data-theme="ecsa"] .text-gray-600,
[data-theme="ecsa"].dark .text-gray-600 {
  color: #4A7C7E !important;
}

[data-theme="ecsa"] .text-slate-900,
[data-theme="ecsa"].dark .text-slate-900 {
  color: #00364C !important;
}

/* ===== VIDEO PLAYER STYLING ===== */
/* Video player container - professional card styling */
[data-theme="ecsa"] .bg-gradient-to-b {
  background: #FFFFFF !important;
}

[data-theme="ecsa"] .border-gray-800 {
  border-color: #dddddd !important;
}

/* Hide the floating download button inside video player container (keep the one below in card) */
[data-theme="ecsa"] .rounded-xl.shadow-xl .absolute.bottom-4.right-4 {
  display: none !important;
}

/* ===== PROFILE DROPDOWN MENU ===== */
/* Menu container */
[data-theme="ecsa"] .dropdown-menu .overflow-hidden,
[data-theme="ecsa"].dark .dropdown-menu .overflow-hidden {
  background-color: #FFFFFF !important;
  border-color: #dddddd !important;
}

/* Menu items - links and buttons */
[data-theme="ecsa"] .dropdown-menu a,
[data-theme="ecsa"] .dropdown-menu button,
[data-theme="ecsa"].dark .dropdown-menu a,
[data-theme="ecsa"].dark .dropdown-menu button {
  background-color: #FFFFFF !important;
  color: #00364C !important;
}

/* Menu item hover states */
[data-theme="ecsa"] .dropdown-menu a:hover,
[data-theme="ecsa"] .dropdown-menu button:hover,
[data-theme="ecsa"].dark .dropdown-menu a:hover,
[data-theme="ecsa"].dark .dropdown-menu button:hover {
  background-color: #f0f7fc !important;
  color: #0072CE !important;
}

/* Section headers (SWITCH ACCOUNT, ADMIN, DEVELOPMENT) */
[data-theme="ecsa"] .dropdown-menu .uppercase,
[data-theme="ecsa"].dark .dropdown-menu .uppercase {
  background-color: #f8f9fa !important;
  color: #00364C !important;
  font-weight: 700 !important;
}

/* ===== FEATURED BADGE ===== */
/* Change featured badge from purple to gold/bronze for ECSA theme */
[data-theme="ecsa"] .bg-purple-600,
[data-theme="ecsa"] .bg-purple-600\/90,
[data-theme="ecsa"].dark .bg-purple-600,
[data-theme="ecsa"].dark .bg-purple-600\/90 {
  background-color: rgba(202, 143, 61, 0.9) !important;
}

[data-theme="ecsa"] .bg-purple-500,
[data-theme="ecsa"].dark .bg-purple-500 {
  background-color: #CA8F3D !important;
}

/* ===== EVENT CHAT STYLING ===== */
/* Using ECSA secondary colors from brand guidelines:
   - PANTONE 558 C (Sage Green): rgb(117, 148, 134) - Chat container backgrounds
   - PANTONE 7672 C (Purple/Blue): rgb(84, 72, 122) - Headers and accents
   - PANTONE 1375 C (Golden Orange): rgb(242, 169, 59) - Highlights
*/

/* Chat outer container - gradient from purple header to white */
[data-theme="ecsa"] [data-controller="participants"].bg-\[#0F0F0F\],
[data-theme="ecsa"].dark [data-controller="participants"].bg-\[#0F0F0F\] {
  background: linear-gradient(to bottom, rgb(84, 72, 122) 56px, #FFFFFF 56px) !important;
}

/* Chat header - use PANTONE 7672 C purple/blue */
[data-theme="ecsa"] [data-controller="participants"] > .flex-none.h-14.border-b,
[data-theme="ecsa"].dark [data-controller="participants"] > .flex-none.h-14.border-b {
  background-color: rgb(84, 72, 122) !important; /* PANTONE 7672 C */
}

/* Chat header text - keep white on dark header */
[data-theme="ecsa"] [data-controller="participants"] > .flex-none.h-14 .text-white,
[data-theme="ecsa"].dark [data-controller="participants"] > .flex-none.h-14 .text-white {
  color: #FFFFFF !important;
}

/* Chat input area at bottom - use PANTONE 7672 C purple/blue */
[data-theme="ecsa"] [data-controller="participants"] > .flex-none.border-t.min-h-20,
[data-theme="ecsa"].dark [data-controller="participants"] > .flex-none.border-t.min-h-20 {
  background-color: rgb(84, 72, 122) !important; /* PANTONE 7672 C */
}

/* Chat input text color - white on dark background */
[data-theme="ecsa"] [data-controller="participants"] textarea,
[data-theme="ecsa"].dark [data-controller="participants"] textarea,
[data-theme="ecsa"] [data-controller="participants"] input[type="text"],
[data-theme="ecsa"].dark [data-controller="participants"] input[type="text"] {
  color: #FFFFFF !important;
}

/* Chat input placeholder color */
[data-theme="ecsa"] [data-controller="participants"] textarea::placeholder,
[data-theme="ecsa"].dark [data-controller="participants"] textarea::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Chat header and input border */
[data-theme="ecsa"] [data-controller="participants"] .border-neutral-800\/50,
[data-theme="ecsa"].dark [data-controller="participants"] .border-neutral-800\/50 {
  border-color: rgba(255, 255, 255, 0.2) !important; /* Light border on dark background */
}

/* Chat messages container - lighter sage green */
[data-theme="ecsa"] #chat_messages,
[data-theme="ecsa"] #mobile_chat_messages {
  background-color: #FFFFFF !important;
}

/* Empty state text - use sage green tone */
[data-theme="ecsa"] .text-gray-500 {
  color: rgb(117, 148, 134) !important; /* PANTONE 558 C */
}

/* Chat input area - use light sage green background */
[data-theme="ecsa"] .bg-\[#0F0F0F\] .border-t {
  background-color: rgb(245, 248, 247) !important; /* Very light sage green */
  border-color: rgb(117, 148, 134) !important; /* PANTONE 558 C */
}

/* Chat message bubbles - keep white with sage green border */
[data-theme="ecsa"] .bg-neutral-800,
[data-theme="ecsa"].dark .bg-neutral-800 {
  background-color: #FFFFFF !important;
  border: 1px solid rgb(117, 148, 134) !important; /* PANTONE 558 C */
}

/* Jump to latest button - use golden orange accent */
[data-theme="ecsa"] .bg-blue-600 {
  background-color: rgb(242, 169, 59) !important; /* PANTONE 1375 C */
}

[data-theme="ecsa"] .bg-blue-600:hover {
  background-color: rgb(218, 152, 53) !important; /* Darker golden orange */
}

/* Override ALL black backgrounds in video player and event page */
[data-theme="ecsa"] .bg-black,
[data-theme="ecsa"].dark .bg-black,
[data-theme="ecsa"] [class*="bg-black"],
[data-theme="ecsa"].dark [class*="bg-black"] {
  background-color: rgb(84, 72, 122) !important; /* PANTONE 7672 C purple/blue */
}

/* Video player controls - use purple/blue accent */
[data-theme="ecsa"] .bg-black\/90,
[data-theme="ecsa"].dark .bg-black\/90 {
  background-color: rgba(84, 72, 122, 0.95) !important; /* PANTONE 7672 C with opacity */
}

/* Video player container backgrounds */
[data-theme="ecsa"] .bg-black\/80,
[data-theme="ecsa"].dark .bg-black\/80 {
  background-color: rgba(84, 72, 122, 0.8) !important;
}

/* Video player bottom bar and overlays */
[data-theme="ecsa"] .bg-black\/50,
[data-theme="ecsa"].dark .bg-black\/50 {
  background-color: rgba(84, 72, 122, 0.7) !important;
}

/* Ensure text stays readable on dark purple backgrounds */
[data-theme="ecsa"] .bg-black .text-white,
[data-theme="ecsa"].dark .bg-black .text-white {
  color: #FFFFFF !important;
}

/* ===== EVENTS PAGE STYLING ===== */
/* Ensure "Upcoming Events" header text is always readable */
[data-theme="ecsa"] .bg-white.border h2.text-gray-800,
[data-theme="ecsa"].dark .bg-white.border h2.text-gray-800 {
  color: #00364C !important;
  text-shadow: none;
}

/* Events page hero background for no events state */
[data-theme="ecsa"] .relative.h-64 img,
[data-theme="ecsa"] .relative.h-96 img {
  object-fit: cover;
}

/* Hero text must stay white on the background image */
[data-theme="ecsa"] .ecsa-events-hero-text,
[data-theme="ecsa"].dark .ecsa-events-hero-text {
  color: #FFFFFF !important;
}

/* ===== VIDEO LIBRARY / DISCOVER MENU LEGIBILITY ===== */
/* Bottom gradient overlays - make darker for better text contrast */
[data-theme="ecsa"] .bg-gradient-to-t.from-black\/60,
[data-theme="ecsa"].dark .bg-gradient-to-t.from-black\/60 {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.80) 0%, transparent 100%) !important;
}

/* Category title text - force white color */
[data-theme="ecsa"] .absolute.bottom-2.text-center.text-white,
[data-theme="ecsa"].dark .absolute.bottom-2.text-center.text-white {
  color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Video card overlay gradient - lighter gradient for better image visibility */
[data-theme="ecsa"] .aspect-video .bg-gradient-to-t,
[data-theme="ecsa"].dark .aspect-video .bg-gradient-to-t {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.2) 40%, transparent 100%) !important;
}

/* Time badge - simple dark background with white text */
[data-theme="ecsa"] .aspect-video .bg-black\/50,
[data-theme="ecsa"].dark .aspect-video .bg-black\/50 {
  background-color: rgba(0, 0, 0, 0.70) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Ensure white text on time badges */
[data-theme="ecsa"] .aspect-video .bg-black\/50.text-white,
[data-theme="ecsa"].dark .aspect-video .bg-black\/50.text-white {
  color: #FFFFFF !important;
}

/* Plan badges - simple dark background */
[data-theme="ecsa"] .aspect-video .bg-black\/50.text-orange-500,
[data-theme="ecsa"].dark .aspect-video .bg-black\/50.text-orange-500 {
  background-color: rgba(0, 0, 0, 0.70) !important;
  color: #FFC53A !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Featured badge - ECSA bronze/gold */
[data-theme="ecsa"] .aspect-video .bg-purple-600\/90,
[data-theme="ecsa"].dark .aspect-video .bg-purple-600\/90 {
  background-color: rgba(202, 143, 61, 0.95) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Ensure white text on featured badges */
[data-theme="ecsa"] .aspect-video .bg-purple-600\/90 .text-white,
[data-theme="ecsa"].dark .aspect-video .bg-purple-600\/90 .text-white {
  color: #FFFFFF !important;
}

/* Video card title and description - ensure readable on any background */
[data-theme="ecsa"] .group .text-white.line-clamp-1,
[data-theme="ecsa"].dark .group .text-white.line-clamp-1 {
  color: #00364C !important; /* ECSA dark blue for title */
}

[data-theme="ecsa"] .group .text-neutral-400,
[data-theme="ecsa"].dark .group .text-neutral-400 {
  color: #4A7C7E !important; /* ECSA teal for description */
}