/* ============================================================
 * MilletsCup PWA — Global Polish Stylesheet (conservative v2)
 *
 * Stratégie : PUREMENT ADDITIVE. On ne touche PAS aux backgrounds,
 * couleurs de texte, layouts existants — seulement :
 *   - focus rings cohérents
 *   - transitions douces sur hover (sans override de couleurs)
 *   - polish ciblé sur composants identifiables (login, nav, modales)
 *
 * Aucun `color: transparent`, aucun `background: transparent !important`
 * sur des conteneurs structurels. Les overrides agressifs de la v1 ont
 * causé du texte invisible et des zones en void — supprimés ici.
 * ============================================================ */

/* ---------- Design tokens (CSS vars, sans override forcé) ---------- */
:root {
  --mc-primary: 26 43 60;
  --mc-accent: 234 88 12;
  --mc-radius: 0.5rem;
  --mc-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --mc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --mc-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
}

/* ---------- Focus rings cohérents (accessibilité) ---------- */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid rgb(var(--mc-primary));
  outline-offset: 2px;
}
html.dark button:focus-visible,
html.dark a:focus-visible,
html.dark input:focus-visible,
html.dark select:focus-visible,
html.dark textarea:focus-visible {
  outline-color: rgb(96 165 250);
}

/* ---------- Transitions hover douces (NE TOUCHE PAS aux couleurs) ---------- */
button:not(.no-polish):not([data-radix-collection-item]),
a:not(.no-polish),
[role="button"]:not(.no-polish) {
  transition: background-color var(--mc-transition),
              color var(--mc-transition),
              border-color var(--mc-transition),
              box-shadow var(--mc-transition),
              transform var(--mc-transition);
}
button:not(:disabled):not(.no-polish):active {
  transform: translateY(1px);
}

/* ---------- Inputs : juste la transition + radius léger ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
select,
textarea {
  transition: border-color var(--mc-transition), box-shadow var(--mc-transition);
}

/* ---------- Disabled : look unifié ---------- */
button:disabled,
[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ---------- Sélection ---------- */
::selection {
  background: rgb(var(--mc-primary) / 0.25);
}

/* ---------- Scrollbar Firefox (minimal, sans -webkit hack) ---------- */
* { scrollbar-width: thin; }

/* ============================================================
 * COMPOSANTS CIBLÉS (par ID, pas par classe générique)
 * ============================================================ */

/* ---------- Login panel : enrichissement progressif ---------- */
#loginPanel > div {
  animation: mc-slide-up 320ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.12);
}
html.dark #loginPanel > div {
  box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.5);
}
@keyframes mc-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* CAPTCHA : assurer affichage en ligne (le legacy utilise flex space-x-3) */
#captchaQuestion {
  font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ---------- Navigation top bar (#primary-navigation) — hover doux SANS forcer couleurs ---------- */
#primary-navigation a {
  border-radius: var(--mc-radius);
  transition: background-color var(--mc-transition), color var(--mc-transition);
}
/* Active state plus distinct sans override aggressif */
#primary-navigation a.bg-blue-100,
#primary-navigation a.bg-blue-50 {
  box-shadow: inset 0 -2px 0 0 rgb(var(--mc-primary) / 0.4);
}
html.dark #primary-navigation a.dark\:bg-blue-900\/20 {
  box-shadow: inset 0 -2px 0 0 rgb(96 165 250 / 0.5);
}
/* Icônes nav : taille standardisée */
#primary-navigation a img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---------- Modales legacy : juste l'animation entrée ---------- */
.fixed.inset-0[class*="bg-opacity"],
.fixed.inset-0.bg-black,
.fixed.inset-0.bg-gray-900 {
  animation: mc-fade-in 180ms ease-out;
}
@keyframes mc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fixed.inset-0 > div.bg-white,
.fixed.inset-0 > div.dark\:bg-dark-surface {
  animation: mc-pop-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mc-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Status badges FinalControl (palette unifiée, sans casser les fonds) ---------- */
body[data-page="final-control"] .bg-green-100.text-green-800 {
  background-color: rgb(5 150 105 / 0.12);
  color: rgb(5 150 105);
}
body[data-page="final-control"] .bg-red-100.text-red-800 {
  background-color: rgb(220 38 38 / 0.12);
  color: rgb(185 28 28);
}
body[data-page="final-control"] .bg-yellow-100.text-yellow-800 {
  background-color: rgb(217 119 6 / 0.14);
  color: rgb(146 64 14);
}
body[data-page="final-control"] .bg-purple-100 {
  background-color: rgb(124 58 237 / 0.12);
  color: rgb(91 33 182);
}
html.dark body[data-page="final-control"] .bg-green-100.text-green-800 {
  background-color: rgb(5 150 105 / 0.2);
  color: rgb(110 231 183);
}
html.dark body[data-page="final-control"] .bg-red-100.text-red-800 {
  background-color: rgb(220 38 38 / 0.18);
  color: rgb(252 165 165);
}
html.dark body[data-page="final-control"] .bg-yellow-100.text-yellow-800 {
  background-color: rgb(217 119 6 / 0.2);
  color: rgb(252 211 77);
}

/* ---------- Cards : ombre légère + hover lift, sans toucher au background ---------- */
.rounded-lg.shadow,
.rounded-xl.shadow,
.rounded-lg.shadow-lg,
.rounded-lg.shadow-md,
.rounded-xl.shadow-lg,
.rounded-xl.shadow-md {
  transition: box-shadow var(--mc-transition), transform var(--mc-transition);
}
.rounded-lg.shadow:hover,
.rounded-xl.shadow:hover,
.rounded-lg.shadow-md:hover {
  box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.1);
}

