/* ============================================================
   CIVILO — DIALOG SYSTEM (forké de Stephan V9 — 2026-05-16)
   Composants thémés pour remplacer alert()/confirm()/prompt()
   natifs. JS dans /assets/js/dialog.js. API : window.dialog.

   Tokens utilisés (définis dans main.css) :
     --civ-bg-page / --civ-bg-card / --civ-bg-raised
     --civ-text-primary / --civ-text-secondary / --civ-text-muted
     --civ-accent / --civ-accent-soft / --civ-accent-tint
     --civ-success / --civ-warning / --civ-error / --civ-info
     --civ-border-subtle / --civ-border-strong
     --civ-ff-body / --civ-ff-mono / --civ-fw-bold / --civ-fw-medium / --civ-fw-regular
     --civ-radius-sm / --civ-transition-fast

   Adaptations vs Stephan (dark→light) :
     - Backdrop ambré chaud, pas noir
     - Ombres plus douces, moins de drama
     - Card blanche sur fond crème
     - Pas d'inset highlight blanc (inutile en light)
   ============================================================ */

/* HTML5 [hidden] override safety (cf. workspace memory reference_html_hidden_pitfall) */
[hidden] { display: none !important; }

/* Blocage du scroll body quand un modal est ouvert */
body.dlg-no-scroll { overflow: hidden; }

/* ─── Backdrop ────────────────────────────────────────────── */
.dlg-backdrop {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(40, 30, 22, 0.35) 0%, rgba(40, 30, 22, 0.55) 100%);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 1000;
}
.dlg-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ─── Modal ───────────────────────────────────────────────── */
/* Style "modern soft civic" : rounded généreux, drop shadow douce,
   accent bar coloré en tête selon kind, entrée avec léger overshoot. */
.dlg-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%) scale(0.94);
    background: var(--civ-bg-card);
    border-radius: 16px;
    box-shadow:
        0 20px 60px -12px rgba(80, 50, 30, 0.25),
        0 0 0 1px var(--civ-border-subtle);
    z-index: 1010;
    opacity: 0;
    transition:
        opacity 140ms ease-in,
        transform 140ms cubic-bezier(0.4, 0, 1, 1);
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    width: calc(100vw - 32px);
    overflow: hidden;
}
.dlg-modal.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition:
        opacity 200ms ease-out,
        transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dlg-modal--sm { max-width: 460px; }
.dlg-modal--md { max-width: 680px; }
.dlg-modal--lg { max-width: 960px; }
.dlg-modal--auto { max-width: fit-content; }

/* ─── Variante "side sheet" ancrée à droite ──────────────── */
.dlg-modal--right {
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    transform: translateX(100%);
    max-height: none;
    height: 100vh;
    height: 100dvh;
    border-radius: 16px 0 0 16px;
    box-shadow:
        -20px 0 60px -12px rgba(80, 50, 30, 0.25),
        -1px 0 0 0 var(--civ-border-subtle);
    transition:
        opacity 140ms ease-in,
        transform 160ms cubic-bezier(0.4, 0, 1, 1);
}
.dlg-modal--right.is-visible {
    transform: translateX(0);
    transition:
        opacity 200ms ease-out,
        transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}
.dlg-modal--right.dlg-modal--sm { width: 360px; max-width: 90vw; }
.dlg-modal--right.dlg-modal--md { width: 440px; max-width: 90vw; }
.dlg-modal--right.dlg-modal--lg { width: 560px; max-width: 90vw; }

@media (max-width: 640px) {
    .dlg-modal--right { width: 100vw !important; max-width: 100vw !important; border-radius: 0; }
}

.dlg-modal--right::before { border-radius: 16px 0 0 0; }
@media (max-width: 640px) {
    .dlg-modal--right::before { border-radius: 0; }
}

