/* AppConfirm (Scripts/myscripts/Core/app-confirm.js): site-wide confirmation dialogs.
   Loaded once by _Layout.cshtml. The root also carries .reviewer-workspace, so it uses the
   shared workspace palette and tokens from app-workspace.css/app-theme.css.
   .in (Bootstrap 3) and .show (Bootstrap 5) are both listed for the visible state. */
.app-confirm { padding: 0 !important; background: transparent; }
.app-confirm::before { display: none; }
.app-confirm .modal-dialog { display: flex; align-items: center; width: 480px; max-width: calc(100% - 32px); min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); margin: 16px auto; pointer-events: none; }
.app-confirm .modal-content { display: flex; flex-direction: column; width: 100%; min-height: 0; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); border: 0; border-radius: 10px !important; box-shadow: 0 12px 40px rgba(15,35,60,.2); text-align: left; pointer-events: auto; }
.app-confirm.modal.fade .modal-dialog { transform: translateY(8px); transition: transform .15s ease-out; }
.app-confirm.modal.in .modal-dialog, .app-confirm.modal.show .modal-dialog { transform: none; }
.app-confirm .modal-header.app-confirm-header { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom-color: var(--rw-line); border-radius: 10px 10px 0 0; color: var(--rw-ink) !important; background: var(--app-color-surface) !important; font-size: 14px !important; font-weight: 400 !important; }
.app-confirm .app-confirm-header::before, .app-confirm .app-confirm-header::after,
.app-confirm .app-confirm-footer::before, .app-confirm .app-confirm-footer::after { display: none; }
.app-confirm .app-confirm-title { min-width: 0; color: var(--rw-navy); font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.app-confirm:focus, .app-confirm .app-confirm-title:focus { outline: 0; box-shadow: none; }
.app-confirm .btn.app-confirm-close { display: inline-flex; flex: 0 0 30px; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; color: var(--app-color-muted); background: #f1f5f9; }
.app-confirm .btn.app-confirm-close:hover, .app-confirm .btn.app-confirm-close:focus { color: var(--app-color-text); background: #e2e8f0; }
.app-confirm .app-confirm-body { flex: 1 1 auto; min-height: 0; padding: 18px 20px; overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; background: var(--app-color-surface); }
.app-confirm .app-confirm-context { margin-bottom: 14px; padding: 10px 12px; border-radius: 6px; background: var(--app-color-page); font-size: 13px; }
.app-confirm .app-confirm-context-item { display: grid; grid-template-columns: minmax(0,90px) minmax(0,1fr); gap: 4px 12px; }
.app-confirm .app-confirm-context-item + .app-confirm-context-item { margin-top: 4px; }
.app-confirm .app-confirm-context dt { color: var(--rw-muted); }
.app-confirm .app-confirm-context dd { min-width: 0; }
.app-confirm .app-confirm-message { margin-bottom: 0; white-space: pre-line; }
.app-confirm .app-confirm-error { margin: 16px 0 0; }
.app-confirm .app-confirm-error p { margin-bottom: 0; }
.app-confirm .app-confirm-error button { margin-top: 10px; }
.app-confirm .app-confirm-footer { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 20px; border-top-color: var(--rw-line); border-radius: 0 0 10px 10px; background: #f8fafc; }
.app-confirm .app-confirm-footer > span { font-size: 13px; text-align: left; }
.app-confirm .app-confirm-footer .rw-table-actions { justify-content: flex-end; margin-left: auto; }
.app-confirm-backdrop { background: #102a43; }
.modal-backdrop.app-confirm-backdrop.in, .modal-backdrop.app-confirm-backdrop.show { opacity: .35; }
/* Stacked over another modal (AppConfirm.open({ stack: true })): above Bootstrap's modal layer (1050). */
.app-confirm.app-confirm-stacked { z-index: 1070; }
.modal-backdrop.app-confirm-backdrop.app-confirm-stacked { z-index: 1065; }
@supports selector(:focus-visible) {
    .app-confirm button:focus:not(:focus-visible) { outline: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
    .app-confirm.modal.fade .modal-dialog { transition: none; transform: none; }
}
@media (forced-colors: active) {
    .app-confirm :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}