/*
 * Boîtes de dialogue jQuery UI à la charte Cegape.
 *
 * Concerne les dialogues ouverts par f_prompt_erreur et f_prompt_numfact — #dial_erreur du
 * gabarit baseLayout.jsp — et #dialog de l'écran de connexion. C'est par ce canal que
 * s'affichent les messages du serveur, donc les erreurs de saisie et les échecs de connexion.
 *
 * Ces dialogues portaient le thème « base » livré avec jQuery UI : barre de titre gris #e9e9e9,
 * texte #333333, boutons gris #f6f6f6, police Arial. Rien de commun avec le reste de
 * l'application, qui est en Poppins sur bleu désaturé depuis cegape-charte.css.
 *
 * Deux points sur les choix faits ici.
 *
 *   1. Barre de titre bleue et non rouge. Le canal ne distingue pas les severités :
 *      GenericAction.getMessages() agrège les addActionMessage et les addActionError dans une
 *      même chaîne, et getTitreMessages() tire le titre du namespace, pas de la nature du
 *      message. Une barre rouge annoncerait une erreur là où passent aussi des confirmations.
 *      La charte écarte par ailleurs le corail #FF4370, étiqueté « Formation », de l'habillage
 *      d'un logiciel.
 *
 *   2. Croix de fermeture dessinée en CSS, et non plus prise dans une image. Voir le bloc
 *      qui la porte, plus bas.
 *
 * À charger après jquery-ui-1.14.1.css, dont elle reprend les sélecteurs. Les doubles classes
 * — .ui-dialog.ui-widget.ui-widget-content — ne sont pas décoratives : la feuille de jQuery UI
 * habille le cadre par ce couple, et un sélecteur plus court perdrait la spécificité.
 *
 * Comme dans cegape-charte.css, chaque couleur est écrite en littéral puis reprise en var() :
 * un navigateur qui ignore var() reste habillé.
 */

/* ------------------------------------------------------------------ *
 * Voile de modale
 *
 * #aaaaaa à 30 % d'origine : sur le fond gris clair de l'application, le voile ne se
 * distinguait pratiquement pas, et le dialogue paraissait posé sur une page restée active.
 * ------------------------------------------------------------------ */

.ui-widget-overlay {
    background: #000000;
    opacity: .45;
}

/* ------------------------------------------------------------------ *
 * Cadre
 * ------------------------------------------------------------------ */

.ui-dialog.ui-widget.ui-widget-content {
    padding: 0;
    border: 1px solid #DCE3EA;
    border: 1px solid var(--cegape-bordure);
    border-radius: 4px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
    /* Le padding de .2em du thème laissait un liseré gris autour de la barre de titre */
    overflow: hidden;
}

.ui-dialog.ui-widget,
.ui-dialog.ui-widget input,
.ui-dialog.ui-widget select,
.ui-dialog.ui-widget textarea,
.ui-dialog.ui-widget button {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
}

/* ------------------------------------------------------------------ *
 * Barre de titre — même aplat que le menu latéral et les en-têtes de panneaux
 *
 * Réserve à droite portée à 48 px : la croix est absolue, et le titre, qui peut être long
 * (getTitreMessages rend « Gestion des utilisateurs »), passait sous elle.
 * ------------------------------------------------------------------ */

.ui-dialog .ui-dialog-titlebar {
    background: #5469D4;
    background: var(--cegape-bleu-interface);
    border: 0;
    border-radius: 0;
    color: #ffffff;
    padding: 12px 48px 12px 16px;
}

