/*
 * Unified Popup — one modern dialog/alert/toast system for the whole site.
 *
 * Replaces every native alert() / confirm() / prompt() with an in-app popup
 * that matches the website's design language (Inter, site color tokens,
 * --ui-scale chrome contract).
 *
 * Self-contained: works on pages that do NOT load main.css (cpanel, enricher,
 * backfill admin, compare UI). Every value falls back to the site defaults
 * when the global design tokens are not present.
 *
 * Usage: see assets/js/unified-popup.js (window.UIPopup).
 */

.up-root {
    /* Map site tokens -> internal tokens, with standalone fallbacks */
    --up-primary: var(--primary-color, #2196f3);
    --up-success: var(--secondary-color, #4caf50);
    --up-warning: var(--accent-color, #ff9800);
    --up-danger: var(--danger-color, #f44336);
    --up-surface: var(--surface-color, #ffffff);
    --up-text: var(--text-primary, #1f2933);
    --up-text-secondary: var(--text-secondary, #5f6b7a);
    --up-border: var(--border-color, #e4e7eb);
    --up-scale: var(--ui-scale, 1);
    --up-radius: calc(12px * var(--up-scale));
    --up-font: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ---------- Overlay ---------- */

.up-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(24px * var(--up-scale));
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 160ms ease;
    font-family: var(--up-font);
}

.up-overlay.up-open {
    opacity: 1;
}

/* Stacked dialogs: push earlier ones slightly back */
.up-overlay.up-stacked .up-dialog {
    transform: scale(0.97) translateY(calc(-8px * var(--up-scale)));
    filter: brightness(0.97);
}

/* ---------- Dialog shell ---------- */

.up-dialog {
    background: var(--up-surface);
    color: var(--up-text);
    border-radius: var(--up-radius);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25), 0 4px 12px rgba(15, 23, 42, 0.12);
    width: 100%;
    max-width: calc(430px * var(--up-scale));
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.96) translateY(calc(6px * var(--up-scale)));
    opacity: 0;
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease;
    outline: none;
}

.up-overlay.up-open .up-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.up-overlay.up-closing {
    opacity: 0;
}

.up-overlay.up-closing .up-dialog {
    transform: scale(0.97) translateY(calc(4px * var(--up-scale)));
    opacity: 0;
}

/* ---------- Body layout ---------- */

.up-body {
    display: flex;
    gap: calc(14px * var(--up-scale));
    padding: calc(22px * var(--up-scale)) calc(22px * var(--up-scale)) calc(6px * var(--up-scale));
    overflow-y: auto;
}

.up-icon {
    flex: 0 0 auto;
    width: calc(40px * var(--up-scale));
    height: calc(40px * var(--up-scale));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.up-icon svg {
    width: calc(20px * var(--up-scale));
    height: calc(20px * var(--up-scale));
}

.up-icon-info    { background: rgba(33, 150, 243, 0.12); color: var(--up-primary); }
.up-icon-success { background: rgba(76, 175, 80, 0.13);  color: var(--up-success); }
.up-icon-warning { background: rgba(255, 152, 0, 0.14);  color: var(--up-warning); }
.up-icon-danger  { background: rgba(244, 67, 54, 0.11);  color: var(--up-danger); }

.up-content {
    flex: 1 1 auto;
    min-width: 0;
}

.up-title {
    margin: calc(8px * var(--up-scale)) 0 calc(6px * var(--up-scale));
    font-size: calc(16px * var(--up-scale));
    font-weight: 600;
    line-height: 1.3;
    color: var(--up-text);
}

.up-message {
    font-size: calc(13.5px * var(--up-scale));
    line-height: 1.55;
    color: var(--up-text-secondary);
    white-space: pre-line;          /* keeps the \n\n structure of old native messages */
    word-wrap: break-word;
}

.up-message + .up-input-wrap {
    margin-top: calc(12px * var(--up-scale));
}

/* ---------- Prompt input ---------- */

.up-input-wrap {
    margin: calc(4px * var(--up-scale)) 0;
}

.up-input,
.up-textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--up-font);
    font-size: calc(13.5px * var(--up-scale));
    color: var(--up-text);
    background: var(--up-surface);
    border: 1px solid var(--up-border);
    border-radius: calc(8px * var(--up-scale));
    padding: calc(9px * var(--up-scale)) calc(12px * var(--up-scale));
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.up-textarea {
    min-height: calc(72px * var(--up-scale));
    resize: vertical;
    line-height: 1.45;
}

.up-input:focus,
.up-textarea:focus {
    outline: none;
    border-color: var(--up-primary);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15);
}

.up-input.up-invalid,
.up-textarea.up-invalid {
    border-color: var(--up-danger);
}

.up-input.up-invalid:focus,
.up-textarea.up-invalid:focus {
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.14);
}

.up-field-error {
    display: none;
    margin-top: calc(6px * var(--up-scale));
    font-size: calc(12px * var(--up-scale));
    color: var(--up-danger);
}

.up-field-error.up-visible {
    display: block;
}

/* ---------- Footer / buttons ---------- */

.up-footer {
    display: flex;
    justify-content: flex-end;
    gap: calc(10px * var(--up-scale));
    padding: calc(14px * var(--up-scale)) calc(22px * var(--up-scale)) calc(20px * var(--up-scale));
}

.up-btn {
    font-family: var(--up-font);
    font-size: calc(13px * var(--up-scale));
    font-weight: 600;
    line-height: 1;
    padding: calc(10px * var(--up-scale)) calc(18px * var(--up-scale));
    border-radius: calc(8px * var(--up-scale));
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 60ms ease;
}

.up-btn:active {
    transform: translateY(1px);
}

.up-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.25);
}

.up-btn-ghost {
    background: var(--up-surface);
    color: var(--up-text-secondary);
    border-color: var(--up-border);
}

.up-btn-ghost:hover {
    background: var(--surface-hover, #f0f2f5);
    color: var(--up-text);
}

.up-btn-primary {
    background: var(--up-primary);
    color: #ffffff;
}

.up-btn-primary:hover {
    background: #1e87d8; /* darker shade of site primary */
}

.up-btn-danger {
    background: var(--up-danger);
    color: #ffffff;
}

.up-btn-danger:hover {
    background: #d93825;
}

.up-btn-success {
    background: var(--up-success);
    color: #ffffff;
}

.up-btn-success:hover {
    background: #3f9a44;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
    .up-dialog {
        max-width: 100%;
    }

    .up-footer {
        flex-direction: column-reverse;
    }

    .up-btn {
        width: 100%;
        padding: calc(12px * var(--up-scale));
    }
}

/* ---------- Toasts (refined version of the site's existing design) ----------
 *
 * Keeps the signature of the current .toast (white card, 4px colored left
 * border, icon + message + ×), refined: softer shadow, rounder corners,
 * filled variant-colored icon, subtle auto-dismiss progress bar, pause on
 * hover.
 */

.up-toast-container {
    position: fixed;
    top: calc(70px * var(--up-scale));
    right: calc(20px * var(--up-scale));
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--up-scale));
    pointer-events: none;
    font-family: var(--up-font);
}

.up-toast {
    --up-toast-accent: var(--up-primary);
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(10px * var(--up-scale));
    background: var(--up-surface);
    color: var(--up-text);
    border: 1px solid var(--up-border);
    border-left: 4px solid var(--up-toast-accent);
    border-radius: calc(8px * var(--up-scale));
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.08);
    padding: calc(11px * var(--up-scale)) calc(13px * var(--up-scale));
    min-width: calc(280px * var(--up-scale));
    max-width: calc(380px * var(--up-scale));
    overflow: hidden;
    transform: translateX(110%);
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
    opacity: 0;
}

