div:where(.swal3-container) div:where(.swal3-popup),
.swal2-popup,
.swal3-popup {
  background: var(--bkg-color1) !important;
  max-width: calc(100% - 24px) !important;
  box-sizing: border-box !important;
}

/* BUG-009 : en thème sombre, --bkg-color1 (#0f0f0f) est quasi-invisible
   sur le fond sombre du backdrop. On aligne sur --bkg-color59 (#171717),
   même valeur que .modal-content en dark mode. */
:root.dark .swal2-popup,
:root.dark .swal3-popup {
  background: var(--bkg-color59) !important;
}
div:where(.swal3-container) {
  z-index: 1201 !important;
}

/* Formulaires en modale Swal : les champs standard (form-control,
   selectpicker, textarea) se confondaient avec le fond blanc, notamment sur
   la commande fournisseur. On donne un relief commun aux formulaires en
   table.noBorder sans toucher aux tables de donnees affichees en modale. */
.swal2-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select),
.swal3-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
}

.swal2-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) td,
.swal3-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) td {
  padding: 3px 6px;
  vertical-align: middle;
}

/* `label:not(.btn)` : cette regle vise les LIBELLES de champ (Destinataire,
   Sujet...). Or les onglets Email / SMS / Notification de la modale Message sont
   eux aussi des <label> dans un td:first-child : ils heritaient donc de cette
   couleur de texte, qui ecrasait le blanc de l'onglet actif en btn-primary —
   du texte sombre sur un fond bleu, illisible. */
.swal2-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) td:first-child label:not(.btn),
.swal3-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) td:first-child label:not(.btn) {
  color: var(--eb-text, var(--txt-color3));
  font-weight: 500;
}

/* Un champ en modale = le champ v2 du reste du produit.
   Ce gabarit posait auparavant un relief propre a la modale (fond #f8fafc,
   bordure #cbd5e1, rayon 7px, ombre interne). Il ne gagnait pas l'arbitrage
   de specificite pour tous les champs : dashboard-modern.css style les champs
   v2 type par type, avec un nombre variable de :not() de garde. Pour
   input[type=text] (6 classes) il passe DEVANT ce bloc (5 classes), pour
   input[type=tel] (3 classes) il passe DERRIERE. Dans une meme colonne de
   formulaire, Telephone sortait donc gris et les autres blancs (constate sur
   la modale Organisation). On aligne le gabarit modale sur les memes jetons
   que dashboard-modern.css : quel que soit le selecteur qui gagne, le rendu
   est identique. */
.swal2-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) .form-control,
.swal2-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) textarea,
.swal2-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) .bootstrap-select > .dropdown-toggle,
.swal3-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) .form-control,
.swal3-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) textarea,
.swal3-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) .bootstrap-select > .dropdown-toggle {
  background: var(--eb-surface, #ffffff) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  border-radius: var(--eb-radius-sm, 8px) !important;
  color: var(--eb-text, var(--txt-color92)) !important;
  box-shadow: none !important;
}

.swal2-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) .form-control:focus,
.swal2-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) textarea:focus,
.swal2-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) .bootstrap-select > .dropdown-toggle:focus,
.swal3-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) .form-control:focus,
.swal3-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) textarea:focus,
.swal3-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) .bootstrap-select > .dropdown-toggle:focus {
  border-color: var(--eb-primary, #2563eb) !important;
  box-shadow: var(--eb-shadow-focus, 0 0 0 3px rgba(59, 130, 246, 0.15)) !important;
  outline: none !important;
}

/* Largeur des <select> dans un FORMULAIRE en modale.
   dashboard-modern.css bride les selectpicker « nus » a
   `width:auto; min-width:104px; max-width:240px` — regle pensee pour les
   filtres de toolbar, ou un menu doit tenir a son libelle. Appliquee a un
   champ de formulaire, elle produisait une liste de 240px face a des champs
   texte pleine largeur ; et comme .swal2-content est en text-align:center, le
   wrapper inline-block flottait au milieu de sa ligne au lieu de s'aligner
   sur les autres champs (« Sous-niveau » de la modale Organisation, decale de
   142px vers la droite). Ici un select est un champ : pleine largeur, comme
   les inputs. Le wrapper reste transparent et sans bordure : c'est son bouton
   interne qui porte le cadre, sinon on en obtient deux. */
.swal2-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) .bootstrap-select,
.swal3-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) .bootstrap-select {
  display: block !important;
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.swal2-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) .bootstrap-select > .dropdown-toggle,
.swal3-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) .bootstrap-select > .dropdown-toggle {
  float: none !important;
  width: 100% !important;
}

