@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1, h2, h3, h4 {
    font-family: 'Barlow Condensed', theme('fontFamily.sans');
    letter-spacing: 0.01em;
  }

  /* Brand selection color */
  ::selection {
    background-color: theme('colors.red.200');
    color: theme('colors.red.950');
  }
  .dark ::selection {
    background-color: theme('colors.red.800');
    color: theme('colors.white');
  }

  /* Dark mode — tell the browser chrome to match */
  .dark {
    color-scheme: dark;
  }

  /* Dark scrollbars (webkit) */
  .dark ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .dark ::-webkit-scrollbar-track {
    background: transparent;
  }
  .dark ::-webkit-scrollbar-thumb {
    background: theme('colors.gray.700');
    border-radius: theme('borderRadius.full');
  }
  .dark ::-webkit-scrollbar-thumb:hover {
    background: theme('colors.gray.600');
  }

  /* ── Site background — grass-diamond texture + kit-color gradients ── */
  /*
     Two diagonal stripe layers at ±45° intersect to create a filled diamond grid:
     transparent zones = base color, single stripe = faint tint, both stripes = deepest tint.
     This produces three brightness levels that read as mowed-pitch / jersey fabric.
  */
  .body-gradient {
    background-color: #edf2f7;
    background-image:
      repeating-linear-gradient(
        -45deg,
        transparent 0,
        transparent 14px,
        rgba(0, 0, 0, 0.030) 14px,
        rgba(0, 0, 0, 0.030) 28px
      ),
      repeating-linear-gradient(
        45deg,
        transparent 0,
        transparent 14px,
        rgba(0, 0, 0, 0.030) 14px,
        rgba(0, 0, 0, 0.030) 28px
      ),
      radial-gradient(ellipse 55% 45% at 4% 0%,   rgba(109, 42,  49, 0.25) 0%, transparent 100%),
      radial-gradient(ellipse 50% 40% at 96% 100%, rgba(6,  130, 109, 0.10) 0%, transparent 100%),
      radial-gradient(ellipse 90% 80% at 50% 45%,  rgba(31, 90,  145, 0.10) 0%, transparent 100%),
      linear-gradient(160deg, #eef3f8 0%, #f0f5fa 55%, #eaf4f1 100%);
    background-size: auto, auto, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    min-height: 100vh;
  }

  /* ── Active swatch outline in theme picker ── */
  button.swatch-btn[data-active="true"] .swatch-preview {
    outline: 2.5px solid #ef4444;
    outline-offset: 2px;
  }

  /* ─────────────────────────────────────────────────
     BACKGROUND THEMES — html[data-bg-theme="..."]
     Universal themes: both light + dark variants defined.
     Dark-only themes: only the .dark variant defined —
       in light mode they fall back to .body-gradient.
     Light-only themes: only the plain variant defined —
       in dark mode they fall back to .dark .body-gradient
       (which is placed AFTER light-only rules in the cascade).
  ───────────────────────────────────────────────── */

  /* ── KIT COLORS (universal) ── */
  /* Club colours: blue dominant, maroon top-left, green bottom-right */
  [data-bg-theme="kit-colors"] .body-gradient {
    background-color: #ecf3fa;
    background-image:
      radial-gradient(ellipse 70% 60% at 4%  0%,   rgba(109, 42,  49, 0.42) 0%, transparent 85%),
      radial-gradient(ellipse 60% 55% at 96% 100%, rgba(6,  130, 109, 0.36) 0%, transparent 85%),
      radial-gradient(ellipse 100% 90% at 50% 45%, rgba(31, 90,  145, 0.32) 0%, transparent 100%),
      linear-gradient(160deg, #edf4fc 0%, #eef2f9 55%, #eaf8f5 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .dark[data-bg-theme="kit-colors"] .body-gradient {
    background-color: #03050d;
    background-image:
      radial-gradient(ellipse 70% 60% at 4%  0%,   rgba(109, 42,  49, 0.82) 0%, transparent 85%),
      radial-gradient(ellipse 60% 55% at 96% 100%, rgba(6,  130, 109, 0.55) 0%, transparent 85%),
      radial-gradient(ellipse 100% 90% at 50% 45%, rgba(31, 90,  145, 0.88) 0%, transparent 100%),
      linear-gradient(160deg, #030508 0%, #040a1a 55%, #020c0a 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  /* ── PITCH LINES (universal) ── */
  /* Football pitch outline on the club-colour gradient */
  [data-bg-theme="pitch-lines"] .body-gradient {
    background-color: #edf2f7;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='rgba%280,0,0,0.05%29' stroke-width='1.2'%3E%3Crect x='6' y='6' width='388' height='238'/%3E%3Cline x1='200' y1='6' x2='200' y2='244'/%3E%3Ccircle cx='200' cy='125' r='40'/%3E%3Crect x='6' y='72' width='64' height='106'/%3E%3Crect x='6' y='96' width='24' height='58'/%3E%3Crect x='330' y='72' width='64' height='106'/%3E%3Crect x='370' y='96' width='24' height='58'/%3E%3C/g%3E%3Cg fill='rgba%280,0,0,0.05%29'%3E%3Ccircle cx='200' cy='125' r='2.5'/%3E%3Ccircle cx='60' cy='125' r='2'/%3E%3Ccircle cx='340' cy='125' r='2'/%3E%3C/g%3E%3C/svg%3E"),
      radial-gradient(ellipse 55% 45% at 4%  0%,   rgba(109, 42,  49, 0.22) 0%, transparent 100%),
      radial-gradient(ellipse 50% 40% at 96% 100%, rgba(6,  130, 109, 0.09) 0%, transparent 100%),
      radial-gradient(ellipse 90% 80% at 50% 45%,  rgba(31, 90,  145, 0.08) 0%, transparent 100%),
      linear-gradient(160deg, #eef3f8 0%, #f0f5fa 55%, #eaf4f1 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
  }
  .dark[data-bg-theme="pitch-lines"] .body-gradient {
    background-color: #050810;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='rgba%28255,255,255,0.06%29' stroke-width='1.2'%3E%3Crect x='6' y='6' width='388' height='238'/%3E%3Cline x1='200' y1='6' x2='200' y2='244'/%3E%3Ccircle cx='200' cy='125' r='40'/%3E%3Crect x='6' y='72' width='64' height='106'/%3E%3Crect x='6' y='96' width='24' height='58'/%3E%3Crect x='330' y='72' width='64' height='106'/%3E%3Crect x='370' y='96' width='24' height='58'/%3E%3C/g%3E%3Cg fill='rgba%28255,255,255,0.06%29'%3E%3Ccircle cx='200' cy='125' r='2.5'/%3E%3Ccircle cx='60' cy='125' r='2'/%3E%3Ccircle cx='340' cy='125' r='2'/%3E%3C/g%3E%3C/svg%3E"),
      radial-gradient(ellipse 55% 45% at 4%  0%,   rgba(109, 42,  49, 0.55) 0%, transparent 100%),
      radial-gradient(ellipse 50% 40% at 96% 100%, rgba(6,  130, 109, 0.28) 0%, transparent 100%),
      radial-gradient(ellipse 90% 80% at 50% 45%,  rgba(31, 90,  145, 0.55) 0%, transparent 100%),
      linear-gradient(160deg, #050810 0%, #060c18 55%, #050d0a 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
  }

  /* ── STADIUM NIGHT (dark only) ── */
  /* Deep navy canvas, crimson + indigo club-colour wash, diamond mow texture */
  .dark[data-bg-theme="stadium-night"] .body-gradient {
    background-color: #020407;
    background-image:
      repeating-linear-gradient(
        -45deg,
        transparent 0, transparent 14px,
        rgba(255, 255, 255, 0.020) 14px, rgba(255, 255, 255, 0.020) 28px
      ),
      repeating-linear-gradient(
        45deg,
        transparent 0, transparent 14px,
        rgba(255, 255, 255, 0.020) 14px, rgba(255, 255, 255, 0.020) 28px
      ),
      radial-gradient(ellipse 60% 50% at 5%  0%,    rgba(130, 20,  35, 0.65) 0%, transparent 100%),
      radial-gradient(ellipse 50% 45% at 95% 100%,  rgba(10,  60,  40, 0.35) 0%, transparent 100%),
      radial-gradient(ellipse 85% 70% at 50% 50%,   rgba(20,  40, 100, 0.50) 0%, transparent 100%),
      linear-gradient(160deg, #020407 0%, #030710 55%, #020608 100%);
    background-size: auto, auto, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  }

  /* ── ULTRAS (dark only) ── */
  /* Deep maroon-black, dramatic crimson glow from above, supporter passion energy */
  .dark[data-bg-theme="ultras"] .body-gradient {
    background-color: #0b0105;
    background-image:
      repeating-linear-gradient(
        0deg,
        transparent 0, transparent 24px,
        rgba(180, 0, 20, 0.040) 24px, rgba(180, 0, 20, 0.040) 25px
      ),
      repeating-linear-gradient(
        90deg,
        transparent 0, transparent 24px,
        rgba(180, 0, 20, 0.018) 24px, rgba(180, 0, 20, 0.018) 25px
      ),
      radial-gradient(ellipse 90% 70% at 50% -10%, rgba(160, 20,  30, 0.85) 0%, transparent 65%),
      radial-gradient(ellipse 70% 60% at 5%  0%,   rgba(100,  0,  20, 0.55) 0%, transparent 100%),
      radial-gradient(ellipse 70% 60% at 95% 100%, rgba(80,   0,  15, 0.40) 0%, transparent 100%),
      linear-gradient(180deg, #150208 0%, #0b0105 50%, #110207 100%);
    background-size: auto, auto, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  }

  /* ── CARBON (dark only) ── */
  /* Charcoal with tight carbon-weave micro-grid and emerald-green performance accent */
  .dark[data-bg-theme="carbon"] .body-gradient {
    background-color: #06080b;
    background-image:
      repeating-linear-gradient(
        45deg,
        transparent 0, transparent 3px,
        rgba(255, 255, 255, 0.028) 3px, rgba(255, 255, 255, 0.028) 4px
      ),
      repeating-linear-gradient(
        -45deg,
        transparent 0, transparent 3px,
        rgba(255, 255, 255, 0.028) 3px, rgba(255, 255, 255, 0.028) 4px
      ),
      radial-gradient(ellipse 55% 45% at 5%  0%,    rgba(20, 80,  50, 0.45) 0%, transparent 100%),
      radial-gradient(ellipse 45% 35% at 95% 100%,  rgba(20, 60,  40, 0.28) 0%, transparent 100%),
      radial-gradient(ellipse 80% 70% at 50% 50%,   rgba(5,  10,  20, 0.60) 0%, transparent 100%),
      linear-gradient(160deg, #06080b 0%, #07090e 55%, #060809 100%);
    background-size: 6px 6px, 6px 6px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  }

  /* ── FRESH TURF (light only) ── */
  /* Crisp mint-white base, diagonal mow-stripe texture, vibrant pitch-green accents */
  [data-bg-theme="fresh-turf"] .body-gradient {
    background-color: #f2f9f4;
    background-image:
      repeating-linear-gradient(
        -45deg,
        transparent 0, transparent 18px,
        rgba(0, 100, 50, 0.032) 18px, rgba(0, 100, 50, 0.032) 36px
      ),
      repeating-linear-gradient(
        45deg,
        transparent 0, transparent 18px,
        rgba(0, 100, 50, 0.032) 18px, rgba(0, 100, 50, 0.032) 36px
      ),
      radial-gradient(ellipse 60% 50% at 5%  100%, rgba(20, 120, 60, 0.18) 0%, transparent 100%),
      radial-gradient(ellipse 50% 40% at 95% 0%,   rgba(20, 120, 60, 0.12) 0%, transparent 100%),
      radial-gradient(ellipse 80% 70% at 50% 50%,  rgba(240, 250, 243, 0.50) 0%, transparent 100%),
      linear-gradient(160deg, #f2f9f4 0%, #eef8f1 55%, #f1f9f3 100%);
    background-size: auto, auto, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  }

  /* ── HOME KIT (light only) ── */
  /* Off-white jersey-knit weave with club crimson accents at the shoulders */
  [data-bg-theme="home-kit"] .body-gradient {
    background-color: #fafaf9;
    background-image:
      repeating-linear-gradient(
        0deg,
        transparent 0, transparent 4px,
        rgba(0, 0, 0, 0.018) 4px, rgba(0, 0, 0, 0.018) 5px
      ),
      repeating-linear-gradient(
        90deg,
        transparent 0, transparent 12px,
        rgba(0, 0, 0, 0.010) 12px, rgba(0, 0, 0, 0.010) 13px
      ),
      radial-gradient(ellipse 60% 50% at 3%  0%,    rgba(180, 30, 40, 0.12) 0%, transparent 100%),
      radial-gradient(ellipse 50% 45% at 97% 0%,    rgba(180, 30, 40, 0.07) 0%, transparent 100%),
      radial-gradient(ellipse 80% 70% at 50% 100%,  rgba(109, 42, 49, 0.06) 0%, transparent 100%),
      linear-gradient(160deg, #fafaf9 0%, #f9f9f8 55%, #fafaf9 100%);
    background-size: auto, auto, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  }

  /* ── GOLDEN HOUR (light only) ── */
  /* Warm cream, amber sun-glow from above, terracotta-red side accent — late-afternoon stadium light */
  [data-bg-theme="golden-hour"] .body-gradient {
    background-color: #faf8f2;
    background-image:
      radial-gradient(ellipse 80% 65% at 50% -10%, rgba(210, 155,  50, 0.20)  0%, transparent 65%),
      radial-gradient(ellipse 55% 45% at 5%  0%,   rgba(190,  70,  30, 0.16)  0%, transparent 100%),
      radial-gradient(ellipse 45% 40% at 95% 100%, rgba(190, 130,  30, 0.12)  0%, transparent 100%),
      radial-gradient(ellipse 80% 70% at 50% 50%,  rgba(252, 248, 240, 0.55)  0%, transparent 100%),
      linear-gradient(160deg, #faf8f2 0%, #f8f5ec 55%, #fbf9f3 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  /* ── BASE DARK — placed after light themes so it wins in dark mode
     (equal specificity 0,2,0,0 but later in the cascade than light themes) ── */
  .dark .body-gradient {
    background-color: #050810;
    background-image:
      repeating-linear-gradient(
        -45deg,
        transparent 0,
        transparent 14px,
        rgba(255, 255, 255, 0.025) 14px,
        rgba(255, 255, 255, 0.025) 28px
      ),
      repeating-linear-gradient(
        45deg,
        transparent 0,
        transparent 14px,
        rgba(255, 255, 255, 0.025) 14px,
        rgba(255, 255, 255, 0.025) 28px
      ),
      radial-gradient(ellipse 55% 45% at 4% 0%,   rgba(109, 42,  49, 0.55) 0%, transparent 100%),
      radial-gradient(ellipse 50% 40% at 96% 100%, rgba(6,  130, 109, 0.28) 0%, transparent 100%),
      radial-gradient(ellipse 90% 80% at 50% 45%,  rgba(31, 90,  145, 0.55) 0%, transparent 100%),
      linear-gradient(160deg, #050810 0%, #060c18 55%, #050d0a 100%);
    background-size: auto, auto, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  }

  /* ── INELIGIBLE — auto-applied when a player is ineligible to play ── */
  /* Universal theme: warm crimson-tinted light wash in light mode, deep crimson in dark mode —
     keeps the default text-gray-900 / dark:text-white pairing readable either way. */
  /* Note: the radial "corner" glows below are sized to the full <body> height via
     background-size: 100% 100%, so on a long/scrollable page they only concentrate
     near the very top and bottom — the middle of the page falls back to the base
     linear-gradient. That base is kept visibly pink/red throughout (not just a
     near-white wash) so the danger tone still reads no matter where you've scrolled. */
  [data-bg-theme="ineligible"] .body-gradient {
    background-color: #f8d9d9;
    background-image:
      repeating-linear-gradient(
        -45deg,
        transparent 0, transparent 18px,
        rgba(180,0,0,0.05) 18px, rgba(180,0,0,0.05) 20px
      ),
      radial-gradient(ellipse 75% 60% at 0% 0%,     rgba(190,15,25,0.40) 0%, transparent 100%),
      radial-gradient(ellipse 65% 55% at 100% 100%, rgba(170,10,20,0.30) 0%, transparent 100%),
      radial-gradient(ellipse 90% 80% at 50% 50%,   rgba(250,245,245,0.10) 0%, transparent 100%),
      linear-gradient(160deg, #f8d9d9 0%, #f3c9c9 55%, #f7d5d5 100%);
    background-size: auto, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  }
  .dark[data-bg-theme="ineligible"] .body-gradient {
    background-color: #110305;
    background-image:
      repeating-linear-gradient(
        -45deg,
        transparent 0, transparent 18px,
        rgba(180,0,0,0.055) 18px, rgba(180,0,0,0.055) 20px
      ),
      radial-gradient(ellipse 75% 60% at 0% 0%,     rgba(150,0,20,0.80)  0%, transparent 100%),
      radial-gradient(ellipse 65% 55% at 100% 100%, rgba(120,0,10,0.60)  0%, transparent 100%),
      radial-gradient(ellipse 90% 80% at 50% 50%,   rgba(70,0,0,0.70)    0%, transparent 100%),
      linear-gradient(160deg, #110305 0%, #180407 55%, #110303 100%);
    background-size: auto, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  }

  /* Autofill override — prevents white flash on dark bg inputs */
  .dark input:-webkit-autofill,
  .dark input:-webkit-autofill:hover,
  .dark input:-webkit-autofill:focus,
  .dark select:-webkit-autofill,
  .dark textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px theme('colors.gray.800') inset !important;
    -webkit-text-fill-color: theme('colors.gray.100') !important;
    caret-color: theme('colors.gray.100');
  }
}

@layer utilities {
  .animate-slide-in-right {
    animation: slide-in-right 0.3s ease-out;
  }

  .card-selected {
    animation: card-glow 1.2s ease-out forwards;
  }

  /* Sidebar label — hidden when collapsed, revealed when open */
  .sidebar-label {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 120ms ease 40ms, max-width 200ms ease;
    pointer-events: none;
  }
  body.sidebar-open .sidebar-label {
    opacity: 1;
    max-width: 12rem;
    pointer-events: auto;
  }

  /* Collapse toggle icon rotates when open */
  body.sidebar-open .sidebar-toggle-icon {
    transform: rotate(180deg);
  }
  .sidebar-toggle-icon {
    transition: transform 200ms ease;
  }
}

/* Sidebar width — flex layout handles content offset automatically */
#sidebar-rail {
  width: 4rem;
  transition: width 200ms ease;
}
body.sidebar-open #sidebar-rail {
  width: 15rem;
}

@keyframes card-glow {
  0%   { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.55), 0 4px 12px rgba(220, 38, 38, 0.2); }
  60%  { box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.25), 0 2px 8px rgba(220, 38, 38, 0.1); }
  100% { box-shadow: 0 0 0 0px rgba(220, 38, 38, 0),    0 0px 0px rgba(220, 38, 38, 0); }
}

@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* ── Toast entry animation ─────────────────────────────────────────── */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}
.toast-enter {
  animation: toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}