.up-toast-success { --up-toast-accent: var(--up-success); }
.up-toast-warning { --up-toast-accent: var(--up-warning); }
.up-toast-danger  { --up-toast-accent: var(--up-danger); }

.up-toast.up-open {
    transform: translateX(0);
    opacity: 1;
}

.up-toast.up-closing {
    transform: translateX(110%);
    opacity: 0;
}

.up-toast-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    color: var(--up-toast-accent);
}

.up-toast-icon svg {
    width: calc(18px * var(--up-scale));
    height: calc(18px * var(--up-scale));
}

.up-toast-text {
    flex: 1 1 auto;
    font-size: calc(13px * var(--up-scale));
    font-weight: 500;
    line-height: 1.4;
    color: var(--up-text);
    word-wrap: break-word;
}

.up-toast-close {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: calc(2px * var(--up-scale));
    margin: 0;
    cursor: pointer;
    color: var(--up-text-secondary);
    font-size: calc(16px * var(--up-scale));
    line-height: 1;
    opacity: 0.45;
    border-radius: calc(4px * var(--up-scale));
    transition: opacity 120ms ease;
}

.up-toast-close:hover {
    opacity: 1;
}

/* Auto-dismiss countdown bar */
.up-toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--up-toast-accent);
    opacity: 0.4;
}