/*
 * Lisibilité commune des fenêtres « Échanger » (#exchangeDetailFormModel), « Ajouter aux contacts »
 * (#askContactDetailFormModel) et « Partager » (#vcardN-shareModel) de TOUS les modèles de carte.
 * Chargée une seule fois par le partiel vcardTemplates/echanger-lisibilite.blade.php (inclus par exchange-ocr et
 * contact-request), avec ?v=filemtime.
 *
 * Couleurs : celles DU MODÈLE. Le script du partiel relève la couleur du bouton « Échanger » de la carte (fond,
 * dégradé ou texte) et la fonce si besoin pour que le texte blanc posé dessus, et ce texte de couleur posé sur du
 * blanc, atteignent au moins 5:1 (WCAG AA : 4,5:1). Sans script, ou pour un modèle sans couleur (gris), on garde
 * les valeurs ci-dessous : un gris anthracite très lisible.
 *   --ech-plein        fond des onglets actifs, du bandeau « Options de sauvegarde », des boutons principaux ;
 *                      couleur des libellés, des contours et des pictogrammes sur fond blanc
 *   --ech-plein-sombre survol des boutons principaux
 *   --ech-sur-plein    texte posé sur --ech-plein (blanc)
 *   --ech-clair        teinte très claire (consigne du scan, champs remplis par le scan, survol)
 *   --ech-bord-clair   contour doux (cadre des options)
 *   --ech-halo         halo du champ ou du bouton actif
 */
:root {
  --ech-plein: #2B3440;
  --ech-plein-sombre: #1C232B;
  --ech-sur-plein: #FFFFFF;
  --ech-clair: #F1F3F5;
  --ech-bord-clair: #C9CED4;
  --ech-halo: rgba(43, 52, 64, 0.25);
  --ech-texte: #212529;
  --ech-doux: #5C636A;
}

/* ------------------------------------------------------------------ fenêtres au premier plan */
/* Les fenêtres sont déplacées directement sous <body> par le script (elles étaient enfermées dans la barre collante
   de la carte, sous le bouton de langue ou le menu flottant). Elles passent au-dessus de tout élément de la carte. */
#exchangeDetailFormModel,
#askContactDetailFormModel {
  z-index: 100010 !important;
}
.modal-backdrop.ech-voile {
  z-index: 100005 !important;
}
/* liste des indicatifs téléphoniques (plein écran sur téléphone) au-dessus de la fenêtre */
.iti--container {
  z-index: 100020 !important;
}
/* alertes SweetAlert2 (modèle 11) au-dessus des fenêtres Échanger et Ajouter aux contacts */
.swal2-container {
  z-index: 100030 !important;
}

