/* ============================================
   FLOWAYZ OVERRIDE LAYER (petit — 152 lignes)
   ============================================

   Loaded par 3 layouts : application.html.erb, demo_sharing.html.erb,
   onboarding.html.erb (via stylesheet_link_tag "flowayz_override.css").

   Contient 4 blocs qui n'ont pas trouvé leur place dans les components
   dédiés et qui méritent d'être migrés progressivement :

   1. Animations @keyframes custom (fade-in, scale-bounce, pulse-subtle,
      shimmer) utilisées par le premium request form → cibles pour migration
      vers base/animations.css en Sprint 1.5.

   2. Transitions globales sur buttons/a/labels (300ms cubic-bezier) →
      redondantes avec les tokens --transition-*. À auditer Sprint 1.5.

   3. Focus indicators *:focus-visible en outline accent → à remonter dans
      base/utilities.css ou themes/utilities.css (valeur universelle).

   4. Badge contrast fixes dark mode (.badge-teal, .badge-accent) → à migrer
      dans components/badges.css Sprint 1.4.

   Tant que ces 4 blocs sont ici, ne pas supprimer le fichier.
   Cf. plan design premium Sprint 1.3 (Steve Jobs Neat, 2026-04-24).
   ============================================ */

/* ============================================
   PREMIUM REQUEST FORM ENHANCEMENTS
   Custom animations and micro-interactions
   ============================================ */

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

/* Premium focus states for form elements */
textarea:focus,
select:focus,
input[type="file"]:focus-visible + label {
  outline: none;
}

/* Smooth transitions for all interactive elements */
label[class*="cursor-pointer"],
button,
a[class*="btn"],
input[type="radio"] + div {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Enhanced hover states for request type cards */
input[type="radio"]:checked + div {
  animation: scale-bounce 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes scale-bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Priority selection pulse effect */
input[type="radio"]:checked ~ span {
  animation: pulse-subtle 0.5s ease-out;
}

@keyframes pulse-subtle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* File upload zone shimmer effect */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Smooth breadcrumb arrow transitions */
nav[aria-label="Breadcrumb"] svg {
  transition: transform 0.2s ease;
}

nav[aria-label="Breadcrumb"] a:hover svg {
  transform: scale(1.2);
}

/* Enhanced submit button ripple effect */
button[type="submit"]:active {
  position: relative;
  overflow: hidden;
}

/* Character counter smooth transitions */
[data-request-form-target="charCount"] {
  transition: color 0.3s ease;
}

/* Improved file preview list animations */
.animate-fade-in {
  animation: fade-in 0.3s ease-out forwards;
}

/* Accessible focus indicators with accent color */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* Remove default focus for radio buttons (using peer-focus-visible instead) */
input[type="radio"]:focus-visible {
  outline: none;
}

/* Preserve specific transition overrides */
button,
a,
label[class*="cursor-pointer"],
[class*="transition-all"] {
  transition-property: all;
  transition-duration: 300ms;
}

/* ============================================
   BADGE CONTRAST FIXES — DARK MODE
   Corrige le problème teal-sur-teal illisible
   ============================================ */

/* badge-teal : texte très clair sur fond sombre — lisible partout */
html.dark .badge-teal,
[data-theme="dark"] .badge-teal,
[data-mode="dark"] .badge-teal {
  background: color-mix(in srgb, var(--flowayz-teal) 15%, var(--bg-primary)) !important;
  color: var(--flowayz-teal) !important;
  border: 1px solid color-mix(in srgb, var(--flowayz-teal) 35%, transparent) !important;
}

/* badge-accent (sidebar & ailleurs) : fond solide, texte contrasté */
html.dark .badge-accent,
[data-theme="dark"] .badge-accent,
[data-mode="dark"] .badge-accent {
  background: var(--accent) !important;
  color: var(--accent-contrast, #fff) !important;
  font-weight: 700 !important;
}