: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; }
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-radius:var(--portal-radius); 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:.75rem; align-items:center; border-top:4px solid var(--portal-notify-primary); }
.portal-notify-modal.is-success .modal-header{border-top-color:var(--portal-notify-success)}
.portal-notify-modal.is-warning .modal-header{border-top-color:#9a6a00}
.portal-notify-modal.is-error .modal-header,
.portal-notify-modal.is-danger .modal-header { 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 { max-height:min(42vh,360px);overflow:auto;padding:12px 14px; background:var(--portal-notify-surface); border:1px solid var(--portal-notify-border); border-radius:var(--portal-radius); }
.portal-notify-detail { display:flex; justify-content:space-between; gap:1rem; padding:.35rem 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); }
.portal-notify-detail strong { color:var(--portal-notify-ink); text-align:right; }
.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; }
    .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%; }
}