/* ---------- Liens text-blue : juste la transition + underline au hover ---------- */
.text-blue-600,
.text-blue-500,
.text-blue-700 {
  transition: color var(--mc-transition);
}
.text-blue-600:hover,
.text-blue-500:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Tables : hover row subtil sans toucher au header ---------- */
table tbody tr {
  transition: background-color 120ms ease;
}

/* ============================================================
 *  FIX dark mode pour les panels legacy embarqués
 *  (LegacyPanel.legacy-embed-root contient les composants legacy
 *   qui utilisent bg-white dark:bg-gray-800 mais sont scopés sous
 *   .lv3-root → mon Tailwind IIFE avec important:.lv3-root écrase
 *   le dark:bg-gray-800. On force le dark mode ici avec assez de
 *   spécificité + !important.)
 * ============================================================ */
html.dark .lv3-root .legacy-embed-root .bg-white { background-color: hsl(var(--card)) !important; }
html.dark .lv3-root .legacy-embed-root .bg-gray-50 { background-color: hsl(var(--muted)) !important; }
html.dark .lv3-root .legacy-embed-root .bg-gray-100 { background-color: hsl(var(--muted)) !important; }
html.dark .lv3-root .legacy-embed-root .bg-gray-200 { background-color: hsl(var(--border)) !important; }
html.dark .lv3-root .legacy-embed-root .bg-gray-800,
html.dark .lv3-root .legacy-embed-root .bg-gray-900,
html.dark .lv3-root .legacy-embed-root [class*="dark:bg-gray-800"] {
  background-color: hsl(var(--card)) !important;
}
html.dark .lv3-root .legacy-embed-root [class*="dark:bg-gray-700"] {
  background-color: hsl(var(--muted)) !important;
}
html.dark .lv3-root .legacy-embed-root .border-gray-200,
html.dark .lv3-root .legacy-embed-root .border-gray-300,
html.dark .lv3-root .legacy-embed-root [class*="dark:border-gray-700"],
html.dark .lv3-root .legacy-embed-root [class*="dark:border-gray-600"] {
  border-color: hsl(var(--border)) !important;
}
html.dark .lv3-root .legacy-embed-root .text-gray-900,
html.dark .lv3-root .legacy-embed-root [class*="dark:text-gray-100"],
html.dark .lv3-root .legacy-embed-root [class*="dark:text-white"] {
  color: hsl(var(--foreground)) !important;
}
html.dark .lv3-root .legacy-embed-root .text-gray-800 { color: hsl(var(--foreground) / 0.95) !important; }
html.dark .lv3-root .legacy-embed-root .text-gray-700,
html.dark .lv3-root .legacy-embed-root [class*="dark:text-gray-300"],
html.dark .lv3-root .legacy-embed-root [class*="dark:text-gray-200"] {
  color: hsl(var(--foreground) / 0.85) !important;
}
html.dark .lv3-root .legacy-embed-root .text-gray-600,
html.dark .lv3-root .legacy-embed-root .text-gray-500,
html.dark .lv3-root .legacy-embed-root [class*="dark:text-gray-400"] {
  color: hsl(var(--muted-foreground)) !important;
}

