/* Euro Soccer - Estilos Complementarios */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --primary-emerald: #10b981;
  --primary-emerald-dark: #059669;
  --accent-gold: #f59e0b;
  --dark-stadium: #0b1120;
  --dark-card: #151f32;
  --dark-border: #22324e;
}

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #0b1120;
  color: #f1f5f9;
  overflow-x: hidden;
}

.mono-font {
  font-family: 'JetBrains Mono', monospace;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #0f172a;
}

::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #10b981;
}

/* Stadium subtle gradient overlay */
.stadium-bg {
  background: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.12) 0%, rgba(11, 17, 32, 0.98) 75%), #0b1120;
}

/* Pitch pattern texture */
.pitch-pattern {
  background-color: #0d1b2a;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 35px, rgba(16, 185, 129, 0.04) 35px, rgba(16, 185, 129, 0.04) 70px);
}

/* Glassmorphism effects */
.glass-panel {
  background: rgba(21, 31, 50, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.glass-card {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  border-color: rgba(16, 185, 129, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 0 15px -3px rgba(16, 185, 129, 0.15);
}

/* Navigation Active Tab */
.nav-item.active {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.05) 100%);
  border-left: 3px solid #10b981;
  color: #34d399;
  font-weight: 600;
}

/* Pitch Schedule Slot */
.slot-available {
  background: rgba(16, 185, 129, 0.08);
  border: 1px dashed rgba(16, 185, 129, 0.3);
  color: #34d399;
}
.slot-available:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  cursor: pointer;
}

.slot-booked {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.slot-paid {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}

.slot-school {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

/* Print Styles for Receipts */
@media print {
  body * {
    visibility: hidden;
  }
  #receiptModal, #receiptModal * {
    visibility: visible;
  }
  #receiptModal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: white !important;
  }
  .receipt-paper {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    border: none !important;
    max-width: 100% !important;
    width: 80mm !important;
    margin: 0 auto;
    font-family: 'JetBrains Mono', monospace !important;
  }
  .no-print {
    display: none !important;
  }
}

/* Animation pulses */
@keyframes soccerPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.animate-soccer-pulse {
  animation: soccerPulse 2.5s infinite;
}

/* ========================================================
   LIGHT MODE OVERRIDES
   ======================================================== */
html:not(.dark) body {
  background-color: #f1f5f9;
  color: #0f172a;
}

html:not(.dark) header {
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom-color: #e2e8f0;
}

html:not(.dark) aside {
  background-color: #ffffff;
  border-right-color: #e2e8f0;
}

html:not(.dark) aside .border-pitch-border\/60 {
  background-color: #f8fafc;
  border-top-color: #e2e8f0;
}

html:not(.dark) .stadium-bg {
  background: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.1) 0%, rgba(241, 245, 249, 0.98) 75%), #f1f5f9;
}

html:not(.dark) .pitch-pattern {
  background-color: #f8fafc;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 35px, rgba(16, 185, 129, 0.04) 35px, rgba(16, 185, 129, 0.04) 70px);
}

html:not(.dark) .glass-panel {
  background: rgba(255, 255, 255, 0.95);
  border-color: #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
}

html:not(.dark) .glass-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

html:not(.dark) .glass-card:hover {
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 0 15px -3px rgba(16, 185, 129, 0.2);
}

html:not(.dark) .text-white {
  color: #0f172a !important;
}

html:not(.dark) .text-slate-100 {
  color: #0f172a !important;
}

html:not(.dark) .text-slate-200 {
  color: #1e293b !important;
}

html:not(.dark) .text-slate-300 {
  color: #334155 !important;
}

html:not(.dark) .text-slate-400 {
  color: #64748b !important;
}

