/**
 * 通用确认模态框样式
 *
 * 与登录弹窗、退出确认共用同一视觉：无模糊遮罩、12px 圆角、单层阴影、
 * 次按钮在左、实色主按钮在右；危险操作使用错误色。
 * 后台授权页单独加载本文件、没有 design-system.css，因此每个令牌都带回退值。
 */

.uap-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--uap-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif);
    animation: uapConfirmFadeIn 0.15s ease;
}

.uap-confirm-modal:not([open]) { display: none; }
.uap-confirm-modal::backdrop { background: transparent; }

.uap-confirm-modal.closing {
    animation: uapConfirmFadeOut 0.15s ease forwards;
}

@keyframes uapConfirmFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes uapConfirmFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.uap-confirm-overlay {
    position: absolute;
    inset: 0;
    background: rgba(28, 25, 23, 0.5);
}

.uap-confirm-dialog {
    position: relative;
    width: 90%;
    max-width: 400px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    box-sizing: border-box;
    background: var(--uap-surface, #ffffff);
    border-radius: var(--uap-radius-md, 12px);
    box-shadow: var(--uap-shadow-xl, 0 32px 64px -12px rgba(15, 23, 42, 0.14));
    border: 1px solid var(--uap-border, #e8e5df);
    overflow: auto;
    overscroll-behavior: contain;
    overflow-wrap: anywhere;
    animation: uapConfirmSlideIn 0.2s ease-out;
}

.uap-confirm-modal.closing .uap-confirm-dialog {
    animation: uapConfirmSlideOut 0.15s ease forwards;
}

@keyframes uapConfirmSlideIn {
    from { transform: translateY(8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes uapConfirmSlideOut {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(8px); opacity: 0; }
}

.uap-confirm-header {
    padding: 22px 24px 0;
}

.uap-confirm-title {
    margin: 0;
    font-size: var(--uap-text-lg, 18px);
    font-weight: 600;
    color: var(--uap-text, #1c1917);
    line-height: 1.4;
}

.uap-confirm-body {
    padding: 8px 24px 20px;
}

.uap-confirm-message {
    margin: 0;
    font-size: var(--uap-text-base, 14px);
    color: var(--uap-text-muted, #57534b);
    line-height: 1.6;
}

.uap-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 24px 22px;
}

.uap-confirm-btn {
    min-width: 88px;
    padding: 10px 18px;
    font-family: inherit;
    font-size: var(--uap-text-base, 14px);
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--uap-radius-sm, 8px);
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.uap-confirm-btn:active {
    transform: scale(0.98);
}

.uap-confirm-btn:focus {
    outline: none;
}

.uap-confirm-btn:focus-visible {
    outline: 2px solid var(--uap-action-bg, #0e7a6d);
    outline-offset: 2px;
}

.uap-confirm-btn-cancel {
    background: var(--uap-surface, #ffffff) !important;
    border-color: var(--uap-border, #e8e5df) !important;
    color: var(--uap-text, #1c1917) !important;
}

.uap-confirm-btn-cancel:hover {
    background: var(--uap-surface-hover, #f5f3ef) !important;
    border-color: var(--uap-border-hover, #a3a099) !important;
}

.uap-confirm-btn-primary {
    background: var(--uap-action-bg, #0e7a6d) !important;
    color: #ffffff !important;
}

.uap-confirm-btn-primary:hover {
    background: var(--uap-action-hover, #0b6359) !important;
}

.uap-confirm-btn-danger {
    background: var(--uap-error, #e11d48) !important;
    color: #ffffff !important;
}

.uap-confirm-btn-danger:hover {
    background: #be123c !important;
}

.uap-confirm-btn-danger:focus-visible {
    outline-color: var(--uap-error, #e11d48);
}

@media (max-width: 480px) {
    .uap-confirm-dialog {
        width: calc(100% - 32px);
        max-width: none;
    }

    .uap-confirm-header {
        padding: 20px 20px 0;
    }

    .uap-confirm-body {
        padding: 8px 20px 18px;
    }

    .uap-confirm-footer {
        padding: 0 20px 20px;
    }

    .uap-confirm-btn {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .uap-confirm-modal,
    .uap-confirm-dialog {
        animation-duration: 0.01ms;
    }
}

body.uap-confirm-modal-open {
    overflow: hidden;
}