/*
 * SWEETALERT THEME - every swal() of the system in the System Broadcasts look (owner, 03/11/2026).
 *
 * Scoped to SweetAlert 1.x's own classes (.swal-overlay / .swal-modal / .swal-*), loaded after the page styles by
 * every shell that loads js/sweetalert.min.js. No swal() call changes: confirmations, inputs, custom buttons and
 * promises behave exactly as before, and the content a screen puts inside a dialog keeps its own rules.
 *
 * SIZE (owner: "alguns estão muito pequenos"): a plain dialog (text, or text + one field) gets one comfortable width;
 * a dialog with a screen's own content only gets a comfortable MINIMUM, so it is never cramped and a screen that
 * made it bigger keeps it bigger. Both stay inside the viewport on a phone.
 *
 * The accent follows the dialog: magenta by default, green with a success icon, amber with a warning, red with an
 * error or a dangerMode confirm. Light and dark: [data-bs-theme="dark"], body.dark-mode and the always-dark app pages.
 * Same tokens as css/systemBroadcast.css (FrontendThemeStyleGuide.md: brand magenta in both themes).
 */

.swal-overlay {
    --c5c-swal-accent: #970250;
    --c5c-swal-accent-2: #c2185b;
    --c5c-swal-soft: rgba(151, 2, 80, 0.1);
    --c5c-swal-surface: #ffffff;
    --c5c-swal-text: #212529;
    --c5c-swal-muted: #6c757d;
    --c5c-swal-border: #dee2e6;
    --c5c-swal-field: #f8f9fa;
    background-color: rgba(12, 6, 10, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

[data-bs-theme="dark"] .swal-overlay,
body.dark-mode:not(.no-dark) .swal-overlay,
body.app-body .swal-overlay {
    --c5c-swal-surface: #202020;
    --c5c-swal-text: #e9ecef;
    --c5c-swal-muted: #9aa0a6;
    --c5c-swal-border: rgba(255, 255, 255, 0.12);
    --c5c-swal-field: #2a2a2a;
}

/* ------------------------------------------------------------------ the dialog */

body .swal-overlay .swal-modal {
    position: relative;
    overflow: hidden;
    padding-top: 6px;
    border: 1px solid var(--c5c-swal-border);
    border-radius: 18px;
    background-color: var(--c5c-swal-surface) !important;
    background-image: radial-gradient(320px 220px at 0 0, var(--c5c-swal-soft), transparent 70%);
    color: var(--c5c-swal-text);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(151, 2, 80, 0.08);
}

/* The accent bar on top, as on the broadcast popup. */
body .swal-overlay .swal-modal::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--c5c-swal-accent), var(--c5c-swal-accent-2));
    pointer-events: none;
}

