@import "tailwindcss";
@plugin "@tailwindcss/forms";

/*
  FlipFlapp design system — olive pitch + gold
  One road: dark green field, white text, gold CTAs, soft glass surfaces.
*/

@theme inline {
  /* Surfaces */
  --color-bg-green: #2f4a0c;
  --color-bg-green-2: #3d5e12;
  --color-form-green: #24380a;
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-hover: rgba(255, 255, 255, 0.1);
  --color-border: rgba(255, 255, 255, 0.12);

  /* Text */
  --color-secondary-text: rgba(232, 240, 210, 0.72);
  --color-muted: rgba(232, 240, 210, 0.48);

  /* Accent (single gold system) */
  --color-accent: #e5b512;
  --color-accent-strong: #c9960a;
  --color-accent-soft: rgba(229, 181, 18, 0.16);
  --color-title-yellow: #f0d15a;
  --color-primary-yellow: #e5b512;

  /* Semantic */
  --color-danger: #c43c2c;
  --color-danger-strong: #9e2f22;
  --color-success: #6bbf3a;

  /* Teams */
  --color-team-a: #1e3a8a;
  --color-team-b: #7f1d1d;
  --color-team-bench: #4b5563;

  /* Radius */
  --radius-ff: 0.875rem;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #2f4a0c;
    --foreground: #ffffff;
  }
}

@layer components {
  /* ——— Surfaces ——— */
  .ff-card {
    @apply rounded-2xl border border-border bg-surface backdrop-blur-md p-4;
  }

  .ff-card-lg {
    @apply rounded-2xl border border-border bg-surface backdrop-blur-md p-6;
  }

  .ff-section {
    @apply rounded-2xl border border-border bg-surface backdrop-blur-md;
  }

  /* ——— Typography ——— */
  .brand-text {
    @apply text-lg font-semibold text-title-yellow;
  }

  .ff-label {
    @apply text-sm text-muted;
  }

  .ff-meta {
    @apply text-xs text-muted;
  }

  /* ——— Buttons (one CTA language) ——— */
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-2xl bg-accent px-5 py-3
      font-semibold text-form-green shadow-sm transition
      hover:bg-accent-strong active:scale-95
      disabled:cursor-not-allowed disabled:opacity-40;
  }

  .btn-primary-sm {
    @apply inline-flex items-center justify-center gap-2 rounded-xl bg-accent px-4 py-2
      text-sm font-semibold text-form-green shadow-sm transition
      hover:bg-accent-strong active:scale-95
      disabled:cursor-not-allowed disabled:opacity-40;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 rounded-2xl border border-border
      bg-white/10 px-5 py-3 font-semibold text-white transition
      hover:bg-surface-hover active:scale-95
      disabled:cursor-not-allowed disabled:opacity-40;
  }

  .btn-secondary-sm {
    @apply inline-flex items-center justify-center gap-2 rounded-xl border border-border
      bg-white/10 px-4 py-2 text-sm font-semibold text-white transition
      hover:bg-surface-hover active:scale-95
      disabled:cursor-not-allowed disabled:opacity-40;
  }

  .btn-danger {
    @apply inline-flex items-center justify-center gap-2 rounded-2xl bg-danger px-5 py-3
      font-semibold text-white shadow-sm transition
      hover:bg-danger-strong active:scale-95
      disabled:cursor-not-allowed disabled:opacity-40;
  }

  .btn-danger-sm {
    @apply inline-flex items-center justify-center gap-2 rounded-xl bg-danger px-4 py-2
      text-sm font-semibold text-white shadow-sm transition
      hover:bg-danger-strong active:scale-95
      disabled:cursor-not-allowed disabled:opacity-40;
  }

  .btn-ghost {
    @apply inline-flex items-center justify-center gap-2 rounded-2xl bg-white/10 px-5 py-3
      font-semibold text-white transition
      hover:bg-surface-hover active:scale-95
      disabled:cursor-not-allowed disabled:opacity-40;
  }

  .btn-fab {
    @apply z-80 fixed bottom-8 right-8 inline-flex size-14 items-center justify-center
      rounded-2xl bg-accent text-form-green shadow-md transition
      hover:bg-accent-strong active:scale-95;
  }

  /* ——— Nav ——— */
  .ff-nav-link {
    @apply block w-full rounded-xl p-2 text-xl text-white transition
      hover:bg-accent/20 focus:bg-accent focus:text-form-green focus:outline-none;
  }

  .ff-tab {
    @apply inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold transition-colors;
  }

  .ff-tab-active {
    @apply bg-accent text-form-green;
  }

  .ff-tab-idle {
    @apply bg-surface text-secondary-text hover:bg-surface-hover hover:text-white;
  }

  /* ——— Badges / chips ——— */
  .ff-badge {
    @apply inline-flex items-center gap-1 rounded-full bg-form-green/90 px-2 py-1 text-xs font-medium text-secondary-text;
  }

  .ff-badge-accent {
    @apply inline-flex items-center justify-center rounded-full bg-accent px-2 py-0.5 text-xs font-bold text-form-green;
  }

  .ff-chip-selected {
    @apply rounded-2xl bg-accent text-form-green;
  }

  /* ——— Avatars ——— */
  .ff-avatar-ring {
    @apply rounded-full bg-accent p-0.5;
  }

  .ff-avatar-fallback {
    @apply flex items-center justify-center rounded-full bg-linear-to-br from-bg-green to-bg-green-2 object-cover;
  }

  /* ——— Forms ——— */
  .form-text-input {
    @apply w-full rounded-xl border border-form-green bg-black/25 px-4 py-2.5
      text-white outline-none transition
      placeholder:text-muted
      focus:border-accent focus:ring-2 focus:ring-accent/40;
  }

  .form-label {
    @apply mb-1 block text-sm font-medium text-secondary-text;
  }

  /* ——— Lists / rows ——— */
  .ff-list-row {
    @apply rounded-2xl border border-border bg-surface p-4 transition-colors hover:bg-surface-hover;
  }

  .ff-player-chip {
    @apply flex items-center gap-2 rounded-xl border border-border bg-surface px-3 py-2;
  }
}

