/*
  IlikoCar — UI Pro
  Objectif : rendre l'UI plus "pro" sans changer la palette existante,
  en ajoutant un accent CTA principal #FF2900.

  ⚠️ Ce fichier surcharge landing.css (ne remplace pas).
*/

:root{
  --brandHot:#FF2900;
  --brandHot2:#E62500;
  --brandHotSoft:rgba(255,41,0,.20);
}

/* Boutons principaux (CTA) */
.btn.primary{
  border-color: rgba(255,41,0,.35) !important;
  background: var(--brandHot) !important;
  color:#ffffff !important;
  box-shadow: 0 14px 34px rgba(255,41,0,.20) !important;
}
.btn.primary:hover{
  background: var(--brandHot2) !important;
  transform: translateY(-1px) scale(1.01);
}
.btn.primary:active{transform: translateY(0px) scale(.99)}
.btn.primary:focus{
  box-shadow: 0 0 0 4px var(--brandHotSoft), 0 14px 34px rgba(255,41,0,.18) !important;
}

/* Sidebar : onglet actif */
.dashLink.active{
  background: var(--brandHot) !important;
  border-color: rgba(255,41,0,.35) !important;
  box-shadow: 0 14px 34px rgba(255,41,0,.16) !important;
}

/* Logo : garde la forme mais... */
.logo{
  background: var(--brandHot) !important;
  box-shadow: 0 10px 24px rgba(255,41,0,.22) !important;
}

/* Petits détails qui rendent l'ensemble plus clean */
.dashSide{backdrop-filter: blur(10px)}
.dashPanel{box-shadow: 0 10px 24px rgba(15,23,42,.08)}
.table th{letter-spacing:.06em; text-transform:uppercase; font-size:12px}

/* Inputs focus : cohérent avec la charte */
.field:focus-within{
  box-shadow: 0 0 0 4px rgba(29,78,216,.10);
  border-color: rgba(29,78,216,.25);
}

/* Calendrier disponibilités (sélection véhicule / réservation)
   NOTE: on met des sélecteurs plus spécifiques pour éviter que le calendrier
   s'affiche "en colonne" si le CSS est en cache ou surchargé. */
[data-availability-calendar] .cal-wrap{display:grid !important; gap:12px}
[data-availability-calendar] .cal-card{border:1px solid var(--stroke) !important; border-radius:16px !important; background:rgba(255,255,255,.88) !important; overflow:hidden}
[data-availability-calendar] .cal-head{padding:10px 12px !important; border-bottom:1px solid var(--stroke) !important; background:rgba(248,250,252,.9) !important}
[data-availability-calendar] .cal-grid{display:grid !important; grid-template-columns:repeat(7, 1fr) !important; gap:6px !important; padding:12px !important}
[data-availability-calendar] .cal-dow{font-size:11px !important; font-weight:900 !important; letter-spacing:.06em !important; text-transform:uppercase !important; color:rgba(15,23,42,.65) !important; text-align:center !important}
[data-availability-calendar] .cal-cell{height:34px !important; border-radius:10px !important; display:grid !important; place-items:center !important; font-weight:900 !important; font-size:12px !important; border:1px solid rgba(15,23,42,.08) !important}
[data-availability-calendar] .cal-empty{border:none !important; background:transparent !important}
[data-availability-calendar] .cal-cell.is-free{background:rgba(34,197,94,.06) !important}
[data-availability-calendar] .cal-cell.is-pending{background:rgba(148,163,184,.28) !important; color:rgba(15,23,42,.62) !important}
[data-availability-calendar] .cal-cell.is-booked{background:rgba(148,163,184,.45) !important; color:rgba(15,23,42,.72) !important}
[data-availability-calendar] .cal-cell.is-blocked{background:rgba(148,163,184,.55) !important; color:rgba(15,23,42,.72) !important}
@media (max-width: 640px){
  [data-availability-calendar] .cal-grid{gap:5px !important; padding:10px !important}
  [data-availability-calendar] .cal-cell{height:30px !important; border-radius:9px !important}
}

/*
  Loueur — Mobile
  Objectif : éviter les débordements sur /loueur/... et rendre l'UI utilisable en petit écran.
  (On surcharge sans toucher aux vues.)
*/

