/* ============================================================================
   LesSuites.css
   ---------------------------------------------------------------------------
   Feuille de styles commune à La Suite Notariale (LSN) et La Suite Immo (LSI).
   À charger APRÈS bootstrap.css et awDefault*.css, AVANT lsn.css / lsi.css.
   
   Emplacement source de référence : C:\VHDev\Fichiers\LesSuites.css
   Propagation : via Update_App_Cus + Update_Site (cSiteSkelInclude inclut
   'LesSuites.css' dans les sous-classes lsnServerUpdate / lsiServerUpdate).
   
   Convention de nommage :
   - Classes custom Vincent : démarrent par MAJUSCULE (.Footer, .FillAvailable…)
     pour les distinguer des classes Bootstrap rigoureusement en kebab-case
     minuscule.
   
   /!\ Encodé en UTF-8. Utiliser un éditeur supportant UTF-8 (Sublime Text,
   NotePad++, PSpad…)
   ============================================================================ */


/* ============================================================================
   1. PALETTE DE COULEURS — VARIABLES CSS
   ---------------------------------------------------------------------------
   Variables communes aux deux suites. Les CSS spécifiques (lsn.css, lsi.css)
   peuvent en redéfinir certaines (notamment --ls-primary, voir leur :root).
   ============================================================================ */

:root {
  /* Couleurs sémantiques communes */
  --ls-success:        #2ECC71;   /* vert validation */
  --ls-success-step:   #4DD486;   /* vert étape valide (utilisé surtout par LSI) */
  --ls-danger:         #D9534F;   /* rouge danger / annulation */
  --ls-text-muted:     #6E777E;   /* gris bleu pour texte secondaire */
  
  /* Fonds communs */
  --ls-header-bg:      #F1F3F48F; /* gris transparent — fond modal-header
                                     ET fond Footer (harmonisation header/footer) */
  --ls-neutral-bg:     #F0F0F0;   /* gris clair de séparation */
  --ls-neutral-bg-light: #F6F6F6; /* gris très clair (background body) */
}


/* ============================================================================
   2. SURCHARGES BOOTSTRAP
   ============================================================================ */

.modal-header {
  background: var(--ls-header-bg);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.modal-header .modal-title {
  margin: -0.75rem -1rem;
  padding: 0.75rem 1rem;
  font-size: 1.4rem;
  font-weight: 600;
}

select > option {
  padding: 4px;
}

select > option[disabled] {
  color: lightgray;
}

body.bootstrap .dropdown-menu {  /* notamment dropdown et listeauto */
  font-size: smaller;
}

.input-group .btn-outline-secondary {
  border-color: #ced4da;
  z-index: 1;   /* 2 par défaut - masque la liste des codes téléphoniques */
}

.form-switch .form-check-input {
  height: 1.2em;
}

.nav-pills .nav-link.active {
  background: transparent;
  color: var(--bs-primary);
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-radius: unset;
}

.tooltip-inner {
  border-color: gray;
  border-style: solid;
  border-width: 1px;
  font-size: 80%;
  background-color: white;
  color: black;
}

.popover-body {
  background-color: white;
}

.form-check-label {
  width: max-content;
}

.checkbox {
  margin-top: 4px;
}

select.MultiColumnList {
  font-family: 'courier new';
}


/* ============================================================================
   3. UTILITAIRES CUSTOM
   ============================================================================ */

.FillAvailable {
  width: -moz-available;          /* WebKit-based browsers will ignore this. */
  width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
}

.floatRight {
  float: right;
}

.etiqLarge {
  width: max-content;
}

.iti {
  /* margin-left: -0.2rem; */
  z-index: 20;
}

.lidrag {
  list-style-type: none;
  margin: 5px;
  padding: 2px 5px 2px 10px;
  border-radius: 4px;
}

.node-icon {
  padding-right: 1em;
}

.awCntGetPict {
  border-radius: 4px;
  border-color: lightgray !important;
  padding-bottom: 0 !important;
}

.etiquette {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  /* font-weight: 700;  -- harmonisé : commenté selon décision (version LSN retenue) */
}

.awBSgrp-retirer {
  text-align: left;
}

.awBSgrp-bouton1 {   /* Dialogue.scx */
  float: right;
}


/* ============================================================================
   4. BOUTONS Doo-* COMMUNS
   ============================================================================ */

.doo-transparent {
  background-color: transparent!important;
  border-color: lightgray!important;
}

/* HARMONISATION : version LSN retenue (plus neutre, sans couleur identitaire).
   LSI conservait un fond bleu ciel #19ACF1 au survol — supprimé par décision. */
.doo-transparent:hover {
  border-color: gray!important;
  color: black!important;
}

.btn.doo-valider:not([disabled]):hover {
  background-color: var(--ls-success);
  color: #FFFFFF;
}

.btn.doo-retirer:hover,
.btn.doo-effacer:hover,
.btn.doo-annuler:hover {
  background-color: var(--ls-danger);
  color: #FFFFFF;
}

.doo-importscan {
  display: inline-flex;
}


/* ============================================================================
   5. ÉCRANS COMMUNS
   ============================================================================ */

/* Dialogue générique */
.dialogue_scx .form-group.awBSgrp-bouton1 { /* 2017-04-21 thn */
  padding-left: 100px;
  text-align: center;
}

.Window_vhcfrmmb {
  max-width: 36em;
}

#coordon_scx-telselect {
  margin-left: -0.2em;
}

