/* Scoped tokens allow the same message component in staff, admin and branded portal shells. */
.v2-message-dialog {
    --dialog-primary: var(--portal-primary, var(--primary-green, #7cb342));
    --dialog-on-primary: var(--portal-on-primary, #fff);
    /* Primary button label: the portal's own on-primary, else the staff AA label (#219). Danger keeps --dialog-on-primary. */
    --dialog-on-brand: var(--portal-on-primary, var(--primary-green-contrast));
    --dialog-surface: var(--portal-surface, var(--surface-white, #fff));
    --dialog-text: var(--portal-text, var(--text-primary, #24313f));
    --dialog-border: var(--border-light, #e6ebf1);
    --dialog-danger: var(--badge-danger-fg, #dc3545);
    --dialog-muted: var(--portal-bg, var(--surface-page, #f5f7fb));
    --dialog-scrim: var(--overlay-scrim, rgba(15, 23, 42, .55));
    padding: 0;
    width: min(500px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    max-height: calc(100dvh - 2rem);
    margin: auto;
    border: 1px solid var(--dialog-border);
    border-radius: 8px;
    background: var(--dialog-surface);
    color: var(--dialog-text);
    box-shadow: var(--shadow-soft, 0 10px 30px rgba(36, 49, 63, .15));
    font-family: var(--font-family-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
    font-size: 1rem;
    overflow: auto;
}
.v2-message-dialog::backdrop { background: var(--overlay-scrim, rgba(15, 23, 42, .55)); }
.v2-message-dialog .modal-header-modern { display: flex; align-items: center; gap: .75rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--dialog-border); }
.v2-message-dialog h2 { flex: 1; margin: 0; font-size: 1.1rem; font-weight: 600; color: inherit; }
.v2-message-dialog .modal-body-modern { padding: 1.5rem; }
.v2-message-dialog .modal-footer-modern { display: flex; justify-content: flex-end; gap: .625rem; padding: 1rem 1.5rem; background: var(--dialog-muted); border-top: 1px solid var(--dialog-border); }
.v2-message-dialog .v2-dialog-message { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.v2-message-dialog .v2-dialog-icon { display: flex; color: var(--dialog-primary); }
.v2-message-dialog[data-variant="danger"] .v2-dialog-icon,
.v2-message-dialog[data-variant="error"] .v2-dialog-icon { color: var(--dialog-danger); }
.v2-message-dialog[data-variant="warning"] .v2-dialog-icon { color: var(--warning-amber, #f97316); }
.v2-message-dialog button { font: inherit; min-height: 44px; padding: .6rem 1rem; border-radius: 6px; border: 1px solid var(--dialog-border); cursor: pointer; }
.v2-message-dialog .btn-primary-modern { background: var(--dialog-primary); color: var(--dialog-on-brand); border-color: var(--dialog-primary); }
.v2-message-dialog .btn-danger-modern { background: var(--dialog-danger); color: var(--dialog-on-primary); border-color: var(--dialog-danger); }
.v2-message-dialog .btn-secondary-modern, .v2-message-dialog .btn-close-modern { background: var(--dialog-surface); color: var(--dialog-text); }
.v2-message-dialog .btn-close-modern { display: grid; place-items: center; width: 44px; padding: .5rem; }
.v2-message-dialog :focus-visible { outline: 2px solid var(--dialog-primary); outline-offset: 3px; }
.v2-message-dialog .v2-dialog-label { display: block; margin: 1rem 0 .5rem; }
.v2-message-dialog input { box-sizing: border-box; width: 100%; padding: .75rem; border: 1px solid var(--dialog-border); border-radius: 6px; font: inherit; color: var(--dialog-text); background: var(--dialog-surface); }
.v2-message-dialog [hidden] { display: none !important; }
button[data-v2-busy], a[data-v2-busy] { cursor: progress; }
button[data-v2-busy]::after, a[data-v2-busy]::after {
    content: ""; display: inline-block; width: .8em; height: .8em; margin-left: .5em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    vertical-align: middle; animation: v2-dialog-spin .7s linear infinite;
}
@keyframes v2-dialog-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button[data-v2-busy]::after, a[data-v2-busy]::after { animation: none; } }
@media (max-width: 576px) {
    .v2-message-dialog .modal-header-modern, .v2-message-dialog .modal-body-modern { padding: 1rem; }
    .v2-message-dialog .modal-footer-modern { padding: 1rem; flex-wrap: wrap; }
    .v2-message-dialog .modal-footer-modern button { flex: 1; }
}

/* Existing complex forms keep their Bootstrap/Syncfusion lifecycle and widgets. */
.modal-header-modern :is(h2, h3, h4, h5) { margin: 0; color: var(--text-primary); font-size: 1.1rem; font-weight: 600; }
.modal-content-modern .btn-close-modern { min-width: 44px; min-height: 44px; opacity: 1; text-shadow: none; }
.modal-dialog-modern .modal-content-modern { max-height: calc(100dvh - 2rem); }
.modal-content-modern > .modal-body-modern { overflow-y: auto; }
.e-dialog.v2-form-dialog { border: 1px solid var(--border-light); border-radius: 8px; background: var(--surface-white); box-shadow: var(--shadow-soft); max-width: calc(100vw - 2rem); }
.e-dialog.v2-form-dialog .e-dlg-header-content { background: var(--surface-white); border-bottom: 1px solid var(--border-light); padding: 1.25rem 1.5rem; }
.e-dialog.v2-form-dialog .e-dlg-header { color: var(--text-primary); font-size: 1.1rem; font-weight: 600; }
.e-dialog.v2-form-dialog .e-dlg-content { background: var(--surface-white); color: var(--text-primary); padding: 1.5rem; }
.e-dialog.v2-form-dialog .e-footer-content { background: var(--surface-page); border-top: 1px solid var(--border-light); padding: 1rem 1.5rem; }
.e-dialog.v2-form-dialog .e-dlg-closeicon-btn { min-width: 44px; min-height: 44px; color: var(--text-secondary); }
.e-dialog.v2-form-dialog .e-footer-content .e-btn { min-height: 44px; border-radius: 6px; text-transform: none; box-shadow: none; }
.e-dialog.v2-form-dialog .e-footer-content .e-primary { background: var(--primary-green); border-color: var(--primary-green); color: var(--primary-green-contrast); }
.e-dialog.v2-form-dialog .e-footer-content .e-danger { background: var(--badge-danger-fg); border-color: var(--badge-danger-fg); color: var(--surface-white); }
.onhold-modal.modal-content-modern { border: 1px solid var(--border-light); border-radius: 8px; box-shadow: var(--shadow-soft); max-height: calc(100dvh - 2rem); overflow-y: auto; }
@media (max-width: 576px) {
    .e-dialog.v2-form-dialog .e-dlg-header-content, .e-dialog.v2-form-dialog .e-dlg-content, .e-dialog.v2-form-dialog .e-footer-content { padding: 1rem; }
}