/*
 * confirm-dialog.css — Systeembrede custom bevestigings-/meldingsdialoog.
 * Hoort bij assets/js/confirm-dialog.js. Vaste huisstijl-kleuren (niet de
 * ambient CSS-variabelen) zodat de dialog op ELKE pagina identiek oogt —
 * ook op de licht-getinte contractpagina.
 */

/* De <dialog> zelf: expliciet centreren. De globale CSS-reset (* { margin: 0 })
   in site.css/admin.css overschrijft de UA-standaard margin:auto, dus hier weer
   afdwingen via position:fixed + inset:0 + margin:auto (class wint van *). */
.app-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    border: 0;
    padding: 0;
    background: transparent;
    color: #f5ede8;
    width: 100%;
    max-width: min(440px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
}

/* Verduisterde, licht vervaagde achtergrond achter de modal. */
.app-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Paneel: donkere kaart met goud accent in de Geladi-huisstijl. */
.app-dialog__panel {
    background: #1a1014;
    color: #f5ede8;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.25rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Titel in de accentkleur. */
.app-dialog__title {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: #f2c9a8;
}

/* Boodschap. */
.app-dialog__msg {
    margin: 0 0 1.25rem;
    line-height: 1.55;
    font-size: 0.95rem;
    color: #f5ede8;
}

/* Knoppenrij rechts uitgelijnd. */
.app-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

/* Basisknop (neutraal / annuleren). */
.app-dialog__btn {
    font: inherit;
    cursor: pointer;
    padding: 0.55rem 1.1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: #f5ede8;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.app-dialog__btn:hover { background: rgba(255, 255, 255, 0.08); }
.app-dialog__btn:focus-visible { outline: 2px solid #f2c9a8; outline-offset: 2px; }

/* Verborgen annuleerknop bij appAlert(). */
.app-dialog__cancel[hidden] { display: none; }

/* Primaire bevestigingsknop: goud. */
.app-dialog__ok {
    background: #f2c9a8;
    border-color: #f2c9a8;
    color: #1a1014;
    font-weight: 600;
}
.app-dialog__ok:hover { background: #c9956c; border-color: #c9956c; color: #1a1014; }

/* Destructieve variant: rood (verwijderen/weigeren). */
.app-dialog__ok.app-dialog__btn--danger {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
}
.app-dialog__ok.app-dialog__btn--danger:hover { background: #a93226; border-color: #a93226; }

/* Respecteer reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    .app-dialog__btn { transition: none; }
}