/* ------------------------------------------------------------------ socle commun aux deux fenêtres */
:is(#exchangeDetailFormModel, #askContactDetailFormModel) .modal-content {
  background-color: #FFFFFF !important;
  color: var(--ech-texte) !important;
}
:is(#exchangeDetailFormModel, #askContactDetailFormModel) :is(.modal-title, .form-label, h5) {
  color: var(--ech-texte) !important;
}
:is(#exchangeDetailFormModel, #askContactDetailFormModel) .modal-title svg,
:is(#exchangeDetailFormModel, #askContactDetailFormModel) .modal-title i {
  color: var(--ech-plein) !important;
}
:is(#exchangeDetailFormModel, #askContactDetailFormModel) .text-muted {
  color: var(--ech-doux) !important;
}
/* Champs : texte saisi foncé, contour gris, contour et halo de la couleur du modèle quand le champ est actif */
:is(#exchangeDetailFormModel, #askContactDetailFormModel) :is(.form-control, .form-select) {
  color: var(--ech-texte) !important;
  background-color: #FFFFFF !important;
  border: 1px solid #868E96 !important;
}
:is(#exchangeDetailFormModel, #askContactDetailFormModel) :is(.form-control, .form-select)::placeholder {
  color: #6C757D !important;
  opacity: 1;
}
:is(#exchangeDetailFormModel, #askContactDetailFormModel) :is(.form-control, .form-select):focus {
  border-color: var(--ech-plein) !important;
  box-shadow: 0 0 0 0.25rem var(--ech-halo) !important;
  outline: none !important;
}
/* Cases à cocher : blanches bordées de gris, de la couleur du modèle une fois cochées */
:is(#exchangeDetailFormModel, #askContactDetailFormModel) .form-check-input {
  background-color: #FFFFFF !important;
  border: 2px solid var(--ech-plein) !important;
}
:is(#exchangeDetailFormModel, #askContactDetailFormModel) .form-check-input:checked {
  background-color: var(--ech-plein) !important;
  border-color: var(--ech-plein) !important;
}
:is(#exchangeDetailFormModel, #askContactDetailFormModel) .form-check-input:focus {
  border-color: var(--ech-plein) !important;
  box-shadow: 0 0 0 0.25rem var(--ech-halo) !important;
}

/* Boutons du pied de fenêtre : même hauteur, même largeur, même arrondi, libellé entier ; Annuler à gauche (blanc
   bordé de la couleur du modèle), action principale à droite (couleur du modèle, texte blanc) */
:is(#exchangeDetailFormModel, #askContactDetailFormModel) .btn {
  text-transform: none !important;
  letter-spacing: normal !important;
}
:is(#exchangeDetailFormModel, #askContactDetailFormModel) .modal-footer {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px;
  border-top: 1px solid #E9ECEF !important;
}
:is(#exchangeDetailFormModel, #askContactDetailFormModel) .modal-footer > .btn {
  flex: 1 1 0 !important;
  max-width: 220px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 46px;
  margin: 0 !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  box-shadow: none !important;
}
:is(#exchangeDetailFormModel, #askContactDetailFormModel) .modal-footer > .btn :is(i, svg) {
  margin: 0 !important;
}
:is(#exchangeDetailFormModel, #askContactDetailFormModel) .modal-footer > .btn-secondary {
  order: -1;
}
:is(#exchangeDetailFormModel, #askContactDetailFormModel) :is(.btn-primary, .submit-btn),
#exchangeDetailFormModel :is(#exchange-validate-btn, #exchange-capture-photo-btn, #exchange-analyze-card-btn) {
  background: var(--ech-plein) !important;
  border: 1px solid var(--ech-plein) !important;
  color: var(--ech-sur-plein) !important;
}
:is(#exchangeDetailFormModel, #askContactDetailFormModel) :is(.btn-primary, .submit-btn) *,
#exchangeDetailFormModel :is(#exchange-validate-btn, #exchange-capture-photo-btn, #exchange-analyze-card-btn) * {
  color: var(--ech-sur-plein) !important;
}
:is(#exchangeDetailFormModel, #askContactDetailFormModel) :is(.btn-primary, .submit-btn):hover,
#exchangeDetailFormModel :is(#exchange-validate-btn, #exchange-capture-photo-btn, #exchange-analyze-card-btn):hover {
  background: var(--ech-plein-sombre) !important;
  border-color: var(--ech-plein-sombre) !important;
}
:is(#exchangeDetailFormModel, #askContactDetailFormModel) .btn-secondary,
#exchangeDetailFormModel :is(#exchange-rescan-btn, #exchange-choose-gallery-btn) {
  background: #FFFFFF !important;
  border: 1px solid var(--ech-plein) !important;
  color: var(--ech-plein) !important;
}
:is(#exchangeDetailFormModel, #askContactDetailFormModel) .btn-secondary *,
#exchangeDetailFormModel :is(#exchange-rescan-btn, #exchange-choose-gallery-btn) * {
  color: var(--ech-plein) !important;
}
:is(#exchangeDetailFormModel, #askContactDetailFormModel) .btn-secondary:hover,
#exchangeDetailFormModel :is(#exchange-rescan-btn, #exchange-choose-gallery-btn):hover {
  background: var(--ech-clair) !important;
}
:is(#exchangeDetailFormModel, #askContactDetailFormModel) .btn:focus-visible,
#exchangeDetailFormModel .mode-btn:focus-visible {
  box-shadow: 0 0 0 0.25rem var(--ech-halo) !important;
  outline: none !important;
}

/* ------------------------------------------------------------------ fenêtre « Échanger » */
/* Onglets « Saisie manuelle » / « Scanner une carte » : pictogramme au-dessus du libellé, libellé entier */
#exchangeDetailFormModel .exchange-mode-toggle .btn-group {
  display: flex !important;
  height: auto !important;
  overflow: visible !important;
  border-radius: 12px !important;
  align-items: stretch !important;
  box-shadow: none !important;
}
#exchangeDetailFormModel .exchange-mode-toggle .mode-btn {
  flex: 1 1 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 58px;
  margin: 0 !important;
  padding: 8px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px;
  white-space: normal !important;
  line-height: 1.2 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  background: #FFFFFF !important;
  border: 2px solid var(--ech-plein) !important;
  color: var(--ech-plein) !important;
  box-shadow: none !important;
  transform: none !important;
}
#exchangeDetailFormModel .exchange-mode-toggle .mode-btn:first-child { border-radius: 12px 0 0 12px !important; }
#exchangeDetailFormModel .exchange-mode-toggle .mode-btn:last-child { border-radius: 0 12px 12px 0 !important; margin-left: -2px !important; }
#exchangeDetailFormModel .exchange-mode-toggle .mode-btn span {
  margin: 0 !important;
  font-size: 0.9rem !important;
  color: inherit !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
#exchangeDetailFormModel .exchange-mode-toggle .mode-btn :is(svg, i) {
  color: inherit !important;
  font-size: 1.1rem;
  margin: 0 !important;
}
#exchangeDetailFormModel .exchange-mode-toggle .mode-btn:not(.active):hover {
  background: var(--ech-clair) !important;
}
#exchangeDetailFormModel .exchange-mode-toggle .mode-btn.active {
  background: var(--ech-plein) !important;
  border-color: var(--ech-plein) !important;
  color: var(--ech-sur-plein) !important;
  position: relative;
  z-index: 1;
}

