/* ============================================================
   CARGO EXPRESS LOGISTICS - Corrections responsive mobile-first
   Charge apres le CSS compile (index-1076b0d3.css).
   Base = mobile, puis media queries min-width pour ameliorer.
   ============================================================ */

/* ---- 0. Reset securitaire : jamais de scroll horizontal ---- */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

img,
svg,
iframe,
video {
  max-width: 100%;
}

* {
  -webkit-tap-highlight-color: transparent;
}

a,
button {
  touch-action: manipulation;
}

/* ---- 1. Base mobile : textes qui se coupent proprement ---- */
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
div,
td,
th,
label {
  overflow-wrap: break-word;
}

/* ---- 2. Mobile : champs tactiles confortables, pas de zoom iOS ---- */
@media (max-width: 767px) {
  input,
  select,
  textarea {
    font-size: 16px;
    max-width: 100%;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
  }

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ---- 3. Hero : hauteur adaptee aux petits ecrans ---- */
@media (max-width: 480px) {
  [class*="min-h-[600px]"] {
    min-height: 70vh;
    min-height: 480px;
  }
}

/* ---- 3b. Hero : masque la bande d'annonces en bas (images parasites)
        pour un hero pro et sans chevauchement. Les annonces restent
        gerables dans /admin/advertisements. Pour les reafficher,
        remplacer "none" par "block". */
[class*="min-h-[600px]"] > div[class*="bottom-0"] {
  display: none;
}

/* ---- 4. Desktop (>=768px) : sidebar admin fixe, on decale le contenu ---- */
@media (min-width: 768px) {
  main.flex-1.flex.flex-col.overflow-hidden {
    padding-left: 16rem;
  }
}

/* ---- 5. Boites de dialogue / panneaux : jamais plus larges que l'ecran ---- */
[role="dialog"],
[role="menu"],
[data-radix-popper-content-wrapper] {
  max-width: calc(100vw - 1rem);
}

@media (max-width: 767px) {
  [role="dialog"] {
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* ---- 6. Tableaux : largeur maximale garantie sur mobile ---- */
@media (max-width: 767px) {
  table {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .admin-table-responsive {
    display: block;
    white-space: normal;
  }
}

/* ---- 7. Scrollbar fine pour les zones scrollables mobiles ---- */
@media (max-width: 767px) {
  .overflow-x-auto,
  .overflow-y-auto,
  .admin-main-content {
    -webkit-overflow-scrolling: touch;
  }

  .admin-main-content {
    overscroll-behavior-y: contain;
  }
}

/* ---- 8. Pied de page : liens en colonnes sur mobile ---- */
@media (max-width: 767px) {
  footer .grid,
  footer [class*="grid-cols"] {
    gap: 1.5rem;
  }
}

/* ---- 9. Formulaires : boutons pleine largeur et espaces sur mobile ---- */
@media (max-width: 767px) {
  form button[type="submit"],
  .w-full {
    max-width: 100%;
  }
}