.modal-body {
  padding: 1.5rem;
}

.modal-header {
  background: transparent !important;
  padding: 1rem 1.5rem;
}

.modal-title {
  font-weight: 600;
}

@media (min-width: 576px) {
  #templateModal .modal-dialog,
  #documentStyleModal .modal-dialog,
  #documentStructureModal .modal-dialog {
    max-width: 100%;
    margin: 0 auto;
  }
}

#templateModal .row,
#templateForm {
  height: 100%;
}

#templateModal .modal-header {
  place-items: center;
}

#templateModal .modal-header .close {
  padding: 0.5rem;
  margin: -1rem -1rem -1rem 1rem;
}

#templateModal small {
  font-size: 12px;
}

#templateModal .title-note {
  display: block;
}

#template-label .editable-label::before {
  content: unset;
}

#templateModal.loading {
  cursor: wait;
}

#templateModal.loading .modal-content * {
  pointer-events: none;
}

#objetModal .modal-dialog {
  max-width: 99vw !important; /* remplace l'ancien plafond 1400px : popin de création pleine largeur (retour porteur) */
}

.modal-body {
  max-height: 76vh;
  overflow: hidden auto;
}

#qrcodeModal .modal-body {
  background: var(--ev-body-bg);
}

#iframeModal .modal-body,
#documentStyleModal .modal-body,
#documentStructureModal .modal-body {
  max-height: initial;
}

/* Replicate .page > .container context to match full-page font sizing.
   `padding-top: 0` : le bandeau de tête de la fiche (.objet-hd) doit être FLUSH en haut du corps du
   modal — sinon une bande blanche apparaît au-dessus du bandeau sombre (retour porteur). */
#htmxModalContent {
  padding: 0 25px 25px;
  background: var(--ev-body-bg, #f4f6f9);
  min-height: 100%;
  font-size: 0.8rem;
  line-height: 1.2;
}

#htmxModalContent .page-body {
  margin: 0;
}

/* Le bandeau de tête PRINCIPAL de la fiche fait office d'en-tête du modal : pleine largeur, flush en
   haut, sans coins arrondis (annule le padding latéral de #htmxModalContent). Scopé au 1er niveau
   (`.page-body > .objet-shell > .objet-hd`) pour NE PAS toucher les bandeaux imbriqués (sous-onglets,
   « Liste des objets », etc.). Supprime la bande blanche au-dessus et le rendu « carte flottante ». */
#htmxModalContent > .page-body > .objet-shell > .objet-hd {
  margin: 0 -25px 16px;
  border-radius: 0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  /* Le bandeau est tiré jusqu'aux bords (margin négative) : on rétablit un padding interne confortable
     pour que le bouton « Statistiques » (poussé à droite) ne soit jamais rogné par overflow:hidden. */
  padding-left: 28px;
  padding-right: 28px;
}

/* Hide topbar edit button when navigation modal is open (the popin has its own,
   injected into the fiche tab bar). */
.modal-open .tab-actions:not(.popin-bulk) {
  display: none !important;
}

/* Retour porteur (2026-09) : le masquage ci-dessus vise le bouton d'édition de la PAGE
   HÔTE (topnav) — il ne doit PAS masquer le widget « Modifier » du bandeau de la fiche
   affichée DANS la popin (#iframeModal). Ce widget (.objet-hd-actions [data-live-mode],
   à gauche du bouton « Stats ») est ré-affiché ici : même mécanisme que le pli injecté,
   sans le doublon « stylo flottant ». */
body.modal-open #htmxModalContent .tab-actions:not(.popin-bulk) {
  display: flex !important;
}

/* ── Barre fine de la popin ───────────────────────────────────────
   Layout flex : header auto + body extensible, pour que l'amincissement
   de la barre profite automatiquement à la fiche (plus de hauteur fixe). */
