/* ═══════════════════════════════════════════════════════════════════
   app-ui.css — Couche applicative d'overrides UI (ex-bloc <style> de
   header.php, migré pour une maintenance 100% via .css).
   IMPORTANT : doit être chargé EN DERNIER (après modern-design.css) pour
   conserver la priorité sur Bootstrap, les plugins et modern-design.
   ═══════════════════════════════════════════════════════════════════ */
/* Les design tokens vivent dans modern-design.css (:root --ds-*, --accent-*…).
   Aucun token redéfini ici : ce fichier ne contient que des overrides UI. */

/* ════════════════════════════════════════════════════════════════════
   MODAL — styles prioritaires (inline HTML = dernier dans la cascade,
   gagne sur tout CSS externe y compris Bootstrap CDN et modern-design)
   ════════════════════════════════════════════════════════════════════ */

/* 1 — Backdrop : noir semi-transparent, tous les états Bootstrap */
.modal-backdrop           { background-color:rgba(0,0,0,0.45)!important; opacity:1!important; }
.modal-backdrop.fade      { background-color:rgba(0,0,0,0.45)!important; opacity:1!important; }
.modal-backdrop.show      { background-color:rgba(0,0,0,0.45)!important; opacity:1!important; }
.modal-backdrop.fade.show { background-color:rgba(0,0,0,0.45)!important; opacity:1!important; }

/* 1bis — CORRECTIF EMPILEMENT (modales/volets grisés).
   `main.auxi-data-workspace` porte `z-index:1` (mécanisme de fond de page) et crée donc
   un CONTEXTE D'EMPILEMENT. Or le #modal est imbriqué DANS <main> : son z-index (1055/1056)
   restait piégé sous ce niveau 1, tandis que le .modal-backdrop (z-index:1050, enfant de
   <body>) se peignait PAR-DESSUS le volet → contenu de la modale assombri/grisé.
   Le temps qu'une modale est ouverte (body.modal-open), on neutralise le contexte
   d'empilement de main : la modale repasse au-dessus du backdrop. Le reste du contenu
   (main > *, z-index:1) demeure SOUS le backdrop → l'assombrissement de fond est préservé.
   Hors modale, rien ne change (z-index:1 conservé). */
body.modal-open main.auxi-data-workspace { z-index: auto!important; }

/* 2 — Card modale : fond blanc garanti, bordure nette + ombre franche (détachement du fond clair) */
.modal-content {
  background:    #ffffff!important;
  border-radius: 12px!important;
  border:        1px solid #E2E8F0!important;
  box-shadow:    0 12px 48px rgba(16,24,40,.22), 0 2px 8px rgba(16,24,40,.12)!important;
}

/* 2bis — Contenu des modales & du volet latéral : fond BLANC OPAQUE garanti.
   Le #modal est imbriqué dans <main>, donc les surfaces « glass » de l'app
   (tableaux, cartes, autocomplétion : 52–70 % blanc + backdrop-filter, pensées
   pour le FOND DE PAGE) s'appliquaient au contenu des modales et le rendaient
   translucide/givré → perçu « gris ». On les force en blanc plein, sans flou. */
.modal-content .table-responsive,
.modal-content .card,
.modal-content .fiche .card,
.modal-content .panneau-fiche .card,
.modal-content .card.texture,
.modal-content #suggestions,
.modal-content .autocomplete__menu {
  background-color: #ffffff!important;
  background-image: none!important;
  backdrop-filter: none!important;
  -webkit-backdrop-filter: none!important;
}

/* 3 — En-têtes de modale : fond BLANC (même que le corps) = look épuré/allégé,
       le titre (marine, gras) suffit à la hiérarchie. Fin séparateur seulement. */
.modal-header,
.modal-header.bg-info,
.modal-header.bg-warning,
.modal-header.bg-danger,
.modal-header.bg-success,
.modal-header.text-white {
  background-color:#ffffff!important;
  border-bottom: 1px solid #E2E8F0!important;
  border-radius: 12px 12px 0 0!important;
  padding: .85rem 1.1rem!important;
}
.modal-header *, .modal-header.bg-info *, .modal-header.bg-warning *,
.modal-header.bg-danger *, .modal-header.bg-success *, .modal-header.text-white * {
  color:#475569!important;
}

