/*
  IlikoCar — UI Mobile (override)
  Objectif : améliorer le responsive SANS toucher aux CSS existants.
  Chargé en <= 980px via media="(max-width: 980px)" dans layout.php.
*/

:root{ --mobilePad:14px; }

/* Base */
body{font-size:15px}
.wrap{padding-left:var(--mobilePad) !important; padding-right:var(--mobilePad) !important}

/* Header : barre + navigation utilisables sur mobile */
.topbar{position:sticky; top:0; z-index:50}
.topbar .inner{flex-wrap:wrap !important; gap:10px !important; padding:12px 0 !important}
.brand span{font-size:16px !important}
.brand em{font-size:12px !important}

.actions{width:100% !important; justify-content:space-between !important; gap:8px !important; flex-wrap:wrap !important}
.actions .btn{flex:1 1 auto !important; text-align:center !important; justify-content:center !important; padding:10px 12px !important}
.actions .btn.small{font-size:13px !important}

/* Réactiver la nav (landing.css la cache en <=980px) */
.nav{display:flex !important; width:100% !important; order:3; gap:8px !important; padding:6px 0 2px !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important}
.nav::-webkit-scrollbar{height:0}
.nav a{flex:0 0 auto !important; padding:10px 12px !important; border-radius:999px !important; border:1px solid rgba(15,23,42,.10) !important; background:rgba(255,255,255,.85) !important; font-size:13px !important}

/* Le bouton "☰" n'a pas de JS dans le projet, on le masque pour éviter la confusion */
.menuBtn{display:none !important}

/* Landing / cartes */
.hero{padding:24px 0 14px !important}
h1{font-size:30px !important; line-height:1.08 !important}
.sectionTitle{font-size:20px !important}
.heroCard .pad{padding:16px !important}
.card{padding:14px !important; border-radius:18px !important}
.vCard{border-radius:18px !important}
.vCard img{width:100% !important; height:auto !important; aspect-ratio:16/10; object-fit:cover}
.pricing{gap:6px !important}
.meta{gap:8px !important}

/* Accueil : "Offres populaires" (landing.css = grille 12 colonnes + cartes span 3)
   Sur mobile, ça crée des cartes ultra-étroites (4 colonnes). On force une grille lisible. */