/* ─── Accent bar en tête (3px) selon kind ──────────────── */
.dlg-modal::before {
    content: "";
    display: block;
    height: 3px;
    background: var(--civ-accent);
    flex-shrink: 0;
}
.dlg-modal--danger::before  { background: var(--civ-error); }
.dlg-modal--error::before   { background: var(--civ-error); }
.dlg-modal--warning::before { background: var(--civ-warning); }
.dlg-modal--success::before { background: var(--civ-success); }
.dlg-modal--info::before    { background: var(--civ-info); }

.dlg-modal--danger,
.dlg-modal--error {
    box-shadow:
        0 20px 60px -12px rgba(220, 38, 38, 0.20),
        0 0 0 1px rgba(220, 38, 38, 0.20);
}
.dlg-modal--warning {
    box-shadow:
        0 20px 60px -12px rgba(202, 138, 4, 0.18),
        0 0 0 1px rgba(202, 138, 4, 0.20);
}
.dlg-modal--success {
    box-shadow:
        0 20px 60px -12px rgba(22, 163, 74, 0.18),
        0 0 0 1px rgba(22, 163, 74, 0.20);
}

.dlg-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 22px 10px 26px;
    flex-shrink: 0;
}
.dlg-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

/* Icône SVG par kind (Lucide-style, stroke=2) */
.dlg-modal-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--civ-accent);
    background: var(--civ-accent-tint);
}
.dlg-modal-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dlg-modal--danger .dlg-modal-icon,
.dlg-modal--error  .dlg-modal-icon  { color: var(--civ-error);   background: rgba(220, 38, 38, 0.10); }
.dlg-modal--warning .dlg-modal-icon { color: var(--civ-warning); background: rgba(202, 138, 4, 0.12); }
.dlg-modal--success .dlg-modal-icon { color: var(--civ-success); background: rgba(22, 163, 74, 0.12); }
.dlg-modal--info    .dlg-modal-icon { color: var(--civ-info);    background: rgba(37, 99, 235, 0.10); }