@media (max-width: 980px){
  /* Header (titre + bouton) */
  .dashHeader{flex-direction:column !important; align-items:stretch !important; gap:14px !important}
  .dashHeaderActions{display:flex !important; justify-content:flex-start !important}
  .dashHeaderActions .btn{width:100% !important; justify-content:center !important}

  /* Menus (loueur/admin) : passe en onglets horizontaux
     IMPORTANT: on cible uniquement les sidebars de navigation (celles qui ont un aria-label).
     Certaines pages utilisent .dashSide pour afficher des cartes (ex: Paiements/Stripe) :
     on ne doit pas les transformer en onglets. */
  .dashSide[aria-label]{
    width:auto !important;
    position:sticky;
    top:0;
    z-index:5;
    padding:10px !important;
  }
  .dashSide[aria-label] .sep,
  .dashSide[aria-label] .dashHint{display:none !important;}
  .dashSide[aria-label]{
    display:flex !important;
    flex-direction:row !important;
    gap:10px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .dashSide[aria-label]::-webkit-scrollbar{display:none}
  .dashSide[aria-label] .dashLink{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    padding:10px 14px !important;
    border-radius:999px !important;
  }

  /* Sidebars non-nav (ex: panneaux Stripe) : rester en blocs */
  .dashSide:not([aria-label]){
    position:static !important;
    padding:0 !important;
    overflow:visible !important;
    display:block !important;
    width:100% !important;
  }

  /* Empêche les micro-débordements */
  .dashMain{min-width:0 !important}
  .dashPanel{min-width:0 !important}
}

/* Tables (dashboard) : affichage en cartes verticales sur mobile
   Active uniquement si .tableWrap porte data-card-table="1". */
@media (max-width: 820px){
  .tableWrap[data-card-table="1"]{overflow:visible !important}

  .tableWrap[data-card-table="1"] table,
  .tableWrap[data-card-table="1"] thead,
  .tableWrap[data-card-table="1"] tbody,
  .tableWrap[data-card-table="1"] th,
  .tableWrap[data-card-table="1"] td,
  .tableWrap[data-card-table="1"] tr{
    display:block;
    width:100%;
  }

  .tableWrap[data-card-table="1"] thead{display:none !important}

  .tableWrap[data-card-table="1"] tbody tr{
    margin:12px 0;
    padding:12px;
    border:1px solid rgba(15,23,42,.10);
    border-radius:18px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
  }

  .tableWrap[data-card-table="1"] tbody td{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid rgba(15,23,42,.08);
    text-align:left !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }
  .tableWrap[data-card-table="1"] tbody td:last-child{border-bottom:0}

  .tableWrap[data-card-table="1"] tbody td::before{
    content: attr(data-label);
    flex:0 0 120px;
    max-width:120px;
    color:rgba(15,23,42,.55);
    font-size:11px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
    padding-top:2px;
  }

  /* Ligne "colspan" (état vide) */
  .tableWrap[data-card-table="1"] tbody td[colspan]{
    display:block !important;
    padding:10px 0 !important;
  }
  .tableWrap[data-card-table="1"] tbody td[colspan]::before{display:none !important}

  /* Inputs/select dans les cellules */
  .tableWrap[data-card-table="1"] .input,
  .tableWrap[data-card-table="1"] select{
    width:100% !important;
    max-width:100% !important;
  }

  /* Colonne Actions : boutons sur plusieurs lignes */
  .tableWrap[data-card-table="1"] td[data-label="Actions"]{display:block}
  .tableWrap[data-card-table="1"] td[data-label="Actions"]::before{display:block; margin-bottom:8px}
  .tableWrap[data-card-table="1"] td[data-label="Actions"] .btn{display:inline-flex; margin:6px 8px 0 0}

  /* Colonne Statut : évite les éléments compressés */
  .tableWrap[data-card-table="1"] td[data-label="Statut"]{display:block}
  .tableWrap[data-card-table="1"] td[data-label="Statut"]::before{display:block; margin-bottom:8px}
  .tableWrap[data-card-table="1"] td[data-label="Statut"] form{flex-wrap:wrap}
  .tableWrap[data-card-table="1"] td[data-label="Statut"] button{width:100%}
}

/* Loueur > Véhicules : mini-cartes (nom + photo) */
.vehMiniGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:14px;
}
.vehMiniCard{
  display:block;
  text-decoration:none;
  color:inherit;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.10);
  border-radius:20px;
  padding:10px;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  transition: transform .12s ease, box-shadow .12s ease;
  min-width:0;
}
.vehMiniCard:hover{transform: translateY(-1px)}
.vehMiniCard:focus{outline:2px solid rgba(255,42,0,.35); outline-offset:2px}

.vehMiniPhoto{
  width:100%;
  aspect-ratio: 16/10;
  border-radius:16px;
  overflow:hidden;
  background: rgba(15,23,42,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 34px rgba(15,23,42,.18);
}
.vehMiniPhoto::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.18) 100%);
  opacity:.55;
}
.vehMiniPhoto::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  border-radius:16px;
  opacity:.75;
}
.vehMiniPhoto img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: translateZ(0);
  transition: transform .18s ease, filter .18s ease;
  filter: contrast(1.03) saturate(1.06);
}
.vehMiniCard:hover .vehMiniPhoto img{transform: scale(1.035)}
.vehMiniPh{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  color: rgba(15,23,42,.35);
  font-weight:900;
}

