/* Huisstijl bovenop Tabler. Kleuren en maten komen uit ui.css (--ui-*); hier alleen kleine aanvullingen. */

/* Native <dialog> (opened via data-dialog-open in app.js) in de kaartstijl van Tabler. */
dialog.dialog-card {
    border: 1px solid var(--ui-border, transparent);
    padding: 0;
    border-radius: var(--tblr-border-radius-lg, .5rem);
    background: var(--ui-surface, #fff);
    color: var(--ui-text, inherit);
    box-shadow: var(--tblr-box-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, .2));
    max-width: min(32rem, 92vw);
    width: 100%;
}

dialog.dialog-card::backdrop {
    background: rgba(0, 0, 0, .4);
}

/* Mailtijdlijn: eigen berichten licht afgezet van ontvangen berichten. */
.mail-out {
    background: var(--ui-surface-2);
    border-left: 3px solid var(--ui-accent);
}