/* ═══════════════════════════════════════════════════════════════════════════
   Cali&Co — Système de modales unifié (chantier #3)
   ───────────────────────────────────────────────────────────────────────────
   Source unique de vérité pour TOUTES les modales (popups, dialogues, OCR,
   preview PDF, formulaires de renommage, confirmations…). Si tu en crées une
   nouvelle qui ne ressemble à aucune de celles-ci, ouvre une issue — c'est
   sans doute qu'il manque un variant à ce système, pas qu'il faut créer
   une classe ad-hoc dans dashboard.css/admin.css/etc.

   Architecture :
     - .app-modal-overlay              (fond plein-écran semi-opaque)
     - .app-modal                      (dialogue centré)
     - .app-modal--{sm|md|lg|xl|full}  (tailles)
     - .app-modal--{default|success|warning|danger}  (tones d'accent)
     - .app-modal--confirm             (variant texte centré, icône hero)
     - .app-modal__header / __body / __footer
     - .app-modal__title / __subtitle / __text
     - .app-modal__close               (bouton × en haut à droite)
     - .app-modal__icon-hero           (icône 56×56 centrée en tête de body)
     - .app-modal__icon-inline         (icône à côté du titre dans le header)

   Génération conseillée :
     - PHP : App\Ui\Modal::render([...]) (cf. src/Ui/Modal.php)
     - JS  : AppModal.open/close/confirm/alert (cf. js/lib/app-modal.js)

   COMPAT LEGACY : les anciennes classes (.preview-modal, .confirm-modal-*,
   .comment-modal-*, .depot-warn-*, .modal-overlay, .conf-overlay, .ocr-up-*,
   .rename-modal-*, .mon-modal-*) sont alignées en fin de fichier sur les
   tokens visuels du nouveau système (z-index, padding, animation, couleurs).
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────
   1. OVERLAY (fond plein-écran)
   ───────────────────────────────────────────────────────────────────────── */
.app-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 5000;
    display: none;
    align-items: center; justify-content: center;
    padding: 24px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: appModalOverlayIn 0.18s ease;
}
.app-modal-overlay.is-open { display: flex; }
@keyframes appModalOverlayIn { from { opacity: 0; } to { opacity: 1; } }

body.app-modal-body-locked { overflow: hidden; }


/* ─────────────────────────────────────────────────────────────────────────
   2. DIALOGUE (carte centrale)
   ───────────────────────────────────────────────────────────────────────── */
.app-modal {
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
    max-width: 95vw; max-height: 95vh;
    width: 100%;
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: appModalIn 0.2s cubic-bezier(0.21, 1.02, 0.73, 1);
}
@keyframes appModalIn {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}


/* ─────────────────────────────────────────────────────────────────────────
   3. HEADER / BODY / FOOTER
   ───────────────────────────────────────────────────────────────────────── */