.vehMiniTitle{
  margin-top:10px;
  font-weight:900;
  font-size:14px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width: 980px){
  .vehMiniGrid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 480px){
  .vehMiniGrid{grid-template-columns: 1fr;}
}


/*
  Header mobile: logo + actions sur la même ligne (pas de coupure)
  - on évite que les boutons soient coupés
  - on autorise un scroll horizontal des actions si manque de place
*/
@media (max-width: 980px){
  .topbar .inner{
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:10px !important;
  }
  /* On gagne de la place en masquant la nav du header sur mobile */
  .topbar .nav{display:none !important;}

  .topbar .brand{
    flex:0 0 auto !important;
    min-width:0 !important;
  }
  .topbar .brand span{font-size:18px !important;}
  .topbar .brand em{display:none !important;}

  .topbar .actions{
    flex:1 1 auto !important;
    min-width:0 !important;
    display:flex !important;
    justify-content:flex-end !important;
    gap:8px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .topbar .actions::-webkit-scrollbar{display:none;}
  .topbar .actions .btn{
    flex:0 0 auto !important;
    width:auto !important;
    white-space:nowrap !important;
  }
  /* Le bouton menu reste visible */
  .topbar .actions .menuBtn{display:inline-flex !important;}
}


/* Loueur > Paiements (Stripe) : forcer les cartes en vertical (mobile/tablette) */
@media (max-width: 1200px){
  .payoutsLayout .dashSide{
    display:block !important;
  }
  .payoutsLayout .dashSide > .dashPanel{
    width:100% !important;
  }
  .payoutsLayout .dashSide > .dashPanel + .dashPanel{
    margin-top:12px !important;
  }
}


/* === Vehicle info bubbles (no calendar) === */
/* Scoped: only on vehicle page info block */
.vehInfoBlock{
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  border-radius:16px;
  padding:12px;
  box-shadow: 0 12px 30px rgba(2,6,23,.06);
}
.vehBubbles{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.vehBubble{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#f8fafc;
  color:#0f172a;
  font-weight:700;
  font-size:13px;
  line-height:1;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.vehBubble b{ font-weight:900; }
.vehBubbleIcon{
  display:inline-flex;
  width:22px;
  height:22px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background: rgba(255,42,0,.10);
  color:#ff2a00;
  flex:0 0 22px;
}
@media (max-width: 520px){
  .vehBubble{ white-space:normal; line-height:1.2; }
  .vehBubbles{ gap:8px; }
}
/* === FIX: rendre les SELECT clairement "cliquables" (sans casser le thème) === */
.field select,
.field select.input{
  padding-right: 42px !important;       /* laisse la place pour la flèche */
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}

/* petit feedback visuel (on comprend que c'est une action) */
.field select:hover,
.field select.input:hover{
  filter: brightness(0.98);
}
.field select:focus,
.field select.input:focus{
  outline: none;
}

/* === Résultats : grille de filtres responsive (sans casser les autres pages) === */
.filtersGrid.filtersGrid4{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.filtersGrid.filtersGrid4 .field{ min-width:0; }
.filtersGrid.filtersGrid4 .input{ width:100%; min-width:0; }

@media (max-width: 980px){
  .filtersGrid.filtersGrid4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .filtersGrid.filtersGrid4{ grid-template-columns: 1fr; }
}


/* --- Stripe Elements (CSP safe) --- */
#card,
#card-element {
  box-sizing: border-box;
  width: 100%;
  display: block;
  padding: 12px 14px;
  border: 1px solid rgba(10, 20, 40, .12);
  border-radius: 14px;
  background: #fff;
  min-height: 46px;
}
.StripeElement--focus {
  border-color: rgba(255, 42, 0, .6);
  box-shadow: 0 0 0 4px rgba(255, 42, 0, .12);
}
.StripeElement--invalid {
  border-color: rgba(220, 38, 38, .7);
}
.StripeElement iframe {
  width: 100% !important;
}
@media (max-width: 900px){
  /* évite l'écrasement sur mobile */
  .checkoutGrid { display: block !important; }
}


/* Stripe Elements inner */
#card .StripeElement, #card-element .StripeElement{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  min-height: 22px;
}

@media (max-width: 880px){
  .checkoutCols{display:block !important;}
  .checkoutCols > *{width:100% !important;}
}

/* Responsive safety toggles */
/* Évite l'affichage "mobile brut" sur desktop quand ui-mobile.css n'est pas chargé */
.mList{display:none !important;}
.showOnMobile{display:none !important;}
.hideOnMobile{display:block !important;}
.mHideOnMobile{display:block !important;}