/* Size. A plain dialog: one comfortable width (beats layout.css / webPortal.css, which made some tiny). */
body .swal-overlay .swal-modal:not(:has(.swal-content > :not(.swal-content__input):not(.swal-content__textarea))) {
    width: min(520px, calc(100vw - 32px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
}

/* A dialog with a screen's own content: never narrower than a comfortable minimum; its own width rules still apply. */
body .swal-overlay .swal-modal:has(.swal-content > :not(.swal-content__input):not(.swal-content__textarea)) {
    min-width: min(560px, calc(100vw - 32px)) !important;
}

/* Motion: the dialog rises in, then the title, the text and the buttons follow. */
body .swal-overlay--show-modal .swal-modal {
    animation: c5c-swal-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

body .swal-overlay--show-modal .swal-title,
body .swal-overlay--show-modal .swal-text,
body .swal-overlay--show-modal .swal-content,
body .swal-overlay--show-modal .swal-footer {
    animation: c5c-swal-rise 0.32s ease both;
}

body .swal-overlay--show-modal .swal-title { animation-delay: 0.06s; }
body .swal-overlay--show-modal .swal-text { animation-delay: 0.1s; }
body .swal-overlay--show-modal .swal-content { animation-delay: 0.12s; }
body .swal-overlay--show-modal .swal-footer { animation-delay: 0.16s; }

/* The overlay fades in and out instead of snapping. */
body .swal-overlay {
    transition: opacity 0.22s ease;
}

@keyframes c5c-swal-in {
    from { opacity: 0; transform: translateY(18px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

@keyframes c5c-swal-rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* The accent follows what the dialog says. */
.swal-modal:has(.swal-icon--success) { --c5c-swal-accent: #198754; --c5c-swal-accent-2: #20c997; --c5c-swal-soft: rgba(25, 135, 84, 0.12); }
.swal-modal:has(.swal-icon--warning) { --c5c-swal-accent: #e8890c; --c5c-swal-accent-2: #f5b82e; --c5c-swal-soft: rgba(232, 137, 12, 0.14); }
.swal-modal:has(.swal-icon--error),
.swal-modal:has(.swal-button--danger) { --c5c-swal-accent: #c62828; --c5c-swal-accent-2: #970250; --c5c-swal-soft: rgba(198, 40, 40, 0.14); }

/* ------------------------------------------------------------------ text */

body .swal-overlay .swal-title {
    padding: 18px 24px 0;
    font-size: 1.3rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--c5c-swal-text) !important;
    overflow-wrap: anywhere;
}

body .swal-overlay .swal-title:not(:last-child) {
    margin-bottom: 8px;
}

body .swal-overlay .swal-text {
    display: block;
    max-width: none;
    padding: 0 24px;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
    color: var(--c5c-swal-muted) !important;
    overflow-wrap: anywhere;
}

body .swal-overlay .swal-content {
    padding: 0 24px;
    color: var(--c5c-swal-text);
}

/* ------------------------------------------------------------------ icons (tinted, same drawing and animation) */

body .swal-overlay .swal-icon {
    margin-top: 22px;
}

body .swal-overlay .swal-icon--success { border-color: rgba(25, 135, 84, 0.3); }
body .swal-overlay .swal-icon--success__ring { border-color: rgba(25, 135, 84, 0.25); }
body .swal-overlay .swal-icon--success__line { background-color: #198754 !important; }
/* The success drawing hides its corners with the dialog colour. */
body .swal-overlay .swal-icon--success::before,
body .swal-overlay .swal-icon--success::after,
body .swal-overlay .swal-icon--success__hide-corners {
    background: var(--c5c-swal-surface) !important;
}

body .swal-overlay .swal-icon--warning { border-color: #e8890c !important; }
body .swal-overlay .swal-icon--warning__body,
body .swal-overlay .swal-icon--warning__dot { background-color: #e8890c; }

body .swal-overlay .swal-icon--error { border-color: #c62828; }
body .swal-overlay .swal-icon--error__line { background-color: #c62828 !important; }

body .swal-overlay .swal-icon--info { border-color: #970250; }
body .swal-overlay .swal-icon--info::before,
body .swal-overlay .swal-icon--info::after { background-color: #970250; }

/* ------------------------------------------------------------------ fields */

body .swal-overlay .swal-content__input,
body .swal-overlay .swal-content__textarea {
    border: 1px solid var(--c5c-swal-border);
    border-radius: 10px;
    background: var(--c5c-swal-field);
    color: var(--c5c-swal-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body .swal-overlay .swal-content__input:focus,
body .swal-overlay .swal-content__textarea:focus {
    outline: none;
    border-color: var(--c5c-swal-accent);
    box-shadow: 0 0 0 3px var(--c5c-swal-soft);
}

/* ------------------------------------------------------------------ footer and buttons */

/* .swal-modal in the chain: wins over the FiveRoom window's dark footer rule, which hides the divider. */
body .swal-overlay .swal-modal .swal-footer {
    margin-top: 18px;
    padding: 14px 24px 18px;
    border-top: 1px solid var(--c5c-swal-border);
    background: transparent !important;
    text-align: right;
}

/* Shape for every button. The colour stays low-specificity (.swal-footer .swal-button, no !important) so a button a
   screen colours itself (className on a custom button) keeps its colour - the page's rule loads later and wins. */
body .swal-overlay .swal-button {
    border: 0;
    border-radius: 10px;
    padding: 9px 22px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 6px 16px rgba(151, 2, 80, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.swal-footer .swal-button {
    color: #fff;
    background-color: #970250;
}

/* The library's own confirm gets the broadcast gradient. */
body .swal-overlay .swal-button--confirm:not(.swal-button--danger) {
    background-image: linear-gradient(135deg, #970250, #690136);
}

body .swal-overlay .swal-button:not([disabled]):hover,
body .swal-overlay .swal-button:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(151, 2, 80, 0.38);
    outline: none;
}

body .swal-overlay .swal-button:focus {
    box-shadow: 0 0 0 3px var(--c5c-swal-soft), 0 6px 16px rgba(151, 2, 80, 0.3);
}

body .swal-overlay .swal-button--danger {
    background-color: #c62828;
    background-image: linear-gradient(135deg, #c62828, #8e1b1b);
    box-shadow: 0 6px 16px rgba(198, 40, 40, 0.3);
}

body .swal-overlay .swal-button--danger:not([disabled]):hover {
    box-shadow: 0 10px 22px rgba(198, 40, 40, 0.38);
}

body .swal-overlay .swal-button--cancel {
    color: var(--c5c-swal-text);
    background-image: none;
}

/* layout.css paints the dark-mode cancel grey with !important; the library's own Cancel follows the theme instead. */
body .swal-overlay .swal-footer .swal-button--cancel {
    background-color: transparent !important;
    border: 1px solid var(--c5c-swal-border);
    box-shadow: none;
}

body .swal-overlay .swal-footer .swal-button--cancel:not([disabled]):hover,
body .swal-overlay .swal-footer .swal-button--cancel:focus-visible {
    background-color: var(--c5c-swal-soft) !important;
    box-shadow: none;
}

body .swal-overlay .swal-button--loading {
    color: transparent !important;
}

@media (max-width: 575px) {
    body .swal-overlay .swal-modal { border-radius: 16px; }
    body .swal-overlay .swal-title { padding: 16px 18px 0; }
    body .swal-overlay .swal-text,
    body .swal-overlay .swal-content { padding: 0 18px; }
    body .swal-overlay .swal-modal .swal-footer { padding: 12px 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    body .swal-overlay--show-modal .swal-modal,
    body .swal-overlay--show-modal .swal-title,
    body .swal-overlay--show-modal .swal-text,
    body .swal-overlay--show-modal .swal-content,
    body .swal-overlay--show-modal .swal-footer { animation: none; }
    body .swal-overlay .swal-button,
    body .swal-overlay { transition: none; }
}