/* 4 — Bouton × fermer */
.modal-header .close { color:#64748b!important; text-shadow:none!important; opacity:1!important; }

/* 5 — Boutons dans n'importe quel container de la modale */
.modal .btn-primary, .modal .btn-success, .modal .btn-info,
.modal-footer .btn-primary, .modal-footer .btn-success, .modal-footer .btn-info,
#validerCheck, #continue-session-btn,
[id^="valider"], [id^="continuer"], [id^="enregistrer"], #enregistrer {
  background-color:#1e3a8a!important; border-color:#1e3a8a!important;
  color:#ffffff!important; border-radius:8px!important;
}
.modal .btn-primary:hover, .modal .btn-success:hover, .modal .btn-info:hover,
.modal-footer .btn-primary:hover, .modal-footer .btn-success:hover, .modal-footer .btn-info:hover,
#validerCheck:hover, #continue-session-btn:hover,
[id^="valider"]:hover, [id^="continuer"]:hover, [id^="enregistrer"]:hover, #enregistrer:hover {
  background-color:#15306e!important; border-color:#15306e!important;
}
.modal .btn-danger, .modal-footer .btn-danger {
  background-color:var(--ds-danger)!important; border-color:var(--ds-danger)!important;
  color:#ffffff!important; border-radius:8px!important;
}
.modal .btn-secondary, .modal .btn-light, .modal .btn-outline-secondary,
.modal-footer .btn-secondary, .modal-footer .btn-light {
  background:transparent!important; border:0.5px solid #E2E8F0!important;
  color:#475569!important; border-radius:8px!important;
}
.btn-outline-white {
  background:transparent!important; border:0.5px solid #1e3a8a!important;
  color:#1e3a8a!important; border-radius:8px!important;
}

/* 5b — Actions DESTRUCTRICES en ROUGE sémantique (priment sur le marine des [id^="valider"]
        car déclarées plus loin dans la même feuille inline) */
[id^="validerSuppression"], [id^="validerSuspension"], [id^="validerDesaffectation"],
[id^="validerAnonymisation"], #validerEchecMission, #validerRadiation {
  background-color:var(--ds-danger)!important; border-color:var(--ds-danger)!important; color:#ffffff!important;
}
[id^="validerSuppression"]:hover, [id^="validerSuspension"]:hover, [id^="validerDesaffectation"]:hover,
[id^="validerAnonymisation"]:hover, #validerEchecMission:hover, #validerRadiation:hover {
  background-color:var(--ds-danger-hover)!important; border-color:var(--ds-danger-hover)!important;
}

/* 5c — État DÉSACTIVÉ perceptible (RGAA) : gris franc, pas une simple opacité */
.btn:disabled, .btn.disabled {
  background-color:#E2E8F0!important; border-color:#E2E8F0!important;
  color:#64748b!important; opacity:1!important; cursor:not-allowed!important; box-shadow:none!important;
}

/* 5d — DÉCLENCHEURS destructifs en ROUGE dès la barre d'action (« danger-at-trigger »).
        Périmètre strict : Supprimer (#suppression, missions ind. & coll.), Échouer (#echec),
        Radier (#radier), Anonymiser (#anonymiser). Désaffecter/Suspendre/Désuspendre/Déradier
        restent marine. Rouge OUTLINE au repos (cohérent avec la barre), PLEIN au survol/focus
        → escalade vers le rouge plein de la confirmation. Uniquement à l'état ACTIF
        (un bouton .inactif/.disabled garde son apparence neutre, il n'est pas cliquable). */
#suppression:not(.inactif):not(.disabled):not(:disabled),
#echec:not(.inactif):not(.disabled):not(:disabled),
#radier:not(.inactif):not(.disabled):not(:disabled),
#anonymiser:not(.inactif):not(.disabled):not(:disabled) {
  background-color:transparent!important; border:1px solid var(--ds-danger)!important;
  color:var(--ds-danger)!important;
}
#suppression:not(.inactif):not(.disabled):not(:disabled):hover,
#suppression:not(.inactif):not(.disabled):not(:disabled):focus-visible,
#echec:not(.inactif):not(.disabled):not(:disabled):hover,
#echec:not(.inactif):not(.disabled):not(:disabled):focus-visible,
#radier:not(.inactif):not(.disabled):not(:disabled):hover,
#radier:not(.inactif):not(.disabled):not(:disabled):focus-visible,
#anonymiser:not(.inactif):not(.disabled):not(:disabled):hover,
#anonymiser:not(.inactif):not(.disabled):not(:disabled):focus-visible {
  background-color:var(--ds-danger)!important; border-color:var(--ds-danger)!important; color:#ffffff!important;
}
/* L'icône suit la couleur du texte (neutralise un éventuel .text-white sur l'icône) */
#suppression:not(.inactif):not(.disabled):not(:disabled) i,
#echec:not(.inactif):not(.disabled):not(:disabled) i,
#radier:not(.inactif):not(.disabled):not(:disabled) i,
#anonymiser:not(.inactif):not(.disabled):not(:disabled) i { color:inherit!important; }