/* Bandeau « Options de sauvegarde » (texte blanc sur la couleur du modèle) et choix d'enregistrement */
#exchangeDetailFormModel .card.border-primary {
  border: 1px solid var(--ech-bord-clair) !important;
  border-radius: 12px !important;
  overflow: hidden;
  background: #FFFFFF !important;
}
#exchangeDetailFormModel .card-header.bg-primary {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 8px;
  text-align: left !important;
  background: var(--ech-plein) !important;
  border-bottom: 0 !important;
  font-weight: 600;
  padding: 10px 16px !important;
}
#exchangeDetailFormModel .card-header.bg-primary,
#exchangeDetailFormModel .card-header.bg-primary * {
  color: var(--ech-sur-plein) !important;
}
#exchangeDetailFormModel .card-header.bg-primary :is(svg, i) {
  margin: 0 !important;
}
#exchangeDetailFormModel .form-check-label strong {
  color: var(--ech-plein) !important;
}
#exchangeDetailFormModel .form-check-label small {
  color: var(--ech-doux) !important;
}

/* Onglet « Scanner une carte » : consigne, boutons de prise de vue, aperçu, analyse, résultat */
#exchangeDetailFormModel .scan-instructions {
  background: var(--ech-clair) !important;
  border: 1px solid var(--ech-bord-clair);
  color: var(--ech-texte) !important;
}
#exchangeDetailFormModel .scan-instructions :is(svg, i),
#exchangeDetailFormModel .spinner-border {
  color: var(--ech-plein) !important;
}
#exchangeDetailFormModel #exchange-loading-ocr :is(h5, p) {
  color: var(--ech-texte) !important;
}
#exchangeDetailFormModel #exchange-loading-ocr .text-muted {
  color: var(--ech-doux) !important;
}
#exchangeDetailFormModel #exchange-capture-buttons .btn {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  white-space: normal !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  transform: none !important;
}
#exchangeDetailFormModel #exchange-capture-buttons .btn :is(svg, i) {
  margin: 0 !important;
}
#exchangeDetailFormModel #exchange-analyze-card-btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
}
#exchangeDetailFormModel #exchange-image-preview {
  border-color: var(--ech-plein) !important;
}
#exchangeDetailFormModel .progress {
  background-color: #E9ECEF !important;
}
#exchangeDetailFormModel #exchange-ocr-progress-bar {
  background-color: var(--ech-plein) !important;
  color: var(--ech-sur-plein) !important;
  /* rayures animées plus sombres que la barre (les rayures blanches d'origine éclaircissaient le fond sous « 45% ») */
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.18) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.18) 50%, rgba(0, 0, 0, 0.18) 75%, transparent 75%, transparent) !important;
}
#exchangeDetailFormModel #exchange-ocr-progress-text {
  color: var(--ech-sur-plein) !important;
}
#exchangeDetailFormModel #exchange-result-section .alert-success {
  background: var(--ech-clair) !important;
  border: 1px solid var(--ech-bord-clair) !important;
}
#exchangeDetailFormModel #exchange-result-section .alert-success,
#exchangeDetailFormModel #exchange-result-section .alert-success * {
  color: var(--ech-texte) !important;
}
#exchangeDetailFormModel #exchange-result-section .alert-success :is(svg, i) {
  color: var(--ech-plein) !important;
}
/* champs remplis par le scan : surlignés de la couleur du modèle (et non plus en vert) */
#exchangeDetailFormModel .auto-filled {
  background-color: var(--ech-clair) !important;
  border-color: var(--ech-plein) !important;
  color: var(--ech-texte) !important;
}

/* ------------------------------------------------------------------ fenêtre « Ajouter aux contacts » */
#askContactDetailFormModel .modal-header p {
  color: var(--ech-doux) !important;
}
#askContactDetailFormModel .iti__selected-flag,
#askContactDetailFormModel .iti__selected-dial-code {
  color: var(--ech-texte) !important;
}

/* ------------------------------------------------------------------ fenêtres « Partager » de tous les modèles */
/* La croix de fermeture : bouton carré de 44 px, entièrement dans la fenêtre (son cadre dépassait du bord droit
   sur plusieurs modèles, jusqu'à couper la croix sur téléphone) */
[id$="-shareModel"] .modal-content button[data-bs-dismiss="modal"].btn-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 44px !important;
}
[id$="-shareModel"] .modal-content .col-2:has(> button[data-bs-dismiss="modal"]) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
}
[id$="-shareModel"] .modal-content button[data-bs-dismiss="modal"].btn-icon :is(svg, .svg-icon) {
  margin: 0 !important;
}

/* Modèle 30 (menu flottant « taxi-bars-btn ») : la rubrique profil (z-index 99) passait par-dessus le menu flottant,
   le bouton « Partager » ne pouvait pas être touché */
.btn-section:has(.taxi-bars-btn) {
  z-index: 100 !important;
}