/* Dialoge der App (dialogs.js): Bestätigungen und kurze Abfragen, modal. Eingebunden in base.html und über den Seiten
 * mit Brett (_page_appbar.html) – dort gelten die Knopf-Regeln des Reports, daher eigene Klassen statt .btn. */
.dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0;
       border: var(--svb-border-hairline) solid var(--svb-color-border-soft); border-radius: var(--svb-radius-md);
       background: var(--svb-color-surface); color: var(--svb-color-text); box-shadow: var(--svb-shadow-modal);
       font-family: var(--svb-font-sans); font-size: var(--svb-size-base); line-height: var(--svb-leading-normal); }
.dlg::backdrop { background: rgba(0, 0, 0, .4); }
.dlg form { margin: 0; }
.dlg-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--svb-space-3); padding: var(--svb-space-5) var(--svb-space-6) 0; }
.dlg-head h2 { margin: 0; font-family: var(--svb-font-serif); font-size: var(--svb-size-xl); font-weight: var(--svb-weight-semibold);
               letter-spacing: var(--svb-tracking-tight); line-height: var(--svb-leading-tight); }
.dlg .dlg-x, .dlg .dlg-x:hover { font: inherit; font-size: var(--svb-size-xl); line-height: 1; min-height: 0; padding: 0 2px; border: 0;
                                 background: none; color: var(--svb-color-text-muted); cursor: pointer; }
.dlg .dlg-x:hover { color: var(--svb-color-text); }
.dlg-body { padding: var(--svb-space-3) var(--svb-space-6) 0; font-size: var(--svb-size-sm); }
.dlg-body p { margin: 0 0 var(--svb-space-3); }
.dlg-note { color: var(--svb-color-text-muted); }
.dlg-check { display: flex; align-items: center; gap: var(--svb-space-2); margin: 0 0 var(--svb-space-1); font-weight: var(--svb-weight-semibold); cursor: pointer; }
.dlg-loading { color: var(--svb-color-text-muted); }
.dlg-error { color: var(--svb-error); }
.dlg-meta { display: grid; grid-template-columns: max-content 1fr; gap: var(--svb-space-1) var(--svb-space-4); margin: 0 0 var(--svb-space-4); }
.dlg-meta dt { color: var(--svb-color-text-muted); }
.dlg-meta dd { margin: 0; overflow-wrap: anywhere; }
.dlg-meta a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.dlg-foot { display: flex; justify-content: flex-end; gap: var(--svb-space-2); padding: var(--svb-space-4) var(--svb-space-6) var(--svb-space-5); }
/* Knöpfe: Abbrechen dezent umrandet wie die Modulleiste, die Aktion gefüllt (rot beim Löschen) */
.dlg .dlg-btn { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--svb-space-4);
                border: var(--svb-border-hairline) solid var(--svb-color-border); border-radius: var(--svb-radius-md);
                background: none; color: var(--svb-color-text); font: inherit; font-size: var(--svb-size-sm);
                font-weight: var(--svb-weight-semibold); letter-spacing: var(--svb-tracking-wide); cursor: pointer; transition: background .15s;
                text-decoration: none; }
.dlg .dlg-btn:hover { background: var(--svb-color-accent-bg); color: var(--svb-color-text); }
.dlg .dlg-btn.primary { background: var(--svb-color-accent); border-color: var(--svb-color-accent); color: var(--svb-color-accent-on); }
.dlg .dlg-btn.primary:hover { background: var(--svb-color-accent-hover); border-color: var(--svb-color-accent-hover); }
.dlg .dlg-btn.danger { background: var(--svb-delete-bg); border-color: var(--svb-delete-bg); color: var(--svb-palette-white); }
.dlg .dlg-btn.danger:hover { background: var(--svb-delete-hover-bg); border-color: var(--svb-delete-hover-bg); }