/* Écran de connexion */
#Window_connexion_scx {     /* #Window indispensable */
  background-color: white;
  opacity: 0.55;
  padding: 1.5rem;
  border-radius: 0.75rem;
}

#connexion_scx_body {
  background: url(images/jumbotron.jpg) no-repeat center center fixed;
  background-size: cover;
  margin-top: 3rem;
}

#connexion_scx-code {
  border-right-style: none;
}

#connexion_scx-password {
  border-left-style: none;
}

/* Effet de fondu sur écrans à animation (cf. JS qui anime opacity ensuite) */
#nouveautes_scx,
#apercu_scx {     /* Pour l'effet de fondu */
  opacity: 0;
}

/* Désignation lot */
#designelot_scx .row-nbchambres {
  /* background: #F6F6F6; */
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 2rem;
}

/* PV immo */
#pvimmo_scx .Saisiepvu {
  width: 95%;
  float: right;
}


/* ============================================================================
   6. ANIMATIONS
   ============================================================================ */

@keyframes animate-positive {
  0%{ width: 0; }
}


/* ============================================================================
   7. FOOTER MIMÉ (ex Footer.css v7)
   ---------------------------------------------------------------------------
   Mime le comportement d'un <div class="modal-footer"> Bootstrap 5.3+
   pour les rows FiC qui contiennent les boutons d'action en bas des forms.
   
   ACTIVATION AUTOMATIQUE par convention de nommage :
     toute row contenant en enfant direct un col dont la classe contient
     « col-fermer », « col-abandon », « col-aide » ou « col-quitter » (suffixes « 1 », « 2 »…
     compris).
   
   ACTIVATION MANUELLE par classe opt-in :
     ajouter la classe « Footer » à la row (par exemple via
     wCSclassAdd = "Footer" sur le container parent côté .sc2).
     Utile pour les écrans atypiques (dropdown à gauche, conventions de
     nommage différentes, etc.).
   
   Compatible :has() : navigateurs modernes (≥ fin 2023).
   Note : la spec CSS interdit l'imbrication de :has() dans un autre :has().
   ============================================================================ */


/* 7.1 Conteneur footer : reproduction du comportement modal-footer Bootstrap
   (display: flex, alignement à droite, wrap natif). Étendu de bord à bord du
   modal-content via marges négatives qui compensent le padding-x du modal-body. */
.row:has(> [class*="col-fermer"]),
.row:has(> [class*="col-abandon"]),
.row:has(> [class*="col-aide"]),
.row:has(> [class*="col-quitter"]),
.row.Footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: stretch;  /* stretch (au lieu de center) : toutes les cols
                            étirées à la même hauteur = hauteur max.
                            L'alignement vertical du contenu est délégué aux
                            cols (section 7.2) pour rester robuste face aux
                            différences de hauteur de boutons (fa-lg, etc.). */
  justify-content: flex-end;
  
  padding: var(--bs-modal-footer-padding-y, 0.75rem)
           var(--bs-modal-footer-padding-x, 0.75rem);
  
  /* Fond harmonisé avec le modal-header (même variable --ls-header-bg) */
  background-color: var(--ls-header-bg);
  
  /* Bordure supérieure visible — utilise --bs-border-color-translucent
     (gris légèrement sombre, BS 5.3+) au lieu de --bs-border-color qui se
     confond avec le fond gris du footer. Cohérent visuellement avec la
     bordure inférieure du modal-header Bootstrap natif. */
  border-top: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.175));
  
  margin-top: 1.5rem;
  margin-bottom: 0;
  margin-left: calc(-1 * var(--bs-modal-padding, 1rem));
  margin-right: calc(-1 * var(--bs-modal-padding, 1rem));
}