html:not(.dark) .bg-pitch-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .bg-slate-800,
html:not(.dark) .bg-slate-800\/80,
html:not(.dark) .bg-slate-800\/70,
html:not(.dark) .bg-slate-800\/60 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .bg-slate-900,
html:not(.dark) .bg-slate-900\/80,
html:not(.dark) .bg-slate-900\/90 {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-800\/80,
html:not(.dark) .border-slate-800\/60,
html:not(.dark) .border-slate-700,
html:not(.dark) .border-slate-700\/60,
html:not(.dark) .border-slate-700\/70,
html:not(.dark) .border-slate-700\/80,
html:not(.dark) .border-pitch-border\/80,
html:not(.dark) .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]) {
  border-color: #e2e8f0 !important;
}

html:not(.dark) input,
html:not(.dark) select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html:not(.dark) input::placeholder {
  color: #94a3b8 !important;
}

html:not(.dark) .nav-item.active {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.18) 0%, rgba(16, 185, 129, 0.04) 100%);
  color: #047857;
}

/* High-contrast styles for schedule slots in Light Mode */
html:not(.dark) .slot-available {
  background: #f0fdf4 !important;
  border: 1.5px dashed #16a34a !important;
  color: #14532d !important;
}

html:not(.dark) .slot-available:hover {
  background: #dcfce7 !important;
  border-color: #15803d !important;
}

html:not(.dark) .slot-available .text-emerald-400 {
  color: #15803d !important;
  font-weight: 700 !important;
}

html:not(.dark) .slot-available .text-slate-300 {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html:not(.dark) .slot-booked {
  background: #fef2f2 !important;
  border: 1.5px solid #f87171 !important;
  color: #991b1b !important;
}

html:not(.dark) .slot-booked .text-white {
  color: #7f1d1d !important;
}

html:not(.dark) .slot-booked .text-rose-300\/90 {
  color: #b91c1c !important;
  font-weight: 600 !important;
}

html:not(.dark) .slot-paid {
  background: #eff6ff !important;
  border: 1.5px solid #60a5fa !important;
  color: #1e40af !important;
}

html:not(.dark) .slot-paid .text-white {
  color: #1e3a8a !important;
}

html:not(.dark) .slot-paid .text-blue-300,
html:not(.dark) .slot-paid .text-blue-300\/80 {
  color: #1d4ed8 !important;
  font-weight: 700 !important;
}

html:not(.dark) .slot-school {
  background: #fffbeb !important;
  border: 1.5px solid #fbbf24 !important;
  color: #92400e !important;
}

html:not(.dark) .slot-school .text-amber-300 {
  color: #78350f !important;
}

html:not(.dark) .slot-school .text-amber-400,
html:not(.dark) .slot-school .text-amber-400\/80 {
  color: #b45309 !important;
  font-weight: 600 !important;
}

/* High-contrast general color overrides for Light Mode */
html:not(.dark) .text-emerald-400 {
  color: #15803d !important;
}

html:not(.dark) .text-emerald-300 {
  color: #166534 !important;
}

html:not(.dark) .text-yellow-400 {
  color: #b45309 !important;
}

html:not(.dark) .text-yellow-300 {
  color: #92400e !important;
}

html:not(.dark) .text-amber-400 {
  color: #b45309 !important;
}

html:not(.dark) .text-amber-300 {
  color: #92400e !important;
}

html:not(.dark) .text-blue-400 {
  color: #1d4ed8 !important;
}

html:not(.dark) .text-blue-300 {
  color: #1e40af !important;
}

html:not(.dark) .text-sky-400 {
  color: #0369a1 !important;
}

html:not(.dark) .trn-type-option {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

html:not(.dark) .trn-type-option.active {
  background-color: #fffbeb !important;
  border-color: #f59e0b !important;
}

/* ========================================================
   RESPONSIVE MOBILE STYLES & DRAWER
   ======================================================== */
@media (max-width: 1023px) {
  #mainSidebar.mobile-open {
    transform: translateX(0) !important;
    box-shadow: 10px 0 25px -5px rgba(0, 0, 0, 0.5);
  }

  /* Improved touch scroll for horizontal tables and pills */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 640px) {
  /* Ensure receipt print modal fits small phone screens */
  .receipt-paper {
    padding: 1rem !important;
  }

  /* Compact padding on small mobile displays */
  main {
    padding: 0.75rem !important;
  }
}