.app-modal__header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: var(--gray-50, #fafbfc);
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    flex-shrink: 0;
}
.app-modal__heading { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.app-modal__icon-inline { display: inline-flex; line-height: 1; flex-shrink: 0; color: var(--gray-600, #64748b); }
.app-modal__title {
    margin: 0;
    font-size: 0.9375rem; font-weight: 600;
    color: var(--gray-900, #0f172a);
    line-height: 1.4;
}
.app-modal__subtitle {
    margin-top: 2px;
    font-size: 0.78rem; color: var(--gray-500, #64748b);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-modal__close {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 28px; height: 28px;
    background: transparent; color: var(--gray-500, #64748b);
    border: 1px solid transparent; border-radius: 6px;
    cursor: pointer; padding: 0;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.app-modal__close:hover { background: var(--gray-100, #f1f5f9); color: var(--gray-900, #0f172a); border-color: var(--gray-200, #e5e7eb); }

.app-modal__body  { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 20px 22px; }
.app-modal__text  { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--gray-600, #475569); }
.app-modal__footer {
    display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
    padding: 14px 18px;
    background: var(--gray-50, #fafbfc);
    border-top: 1px solid var(--gray-200, #e5e7eb);
    flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────────────────
   4. TAILLES
   ───────────────────────────────────────────────────────────────────────── */
.app-modal--sm   { width: 100%; max-width: 380px; }
.app-modal--md   { width: 100%; max-width: 520px; }
.app-modal--lg   { width: 100%; max-width: 760px; }
.app-modal--xl   { width: 100%; max-width: 1100px; }
.app-modal--full { width: 96vw; max-width: 1400px; max-height: 92vh; }


/* ─────────────────────────────────────────────────────────────────────────
   5. TONES (couleur d'accent du header + icône)
   ───────────────────────────────────────────────────────────────────────── */
.app-modal--success .app-modal__icon-inline { color: var(--color-success, #16a34a); }
.app-modal--warning .app-modal__icon-inline { color: var(--color-warning, #d97706); }
.app-modal--danger  .app-modal__icon-inline { color: var(--color-danger,  #dc2626); }


/* ─────────────────────────────────────────────────────────────────────────
   6. VARIANT CONFIRM (texte centré + icône hero 56×56)
   ───────────────────────────────────────────────────────────────────────── */
.app-modal--confirm                            { text-align: center; }
.app-modal--confirm .app-modal__body           { padding: 24px 24px 20px; text-align: center; }
.app-modal--confirm .app-modal__header         { padding: 16px 18px 8px; border-bottom: 0; background: transparent; }
.app-modal--confirm .app-modal__heading        { justify-content: center; }
.app-modal--confirm .app-modal__title          { text-align: center; }
.app-modal--confirm .app-modal__footer         { justify-content: center; border-top: 0; background: transparent; padding-top: 4px; padding-bottom: 20px; }
.app-modal__icon-hero {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.app-modal--default .app-modal__icon-hero { background: #e0f2fe; color: #0369a1; }
.app-modal--success .app-modal__icon-hero { background: #dcfce7; color: #166534; }
.app-modal--warning .app-modal__icon-hero { background: #fef3c7; color: #92400e; }
.app-modal--danger  .app-modal__icon-hero { background: #fee2e2; color: #b91c1c; }


/* ═══════════════════════════════════════════════════════════════════════════
   7. ALIAS LEGACY — Modales pré-chantier #3 alignées sur le nouveau visuel
   ───────────────────────────────────────────────────────────────────────────
   On garde les classes existantes pour ne pas réécrire 10 modales d'un coup,
   mais on les fait pointer sur les mêmes tokens visuels que .app-modal*
   (z-index, padding, couleurs, animations) → look unifié sans casser le HTML.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Overlays legacy → mêmes propriétés que .app-modal-overlay */
.preview-modal,
.comment-modal-overlay,
.modal-overlay,
.conf-overlay,
.ocr-up-overlay,
.ocr-progress-overlay,
.rename-modal-overlay,
.mon-modal-backdrop {
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.preview-modal.show,
.comment-modal-overlay.show { animation: appModalOverlayIn 0.18s ease; }

/* Cartes intérieures legacy → bord, ombre, rayon harmonisés */
.preview-modal-inner,
.comment-modal,
.ocr-up-modal,
.ocr-cancel-modal,
.ocr-not-invoice-modal,
.rename-modal-box,
.mon-modal-content {
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
}
/* Quelques modales legacy avaient des animations propres : on les unifie */
.preview-modal-inner,
.comment-modal,
.ocr-up-modal,
.ocr-cancel-modal,
.rename-modal-box { animation: appModalIn 0.2s cubic-bezier(0.21, 1.02, 0.73, 1); }

/* Boutons "fermer" hétérogènes harmonisés (× rond, ghost hover gris) */
.preview-modal-close,
.rename-modal-close,
.mon-modal-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: transparent; color: var(--gray-500, #64748b);
    border: 1px solid transparent; border-radius: 6px;
    cursor: pointer; padding: 0; line-height: 1; font-size: 1rem;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.preview-modal-close:hover,
.rename-modal-close:hover,
.mon-modal-close:hover {
    background: var(--gray-100, #f1f5f9);
    color: var(--gray-900, #0f172a);
    border-color: var(--gray-200, #e5e7eb);
}

/* z-index unifié à 5000 (avant : 1000/2000/5000 selon la modale → ambigu) */
.preview-modal,
.comment-modal-overlay,
.mon-modal-backdrop,
.modal-overlay,
.conf-overlay,
.rename-modal-overlay { z-index: 5000; }