/* ============================================================================
 * css/components/base_dialog.css  —  base-class-dialogs (v2 §7.1/§7.2, §7.3)
 * Kanonische Basis fuer NATIVE <dialog>-Elemente (HTMLDialogElement).
 * Konkrete Dialoge (CustomDialog, exit-modal, settings-modal) erben via
 * `base-dialog` und werden in Dialog-A11y 3-5/8 darauf umgestellt.
 * Dialog-A11y 2/8 — noch NICHT verdrahtet (kein HTML/JS umgestellt).
 *
 * Natives <dialog>: per Default display:none bis .showModal(); zentriert sich
 * via UA margin:auto; ::backdrop liefert die abgedunkelte Flaeche (ersetzt das
 * bisherige .custom-dialog-overlay-div). ESC + Fokus-Trapping bringt <dialog>
 * von Haus aus mit (v2 §7.3).
 * ==========================================================================*/

.base-dialog {
    /* UA-Defaults zuruecksetzen, Karte selbst stylen */
    padding: 0;
    border: none;
    border-radius: var(--radius-lg);
    background-color: var(--neutral-0);
    color: var(--color-text);
    box-shadow: var(--shadow-md, 0 10px 40px rgba(0, 0, 0, 0.3));
    max-width: min(600px, 92vw);
    width: 100%;
}

/* Abgedunkelter Hintergrund (ersetzt overlay-div). */
.base-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

/* Einblend-Animation (respektiert prefers-reduced-motion global, animations.css) */
.base-dialog[open] {
    animation: base-dialog-in var(--transition-base, 200ms ease);
}

@keyframes base-dialog-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Blockierende Fehler-/Warn-Dialoge (role="alertdialog") duerfen optisch
   markiert werden; konkrete Variante setzt Header-Farbe. */