/* ── Modale dialog (dialog.js) ─────────────────────────────────────────
 *
 * Defaults in @layer mm — unlayered site-CSS wint altijd, ongeacht laadvolgorde.
 * Dark/material varianten staan in themes.css onder `[data-theme="..."] .mm-dialog`.
 *
 * Z-index:   12000+ (dialog.js zet per-instance) */

@layer mm {
    .mm-dialog-backdrop {
        --mm-dialog-backdrop: rgba(0, 0, 0, .35);
    }

    .mm-dialog {
        --mm-dialog-bg:           var(--color-bg-elev);
        --mm-dialog-fg:           var(--color-fg);
        --mm-dialog-border:       var(--color-border);
        --mm-dialog-border-soft:  var(--color-border);
        --mm-dialog-header-bg:    var(--color-bg-soft);
        --mm-dialog-footer-bg:    var(--color-bg-soft);
        --mm-dialog-btn-bg:       var(--color-bg-soft);
        --mm-dialog-btn-hover:    var(--color-border);
        --mm-dialog-input-bg:     var(--color-bg);
        --mm-dialog-input-border: var(--color-border);
        --mm-dialog-input-focus:  var(--color-primary);
        --mm-dialog-accent:       var(--color-primary);
        --mm-dialog-accent-hover: var(--color-primary-dk);
        --mm-dialog-danger:       var(--color-danger);
        --mm-dialog-danger-hover: color-mix(in srgb, var(--color-danger) 85%, black);
    }
}

.mm-dialog-backdrop {
    position: fixed; inset: 0;
    /* z-index wordt door dialog.js per-instance gezet */
    background: var(--mm-dialog-backdrop);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: mm-dialog-fade .12s ease-out;
}
@keyframes mm-dialog-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.mm-dialog {
    background:    var(--mm-dialog-bg);
    color:         var(--mm-dialog-fg);
    border:        1px solid var(--mm-dialog-border);
    border-radius: 8px;
    box-shadow:    0 20px 50px rgba(15, 23, 42, .25);
    min-width:     320px;
    max-width:     500px;
    font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
    animation:     mm-dialog-pop .15s ease-out;
}
@keyframes mm-dialog-pop {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

.mm-dialog-header {
    padding: 11px 16px;
    border-bottom: 1px solid var(--mm-dialog-border-soft);
    background:    var(--mm-dialog-header-bg);
    border-radius: 8px 8px 0 0;
}
.mm-dialog-header strong {
    color:           var(--mm-dialog-accent);
    font-size:       12px;
    text-transform:  uppercase;
    letter-spacing:  .05em;
    font-weight:     600;
}

.mm-dialog-body {
    padding: 16px;
}
.mm-dialog-message {
    margin: 0 0 12px 0;
    color:        var(--mm-dialog-fg);
    font-size:    14px;
    line-height:  1.55;
    white-space:  pre-wrap;
}
.mm-dialog-message:last-child {
    margin-bottom: 0;
}

.mm-dialog-input {
    display:       block;
    width:         100%;
    padding:       8px 10px;
    background:    var(--mm-dialog-input-bg);
    color:         var(--mm-dialog-fg);
    border:        1px solid var(--mm-dialog-input-border);
    border-radius: 4px;
    font-size:     14px;
    font-family:   inherit;
    outline:       none;
    box-sizing:    border-box;
}
.mm-dialog-input:focus {
    border-color: var(--mm-dialog-input-focus);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--mm-dialog-input-focus) 20%, transparent);
}

.mm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--mm-dialog-border-soft);
    background:  var(--mm-dialog-footer-bg);
    border-radius: 0 0 8px 8px;
}

.mm-dialog-btn {
    padding: 7px 14px;
    border-radius: 4px;
    border: 1px solid var(--mm-dialog-border);
    background:        var(--mm-dialog-btn-bg);
    color:             var(--mm-dialog-fg);
    font: inherit; line-height: 1;
    cursor: pointer;
    user-select: none;
}
.mm-dialog-btn:hover {
    background: var(--mm-dialog-btn-hover);
}
.mm-dialog-btn:focus-visible {
    outline: 2px solid var(--mm-dialog-accent);
    outline-offset: 1px;
}
.mm-dialog-btn--ghost {
    background: transparent;
    border-color: transparent;
}
.mm-dialog-btn--ghost:hover {
    background: var(--mm-dialog-btn-hover);
}
.mm-dialog-btn--primary {
    background:    var(--mm-dialog-accent);
    border-color:  var(--mm-dialog-accent);
    color:         #fff;
}
.mm-dialog-btn--primary:hover {
    background:    var(--mm-dialog-accent-hover);
    border-color:  var(--mm-dialog-accent-hover);
}
.mm-dialog-btn--danger,
.mm-dialog-btn--primary.mm-dialog-btn--danger {
    background:    var(--mm-dialog-danger);
    border-color:  var(--mm-dialog-danger);
    color:         #fff;
}
.mm-dialog-btn--danger:hover {
    background:    var(--mm-dialog-danger-hover);
    border-color:  var(--mm-dialog-danger-hover);
}