/* 7.2 Cols enfants : neutralisation de la grille (col-12, col-lg-X, col-xl-Y…).
   Chaque col prend sa largeur naturelle (bouton, btn-group, dropdown…) et
   centre verticalement son contenu (couplé à align-items: stretch sur le row,
   garantit que tous les boutons restent visuellement alignés peu importe leur
   hauteur intrinsèque : icônes fa-lg, btn-group, etc.). */
.row:has(> [class*="col-fermer"])  > [class*="col-"],
.row:has(> [class*="col-abandon"]) > [class*="col-"],
.row:has(> [class*="col-aide"])    > [class*="col-"],
.row:has(> [class*="col-quitter"]) > [class*="col-"],
.row.Footer                        > [class*="col-"] {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin: calc(var(--bs-modal-footer-gap, 0.5rem) * .5);
}


/* 7.3 Premier col = poussé à gauche via margin-right auto, UNIQUEMENT s'il
   n'est pas seul. Si seul, il reste aligné à droite (par défaut du flex). */
.row:has(> [class*="col-fermer"])  > [class*="col-"]:first-child:not(:only-child),
.row:has(> [class*="col-abandon"]) > [class*="col-"]:first-child:not(:only-child),
.row:has(> [class*="col-aide"])    > [class*="col-"]:first-child:not(:only-child),
.row:has(> [class*="col-quitter"]) > [class*="col-"]:first-child:not(:only-child),
.row.Footer                        > [class*="col-"]:first-child:not(:only-child) {
  margin-right: auto;
}


/* 7.3bis Dernier col plaqué à droite, en complément symétrique de la 7.3.
   FoxInCloud génère automatiquement des classes Bootstrap offset-*-X
   (offset-sm-2, offset-md-4, etc.) à partir de la position pixel des
   contrôles dans le SCX (cf. awhtml.prg lignes 2671-2686). Ces offsets
   réinjectent un margin-left responsive à chaque breakpoint Bootstrap,
   ce qui repousse le bouton de fermeture vers le centre/centre-droit du
   footer au lieu du bord droit. Forcer margin-left: auto sur le dernier
   col absorbe tout l'espace libre côté gauche et plaque le col à droite.
   !important nécessaire car les media-queries Bootstrap re-déclarent
   margin-left pour offset-X à chaque taille d'écran. */
.row:has(> [class*="col-fermer"])  > [class*="col-"]:last-child:not(:only-child),
.row:has(> [class*="col-abandon"]) > [class*="col-"]:last-child:not(:only-child),
.row:has(> [class*="col-aide"])    > [class*="col-"]:last-child:not(:only-child),
.row:has(> [class*="col-quitter"]) > [class*="col-"]:last-child:not(:only-child),
.row.Footer                        > [class*="col-"]:last-child:not(:only-child) {
  margin-left: auto !important;
}


/* 7.4 Neutralisation des marges parasites héritées des conventions VFP/FiC :
   « my-5 » sur les boutons (ancrage manuel en bas, devenu inutile). */
.row:has(> [class*="col-fermer"])  button.my-5,
.row:has(> [class*="col-abandon"]) button.my-5,
.row:has(> [class*="col-aide"])    button.my-5,
.row:has(> [class*="col-quitter"]) button.my-5,
.row.Footer                        button.my-5 {
  margin-top: 0;
  margin-bottom: 0;
}


/* 7.4bis Wrappers intermédiaires .mb-3 rendus transparents au layout flex.
   FoxInCloud génère parfois un wrapper <div class="mb-3 awBSgrp-…"> autour
   des btn-group dans les cols du footer. Ce wrapper, en display: block, prend
   toute la hauteur de sa col (étirement implicite) et positionne le btn-group
   en HAUT au lieu de le centrer. Un bouton SEUL dans une col sans wrapper est
   centré correctement → décalage vertical de 8px entre les deux côtés.

   display: contents fait DISPARAÎTRE le wrapper structurellement : ses enfants
   (le btn-group) deviennent flex-items directs de la col, et le centrage flex
   s'applique correctement à tous les boutons.
   Support universel : Chrome 65+, Firefox 37+, Safari 11.1+. */