/* 5e — Boutons d'action INACTIFS (verrou contextuel `.inactif`, clic bloqué côté JS) :
        apparence DÉSACTIVÉE explicite, identique à .btn:disabled (RGAA). Évite qu'un
        bouton non cliquable (ex. Supprimer sur une mission affectée, Échouer hors période)
        paraisse actif. Périmètre `.btn` uniquement → n'affecte pas les puces du menu
        d'accueil (.inactif y a déjà son propre traitement). */
.btn.inactif,
.btn.inactif:hover,
.btn.inactif:focus,
.btn.inactif:focus-visible {
  background-color:#E2E8F0!important; border-color:#E2E8F0!important;
  color:#64748b!important; opacity:1!important; cursor:not-allowed!important; box-shadow:none!important;
}
.btn.inactif i { color:#64748b!important; }

/* 6 — Taille intermédiaire : la classe `modal-md` employée par le JS n'existe PAS
       en Bootstrap 4 (la modale retombait sur 500px, d'où l'effet « trop petite »).
       On lui donne une largeur réelle, intermédiaire entre modal-dialog et modal-lg. */
.modal-dialog.modal-md { max-width: 580px!important; }

/* 7 — Centrage ROBUSTE des modales (corrige « modale collée en bas / mal centrée »).
       Positionnement fixe au centre du viewport : indépendant du scroll de la page ET
       de la hauteur du contenu (court ou long). Le contenu long défile dans la modale. */
.modal.show:not(.auxi-drawer) .modal-dialog,
.modal.show:not(.auxi-drawer) .modal-dialog-centered {
  position: fixed!important;
  top: 50%!important;
  left: 50%!important;
  transform: translate(-50%, -50%)!important;
  margin: 0!important;
  min-height: 0!important;
  display: block!important;
  width: calc(100% - 2rem)!important;
}
.modal.show:not(.auxi-drawer) .modal-content {
  max-height: calc(100vh - 2.5rem)!important;
  /* dvh : sur Safari/iOS, 100vh ignore la barre d'adresse → contenu tronqué.
     L'unité dvh suit la hauteur réellement visible. Les navigateurs sans dvh
     ignorent cette 2e ligne et conservent le calc(100vh) ci-dessus. */
  max-height: calc(100dvh - 2.5rem)!important;
  overflow-y: auto!important;
  -webkit-overflow-scrolling: touch!important; /* momentum scroll iOS */
}

/* 8 — DRAWER : les formulaires d'ÉDITION et de CONTENU (édition fiche/mission,
       création/duplication mission, recherches, historique, référentiel, config
       sécurité, téléphonie…) glissent depuis la droite en panneau plein-hauteur.
       Largeur ~760px (préserve les grilles denses des formulaires, conçues pour
       800px). Seules les modales de CONFIRMATION (oui/non) et d'ALERTE
       (succès/erreur/avertissement) restent centrées (règle ci-dessus, scopée
       :not(.auxi-drawer)). Le backdrop statique est conservé → pas de fermeture
       accidentelle (saisie protégée). */
.modal.auxi-drawer { padding: 0!important; }
.modal.auxi-drawer .modal-dialog {
  position: fixed!important;
  top: 0!important; right: 0!important; bottom: 0!important; left: auto!important;
  margin: 0!important;
  width: min(760px, 96vw)!important;
  max-width: 760px!important;
  height: 100vh!important; min-height: 100vh!important;
  height: 100dvh!important; min-height: 100dvh!important; /* Safari/iOS : suit la zone visible */
  transform: translateX(100%)!important;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1)!important;
  display: block!important;
}
.modal.auxi-drawer.show .modal-dialog { transform: translateX(0)!important; }
.modal.auxi-drawer .modal-content {
  height: 100vh!important; max-height: 100vh!important; width: 100%!important;
  height: 100dvh!important; max-height: 100dvh!important; /* Safari/iOS : évite la troncature du bas du drawer */
  border-radius: 0!important; border: 0!important; border-left: 1px solid #E2E8F0!important;
  box-shadow: -12px 0 48px rgba(16, 24, 40, .18)!important;
  overflow-y: auto!important;
  -webkit-overflow-scrolling: touch!important; /* momentum scroll iOS dans le drawer */
  /* Tableaux larges (recherches, aperçus d'import) : scroll horizontal plutôt que troncature. */
  overflow-x: auto!important;
}
/* R7 — Sous 768px (tablette portrait, mobile, iPhone paysage) le volet latéral
   couvre tout l'écran : à 760px de large il occupait déjà ~96vw sans le confort
   d'un vrai plein écran. On bascule en panneau plein écran sous md. Desktop (≥768px)
   inchangé (le volet reste à min(760px, 96vw)). */