/* ── Cadrage robuste de la popin (Tabler BS5 CSS + bundle JS BS4) ──────────────
   Desktop / tablette : dialogue large centré, avec marge de respiration ; on NEUTRALISE le
   `min-height: calc(100% - marge*2)` de `.modal-dialog-centered` (Tabler) qui gonflait la modale à
   ~plein écran, et on donne une HAUTEUR DÉFINIE au `.modal-content` pour que `.modal-body` (flex)
   borne et scrolle le contenu au lieu de déborder. */
#iframeModal .modal-dialog {
  max-width: 99vw;           /* L8 : popin des listes /contact-liste & /objet-liste à 99 % de large */
  width: 99vw;
  margin: 0.5vh auto;        /* 0.5vh + 98vh + 0.5vh ≈ 99vh de bandeau occupé, 1vh de respiration */
  min-height: 0;              /* annule l'inflation Tabler */
  height: auto;
}
#iframeModal .modal-content {
  display: flex;
  flex-direction: column;
  height: 98vh;              /* retour porteur : ~98 % de haut */
  max-height: 98vh;
  overflow: hidden;          /* le scroll a lieu dans .modal-body */
}
#iframeModal .modal-body {
  padding: 0;
}

/* ── Grandes popins de création contact / objet / ressource ──────────────────
   Retour porteur (2026-09) : les modales d'ajout (#contactModal, #objetModal)
   occupent ~99 % de la largeur et 98 % de la hauteur, comme la popin de
   consultation #iframeModal. On neutralise `.modal-dialog-centered` (min-height
   Tabler) et on borne `.modal-body` (flex + scroll interne). */
#contactModal .modal-dialog,
#objetModal .modal-dialog {
  max-width: 99vw;
  width: 99vw;
  margin: 0.5vh auto;
  min-height: 0;
  height: auto;
}
#contactModal .modal-content,
#objetModal .modal-content {
  display: flex;
  flex-direction: column;
  height: 98vh;
  max-height: 98vh;
  overflow: hidden;
}
#contactModal .modal-body,
#objetModal .modal-body {
  max-height: none;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

#iframeModal .modal-header--slim {
  flex: 0 0 auto;
  gap: 6px;
  align-items: center;
  padding: 0.35rem 0.75rem;
  min-height: 0;
}

#iframeModal .modal-header--slim .btn-icon {
  padding: 2px;
  line-height: 1;
}

#iframeModal .modal-header--slim .btn-icon .material-symbols-outlined {
  font-size: 20px;
}

#iframeModal .modal-header--slim #htmxModalCounter {
  font-size: 0.78rem;
  color: #6c757d;
  white-space: nowrap;
}

#iframeModal .modal-header--slim .modal-title {
  margin: 0;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#iframeModal .modal-header--slim .btn-close {
  padding: 4px;
}

#iframeModal .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

/* ── Pli « Modifier en masse » injecté dans la barre d'onglets ─────
   Bulle colorée poussée à l'extrême droite de la barre, contraste avec
   le fond de la barre d'onglets. */
.popin-bulk {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.popin-bulk .btn {
  border-radius: 999px;
  padding: 4px 14px;
  font-weight: 600;
  font-size: 0.8rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
}

.popin-bulk .btn .material-symbols-outlined {
  font-size: 16px;
}

/* Couleurs explicites : la barre d'onglets (et --ev-primary) valent le bleu nuit
   du thème → un btn-primary n'y contraste pas. On force des accents lisibles. */
.popin-bulk #htmxModalBulkEditBtn,
.popin-bulk #htmxModalBulkEditBtn:focus {
  background: #f59f00;
  border-color: #f59f00;
  color: #1a1300;
}

.popin-bulk #htmxModalBulkEditBtn:hover {
  background: #f08c00;
  border-color: #f08c00;
  color: #1a1300;
}

.popin-bulk #htmxModalBulkSaveBtn,
.popin-bulk #htmxModalBulkSaveBtn:focus {
  background: #2f9e44;
  border-color: #2f9e44;
  color: #fff;
}