/* ::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 0.150s;
} */

/* app/assets/stylesheets/view_transitions.css */

/* Réglages iOS-ish */
:root {
  --vt-duration: 260ms; /* ajuste 150–320ms */
  --vt-ease: cubic-bezier(.22,.61,.36,1);
  --vt-shift: 12%;      /* parallaxe de la vue sortante */
  --vt-dim: .96;        /* léger assombrissement */
  --vt-scale: .985;     /* micro-scale de la vue sortante */
}

/* FORWARD (par défaut) — nouvelle vue glisse de droite */
::view-transition-old(root) {
  animation: vt-old var(--vt-duration) var(--vt-ease) both;
}
::view-transition-new(root) {
  animation: vt-new var(--vt-duration) var(--vt-ease) both;
}

/* BACK — inverse la direction si vous posez l’attribut ci-dessous sur <html> */
html[data-transition-direction="back"] ::view-transition-old(root) {
  animation: vt-new var(--vt-duration) var(--vt-ease) reverse both;
}
html[data-transition-direction="back"] ::view-transition-new(root) {
  animation: vt-old var(--vt-duration) var(--vt-ease) reverse both;
}

/* Clés d’anim (style iOS) */
@keyframes vt-old {
  from { transform: translateX(0) scale(1);    filter: brightness(1); }
  to   { transform: translateX(calc(-1 * var(--vt-shift))) scale(var(--vt-scale));
         filter: brightness(var(--vt-dim)); }
}
@keyframes vt-new {
  from { transform: translateX(100%); box-shadow: 0 0 0 rgba(0,0,0,0); }
  to   { transform: translateX(0);    box-shadow: 0 0 24px rgba(0,0,0,.12); }
}

/* Respecte l’accessibilité */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* Animation de fondu concernant les notices */
@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.notice {
  animation: fadeOut 0.5s ease-in-out 3s forwards;
}

@keyframes slideGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.animate-slide-gradient {
  animation: slideGradient 5s ease-in-out infinite;
  background-size: 200% 200%;
}

/* Prevent scrolling while dialog is open */
body:has(dialog[data-dialog-target="dialog"][open]) {
  overflow: hidden;
}


@keyframes fade-in-dialog {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out-dialog {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Add animations */
dialog[data-dialog-target="dialog"][open] {
  animation: fade-in-dialog 200ms forwards;
}

dialog[data-dialog-target="dialog"][closing] {
  animation: fade-out-dialog 200ms forwards;
}

dialog::backdrop {
  @apply bg-black/0 transition-colors duration-300 ease-out;
}

dialog[open]::backdrop {
  @apply bg-black/50;
}


/* dialog::backdrop {
  animation: fade-in-dialog 200ms forwards;
} */

/* Styles pour l’autocomplétion Google Maps */
.pac-container {
  background-color: var(--color-form-green) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0.875rem !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  font-family: inherit !important;
  color: white !important;
  z-index: 9999 !important;
}

.pac-item {
  padding: 0.5rem 1rem !important;
  font-size: 0.9rem !important;
  background-color: transparent !important;
}

.pac-item span {
  color: var(--color-secondary-text) !important;
}

.pac-item:hover {
  background-color: var(--color-surface-hover) !important;
  cursor: pointer;
}

.pac-item-query {
  color: #fff !important;
}