/*
 * RUSHUP MOBILE FIXES v3
 * Désactive le style néobrutaliste sur mobile + optimisations
 * Pour revenir en arrière : supprimer ce fichier + la ligne dans index.html
 */

/* ════════════════════════════════════════
   MOBILE : DÉSACTIVER LE NÉOBRUTALISME
   Sur mobile on veut un style propre comme RushFid
   ════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Annuler TOUTES les bordures noires et box-shadow néo ── */
  * {
    border-color: #e5e7eb !important;
  }

  main [class*="bg-white"], main [class*="rounded"],
  [class*="shadow"][class*="bg-white"],
  form, .card, [class*="card"],
  [class*="p-6"][class*="bg-white"],
  [class*="p-4"][class*="bg-white"],
  [class*="border-"] {
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    border-radius: 12px !important;
  }

  /* Inputs propres */
  input, select, textarea {
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
  }

  /* Boutons propres */
  button, [class*="btn"] {
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 14px !important;
  }

  /* ── Overrider les variables néo ── */
  :root {
    --neo-shadow: none !important;
    --neo-shadow-hover: none !important;
    --neo-shadow-sm: none !important;
  }
}

/* ════════════════════════════════════════
   GLOBAL MOBILE
   ════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── DÉSACTIVER LE STYLE NÉOBRUTALISTE SUR MOBILE ── */
  main [class*="bg-white"], main [class*="rounded"],
  [class*="shadow"][class*="bg-white"],
  form, .card, [class*="card"],
  [class*="p-6"][class*="bg-white"],
  [class*="p-4"][class*="bg-white"] {
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    border-radius: 10px !important;
  }

  /* Inputs : bordure fine au lieu de néobrutaliste */
  input, select, textarea {
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
  }

  /* Boutons : arrondir et adoucir */
  button, a[class*="btn"], [class*="cursor-pointer"][class*="bg-"] {
    border-radius: 8px !important;
    box-shadow: none !important;
    border-width: 1px !important;
  }

  /* Réduire tous les paddings */
  main {
    padding: 6px !important;
  }

  main > div {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Textes : beaucoup plus petits */
  h1, [class*="text-3xl"], [class*="text-4xl"] {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  h2, [class*="text-2xl"] {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  h3, [class*="text-xl"] {
    font-size: 14px !important;
  }

  h4, h5, h6 {
    font-size: 13px !important;
  }

  p, span, label, div {
    font-size: 13px !important;
  }

  /* Cartes : padding réduit */
  [class*="p-6"], [class*="p-8"] {
    padding: 10px !important;
  }

  [class*="p-10"], [class*="p-12"] {
    padding: 12px !important;
  }

  /* Gaps réduites */
  [class*="gap-6"], [class*="gap-8"] {
    gap: 8px !important;
  }

  /* Max-width plein écran */
  [class*="max-w-4xl"], [class*="max-w-3xl"], [class*="max-w-2xl"],
  [class*="max-w-5xl"], [class*="max-w-6xl"], [class*="max-w-7xl"] {
    max-width: 100% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  [class*="mx-auto"] {
    margin-left: 2px !important;
    margin-right: 2px !important;
  }

  /* Header compact */
  header, [class*="h-16"] {
    height: auto !important;
    min-height: 44px !important;
    padding: 4px 8px !important;
  }

  /* Cacher les éléments inutiles sur mobile */
  [class*="text-uppercase"], [class*="uppercase"] {
    text-transform: none !important;
    font-size: 12px !important;
  }

  /* ════════════════════════════════════════
     NAVIGATION MOBILE
     ════════════════════════════════════════ */

  /* Sidebar : plein écran sur mobile */
  aside, [class*="sidebar"], nav[class*="fixed"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Items de nav plus compacts */
  nav a, nav button, aside a, aside button {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  /* ════════════════════════════════════════
     ONBOARDING WIZARD
     ════════════════════════════════════════ */

  /* Container principal onboarding */
  [class*="max-w-4xl"][class*="mx-auto"] {
    padding: 8px !important;
  }

  /* Steps indicator plus compact */
  [class*="flex"][class*="justify-between"][class*="mb-"] > div {
    min-width: auto !important;
  }

  /* Boutons onboarding pleine largeur */
  [class*="flex"][class*="justify-between"] > button,
  [class*="flex"][class*="justify-between"] > a {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 12px 8px !important;
    font-size: 14px !important;
  }

  /* Upload logo zone plus petite */
  [class*="border-dashed"] {
    min-height: 120px !important;
    padding: 16px !important;
  }

  /* Image preview plus petite */
  [class*="border-dashed"] img {
    max-height: 100px !important;
    max-width: 100px !important;
  }

  /* ════════════════════════════════════════
     FORMULAIRES
     ════════════════════════════════════════ */

  /* Inputs pleine largeur et taille correcte (évite le zoom iOS) */
  input, select, textarea {
    font-size: 16px !important;
    width: 100% !important;
    padding: 10px 12px !important;
  }

  /* Labels plus petits */
  label {
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }

  /* Formulaires en colonne sur mobile */
  [class*="grid-cols-2"], [class*="grid-cols-3"] {
    grid-template-columns: 1fr !important;
  }

  /* Boutons formulaire pleine largeur */
  form button[type="submit"],
  form [class*="btn"],
  [class*="bg-orange"][class*="text-white"],
  [class*="bg-blue"][class*="text-white"] {
    width: 100% !important;
    padding: 14px !important;
    font-size: 15px !important;
  }

  /* ════════════════════════════════════════
     PAGE JEU / GAMES — FULL MOBILE OVERHAUL
     ════════════════════════════════════════ */

  /* Tabs : scroll horizontal, compact, lisible */
  [role="tablist"], [class*="flex"][class*="border-b"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 -8px !important;
    scrollbar-width: none !important;
  }
  [role="tablist"]::-webkit-scrollbar { display: none !important; }

  [role="tab"], [role="tablist"] > button, [role="tablist"] > a {
    font-size: 11px !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-height: 36px !important;
  }

  /* Preview panel desktop : caché sur mobile (il y a un bouton flottant) */
  .hidden.lg\:block {
    display: none !important;
  }

  /* Preview roue dans le dialog mobile : taille raisonnable */
  [class*="sticky"][class*="top-"] {
    position: relative !important;
    top: auto !important;
  }

  /* Roue preview dans dialog */
  canvas, [class*="wheel"], [id*="wheel"] {
    max-width: 220px !important;
    max-height: 220px !important;
    margin: 0 auto !important;
  }

  /* Layout principal de la page jeu : pleine largeur */
  [class*="lg:grid-cols-2"], [class*="md:grid-cols-2"] {
    grid-template-columns: 1fr !important;
  }

  /* Contenu des onglets : padding réduit */
  [role="tabpanel"], [class*="tab-content"] {
    padding: 8px !important;
  }

  /* Sections dans les onglets */
  [class*="space-y-6"] { gap: 12px !important; }
  [class*="space-y-4"] { gap: 8px !important; }

  /* Cards dans la page jeu */
  [class*="rounded-2xl"][class*="shadow"] {
    padding: 10px !important;
    margin-bottom: 8px !important;
  }

  /* Le grid principal 2 colonnes (settings + preview) → 1 colonne */
  [class*="grid"][class*="lg:grid-cols"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Sliders et ranges */
  input[type="range"] {
    width: 100% !important;
  }

  /* Color pickers pleine largeur */
  [class*="color-picker"], [class*="sketch-picker"],
  .sketch-picker, .chrome-picker {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Section lots : table compacte */
  [class*="lots"] table, [class*="lots"] [class*="grid"] {
    font-size: 12px !important;
  }

  /* Bouton flottant preview : mieux positionné */
  [class*="fixed"][class*="bottom-"][class*="right-"][class*="z-50"] {
    bottom: 70px !important;
    right: 12px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    border-radius: 25px !important;
  }

  /* Dialog preview mobile : plein écran */
  [class*="fixed"][class*="inset-0"][class*="z-50"] > div {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* Bouton save fixe en bas */
  [class*="flex"][class*="justify-end"][class*="border-t"] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 10px 16px !important;
    background: inherit !important;
    z-index: 40 !important;
    border-top: 2px solid !important;
  }

  /* Lien du jeu / URL */
  [class*="truncate"], [class*="break-all"] {
    font-size: 12px !important;
    word-break: break-all !important;
  }

  /* Section résumé : cards compactes */
  [class*="grid-cols-3"] {
    grid-template-columns: 1fr !important;
  }

  /* Badges / tags */
  [class*="badge"], [class*="tag"], [class*="chip"] {
    font-size: 11px !important;
    padding: 2px 6px !important;
  }

  /* ════════════════════════════════════════
     PAGE FLYERS — FIX IFRAME
     ════════════════════════════════════════ */

  iframe {
    height: calc(100vh - 100px) !important;
    min-height: 500px !important;
    width: 100% !important;
  }

  /* ════════════════════════════════════════
     PAGE LOTS
     ════════════════════════════════════════ */

  /* Table responsive */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 13px !important;
  }

  th, td {
    padding: 6px 8px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* ════════════════════════════════════════
     PAGE ETABLISSEMENT
     ════════════════════════════════════════ */

  /* Google Maps container */
  [class*="google-map"], [class*="map-container"],
  [class*="gm-style"] {
    height: 200px !important;
    min-height: 200px !important;
  }

  /* ════════════════════════════════════════
     MODALES / DIALOGS
     ════════════════════════════════════════ */

  [class*="fixed"][class*="inset-0"] > [class*="bg-white"],
  [class*="modal"], [role="dialog"] > div {
    width: 95% !important;
    max-width: 95% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: auto !important;
    padding: 16px !important;
  }

  /* ════════════════════════════════════════
     STATISTIQUES / CHARTS
     ════════════════════════════════════════ */

  /* Charts responsive */
  [class*="recharts"], svg[class*="recharts"] {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Stats cards en colonne */
  [class*="grid"][class*="gap"] {
    grid-template-columns: 1fr !important;
  }

  /* ════════════════════════════════════════
     AUTH PAGES (Login/Signup)
     ════════════════════════════════════════ */

  /* Hero section cachée sur mobile */
  [class*="hidden"][class*="lg:flex"],
  [class*="hidden"][class*="md:flex"] {
    display: none !important;
  }

  /* Form auth pleine largeur */
  [class*="md:w-"][class*="650"] {
    width: 100% !important;
  }

  /* ════════════════════════════════════════
     QR CODE PAGE
     ════════════════════════════════════════ */

  /* QR code iframe responsive */
  [class*="qr"] iframe {
    height: 400px !important;
    width: 100% !important;
  }

  /* ════════════════════════════════════════
     BOUTONS GENERAUX
     ════════════════════════════════════════ */

  /* Tous les boutons avec min-height pour le touch */
  button, a[class*="btn"], [class*="cursor-pointer"] {
    min-height: 44px !important;
  }

  /* Flex row → column sur mobile pour les groupes de boutons */
  [class*="flex"][class*="gap"][class*="items-center"]:not(nav):not([role="tablist"]) {
    flex-wrap: wrap !important;
  }

  /* ════════════════════════════════════════
     SCROLLBAR FINE SUR MOBILE
     ════════════════════════════════════════ */
  ::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3) !important;
    border-radius: 4px !important;
  }
}

/* ════════════════════════════════════════
   PETITS ECRANS (< 400px)
   ════════════════════════════════════════ */
@media (max-width: 400px) {
  h1, [class*="text-3xl"] {
    font-size: 18px !important;
  }

  h2, [class*="text-2xl"] {
    font-size: 16px !important;
  }

  [class*="p-6"], [class*="p-8"] {
    padding: 8px !important;
  }

  button, a[class*="btn"] {
    font-size: 13px !important;
    padding: 10px !important;
  }
}