/* Idem pour les autres pages avec polish important via .lv3-root */
html.dark .lv3-root .bg-blue-50 { background-color: rgb(30 58 138 / 0.4) !important; }
html.dark .lv3-root .bg-blue-100:not([class*="text-blue"]) { background-color: rgb(30 58 138 / 0.3) !important; }

/* ============================================================
 *  KPI cards compactes — legacy LogValidation / Volunteers / Overview legacy
 *  Les stats prennent trop de place en 101px+padding. On compacte :
 *   - p-4 → p-2.5
 *   - text-2xl → text-base
 *   - icone réduite à 14px
 * ============================================================ */
body[data-page="race-management"] .lv3-root .legacy-embed-root .grid > div.bg-white,
body[data-page="race-management"] .lv3-root .legacy-embed-root .grid > div.dark\:bg-gray-800,
body[data-page="race-management"] .lv3-root .legacy-embed-root .grid > div[class*="p-4"][class*="rounded-lg"] {
  padding: 0.625rem 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  min-height: 0 !important;
}

/* Les valeurs (chiffres) tassées + plus petites */
body[data-page="race-management"] .lv3-root .legacy-embed-root .grid > div .text-2xl,
body[data-page="race-management"] .lv3-root .legacy-embed-root .grid > div .text-3xl,
body[data-page="race-management"] .lv3-root .legacy-embed-root .grid > div .text-4xl {
  font-size: 1.125rem !important;
  line-height: 1.25 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Les labels ('Total logs', 'Logs validés' etc) plus petits */
body[data-page="race-management"] .lv3-root .legacy-embed-root .grid > div .text-sm,
body[data-page="race-management"] .lv3-root .legacy-embed-root .grid > div .text-base {
  font-size: 0.7rem !important;
  line-height: 1.1 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 0 !important;
}

/* Icones / emojis en tête de card : réduits */
body[data-page="race-management"] .lv3-root .legacy-embed-root .grid > div .w-12,
body[data-page="race-management"] .lv3-root .legacy-embed-root .grid > div .h-12,
body[data-page="race-management"] .lv3-root .legacy-embed-root .grid > div .text-3xl:first-child {
  width: 1.75rem !important;
  height: 1.75rem !important;
  font-size: 1rem !important;
  flex-shrink: 0;
}

/* Réorganise pour mettre label + valeur côte-à-côte */
body[data-page="race-management"] .lv3-root .legacy-embed-root .grid > div .flex-col,
body[data-page="race-management"] .lv3-root .legacy-embed-root .grid > div > div {
  gap: 0.125rem !important;
}

/* Idem mais aussi sur la grille externe : compacte le grid gap */
body[data-page="race-management"] .lv3-root .legacy-embed-root .grid.grid-cols-2 {
  gap: 0.5rem !important;
}

/* ============================================================
 *  Bouton "Public / Privé" + "Calcul verrouillé / déverrouillé" dans
 *  Résultats — les passer de pastilles minuscules à boutons cliquables
 *  prominents. Ils sont actionnables (handleTogglePublicScores et
 *  handleToggleCalculationLock) mais leur look text-xs en faisait des
 *  status displays trompeurs.
 * ============================================================ */
body[data-page="race-management"] .lv3-root .legacy-embed-root button[class*="toggle-public-scores"],
body[data-page="race-management"] .lv3-root .legacy-embed-root button:has(> span:nth-child(2):is(:is(*):not(:empty))) {
  /* le sélecteur :has est non-trivial, on cible plutôt via les libellés du bouton */
}
/* On cible plus simplement les 2 boutons ADMIN du panel Résultats qui
 * contiennent ces textes spécifiques. Ils ont la classe text-xs + py-1. */
body[data-page="race-management"] .lv3-root .legacy-embed-root button.text-xs.font-medium {
  font-size: 0.8125rem !important;
  padding: 0.4rem 0.75rem !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  border: 1px solid transparent;
}
body[data-page="race-management"] .lv3-root .legacy-embed-root button.text-xs.font-medium:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.1);
}
/* Quand public (vert), souligne l'aspect actif */
body[data-page="race-management"] .lv3-root .legacy-embed-root button.text-xs.font-medium.bg-green-100 {
  border-color: rgb(5 150 105 / 0.3);
}
/* Quand privé (rouge), souligne l'aspect actif */
body[data-page="race-management"] .lv3-root .legacy-embed-root button.text-xs.font-medium.bg-red-100 {
  border-color: rgb(220 38 38 / 0.3);
}

/* ---------- Reduced motion : respect des préférences ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}