@media (max-width: 767.98px) {
  .modal.auxi-drawer .modal-dialog { width: 100vw!important; max-width: 100vw!important; }
  .modal.auxi-drawer .modal-content { border-left: 0!important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Contexte FRONT-OFFICE : fond gris garanti (remplace l'ancien <style>
   conditionnel inline de header.php). La classe est posée sur <body> par
   header.php selon currentPageContext. Maintenance 100% en .css.
   ═══════════════════════════════════════════════════════════════════ */
body.auxi-ctx-front {
  /* #E2E8F0 (Slate-200) : aligné sur le fond back-office (--auxi-app-bg-gradient)
     pour un contraste cohérent avec les cartes blanches sur toute l'application. */
  background-color: #E2E8F0 !important;
  background-image: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Styles migrés depuis l'inline du layout/vues (objectif : 100% via .css)
   ═══════════════════════════════════════════════════════════════════ */
/* Barre de navigation : fin séparateur bas (ex-inline header.php) */
.navbar.auxi-navbar-compact {
  box-shadow: 0 1px 0 rgba(0,0,0,0.05) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
/* Marque (logo) — monogramme « A » blanc sur tuile marine arrondie.
   SVG décoratif (aria-hidden) : le nom accessible reste le wordmark « Auxi-DV ». */
.auxi-brand-mark {
  width: 24px; height: 24px;
  margin-right: 9px; vertical-align: middle;
  flex-shrink: 0; display: inline-block;
}
.auxi-brand-mark__tile { fill: var(--ds-brand); }
.auxi-brand-mark__a {
  fill: none; stroke: #ffffff; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Liste de suggestions (recherche participant) — ex-inline */
#suggestions {
  position: absolute; top: 100%; left: 0; z-index: 1050; width: 100%;
  background: #ffffff; border: 1px solid #E2E8F0;
  border-radius: 0 0 .25rem .25rem; display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HARMONISATION BOUTONS (LOT 3) — CSS-only, aucun markup modifié
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Boutons « vider un champ » (✕) : bordure claire de charte UNIFORME.
      Neutralise le border-dark (#343a40) des modales d'édition pour matcher
      la bordure claire des recherches → aspect homogène partout. */
button.effacer.border-dark,
.input-group-append button.border-disabled,
.input-group-append button.effacer {
  border-color: var(--ds-input-border) !important;
  background-color: #ffffff !important;
}
button.effacer i.fa-times,
.input-group-append button.border-disabled i.fa-times {
  color: var(--ds-gray-700) !important;
}
button.effacer:hover,
.input-group-append button.border-disabled:hover,
.input-group-append button.effacer:hover {
  background-color: var(--ds-gray-100) !important;
}

/* 2. Bouton « Réinitialiser » des filtres (5 pages de recherche, id partagé) :
      btn-light fade -> contour marine discret, cohérent charte premium. */
#initialisationFiltresRecherche.btn.btn-light {
  background-color: #ffffff !important;
  color: var(--ds-brand) !important;
  border: 1px solid var(--ds-brand-border) !important;
  border-radius: 8px !important;
}
#initialisationFiltresRecherche.btn.btn-light:hover,
#initialisationFiltresRecherche.btn.btn-light:focus {
  background-color: var(--ds-brand-light) !important;
  border-color: var(--ds-brand) !important;
  color: var(--ds-brand-hover) !important;
}
#initialisationFiltresRecherche.btn.btn-light i {
  color: inherit !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Pied de page de l'accueil — discret, lisible (AA), unique repère contentinfo
   ═══════════════════════════════════════════════════════════════════════════ */
.auxi-accueil-footer {
  margin-top: 2.5rem;
  padding: 1rem 0 1.25rem;
  border-top: var(--ds-border);
  color: #475569;
  font-size: 0.8125rem;
}
.auxi-accueil-footer__brand-line { color: #475569; }
.auxi-accueil-footer__brand {
  font-weight: 600;
  letter-spacing: 0.03em;
}

