/* ============================================
   RT MAROC Manager v2 — Mobile Refactoring v4
   2026-03-05 — Complete rewrite
   
   Stratégie:
   - Fournisseurs: 2 panneaux côte à côte
   - Cartes produits miniatures (Xb/Zb)
   - Filtres ultra-compacts
   - NE PAS casser le scroll
   ============================================ */

/* ========== GLOBAL ========== */
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; max-width: 100vw; }

/* ========== TABLETTE ≤ 1023px ========== */
@media (max-width: 1023px) {

  /* --- Modals --- */
  .max-w-5xl, .max-w-3xl { max-width: calc(100vw - 2rem) !important; }

  /* --- Kill min-width --- */
  .min-w-\[300px\],
  .min-w-\[220px\],
  .min-w-\[200px\],
  .min-w-\[160px\] { min-width: 0 !important; }

  /* --- Scrollbar fine --- */
  ::-webkit-scrollbar { width: 3px; }
  ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
}

/* ========== PHONE ≤ 639px ========== */
@media (max-width: 639px) {

  /* ===================================================
     LAYOUT GÉNÉRAL
     =================================================== */

  /* App header plus compact */
  .h-16 { height: 2.75rem !important; }
  .h-16 .text-lg { font-size: 0.8125rem !important; }
  .h-16 .w-10.h-10 { width: 1.75rem !important; height: 1.75rem !important; }
  .h-16 .w-10.h-10 .text-lg { font-size: 0.75rem !important; }

  /* Modals full width */
  .max-w-5xl, .max-w-3xl, .max-w-2xl, .max-w-lg, .max-w-md {
    max-width: calc(100vw - 0.75rem) !important;
  }

  /* Page containers padding */
  .h-full.overflow-auto.p-6 { padding: 0.5rem !important; }
  .h-full.overflow-auto.p-6.space-y-6 > * + * { margin-top: 0.5rem !important; }

  /* Page titles */
  .h-full.overflow-auto .text-2xl {
    font-size: 1.125rem !important;
    line-height: 1.25rem !important;
  }
  .h-full.overflow-auto .text-2xl + .text-zinc-400 {
    font-size: 0.7rem !important;
    margin-top: 0 !important;
  }

  /* Sticky top bars */
  .sticky.top-0.z-20.px-6 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Search bar full width */
  .relative.w-64 { width: 100% !important; }

  /* Prevent iOS zoom */
  input, textarea, select { font-size: 16px !important; }

  /* Tables */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ===================================================
     PAGE FOURNISSEURS — REFONTE COMPLÈTE
     =================================================== */

  /* --- Tabs fournisseurs (Hopic/Capram/Sodirep) : compact --- */
  .flex.flex-wrap.items-center.gap-4 { gap: 0.375rem !important; }
  .flex.gap-2 > button.flex.items-center.gap-2 {
    padding: 0.375rem 0.625rem !important;
    font-size: 0.75rem !important;
    gap: 0.375rem !important;
  }
  .flex.gap-2 > button.flex.items-center.gap-2 svg { width: 14px; height: 14px; }

  /* --- Filtres (Auto/Manuel + selects) compact --- */
  .flex.flex-wrap.gap-3.items-center { gap: 0.25rem !important; }
  .flex.flex-wrap.gap-3.items-center select {
    padding: 0.375rem 1.5rem 0.375rem 0.5rem !important;
    font-size: 0.75rem !important;
    min-width: 0 !important;
  }
  .flex.bg-zinc-800.rounded-lg.p-0\.5 button {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.625rem !important;
  }

  /* --- Recherche manuelle --- */
  .flex.gap-2.flex-1.min-w-\[300px\] {
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
  .flex.gap-2.flex-1 input { padding: 0.375rem 0.375rem 0.375rem 2rem !important; }

  /* --- LE GRID 2 PANNEAUX : CÔTE À CÔTE --- */
  .grid.grid-cols-1.lg\:grid-cols-2.gap-4.overflow-hidden {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
    /* Hauteur fixe = le reste du viewport */
    height: calc(100vh - 14rem) !important;
    overflow: hidden !important;
  }

  /* --- Panneaux RT Maroc & Fournisseur --- */
  .grid.grid-cols-1.lg\:grid-cols-2 > .bg-zinc-900\/50.rounded-xl {
    border-radius: 0.5rem !important;
  }

  /* Panel headers compact */
  .grid.grid-cols-1.lg\:grid-cols-2 > div > .p-3.border-b {
    padding: 0.25rem 0.375rem !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-2 .text-base.font-semibold {
    font-size: 0.6875rem !important;
    gap: 0.25rem !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-2 .text-base.font-semibold svg {
    width: 12px !important;
    height: 12px !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-2 .text-sm.text-zinc-400 {
    font-size: 0.5625rem !important;
  }

  /* AI matching button compact */
  .grid.grid-cols-1.lg\:grid-cols-2 button.flex.items-center.gap-1\.5 {
    padding: 0.125rem 0.375rem !important;
    font-size: 0.5625rem !important;
    gap: 0.25rem !important;
  }

  /* Filter tags in supplier panel */
  .grid.grid-cols-1.lg\:grid-cols-2 .flex.items-center.gap-2.flex-wrap {
    gap: 2px !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-2 .flex.items-center.gap-2.flex-wrap button {
    padding: 1px 4px !important;
    font-size: 0.5625rem !important;
  }

  /* Panel inner scroll area */
  .grid.grid-cols-1.lg\:grid-cols-2 > div > .p-3.flex-1.overflow-y-auto {
    padding: 2px !important;
  }

  /* --- GRIDS PRODUITS DANS LES PANNEAUX : 2 COLONNES --- */
  .grid.grid-cols-1.lg\:grid-cols-2 .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }

  /* Category headers inside panels */
  .grid.grid-cols-1.lg\:grid-cols-2 .space-y-5 > div > .flex.items-center.gap-2.mb-2 {
    margin-bottom: 2px !important;
    gap: 2px !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-2 .space-y-5 > div > .flex.items-center.gap-2.mb-2 .text-sm {
    font-size: 0.5625rem !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-2 .space-y-5 > div > .flex.items-center.gap-2.mb-2 .text-base {
    font-size: 0.625rem !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-2 .space-y-5 > * + * {
    margin-top: 0.375rem !important;
  }

  /* --- CARTES PRODUITS MINIATURES (Xb et Zb) --- */
  /* Les deux utilisent: .bg-zinc-800.rounded-lg + .h-40 + .p-2 */

  /* Image: 160px → 44px */
  .grid.grid-cols-1.lg\:grid-cols-2 .bg-zinc-800.rounded-lg .h-40 {
    height: 2.75rem !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-2 .bg-zinc-800.rounded-lg .h-40 svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Badges AI / import button / rupture sur Zb */
  .grid.grid-cols-1.lg\:grid-cols-2 .bg-zinc-800.rounded-lg .h-40 .absolute {
    transform: scale(0.7);
    transform-origin: top left;
  }
  .grid.grid-cols-1.lg\:grid-cols-2 .bg-zinc-800.rounded-lg .h-40 .absolute.top-0\.5.right-0\.5 {
    transform-origin: top right;
  }

  /* Texte sous l'image */
  .grid.grid-cols-1.lg\:grid-cols-2 .bg-zinc-800.rounded-lg > .p-2 {
    padding: 1px 2px !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-2 .bg-zinc-800.rounded-lg > .p-2 .text-xs {
    font-size: 0.5625rem !important;
    line-height: 0.75rem !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-2 .bg-zinc-800.rounded-lg > .p-2 .line-clamp-2 {
    -webkit-line-clamp: 1 !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-2 .bg-zinc-800.rounded-lg {
    border-radius: 0.25rem !important;
  }

  /* --- Carte existante (match RT Maroc) en bas du Zb --- */
  .grid.grid-cols-1.lg\:grid-cols-2 .bg-zinc-800.rounded-lg > .border-t {
    padding: 2px 3px !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-2 .bg-zinc-800.rounded-lg > .border-t .text-xs {
    font-size: 0.5rem !important;
  }

  /* Pagination en bas des panneaux */
  .grid.grid-cols-1.lg\:grid-cols-2 .p-2.border-t.flex.items-center {
    padding: 2px !important;
    gap: 0.25rem !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-2 .p-2.border-t .text-xs {
    font-size: 0.5625rem !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-2 .p-2.border-t button {
    padding: 1px 4px !important;
    font-size: 0.5625rem !important;
  }

  /* Empty state text in panels */
  .grid.grid-cols-1.lg\:grid-cols-2 .text-center.py-12 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-2 .text-center.py-12 svg {
    width: 24px !important;
    height: 24px !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-2 .text-center.py-12 .text-zinc-400,
  .grid.grid-cols-1.lg\:grid-cols-2 .text-center.py-12 .text-zinc-500 {
    font-size: 0.625rem !important;
  }

  /* ===================================================
     PAGE SPY CONCURRENTS
     =================================================== */

  /* Spy tabs compact */
  .flex.flex-wrap.gap-3 > button.flex.items-center.gap-3 {
    padding: 0.375rem 0.625rem !important;
    gap: 0.375rem !important;
    font-size: 0.75rem !important;
  }
  .flex.flex-wrap.gap-3 > button.flex.items-center.gap-3 svg {
    width: 14px; height: 14px;
  }
  .flex.flex-wrap.gap-3 > button .text-xs { font-size: 0.625rem !important; }

  /* Connection status box */
  .bg-zinc-900.rounded-xl.border.border-zinc-800.p-4 {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.75rem !important;
  }

  /* Search row */
  .flex.flex-col.md\:flex-row.gap-4 { gap: 0.375rem !important; }

  /* Spy result grid (Vb cards) */
  .grid.grid-cols-1.lg\:grid-cols-2.gap-4:not(.overflow-hidden) {
    grid-template-columns: 1fr !important;
    gap: 0.375rem !important;
  }

  /* Vb card: image + text côte à côte mais compact */
  .bg-zinc-900.rounded-xl.border > .flex > .w-32.h-32 {
    width: 4rem !important;
    height: 4rem !important;
  }
  .bg-zinc-900.rounded-xl.border > .flex > .flex-1.p-4 {
    padding: 0.375rem !important;
  }
  .bg-zinc-900.rounded-xl.border > .flex > .flex-1 .text-sm {
    font-size: 0.75rem !important;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .bg-zinc-900.rounded-xl.border > .flex > .flex-1 .text-lg {
    font-size: 0.8125rem !important;
  }
  .bg-zinc-900.rounded-xl.border > .flex > .flex-1 .flex-wrap.gap-1 {
    gap: 2px !important;
    margin-bottom: 0.25rem !important;
  }
  .bg-zinc-900.rounded-xl.border > .flex > .flex-1 .flex-wrap.gap-1 span {
    font-size: 0.5625rem !important;
    padding: 0 3px !important;
  }

  /* ===================================================
     PAGE PRODUITS (Brands + Products grid)
     =================================================== */

  /* Brand grid: 3 colonnes */
  .grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.375rem !important;
  }
  .grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 > div {
    padding: 0.5rem !important;
  }
  .grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 .w-20.h-20 {
    width: 2.5rem !important;
    height: 2.5rem !important;
    margin-bottom: 0.375rem !important;
    padding: 0.25rem !important;
  }

  /* Product list grid: 2 colonnes serrées */
  .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4.xl\:grid-cols-5 {
    gap: 0.25rem !important;
  }

  /* Product cards compact (same Xb-like cards) */
  .bg-black.border.border-zinc-800.rounded-lg .aspect-square {
    aspect-ratio: 4/3 !important;
  }
  .bg-black.border.border-zinc-800.rounded-lg .p-3 {
    padding: 0.25rem !important;
  }
  .bg-black.border.border-zinc-800.rounded-lg .text-sm.font-medium {
    font-size: 0.6875rem !important;
    line-height: 0.875rem !important;
  }

  /* ===================================================
     PAGE DASHBOARD
     =================================================== */

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.375rem !important;
  }

  /* ===================================================
     PAGES AI HISTORY / ADS
     =================================================== */

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-4 {
    gap: 0.375rem !important;
  }

  /* Modal internals */
  .flex-1.overflow-y-auto.p-6,
  .flex-1.overflow-y-auto.p-5 { padding: 0.5rem !important; }
  .sticky.top-0.bg-zinc-900.p-4,
  .sticky.bottom-0.bg-zinc-900.p-4 { padding: 0.5rem !important; }
}

/* ========== EXTRA SMALL ≤ 379px ========== */
@media (max-width: 379px) {

  /* Fournisseurs grid height encore plus */
  .grid.grid-cols-1.lg\:grid-cols-2.gap-4.overflow-hidden {
    height: calc(100vh - 12rem) !important;
  }

  /* Product cards in panels even tinier */
  .grid.grid-cols-1.lg\:grid-cols-2 .bg-zinc-800.rounded-lg .h-40 {
    height: 2.25rem !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-2 .bg-zinc-800.rounded-lg > .p-2 .text-xs {
    font-size: 0.5rem !important;
    line-height: 0.625rem !important;
  }

  /* Brands grid: 2 cols */
  .grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Sidebar narrower */
  aside.w-64 { width: 13rem !important; }

  /* Page padding minimal */
  .h-full.overflow-auto.p-6 { padding: 0.375rem !important; }
}

/* ============================================
   ZOOM LIGHTBOX — Icône loupe sur cartes produits
   ============================================ */

/* --- Loupe icon sur TOUTES les cartes produit (Xb, Zb, Vb) --- */

/* Cartes Xb/Zb dans les panneaux fournisseurs (image = .h-40) */
.grid.grid-cols-1.lg\:grid-cols-2 .bg-zinc-800.rounded-lg .h-40 {
  position: relative !important;
  cursor: pointer;
}
.grid.grid-cols-1.lg\:grid-cols-2 .bg-zinc-800.rounded-lg .h-40::before {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  background: rgba(0,0,0,0.65);
  border-radius: 50%;
  z-index: 6;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}

/* Cartes Vb sur page Spy (image = .w-32.h-32) */
.bg-zinc-900.rounded-xl.border > .flex > .w-32 {
  position: relative !important;
  cursor: pointer;
}
.bg-zinc-900.rounded-xl.border > .flex > .w-32::before {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  background: rgba(0,0,0,0.65);
  border-radius: 50%;
  z-index: 6;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
}

/* Cartes produit page /products (image = .aspect-square ou .aspect-[4/3]) */
.bg-black.border.border-zinc-800.rounded-lg [class*="aspect-"] {
  position: relative !important;
  cursor: pointer;
}
.bg-black.border.border-zinc-800.rounded-lg [class*="aspect-"]::before {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  background: rgba(0,0,0,0.65);
  border-radius: 50%;
  z-index: 6;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
}

/* --- Lightbox overlay --- */
#rtm-zoom-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
#rtm-zoom-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}
#rtm-zoom-lightbox img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 0.75rem;
  background: white;
  padding: 0.5rem;
  box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
#rtm-zoom-lightbox .zoom-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#rtm-zoom-lightbox .zoom-title {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  text-align: center;
  color: white;
  font-size: 0.8125rem;
  background: rgba(0,0,0,0.6);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================
   RUPTURE BADGE — visible sur cartes miniatures
   ============================================ */

/* Override: ne PAS scale le badge Rupture sur mobile */
@media (max-width: 639px) {
  .grid.grid-cols-1.lg\:grid-cols-2 .bg-zinc-800.rounded-lg .h-40 .absolute[class*="bg-red-500"] {
    transform: none !important;
    font-size: 6px !important;
    padding: 0px 2px !important;
    bottom: 0 !important;
    left: 0 !important;
    border-radius: 0 0 0 0.25rem !important;
    line-height: 1.2 !important;
  }

  /* Badge Rupture toujours visible et lisible */
  .grid.grid-cols-1.lg\:grid-cols-2 .bg-zinc-800.rounded-lg .h-40 > div[class*="bg-red"] {
    transform: none !important;
    font-size: 6px !important;
    padding: 1px 3px !important;
    z-index: 10 !important;
  }
}