/* Libelle a droite, face a son champ : la colonne des libelles heritait du
   text-align:center de .swal2-content, donc « Pays » ou « Image » flottaient
   au centre d'une colonne dimensionnee par le libelle le plus long. Exception
   pour les cellules qui portent un bouton — les onglets Email / SMS /
   Notification de la modale Message vivent dans un td:first-child et gardent
   leur alignement. */
.swal2-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) td:first-child,
.swal3-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) td:first-child {
  text-align: right;
}
.swal2-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) td:first-child:has(.btn),
.swal3-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) td:first-child:has(.btn) {
  text-align: center;
}
/* Un libelle en flex ne se laisse pas deplacer par `text-align`, il faut
   `justify-content`. Deux cas dans create_input_address() : la case
   « Decomposee » (`<label class="d-flex">`, un bloc pleine largeur glisse sous
   « Adresse ») et le libelle « Adresse » lui-meme quand l'appelant passe un
   `style='display:flex'` (modale Nouveau don). Sans cette regle, ces deux-la
   restaient collectes a gauche au milieu de libelles alignes a droite.
   `:not(.btn)` : les onglets Email/SMS/Notification de la modale Message sont
   aussi des <label> de td:first-child. */
.swal2-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) td:first-child label:not(.btn),
.swal3-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) td:first-child label:not(.btn) {
  justify-content: flex-end;
}
/* Les cellules de champ restent a gauche : sans ca un contenu inline (icone,
   petit bouton, texte d'aide) heriterait du centrage de .swal2-content. */
.swal2-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) td:first-child ~ td,
.swal3-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) td:first-child ~ td {
  text-align: left;
}
/* Mobile : la table passe en lignes empilees (dashboard-modern.css), libelle
   AU-DESSUS du champ et cale a gauche. Le `text-align:left !important` de ce
   mode ne dit rien du flex : sans ca la case « Decomposee » restait seule
   plaquee a droite au milieu de libelles alignes a gauche. */
@media (max-width: 768px) {
  .swal2-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) td:first-child label:not(.btn),
  .swal3-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) td:first-child label:not(.btn) {
    justify-content: flex-start;
  }
}

