/* SGSFO — Couches responsive globales (complète Bootstrap 5).
   Stratégie : low specificity, peu de !important, pas de couleurs/polices touchées.
   Objectif : éliminer overflow horizontal + tactile + tables larges sur mobile. */

/* ── 0. Anti-débordement horizontal global (cause #1 sur mobile) ──────── */
html, body { max-width: 100%; }
body { overflow-x: hidden; }

/* Évite que les images / iframes / vidéos forcent un scroll horizontal */
img, video, iframe, embed, object { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* Mots très longs (URL, ref, code SKU) ne doivent pas casser le layout */
.text-truncate-mobile { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break-anywhere { overflow-wrap: anywhere; word-break: break-word; }


/* ── 1. Tables : responsive automatique sur mobile ─────────────────────── */
@media (max-width: 768px) {
  /* Toute table directement dans une .card s'enroule dans un scroll horizontal local */
  .card > .table,
  .card-body > .table,
  main .table:not(.table-bordered):not(.dataTable) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Si .table-responsive est déjà présent (Bootstrap), respecte */
  .table-responsive { -webkit-overflow-scrolling: touch; }
}


/* ── 2. Boutons & cibles tactiles (Apple HIG : 44x44px min) ────────────── */
@media (max-width: 768px) {
  .btn-sm,
  .form-control-sm,
  .form-select-sm {
    min-height: 36px;
  }
  .btn:not(.btn-link):not(.btn-close):not(.dropdown-item) {
    min-height: 38px;
  }
  /* Action icon-only : zone tactile élargie */
  .btn .bi:only-child { font-size: 1.1rem; }
}


/* ── 3. Grilles KPI : empilement propre sur mobile ─────────────────────── */
@media (max-width: 575px) {
  /* Cards KPI typiques du projet : passer en pleine largeur sur très petit écran */
  .row > [class*="col-6"]:not([class*="col-md-"]):not([class*="col-lg-"]) {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* Réduit les paddings cards sur très petit écran */
  .card-body { padding: .85rem; }
  .card-header { padding: .55rem .85rem; }
  /* fs-3 (KPI valeurs) → un peu plus petit pour éviter retour ligne */
  .fs-3, .display-6 { font-size: 1.4rem !important; }
}


/* ── 4. Container fluid : marges latérales raisonnables sur mobile ─────── */
@media (max-width: 575px) {
  .container-fluid,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }
}


/* ── 5. Modals : fullscreen-like sur très petit écran ──────────────────── */
@media (max-width: 480px) {
  .modal-dialog:not(.modal-fullscreen):not(.modal-sm) {
    margin: 0;
    width: 100%;
    height: 100%;
    max-width: none;
  }
  .modal-content {
    border-radius: 0;
    min-height: 100vh;
  }
}


/* ── 6. Forms : labels lisibles + inputs full-width sur mobile ─────────── */
@media (max-width: 768px) {
  .form-label { font-weight: 600; margin-bottom: .25rem; }
  /* Évite le zoom auto iOS Safari quand on focus un input < 16px */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  select, textarea {
    font-size: 16px;  /* iOS : empêche le zoom à la sélection */
  }
}


/* ── 7. Header/topbar : éviter chevauchement contenu ─────────────────── */
@media (max-width: 768px) {
  /* Si le projet utilise un header sticky, garde un espace de respiration */
  main, #main-content {
    padding-top: max(.5rem, env(safe-area-inset-top));
  }
  /* iPhone notch : safe-area en bas pour le footer / inputs fixes */
  body { padding-bottom: env(safe-area-inset-bottom); }
}


/* ── 8. Sidebar mobile — NEUTRALISÉ ─────────────────────────────────────
 * Bloc legacy retiré : utilisait l'ancienne sémantique (toggled = ouverte)
 * en contradiction avec la convention unifiée actuelle (toggled = fermée)
 * définie dans <style> inline de templates/base.html.
 *
 * L'overlay ::after est aussi remplacé par <div id="sidebar-overlay">
 * (vraie div clickable) dans base.html.
 *
 * Source unique : templates/base.html (@media max-width: 991.98px).
 * Ne pas réactiver sans aligner CSS + JS.
 * ─────────────────────────────────────────────────────────────────────── */
@keyframes sgs-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* ── 9. Texte / KPI très long : ne JAMAIS pousser le layout ──────────── */
.kpi-value, .stat-big, .display-1, .display-2, .display-3, .display-4 {
  overflow-wrap: anywhere;
}


/* ── 10. PDF / impression : ignorer le layout responsif ───────────────── */
@media print {
  body { overflow: visible !important; }
  #sidebar-wrapper, .sidebar-heading, header, .navbar, .d-print-none { display: none !important; }
  #page-content-wrapper { padding-left: 0 !important; }
  .card, .table { page-break-inside: avoid; }
}