/* ============================================
   FLOWAYZ DARK MODE - SPECIFIC OVERRIDES
   Overrides spécifiques pour compatibilité
   La plupart des styles sont dans design_tokens.css
   ============================================ */

/* ============================================
   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;
}

/* Ensure smooth dark mode transitions */
* {
  transition-property: background-color, border-color, color;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
}

/* 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: #0d3330 !important;
  color: #a7f3d0 !important;
  border: 1px solid rgba(52, 211, 153, 0.3) !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;
}