/*
 * components/dialog.css
 *
 * What:  Custom confirm / alert dialog. Centred panel + backdrop, two
 *        action buttons (Cancel / Confirm).
 * Why:   Coding-Conventions rule #8 — replaces native confirm() / alert().
 *        Every yes/no decision in the app uses this.
 * Used:  Imported by base.css.
 */

.dialog {
    position: fixed;
    inset: 0;
    z-index: var(--z-dialog);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dialog[aria-hidden="true"]  { display: none; }
.dialog[aria-hidden="false"] { display: flex; }

.dialog__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(20, 20, 20, 0.45);
}

.dialog__panel {
    position: relative;
    width: min(420px, 92vw);
    background-color: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-3);
}
.dialog__title   { font-size: 1.15rem; font-weight: 700; margin-bottom: var(--space-2); }
.dialog__message { color: var(--color-text-muted); margin-bottom: var(--space-6); }
.dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}