.ui-dialog .ui-dialog-title {
    float: none;
    width: auto;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

/* ------------------------------------------------------------------ *
 * Croix de fermeture
 *
 * Elle était invisible, et non pas discrète : jQuery UI la rend par un <span class="ui-icon
 * ui-icon-closethick"> dont la feuille 1.14.1 va chercher le glyphe dans une planche
 * d'icônes, css/images/ui-icons_444444_256x240.png. Ce fichier n'existe pas dans le projet,
 * pas plus que les quatre autres planches que la feuille appelle pour les états de survol et
 * d'activation. css/images ne contient que les planches de l'ancienne 1.8.11, aux teintes
 * différentes, donc aux noms différents. Le navigateur affichait un carré de 16 px vide.
 *
 * La croix est donc tracée ici, par deux barres croisées en pseudo-éléments. Aucun fichier à
 * fournir, aucune requête, et un tracé net à toutes les échelles. background-image: none
 * neutralise la planche manquante, y compris dans les règles de survol de la feuille jQuery UI.
 *
 * La cible passe de 20 à 28 px, au-delà du glyphe de 16 px : c'est la zone cliquable, et
 * 20 px est court pour une souris.
 * ------------------------------------------------------------------ */

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: 10px;
    top: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 4px;
}

.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close:focus {
    background: rgba(255, 255, 255, .22);
    border: 0;
}

.ui-dialog .ui-dialog-titlebar-close:active {
    background: rgba(0, 0, 0, .18);
    border: 0;
}

/* Visible au clavier : la feuille de jQuery UI ne marque pas le focus autrement que par le fond */
.ui-dialog .ui-dialog-titlebar-close:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 1px;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close:hover .ui-icon,
.ui-dialog .ui-dialog-titlebar-close:focus .ui-icon,
.ui-dialog .ui-dialog-titlebar-close:active .ui-icon {
    background-image: none;
    /* .ui-button-icon-only centre l'icône par -8 px de marge : le carré reste à 16 px */
    width: 16px;
    height: 16px;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon::before,
.ui-dialog .ui-dialog-titlebar-close .ui-icon::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 1px;
    width: 14px;
    height: 2px;
    background: #ffffff;
    border-radius: 1px;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon::before {
    transform: rotate(45deg);
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon::after {
    transform: rotate(-45deg);
}

/* ------------------------------------------------------------------ *
 * Corps
 *
 * Texte noir sur blanc, comme le veut la charte pour le texte courant. Interligne à 1.55 :
 * getMessages() joint ses entrées par des <br/>, et sept erreurs de saisie d'affilée se
 * lisent mal serrées.
 * ------------------------------------------------------------------ */

.ui-dialog .ui-dialog-content {
    padding: 18px 16px;
    color: #000000;
    color: var(--cegape-texte);
    font-size: 14px;
    line-height: 1.55;
}

.ui-dialog .ui-dialog-content p {
    margin: 0;
}

/* ------------------------------------------------------------------ *
 * Pied et boutons — l'aspect de .btn-primary, que porte le reste de l'application
 * ------------------------------------------------------------------ */

.ui-dialog .ui-dialog-buttonpane {
    background: #F2F6F8;
    background: var(--cegape-fond);
    border-top: 1px solid #DCE3EA;
    border-top: 1px solid var(--cegape-bordure);
    margin: 0;
    padding: 12px 16px;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right;
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: 0 0 0 8px;
    padding: 7px 18px;
    background: #5469D4;
    background: var(--cegape-bleu-interface);
    border: 1px solid #5469D4;
    border: 1px solid var(--cegape-bleu-interface);
    border-radius: 4px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

.ui-dialog .ui-dialog-buttonpane button:hover,
.ui-dialog .ui-dialog-buttonpane button:focus,
.ui-dialog .ui-dialog-buttonpane button:active {
    background: #4357B6;
    background: var(--cegape-bleu-interface-fonce);
    border: 1px solid #4357B6;
    border: 1px solid var(--cegape-bleu-interface-fonce);
    color: #ffffff;
}

.ui-dialog .ui-dialog-buttonpane button:focus-visible {
    outline: 2px solid #4357B6;
    outline: 2px solid var(--cegape-bleu-interface-fonce);
    outline-offset: 2px;
}