:root.dark .swal2-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) .form-control,
:root.dark .swal2-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) textarea,
:root.dark .swal2-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) .bootstrap-select > .dropdown-toggle,
:root.dark .swal3-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) .form-control,
:root.dark .swal3-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) textarea,
:root.dark .swal3-popup form table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) .bootstrap-select > .dropdown-toggle {
  background: var(--eb-surface, #1c1c1c) !important;
  border-color: var(--eb-border, #333333) !important;
  box-shadow: none !important;
}

/* Boutons centrés dans le footer de toutes les modales Swal (legacy + native) */
.swal2-actions,
.swal3-actions,
div:where(.swal3-container) .swal3-actions {
  justify-content: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 0.75em 1em !important;
}

/* ============================================================================
   #12010 — Mode sombre : contenu des modales Swal (« + Personnel », etc.)
   ----------------------------------------------------------------------------
   Le fond du popup (.swal2-popup / .swal3-popup) passe déjà à --bkg-color59
   en dark (bloc plus haut). Mais les rattrapages dark mode ciblant les
   .form-control / .bootstrap-select / tables / boutons À L'INTÉRIEUR du
   popup (dashboard-modern.css, section « SWAL MODALS — Dotation ») étaient
   gatés sur .swal-modal — nomenclature legacy SweetAlert 1, classe JAMAIS
   émise par le wrapper swal() eBrigade qui rend .swal2-popup / .swal3-popup.
   Résultat : le contenu du popup (formulaire « + Personnel » et consorts)
   restait en thème clair (form-controls, boutons de selectpicker, cellules
   de tableau) sur fond sombre — d'où l'impression « fond blanc » signalée.
   On rattache ces overrides aux classes réellement rendues, en scope
   :root.dark uniquement (zéro régression sur le thème clair).
   ============================================================================ */

/* Champs input/textarea */
:root.dark .swal2-popup .form-control,
:root.dark .swal3-popup .form-control,
:root.dark .swal2-popup .form-control-sm,
:root.dark .swal3-popup .form-control-sm {
  background-color: var(--eb-surface, #1C1C1C) !important;
  border-color: var(--eb-border, #333333) !important;
  color: var(--eb-text, #e2e8f0) !important;
}

/* Bouton visible du selectpicker (bootstrap-select). C'est le composant
   qui recouvre le <select> natif et affichait un fond gris clair sur
   dark faute d'override. */
:root.dark .swal2-popup .bootstrap-select > .dropdown-toggle,
:root.dark .swal3-popup .bootstrap-select > .dropdown-toggle,
:root.dark .swal2-popup .bootstrap-select .btn.dropdown-toggle,
:root.dark .swal3-popup .bootstrap-select .btn.dropdown-toggle {
  background-color: var(--eb-surface, #1C1C1C) !important;
  border-color: var(--eb-border, #333333) !important;
  color: var(--eb-text, #e2e8f0) !important;
}
:root.dark .swal2-popup .bootstrap-select .filter-option,
:root.dark .swal3-popup .bootstrap-select .filter-option,
:root.dark .swal2-popup .bootstrap-select .filter-option-inner,
:root.dark .swal3-popup .bootstrap-select .filter-option-inner,
:root.dark .swal2-popup .bootstrap-select .filter-option-inner-inner,
:root.dark .swal3-popup .bootstrap-select .filter-option-inner-inner {
  color: var(--eb-text, #e2e8f0) !important;
}

/* Cellules de tableau : couleur de texte et bordures. On laisse le fond
   transparent (hérite du popup) pour ne pas peindre par-dessus les
   éventuels striping de bootstrap-table (qui a ses propres overrides). */
:root.dark .swal2-popup table:not(.bootstrap-table):not(.newTable):not(.newTableAll) th,
:root.dark .swal3-popup table:not(.bootstrap-table):not(.newTable):not(.newTableAll) th {
  background-color: var(--eb-surface-hover, #252525) !important;
  color: var(--eb-text-secondary, #94a3b8) !important;
  border-color: var(--eb-border, #333333) !important;
}
:root.dark .swal2-popup table:not(.bootstrap-table):not(.newTable):not(.newTableAll) td,
:root.dark .swal3-popup table:not(.bootstrap-table):not(.newTable):not(.newTableAll) td {
  color: var(--eb-text, #e2e8f0) !important;
  border-color: var(--eb-border, #333333) !important;
}

/* Libellés de formulaire */
:root.dark .swal2-popup label,
:root.dark .swal3-popup label {
  color: var(--eb-text, #e2e8f0);
}

/* Bouton secondaire Fermer (btn-swal.btn-secondary) — le variant success
   (Sauver) reste sur --eb-success/--eb-primary, on ne le touche pas. */
:root.dark .swal2-popup .btn-swal.btn-secondary,
:root.dark .swal3-popup .btn-swal.btn-secondary,
:root.dark .swal2-popup .annulerSwal.btn-secondary,
:root.dark .swal3-popup .annulerSwal.btn-secondary {
  background-color: var(--eb-surface-hover, #252525) !important;
  border-color: var(--eb-border, #333333) !important;
  color: var(--eb-text, #e2e8f0) !important;
}

/* #11677 — Mobile : modale « Envoi d'information à l'événement »
   (mail_evenement.php). Le formulaire (Email/SMS/Notification + Destinataire
   + filtres + Sujet + éditeur TinyMCE) dépasse la hauteur du viewport
   WebView. Le overflow-y de .swal2-container centre la popup et le scroll
   tactile reste piégé par l'iframe TinyMCE → le bouton « Envoyer »
   (data-swal-actions déplacé dans .swal2-actions) reste hors champ. On
   borne la popup à la hauteur du viewport, on scrolle le contenu en
   interne et on garde .swal2-actions ancré en bas, visible. Portée
   verrouillée à cette modale via :has(#submit_message). */
@media (max-width: 768px) {
  .swal2-popup:has(#submit_message),
  .swal3-popup:has(#submit_message) {
    max-height: 100vh !important;
    max-height: 100dvh !important;
  }
  .swal2-popup:has(#submit_message) .swal2-content,
  .swal3-popup:has(#submit_message) .swal3-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .swal2-popup:has(#submit_message) .swal2-actions,
  .swal3-popup:has(#submit_message) .swal3-actions {
    flex-shrink: 0 !important;
    background: var(--bkg-color1) !important;
  }
}