/**
 * DSPM Dialog — habillage Bento autonome de la modale partagee
 *
 * AUD-31 / D-13-D-14-D-15 (Phase 26, plan 26-09). Compagnon de
 * assets/js/shared/dspm-dialog.js — voir ce fichier pour l'anatomie DOM et
 * le comportement.
 *
 * VALEURS LITTERALES UNIQUEMENT — aucune custom property CSS n'est
 * reference dans cette feuille. Les surfaces DSPM 00/02/03 et CROC ne
 * chargent pas le theme Bento de DSPM 01 ; une reference a une variable non
 * definie y rendrait la modale sans style. Cette feuille doit rendre le
 * meme visuel sur les 6 surfaces client quels que soient les tokens
 * qu'elles chargent par ailleurs — meme discipline "aucune dependance" que
 * dspm-dialog.js applique au JS.
 *
 * Aucun selecteur de cette feuille n'est prefixe par le nom d'un module
 * applicatif (DSPM 01, DSPM 02, etc.) : elle ne doit rien attendre de son
 * hote.
 *
 * @package DSPM_Assessment
 * @subpackage Shared
 * @since 3.5.0 (AUD-31)
 */

.dspm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(29, 29, 31, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dspm-modal {
    background: #FFFFFF;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
    max-width: 440px;
    width: calc(100% - 32px);
    padding: 24px;
    box-sizing: border-box;
}

.dspm-modal-icon {
    width: 24px;
    height: 24px;
    color: #FF3B30;
    display: block;
    margin-bottom: 12px;
}

.dspm-modal-title {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: #1D1D1F;
    margin: 0 0 8px;
}

.dspm-modal-body,
.dspm-modal-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: #48484A;
    margin: 0;
}

.dspm-modal-label {
    display: block;
    margin-bottom: 8px;
}

.dspm-modal-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 16px;
    border: 1.5px solid #E5E5EA;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    color: #1D1D1F;
}

.dspm-modal-input:focus {
    outline: none;
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}

.dspm-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.dspm-modal-btn {
    border-radius: 9999px;
    padding: 8px 24px;
    font-weight: 600;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
}

.dspm-modal-btn-cancel {
    background: transparent;
    color: #636366;
    border-color: #E5E5EA;
}

.dspm-modal-btn-confirm {
    background: #7C3AED;
    color: #FFFFFF;
}

.dspm-modal-btn-confirm.is-destructive {
    background: #FF3B30;
}

.dspm-modal-btn:focus-visible {
    outline: 2px solid #7C3AED;
    outline-offset: 2px;
}

/* Feuille-du-bas sur mobile : le panneau devient un bottom sheet. L'ordre
   DOM reste Annuler puis Confirmer (accessibilite inchangee) ; seul
   column-reverse inverse l'ordre VISUEL pour placer l'action principale
   sous le pouce. */
@media (max-width: 480px) {
    .dspm-modal-backdrop {
        align-items: flex-end;
    }

    .dspm-modal {
        position: static;
        width: 100%;
        max-width: none;
        border-radius: 24px 24px 0 0;
    }

    .dspm-modal-actions {
        flex-direction: column-reverse;
    }

    .dspm-modal-btn {
        width: 100%;
    }
}

/* Garde d'accessibilite preventive — seul endroit de cette feuille ou la
   priorite forcee ci-dessous est autorisee (meme convention que
   dspm01-theme.css:1534 et dspm04-theme.css:524). L'interdiction posee par
   D-05 porte sur l'extraction responsive (AUD-28), pas sur cette garde. */
@media (prefers-reduced-motion: reduce) {
    .dspm-modal-backdrop,
    .dspm-modal {
        transition: none !important;
        animation: none !important;
    }
}