.popin-bulk #htmxModalBulkSaveBtn:hover {
  background: #2b8a3e;
  border-color: #2b8a3e;
  color: #fff;
}

.popin-bulk #htmxModalBulkCancelBtn,
.popin-bulk #htmxModalBulkCancelBtn:focus {
  background: #fff;
  border-color: #fff;
  color: #1f2d3d;
}

.popin-bulk #htmxModalBulkCancelBtn:hover {
  background: #e9ecef;
  border-color: #e9ecef;
  color: #1f2d3d;
}

/* Toggle « Modifier » visible en lecture, masqué en édition */
.popin-bulk .bulk-btn-group {
  display: none;
  gap: 6px;
}

.popin-bulk.is-editing #htmxModalBulkEditBtn {
  display: none;
}

.popin-bulk.is-editing .bulk-btn-group {
  display: flex;
}

/* ── iframeModal mobile ──────────────────────────────────────── */
@media (max-width: 575.98px) {
  #iframeModal .modal-dialog {
    max-width: 100vw !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;   /* annule l'inflation Tabler (plein écran géré par .modal-content) */
    margin: 0 !important;
  }

  #iframeModal .modal-content {
    border-radius: 0 !important;
    height: 100dvh !important;   /* hauteur définie → le corps flex borne et scrolle */
    max-height: 100dvh !important;
  }

  #iframeModal .modal-header {
    flex-wrap: nowrap;
    padding: 0.6rem 1rem;
    gap: 8px;
    align-items: center;
  }

  /* Nav buttons: proper touch target */
  #iframeModal .modal-header>.btn-icon {
    padding: 6px;
    flex-shrink: 0;
  }

  /* Counter hidden on mobile — arrows still work */
  #iframeModal #htmxModalCounter {
    display: none;
  }

  /* Title: full size, truncates if tight */
  #iframeModal .modal-title {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
  }

  /* Action buttons: comfortable touch target */
  #iframeModal .modal-tab-actions {
    flex-shrink: 0;
    gap: 6px;
  }

  #iframeModal .modal-tab-actions .btn {
    padding: 6px 8px !important;
  }

  #iframeModal .modal-tab-actions .material-symbols-outlined {
    font-size: 16px;
  }

  /* Close button */
  #iframeModal .modal-header>.close {
    flex-shrink: 0;
    margin-left: 0;
    font-size: 1.4rem;
  }

  #htmxModalContent {
    padding: 4px 12px;
  }
}
/* ── Grandes popins de création — mobile (plein écran, même logique que #iframeModal) ── */
@media (max-width: 575.98px) {
  #contactModal .modal-dialog,
  #objetModal .modal-dialog {
    max-width: 100vw !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  #contactModal .modal-content,
  #objetModal .modal-content {
    border-radius: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}

/* ── Toggle « Modif » de la popin (#iframeModal) ──────────────────────────────
   En-tête de la popin, à gauche de la croix : pilule Lecture/Modification.
   Lecture par défaut ; actif (.is-active) = rester en édition en naviguant
   (précédent/suivant). Désactivé quand la fiche ne permet pas l'écriture. */
#iframeModal .htmx-modal-edit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--ev-border-color);
  border-radius: 999px;
  background: #fff;
  color: var(--ev-body-color);
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
}
#iframeModal .htmx-modal-edit-toggle .material-symbols-outlined { font-size: 15px; }
#iframeModal .htmx-modal-edit-toggle:hover {
  border-color: var(--ev-primary, #206bc4);
  color: var(--ev-primary, #206bc4);
}
#iframeModal .htmx-modal-edit-toggle.is-active {
  background: #2f9e44;
  border-color: #2f9e44;
  color: #fff;
}
#iframeModal .htmx-modal-edit-toggle:disabled { opacity: 0.45; cursor: not-allowed; }