:root {
    --portal-notify-primary: var(--portal-primary, #f36f21);
    --portal-notify-primary-dark: var(--portal-primary-dark, #d9570a);
    --portal-notify-ink: var(--portal-ink, #17233c);
    --portal-notify-muted: var(--portal-muted, #667085);
    --portal-notify-surface: var(--portal-surface, #f6f8fb);
    --portal-notify-border: var(--portal-border, #e4e8ef);
    --portal-notify-success: var(--portal-brand-green, #269a59);
    --portal-notify-warning: var(--portal-primary, #f36f21);
    --portal-notify-danger: #b42318;
}

/* Neutral white dialog surface; severity is communicated by the colored top accent and symbol. */
.portal-notify-modal { z-index:12010; }
.portal-notify-modal .modal-dialog { max-width:640px; }
body:has(.portal-notify-modal.show) > .modal-backdrop:last-of-type { z-index:12000; }
.portal-notify-modal .modal-content { overflow:hidden; color:var(--portal-notify-ink); background:#fff; border:1px solid var(--portal-notify-border); border-top:4px solid var(--portal-notify-primary); border-radius:var(--portal-radius,5px); box-shadow:0 20px 60px rgba(23,35,60,.25); }
.portal-notify-modal .modal-header,.portal-notify-modal .modal-body,.portal-notify-modal .modal-footer{background:transparent}
.portal-notify-modal .modal-header { gap:12px; align-items:flex-start; padding:20px 24px 16px; border-top:0; border-bottom:1px solid var(--portal-notify-border); }
.portal-notify-modal .modal-title { min-width:0; margin:0; line-height:1.4; overflow-wrap:anywhere; }
.portal-notify-modal .btn-close { flex-shrink:0; margin:0 0 0 auto; }
.portal-notify-modal .modal-body { min-height:0; padding:20px 24px; line-height:1.55; overflow-wrap:anywhere; }
.portal-notify-modal .modal-footer { flex-shrink:0; gap:10px; padding:16px 24px; border-top:1px solid var(--portal-notify-border); }
.portal-notify-modal .modal-footer .btn { min-height:44px; margin:0; white-space:normal; overflow-wrap:anywhere; }
.portal-notify-modal #portal-notify-ack-wrap { display:flex; align-items:flex-start; gap:10px; padding:12px; margin-bottom:0; border:1px solid var(--portal-notify-border); border-radius:var(--portal-radius); background:#fff; }
.portal-notify-modal #portal-notify-ack { float:none; flex-shrink:0; margin:4px 0 0; width:18px; height:18px; }
.portal-notify-modal #portal-notify-ack-label { min-width:0; cursor:pointer; }
.portal-notify-modal.is-success .modal-content{border-top-color:var(--portal-notify-success)}
.portal-notify-modal.is-warning .modal-content{border-top-color:#9a6a00}
.portal-notify-modal.is-error .modal-content,
.portal-notify-modal.is-danger .modal-content { border-top-color:var(--portal-notify-danger); }
.portal-notify-symbol { display:inline-grid; place-items:center; flex:0 0 30px; width:30px; height:30px; color:#fff; background:var(--portal-notify-primary); border-radius:50%; font-size:1rem; font-weight:900; }
.portal-notify-modal.is-error .portal-notify-symbol,
.portal-notify-modal.is-danger .portal-notify-symbol { background:var(--portal-notify-danger); }
.portal-notify-modal.is-success .portal-notify-symbol{background:var(--portal-notify-success)}
.portal-notify-modal.is-warning .portal-notify-symbol{background:#8a6200}
.portal-notify-details { padding:0 16px; background:var(--portal-notify-surface); border:1px solid var(--portal-notify-border); border-radius:var(--portal-radius); }
.portal-notify-detail { display:grid; grid-template-columns:minmax(0,1fr); gap:4px; padding:12px 0; border-bottom:1px solid var(--portal-notify-border); }
.portal-notify-detail:last-child { border:0; }
.portal-notify-detail span:first-child { color:var(--portal-notify-muted); font-weight:600; }
.portal-notify-detail strong { min-width:0; color:var(--portal-notify-ink); text-align:left; font-weight:400; line-height:1.55; overflow-wrap:anywhere; }
.portal-notify-modal .form-check-input:checked { background-color:var(--portal-selection-color,var(--portal-brand-green,#269a59)); border-color:var(--portal-selection-color,var(--portal-brand-green,#269a59)); }
.portal-notify-modal .btn-outline-secondary,
.portal-progress-card .btn-outline-secondary { color:var(--portal-primary); border-color:var(--portal-primary); }
.portal-notify-modal .btn-outline-secondary:hover,
.portal-notify-modal .btn-outline-secondary:focus,
.portal-progress-card .btn-outline-secondary:hover,
.portal-progress-card .btn-outline-secondary:focus { color:#fff; background:var(--portal-primary); border-color:var(--portal-primary); }

.portal-progress { position:fixed; inset:0; z-index:12020; display:grid; place-items:center; background:rgba(23,35,60,.62); backdrop-filter:blur(2px); }
.portal-progress-card { width:min(390px,calc(100vw - 2rem)); padding:1.5rem; color:var(--portal-notify-ink); background:#fff; border-top:4px solid var(--portal-notify-primary); border-radius:var(--portal-radius); display:grid; justify-items:center; gap:.7rem; text-align:center; box-shadow:0 20px 60px rgba(23,35,60,.28); }
.portal-progress-card .spinner-border { color:var(--portal-notify-primary); }
.portal-progress-card span { color:var(--portal-notify-muted); }

@media (max-width:575.98px) {
    .portal-notify-modal .modal-dialog { margin:.75rem; height:calc(100% - 1.5rem); min-height:calc(100% - 1.5rem); }
    .portal-notify-modal .modal-header,.portal-notify-modal .modal-body,.portal-notify-modal .modal-footer { padding:16px; }
    .portal-notify-modal .modal-footer { display:grid; grid-template-columns:1fr 1fr; }
    .portal-notify-modal .modal-footer:has(.btn.d-none) { grid-template-columns:1fr; }
    .portal-notify-modal .modal-footer .btn { width:100%; }
}