.row:has(> [class*="col-fermer"])  > [class*="col-"] > .mb-3,
.row:has(> [class*="col-abandon"]) > [class*="col-"] > .mb-3,
.row:has(> [class*="col-aide"])    > [class*="col-"] > .mb-3,
.row:has(> [class*="col-quitter"]) > [class*="col-"] > .mb-3,
.row.Footer                        > [class*="col-"] > .mb-3 {
  display: contents;
}


/* 7.4ter Neutralisation du float dans la zone footer.
   La classe utilitaire .floatRight (float: right) sort les boutons du flow
   et casse l'alignement vertical du flex parent. On annule l'effet ici
   sans toucher à la classe (qui reste utilisable ailleurs dans l'app). */
.row:has(> [class*="col-fermer"])  .floatRight,
.row:has(> [class*="col-abandon"]) .floatRight,
.row:has(> [class*="col-aide"])    .floatRight,
.row:has(> [class*="col-quitter"]) .floatRight,
.row.Footer                        .floatRight {
  float: none;
}


/* 7.4quater Alignement vertical robuste du contenu interne de chaque bouton.
   FontAwesome 4 applique vertical-align: -15% sur les icônes .fa-lg, ce qui
   peut décaler le contenu vers le bas dans un bouton block. En transformant
   le bouton lui-même en mini flex container avec align-items: center, on
   centre son contenu (icône + texte) indépendamment des vertical-align
   hérités. Règle défensive — inoffensive si non strictement nécessaire. */
.row:has(> [class*="col-fermer"])  button,
.row:has(> [class*="col-abandon"]) button,
.row:has(> [class*="col-aide"])    button,
.row:has(> [class*="col-quitter"]) button,
.row.Footer                        button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;   /* AJOUT : espace icône↔texte */
}


/* 7.5 Suppression du padding-bottom du modal-body lorsqu'il contient un Footer
   mimé. Évite l'espace blanc entre le bord inférieur du footer et le bord du
   modal-content. NB : :has() ne peut pas être imbriqué dans un autre :has(). */
.modal-body:has([class*="col-fermer"]),
.modal-body:has([class*="col-abandon"]),
.modal-body:has([class*="col-aide"]),
.modal-body:has([class*="col-quitter"]),
.modal-body:has(.Footer) {
  padding-bottom: 0;
}


/* 7.6 En mode plein écran, le footer mimé est poussé au bas via une chaîne
   flex column ininterrompue depuis le container racine jusqu'au row footer.
   La classe .modal-fullscreen est posée dynamiquement par la méthode Render()
   du form (cf. MethodeRender.prg) sur deux éléments selon le contexte :
   - Page standalone : sur le <div class="container"> enfant du body
                       (via jQuery('#<wcID>_body > div').addClass)
   - Modal popup     : sur le <div class="modal-dialog"> du modal Bootstrap
                       (via jQuery('#modal-<wcID> > div').addClass)
   La structure DOM diffère entre les deux cas, d'où le double jeu de sélecteurs.
   En mode modal normal (taille fixe), aucun de ces sélecteurs ne matche :
   margin-top: auto reste sans effet visible, comportement par défaut conservé. */

/* Cas page standalone : chaîne container > div > form.bootstrap */
.container.modal-fullscreen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container.modal-fullscreen > div,
.container.modal-fullscreen .awForm-middle,
.container.modal-fullscreen .form.bootstrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Cas modal popup Bootstrap : chaîne modal-body > form.bootstrap */
.modal-fullscreen .modal-body {
  display: flex;
  flex-direction: column;
}

.modal-fullscreen .modal-body > .form.bootstrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Row footer plaqué en bas via margin-top: auto, dans les deux cas */
.container.modal-fullscreen .row[class*="row-fermer"],
.container.modal-fullscreen .row[class*="row-abandon"],
.container.modal-fullscreen .row[class*="row-aide"],
.container.modal-fullscreen .row[class*="row-quitter"],
.container.modal-fullscreen .row.Footer,
.modal-fullscreen .modal-body > .form.bootstrap > .row[class*="row-fermer"],
.modal-fullscreen .modal-body > .form.bootstrap > .row[class*="row-abandon"],
.modal-fullscreen .modal-body > .form.bootstrap > .row[class*="row-aide"],
.modal-fullscreen .modal-body > .form.bootstrap > .row[class*="row-quitter"],
.modal-fullscreen .modal-body > .form.bootstrap > .row.Footer {
  margin-top: auto;
}