/* ===========================================
   Shared UI surfaces: dialogs, popovers (v2 design language)
   Behaviour lives in /static/js/ui.js. Token-only — no hardcoded colors.
   (Toasts use the existing themed system in utilities.css + _action_scripts.html's
   showToast(); not redefined here to avoid a competing .toast rule.)
   =========================================== */

/* - DIALOGS - */
.dialog-backdrop {
    position: fixed; inset: 0; z-index: 80;
    background: var(--overlay-bg);
    display: none; align-items: center; justify-content: center;
    padding: 24px;
    animation: dialog-fade var(--dur-base) var(--ease-out);
}
.dialog-backdrop.open { display: flex; }
@keyframes dialog-fade { from { opacity: 0; } to { opacity: 1; } }
.dialog {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 24px;
    width: 100%; max-width: 380px;
    box-shadow: var(--shadow-lg);
    animation: dialog-pop var(--dur-base) var(--ease-out);
}
@keyframes dialog-pop {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.dialog-icon {
    width: 40px; height: 40px; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px; font-size: 18px; font-weight: 600;
}
.dialog-icon-danger  { background: var(--c-danger-ghost);  color: var(--c-danger-bold); }
.dialog-icon-warning { background: var(--c-warning-ghost); color: var(--c-warning-bold); }
.dialog-icon-ai      { background: var(--c-special-ghost); color: var(--c-special-bold); }
.dialog-title { font-size: 15px; font-weight: 500; color: var(--text-primary); margin-bottom: 8px; letter-spacing: -0.1px; }
.dialog-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.55; }
.dialog-desc strong { color: var(--text-primary); font-weight: 500; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }
.dialog-checkbox { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); margin-bottom: 16px; cursor: pointer; }

/* - POPOVERS (inline action menus) - */
.popover {
    position: absolute;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 4px;
    box-shadow: var(--shadow-popover);
    min-width: 160px;
    display: flex; flex-direction: column; gap: 1px;
    z-index: 70;
}
.popover-item {
    display: flex; align-items: center; gap: 8px;
    height: 30px; padding: 0 10px;
    background: transparent; border: none;
    font-family: var(--font); font-size: 12px; color: var(--text-primary);
    border-radius: var(--r-sm);
    text-align: left; cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.popover-item:hover { background: var(--surface-hover); }
.popover-item.danger  { color: var(--c-danger-bold); }
.popover-item.danger:hover { background: var(--c-danger-ghost); }
.popover-item.warning { color: var(--c-warning-bold); }
.popover-item.warning:hover { background: var(--c-warning-ghost); }
.popover-divider { height: 1px; background: var(--border-light); margin: 4px 0; }