.dlg-modal-title {
    margin: 0;
    font-size: 17px;
    font-weight: var(--civ-fw-bold);
    color: var(--civ-text-primary);
    line-height: 1.35;
    letter-spacing: -0.01em;
}
.dlg-modal-close {
    background: transparent;
    border: none;
    color: var(--civ-text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: color var(--civ-transition-fast), background var(--civ-transition-fast), transform var(--civ-transition-fast);
    flex-shrink: 0;
}
.dlg-modal-close:hover {
    color: var(--civ-text-primary);
    background: var(--civ-bg-raised);
}
.dlg-modal-close:active { transform: scale(0.92); }

.dlg-modal-body {
    padding: 6px 26px 22px 74px;
    color: var(--civ-text-secondary);
    font-size: 14px;
    line-height: 1.6;
    overflow-y: auto;
    flex: 1 1 auto;
}
.dlg-modal:not(.dlg-modal--info):not(.dlg-modal--success):not(.dlg-modal--warning):not(.dlg-modal--error):not(.dlg-modal--danger) .dlg-modal-body {
    padding-left: 26px;
}
.dlg-modal-body .dlg-message {
    margin: 0;
    white-space: pre-wrap;
}

.dlg-modal-foot {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 8px 22px 22px;
    flex-shrink: 0;
}

/* ─── Prompt input ────────────────────────────────────────── */
.dlg-prompt-input {
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--civ-bg-page);
    border: 1px solid var(--civ-border-strong);
    border-radius: var(--civ-radius-sm, 6px);
    color: var(--civ-text-primary);
    font-family: var(--civ-ff-body);
    font-size: 14px;
    transition: border-color var(--civ-transition-fast);
}
.dlg-prompt-input:focus {
    outline: none;
    border-color: var(--civ-accent);
    box-shadow: 0 0 0 3px var(--civ-accent-tint);
}
.dlg-modal--danger .dlg-prompt-input:focus {
    border-color: var(--civ-error);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.dlg-prompt-error {
    color: var(--civ-error);
    font-size: 12px;
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(220, 38, 38, 0.06);
    border-left: 2px solid var(--civ-error);
    border-radius: 0 4px 4px 0;
}

/* ─── Toasts (top-right, stack, auto-dismiss) ─────────────── */
.dlg-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1100;
    pointer-events: none;
    max-width: calc(100vw - 40px);
}
.dlg-toast {
    pointer-events: auto;
    background: var(--civ-bg-card);
    border-radius: 12px;
    padding: 14px 40px 14px 14px;
    font-size: 13px;
    color: var(--civ-text-primary);
    box-shadow:
        0 10px 30px -8px rgba(80, 50, 30, 0.20),
        0 0 0 1px var(--civ-border-subtle);
    min-width: 280px;
    max-width: 420px;
    position: relative;
    opacity: 0;
    transform: translateX(24px) scale(0.96);
    transition:
        opacity 200ms ease-out,
        transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.dlg-toast.is-visible { opacity: 1; transform: translateX(0) scale(1); }
.dlg-toast-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--civ-text-muted);
    background: var(--civ-bg-raised);
}
.dlg-toast-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dlg-toast-body { flex: 1; min-width: 0; padding-top: 2px; }
.dlg-toast-title { font-weight: var(--civ-fw-bold); margin-bottom: 2px; color: var(--civ-text-primary); }
.dlg-toast-msg { color: var(--civ-text-secondary); font-size: 12px; line-height: 1.5; }
.dlg-toast-close {
    position: absolute;
    top: 6px;
    right: 6px;
    background: transparent;
    border: none;
    color: var(--civ-text-muted);
    font-size: 16px;
    line-height: 1;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: color var(--civ-transition-fast), background var(--civ-transition-fast);
}
.dlg-toast-close:hover { color: var(--civ-text-primary); background: var(--civ-bg-raised); }
.dlg-toast--success .dlg-toast-icon { color: var(--civ-success); background: rgba(22, 163, 74, 0.12); }
.dlg-toast--error   .dlg-toast-icon { color: var(--civ-error);   background: rgba(220, 38, 38, 0.10); }
.dlg-toast--warning .dlg-toast-icon { color: var(--civ-warning); background: rgba(202, 138, 4, 0.12); }
.dlg-toast--info    .dlg-toast-icon { color: var(--civ-info);    background: rgba(37, 99, 235, 0.10); }

/* ─── Flash inline (scoped à un container) ────────────────── */
.dlg-flash-slot { /* slot vide */ }
.dlg-flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: var(--civ-fw-medium);
    margin-bottom: 12px;
    border: 1px solid transparent;
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
    transition:
        opacity 200ms ease-out,
        transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dlg-flash.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.dlg-flash--success {
    background: rgba(22, 163, 74, 0.08);
    border-color: rgba(22, 163, 74, 0.30);
    color: var(--civ-success);
}
.dlg-flash--error {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.30);
    color: var(--civ-error);
}
.dlg-flash--warning {
    background: rgba(202, 138, 4, 0.08);
    border-color: rgba(202, 138, 4, 0.30);
    color: var(--civ-warning);
}
.dlg-flash--info {
    background: rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.30);
    color: var(--civ-info);
}
.dlg-flash-msg { flex: 1; }
.dlg-flash-detail {
    font-family: var(--civ-ff-mono);
    font-size: 11px;
    font-weight: var(--civ-fw-regular);
    color: var(--civ-text-secondary);
    background: rgba(80, 50, 30, 0.06);
    padding: 3px 8px;
    border-radius: 5px;
    word-break: break-all;
}

/* ─── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .dlg-backdrop,
    .dlg-modal,
    .dlg-toast,
    .dlg-flash {
        transition: opacity 80ms linear !important;
        transform: none !important;
    }
    .dlg-modal.is-visible { transform: translate(-50%, -50%) !important; }
    .dlg-modal--right.is-visible { transform: translateX(0) !important; }
}