/* =====================================================================
   mobile-sinistre.css — Ajustements MOBILE (espace sinistré & tous rôles).
   Effet UNIQUEMENT sous 768px : le rendu desktop/interne (>= md) est
   strictement inchangé (tout est encapsulé dans les media queries).
   - Sidebar transformée en TIROIR off-canvas (elle ne pousse plus le contenu).
   - Voile (backdrop) + blocage du scroll de fond quand le tiroir est ouvert.
   - Cibles tactiles agrandies (>= 42px).
   Le JS associé : public/assets/js/mobile-sinistre.js
   ===================================================================== */

@media (max-width: 767.98px) {

  /* --- Sidebar en tiroir off-canvas --- */
  #accordionSidebar.sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    height: 100vh;
    width: 15rem !important;
    min-width: 15rem !important;
    max-width: 84vw;
    z-index: 1050;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  body.snx-nav-open #accordionSidebar.sidebar {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0, 0, 0, .45);
  }

  /* Libellés toujours visibles dans le tiroir (sb-admin les masque en mode réduit). */
  #accordionSidebar.sidebar .nav-item .nav-link span,
  #accordionSidebar.sidebar .collapse-item span,
  #accordionSidebar.sidebar .sidebar-brand-text { display: inline !important; }
  #accordionSidebar.sidebar .nav-link,
  #accordionSidebar.sidebar .collapse-item { text-align: left !important; }

  /* Le tiroir fait 15rem mais sb-admin fige chaque lien à 6.5rem -> les
     libellés se repliaient sur 2-3 lignes ALORS QU'IL Y A LA PLACE.
     Le lien prend TOUTE la largeur du tiroir, libellé sur UNE ligne. */
  #accordionSidebar.sidebar .nav-item .nav-link {
    width: 100% !important;
    display: flex !important;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1rem;
  }
  #accordionSidebar.sidebar .nav-item .nav-link span {
    font-size: .95rem !important;
    white-space: nowrap;
  }
  #accordionSidebar.sidebar .nav-item .nav-link i { font-size: 1.05rem; }

  /* Voile derrière le tiroir. */
  .snx-nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1049;
    display: none;
    opacity: 0;
    transition: opacity .25s ease;
  }
  body.snx-nav-open .snx-nav-backdrop { display: block; opacity: 1; }
  body.snx-nav-open { overflow: hidden; }  /* fige le fond quand le tiroir est ouvert */

  /* Le hamburger (topBar) : rendu CLAIREMENT VISIBLE et compréhensible sur la
     barre navy (avant, icône btn-link quasi invisible -> l'utilisateur ne savait
     pas où ouvrir le menu). Pastille blanche « ☰ Menu ». */
  #sidebarToggleTop {
    z-index: 1051;
    position: relative;
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    height: auto !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .16) !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    border-radius: 8px !important;
    padding: .42rem .55rem !important;
    margin-right: .55rem !important;
  }
  #sidebarToggleTop i { color: #fff !important; font-size: 1.15rem; }

  /* --- Cibles tactiles --- */
  .btn-sm, .btn-group-sm > .btn { min-height: 42px; padding-top: .4rem; padding-bottom: .4rem; }
  #dossierNav .list-group-item { min-height: 34px; display: flex; align-items: center; }
  .form-control-sm, .form-control, .custom-select { min-height: 40px; }

  /* --- Titres de page : plus compacts sur téléphone (partout) --- */
  .section-title h2 { font-size: 1.05rem !important; letter-spacing: .2px; }
  .section-title .btn { padding: .25rem .5rem; font-size: .75rem; }
}

/* =====================================================================
   monDossier : sous 992px (empilement des colonnes col-lg), la barre de
   sections #dossierNav (7 entrées) passe en PILLS horizontales scrollables
   -> le contenu n'est plus repoussé sous 7 boutons empilés, et showSec()
   scrolle jusqu'à la section choisie (fini « les documents tout en bas »).
   ===================================================================== */
@media (max-width: 991.98px) {
  #dossierNav {
    flex-direction: row !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }
  /* Pills compactes (demande du 23/07 : « Avancement / Détail / Adresse…
     prennent trop de place ») : hauteur et police réduites. */
  #dossierNav .list-group-item {
    flex: 0 0 auto;
    white-space: nowrap;
    border-radius: 999px !important;
    border: 1px solid #dee2e6 !important;
    min-height: 34px;
    padding: .3rem .7rem;
    font-size: .8rem;
  }
  #dossierNav .list-group-item .badge { margin-left: .3rem; }
}

/* =====================================================================
   Pages d'action critiques (signature délégation / prise de RDV) — polish
   mobile. Le gros du layout est déjà responsive (col-md-* empilés) ; on
   corrige les points qui gênent sur téléphone.
   ===================================================================== */
@media (max-width: 767.98px) {
  /* Aperçu PDF de la délégation : Chrome Android ne rend pas le PDF en
     iframe -> un cadre de 72vh laisse un grand vide. On le raccourcit et on
     garde le bouton « Ouvrir dans un nouvel onglet » comme sortie fiable. */
  .delegation-pdf-frame { min-height: 40vh !important; }

  /* Boutons d'action principaux (signer / confirmer le RDV / déposer les
     pièces / régénérer) en pleine largeur -> cibles tactiles confortables. */
  #btnSendCodeDelegation,
  #btnGenererDeleg,
  #btnConfirmRdv,
  .delegation-code-actions .btn { width: 100%; }

  /* Créneaux RDV : les pills d'horaires prennent toute la largeur, plus
     faciles à taper (au cas où le thème les rend trop étroits). */
  .rdv-slot, .creneau-btn { min-height: 44px; }
}

/* =====================================================================
   monDossier / mesDossiers — TABLES EN CARTES sur téléphone.
   4 à 6 colonnes ne tiennent pas sur un écran de téléphone : la table
   déborde et la colonne d'action (« Voir ») sort de l'écran -> le dossier
   paraît « impossible à consulter ». Sous 992px (dès que les colonnes col-lg
   s'empilent, comme le menu de sections), chaque ligne devient une carte avec
   ses libellés ; toute l'info est visible, plus aucun scroll horizontal. La
   classe .snx-stack + les data-label sont posés par mobile-sinistre.js
   (inertes sur desktop).
   ===================================================================== */
@media (max-width: 991.98px) {
  table.snx-stack thead { position: absolute; left: -9999px; top: -9999px; }
  table.snx-stack,
  table.snx-stack tbody { display: block; width: 100%; }
  table.snx-stack tr {
    display: block;
    width: 100%;
    border: 1px solid #e6ecf3;
    border-radius: 12px;
    background: #fff;
    padding: 4px 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(20, 40, 70, .05);
  }
  table.snx-stack td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid #f2f5fa;
    padding: 8px 0;
    text-align: right;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-height: 0;
  }
  table.snx-stack tr td:last-child { border-bottom: 0; }
  table.snx-stack td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    text-align: left;
    font-weight: 600;
    color: #48506b;
    font-size: .82rem;
  }
  table.snx-stack td.snx-hide-mobile { display: none; }
  /* La ligne-carte reste cliquable (liste des dossiers) : on garde le curseur. */
  table.snx-stack tr[onclick] { cursor: pointer; }

  /* Messages du fil « Suivi & échanges » : casser les mots longs (URLs,
     adresses e-mail) pour qu'ils ne débordent pas de la bulle. */
  .note-row { min-width: 0; }
  .note-item { overflow-wrap: anywhere; word-break: break-word; }
}