.grid[aria-label="Liste de véhicules"]{
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
.grid[aria-label="Liste de véhicules"] > .cardLink,
.grid[aria-label="Liste de véhicules"] > .card,
.grid[aria-label="Liste de véhicules"] > .vCard{
  grid-column: auto !important; /* override inline span */
  min-width: 0 !important;
}

/* Option : sur écrans un peu plus larges, afficher 2 cartes par ligne */
@media (min-width: 430px){
  .grid[aria-label="Liste de véhicules"]{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Formulaires */
.searchGrid{grid-template-columns:1fr !important}
.field{min-height:44px}

/* Résultats (Search) : éviter la grille 4 colonnes sur mobile (textes tronqués + date coupée) */
.filtersGrid.filtersGrid--search{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.filtersGrid.filtersGrid--search .field,
.filtersGrid.filtersGrid--search .input{
  min-width: 0 !important;
}
.filtersGrid.filtersGrid--search input[type="date"].input{
  width: 100% !important;
  min-width: 0 !important;
}
@media (max-width: 420px){
  .filtersGrid.filtersGrid--search{ grid-template-columns: 1fr !important; }
}

/* Dashboards */
.dashHeader{flex-direction:column !important; align-items:stretch !important; gap:10px !important}
.dashHeaderActions{width:100% !important; display:flex !important; gap:8px !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; padding:2px 0 !important}
.dashHeaderActions::-webkit-scrollbar{height:0}
.dashHeaderActions .btn{flex:0 0 auto !important; padding:9px 12px !important; font-size:13px !important; border-radius:999px !important; white-space:nowrap !important}
.dashLayout{grid-template-columns:1fr !important}
.dashSide{position:relative !important; top:auto !important}
.dashGrid{grid-template-columns:1fr !important}
.kpiGrid{grid-template-columns:1fr !important}

/* Boutons : tailles mobile (évite des “onglets” trop gros) */
.btn{min-height:40px !important}
.btn.small{padding:8px 10px !important; font-size:13px !important; border-radius:999px !important; white-space:nowrap !important}

/* Sidebar (admin/loueur/client) : sur mobile on la transforme en barre d’onglets scrollable
   IMPORTANT : uniquement les sidebars de MENU (celles avec aria-label). 
   Sinon, on casse les panels "info" (ex: Paiements/Stripe) qui utilisent aussi .dashSide.
*/
.dashSide[aria-label]{
  display:flex !important;
  flex-direction:row !important;
  gap:8px !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
  padding:10px !important;
  align-items:center !important;
}
.dashSide[aria-label]::-webkit-scrollbar{height:0}

/* Le contenu de la sidebar admin est dans un <div style="display:grid"> → on force en flex */
.dashSide[aria-label] > div{display:flex !important; flex-direction:row !important; gap:8px !important; align-items:center !important}

.dashSide[aria-label] .dashLink{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:9px 12px !important;
  font-size:13px !important;
  border-radius:999px !important;
  white-space:nowrap !important;
}

/* On masque les éléments “longs” dans la barre d’onglets mobile */
.dashSide[aria-label] .sep,
.dashSide[aria-label] .dashHint{display:none !important}

/* Barres de filtres (ex: Toutes / Pending / Confirmed / Cancelled) : éviter le wrap et scroll horizontal */
div[style*="display:flex"][style*="flex-wrap:wrap"][style*="margin-bottom:10px"]{
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
div[style*="display:flex"][style*="flex-wrap:wrap"][style*="margin-bottom:10px"]::-webkit-scrollbar{height:0}

/* Menus loueur/client : les liens (onglets) sont trop grands → on les transforme en “tabs” scrollables */
.dashSide[aria-label="Menu loueur"],
.dashSide[aria-label="Menu client"]{
  display:flex !important;
  flex-direction:row !important;
  gap:8px !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
  padding:10px !important;
  align-items:center !important;
}
.dashSide[aria-label="Menu loueur"]::-webkit-scrollbar,
.dashSide[aria-label="Menu client"]::-webkit-scrollbar{height:0}

.dashSide[aria-label="Menu loueur"] .dashLink,
.dashSide[aria-label="Menu client"] .dashLink{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:9px 12px !important;
  font-size:13px !important;
  border-radius:999px !important;
  white-space:nowrap !important;
}

/* Boutons (ex: Déconnexion) dans la barre d'onglets mobile */
.dashSide[aria-label="Menu loueur"] .btn,
.dashSide[aria-label="Menu client"] .btn{
  flex:0 0 auto !important;
  padding:9px 12px !important;
  font-size:13px !important;
  border-radius:999px !important;
  white-space:nowrap !important;
}

/* On masque les éléments “longs” dans la barre d’onglets mobile (séparateur + astuce) */
.dashSide[aria-label="Menu loueur"] .sep,
.dashSide[aria-label="Menu client"] .sep,
.dashSide[aria-label="Menu loueur"] .dashHint,
.dashSide[aria-label="Menu client"] .dashHint{display:none !important}

/* Tables : scroll horizontal propre */
.tableWrap{overflow-x:auto !important; -webkit-overflow-scrolling:touch !important}
.tableWrap::-webkit-scrollbar{height:0}
.table{min-width:720px !important}

/* Tables (admin listes : réservations/contrats/loueurs/véhicules/paiements)
   Certaines pages n'utilisent pas .tableWrap/.table → on force un scroll horizontal sur la table elle‑même.
*/
.dashPanel table{
  width:100% !important;
  display:block !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
.dashPanel table::-webkit-scrollbar{height:0}
.dashPanel table thead,
.dashPanel table tbody{display:table !important; width:100% !important}
.dashPanel table{min-width:720px !important}
.dashPanel th,
.dashPanel td{
  padding:10px 10px !important;
  font-size:13px !important;
  white-space:nowrap !important;
}

/* Champs longs (email) : autoriser le retour à la ligne à l'intérieur des cellules si besoin */
.dashPanel td .muted,
.dashPanel td small{white-space:normal !important; word-break:break-word !important}

/* Contrat / signature */
.contractGrid{grid-template-columns:1fr !important; gap:12px !important}
.sigGrid{grid-template-columns:1fr !important; gap:12px !important}

/* =============================
   Admin — Listes en mode “cartes” (mobile)
   Objectif : éviter les grandes tables illisibles. Chaque entrée devient cliquable.
   Actif uniquement sur les pages où le panel a la classe .mHasList
============================= */

.mList{display:none}

.mHasList .mList{
  display:grid !important;
  gap:10px !important;
  margin-top:10px !important;
}

/* Sur ces pages, on masque les tableaux sur mobile (on garde les cartes) */
.mHasList .tableWrap{display:none !important}
.mHasList table{display:none !important}

.mCard{
  border-radius:18px !important;
  background: rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  overflow:hidden !important;
}

.mCardLink{
  display:block !important;
  padding:12px 12px 10px !important;
  color:inherit !important;
  text-decoration:none !important;
}

.mCardTop{display:flex !important; gap:10px !important; justify-content:space-between !important; align-items:flex-start !important}
.mCardTitle{font-weight:1000 !important; letter-spacing:.01em !important}
.mCardSub{margin-top:2px !important; font-size:12px !important; color:var(--muted) !important; word-break:break-word !important}

.mBadge{
  flex:0 0 auto !important;
  font-size:12px !important;
  font-weight:900 !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  white-space:nowrap !important;
}

.mRows{margin-top:10px !important; display:grid !important; gap:6px !important}
.mRow{display:flex !important; justify-content:space-between !important; gap:12px !important; font-size:13px !important}
.mKey{color:var(--muted) !important}
.mVal{font-weight:900 !important; text-align:right !important}

.mActions{
  display:flex !important;
  gap:8px !important;
  padding:10px 12px 12px !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  flex-wrap:wrap !important;
}
.mActions .btn{flex:1 1 auto !important; justify-content:center !important}

/* =============================
   Admin — Booking show : agencement mobile des menus/actions
   Objectif : éviter la pile de boutons énormes et rendre l'action bar lisible.
============================= */

/* Bloc des actions en haut du panneau “Résumé” */
.mBookingTopActions{display:flex !important; flex-direction:column !important; gap:8px !important}

/* 2 actions principales : en 2 colonnes */
.mBookingPrimary{display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important}
.mBookingPrimary .btn{width:100% !important; justify-content:center !important}

/* Liens contextuels (Véhicule/Loueur/Paiement) : tabs scrollables */
.mBookingLinks{display:flex !important; gap:8px !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; padding-bottom:2px !important}
.mBookingLinks::-webkit-scrollbar{height:0}
.mBookingLinks .btn{flex:0 0 auto !important; border-radius:999px !important; white-space:nowrap !important}

/* Actions workflow : grille 2 colonnes pour gagner de la place */
.mWorkflowActions{display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important}
.mWorkflowActions form{margin:0 !important}
.mWorkflowActions .btn{width:100% !important; justify-content:center !important}

/* Sur très petit écran, 1 colonne */
@media (max-width: 360px){
  .mBookingPrimary{grid-template-columns:1fr !important}
  .mWorkflowActions{grid-template-columns:1fr !important}
}


/* Vehicles lists on mobile: stack each info on its own line (no horizontal scroll) */
@media (max-width: 980px){
  .vehiclesListResponsive table.table{ display:none !important; }
  .vehiclesListResponsive .mVehicleCards{ display:block; }

  .mVehicleCards{ display:block; }
  .mVehicleCards .mCard{
    border:1px solid rgba(17,24,39,.10);
    border-radius:18px;
    padding:14px;
    background:#fff;
    box-shadow:0 1px 0 rgba(0,0,0,.04);
    margin:12px 0;
  }
  .mVehicleCards .mCardHead{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
  }
  .mVehicleCards .mCardTitle{
    font-weight:800;
    font-size:16px;
    line-height:1.2;
  }
  .mVehicleCards .mCardBadge{
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(17,24,39,.10);
    font-weight:700;
    font-size:12px;
    white-space:nowrap;
  }
  .mVehicleCards .mCardLine{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:8px 0;
    border-top:1px solid rgba(17,24,39,.08);
  }
  .mVehicleCards .mCardLine:first-of-type{ border-top:0; }
  .mVehicleCards .mCardLine .lbl{ color:#6b7280; font-weight:700; }
  .mVehicleCards .mCardLine .val{ font-weight:800; text-align:right; word-break:break-word; }

  .mVehicleCards .mCardActions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-start;
    border-top:1px solid rgba(17,24,39,.08);
    margin-top:10px;
    padding-top:10px;
  }
  .mVehicleCards .mInlineForm{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    margin:0;
  }
  .mVehicleCards .mInlineForm .input{
    max-width:160px;
    padding:8px 10px;
  }
}


/* Options disponibles (fiche véhicule) */
.optionsRow{grid-template-columns: 1fr !important;}