@import "tailwindcss";
@plugin "daisyui";

@theme {
  --color-pitch: #0A3B18;
  --color-turf: #1ED760;
  --color-nutmeg: #FF4500;
  --color-gold: #FFD700;
  --color-chalk: #FFFFFF;
  --color-ink: #1A1A1A;
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'Work Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

@layer base {
  :root {
    --color-base-100: #FFFFFF;
    --color-base-200: #F0F0F0;
    --color-base-300: #E0E0E0;
    --color-primary: #0A3B18;
    --color-primary-content: #FFFFFF;
    --color-secondary: #1ED760;
    --color-secondary-content: #1A1A1A;
    --color-accent: #FFD700;
    --color-accent-content: #1A1A1A;
    --color-neutral: #1A1A1A;
    --color-neutral-content: #FFFFFF;
    --color-info: #0A3B18;
    --color-success: #1ED760;
    --color-warning: #FFD700;
    --color-error: #FF4500;
    scroll-behavior: smooth;
  }
  body {
    font-family: 'Work Sans', sans-serif;
    background-color: #F0F0F0;
    color: #1A1A1A;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4, h5, h6, .font-oswald {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .stat-number, .font-mono, code, pre {
    font-family: 'JetBrains Mono', monospace !important;
    font-variant-numeric: tabular-nums;
  }
  *:focus-visible {
    outline: 4px solid #FFD700 !important;
    outline-offset: 2px !important;
    border-radius: 4px;
  }
}

.stadium-gradient {
  background: linear-gradient(135deg, #0A3B18 0%, #175429 100%);
}

.ticket-stub {
  position: relative;
  background: #FFFFFF;
  border-radius: 8px;
  overflow: visible;
  box-shadow: 0 4px 24px rgba(10,59,24,0.12), 0 1px 4px rgba(26,26,26,0.08);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 120px;
  border: 1px solid rgba(10,59,24,0.1);
}
.ticket-stub::before, .ticket-stub::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #F0F0F0;
  border-radius: 50%;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.ticket-stub::before { left: -10px; }
.ticket-stub::after { right: -10px; }
.ticket-notch-top, .ticket-notch-bottom {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #F0F0F0;
  border-radius: 50%;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.ticket-notch-top { top: -10px; }
.ticket-notch-bottom { bottom: -10px; }
.ticket-left, .ticket-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  position: relative;
}
.ticket-perforation {
  width: 0;
  border-left: 2px dashed #FFD700;
  position: relative;
  flex-shrink: 0;
}
.ticket-team-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  color: #FF4500;
  font-weight: 600;
}
.ticket-team-label.is-home {
  color: #1A1A1A;
}
.ticket-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.5rem;
  font-weight: 700;
  color: #0A3B18;
  line-height: 1;
}

.section-divider-dashed {
  width: 100%;
  height: 0;
  border-top: 2px dashed #FFD700;
  opacity: 0.5;
  margin: 0;
  position: relative;
}
.section-divider-dashed::before, .section-divider-dashed::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: #FFD700;
  border-radius: 50%;
  top: -8px;
}
.section-divider-dashed::before { left: -7px; }
.section-divider-dashed::after { right: -7px; }

.perforation-divider {
  width: 100%;
  height: 4px;
  background-image: linear-gradient(to right, #FF4500 50%, transparent 50%);
  background-size: 24px 4px;
  background-repeat: repeat-x;
}

.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast-item {
  pointer-events: auto;
  background: #0A3B18;
  color: #FFFFFF;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(10,59,24,0.3);
  animation: toast-in 0.2s ease-out, toast-out 0.2s ease-in 2.8s forwards;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 380px;
}
.toast-item.error { background-color: #FF4500; }
@keyframes toast-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toast-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(20px); opacity: 0; } }

.match-player-row .goal-stepper {
  display: none;
}
.match-player-row:has(.team-radio[value="a"]:checked) .goal-stepper,
.match-player-row:has(.team-radio[value="b"]:checked) .goal-stepper {
  display: flex;
}
.team-toggle .team-opt {
  transition: background-color 0.15s ease, color 0.15s ease;
}
.team-toggle .team-opt:has(.team-radio:checked) {
  background-color: #0A3B18;
  color: #FFD700;
}

@media (max-width: 640px) {
  .ticket-stub { flex-direction: column; min-height: auto; }
  .ticket-perforation { width: 100%; height: 0; border-left: none; border-top: 2px dashed #FFD700; }
  .ticket-score { font-size: 2rem; }
}