/**
 * Unified delete-confirmation styling (pages, quizzes, strategy canvas, chat custom-popup danger).
 * Palette: dark #072B2E, main #5AB774, light #E8FCEC, accent #FEF3A4 — tokens in quiz-app-tokens.css :root
 */

/* --- Pages / Quizzes: .modal-overlay from pages.css --- */
.modal-overlay.buro-delete-confirm-modal {
    background: var(--buro-delete-overlay);
    backdrop-filter: blur(4px);
}

.modal-overlay.buro-delete-confirm-modal .modal-content {
    background: var(--buro-delete-surface);
    border: 1px solid var(--buro-delete-border);
    box-shadow: 0 25px 50px -12px rgba(7, 43, 46, 0.28);
}

.modal-overlay.buro-delete-confirm-modal .modal-header h2 {
    color: var(--buro-delete-text);
}

.modal-overlay.buro-delete-confirm-modal .modal-body p {
    color: var(--buro-delete-text-muted);
}

.modal-overlay.buro-delete-confirm-modal .modal-close {
    color: var(--buro-delete-text-muted);
}

.modal-overlay.buro-delete-confirm-modal .modal-close:hover {
    color: var(--buro-delete-text);
    background: rgba(90, 183, 116, 0.12);
}

.modal-overlay.buro-delete-confirm-modal .btn-secondary {
    background: var(--buro-delete-secondary-bg);
    color: var(--buro-delete-text);
    border: 1px solid var(--buro-delete-secondary-border);
}

.modal-overlay.buro-delete-confirm-modal .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--buro-brand-dark-green);
}

/* Primary destructive action */
.btn-primary.buro-delete-confirm-primary,
.modal-overlay.buro-delete-confirm-modal .btn-primary.buro-delete-confirm-primary {
    background: var(--buro-delete-btn-bg) !important;
    color: var(--buro-delete-btn-text) !important;
    border-color: var(--buro-delete-btn-bg) !important;
}

.btn-primary.buro-delete-confirm-primary:hover,
.modal-overlay.buro-delete-confirm-modal .btn-primary.buro-delete-confirm-primary:hover {
    background: var(--buro-delete-btn-hover-bg) !important;
    color: var(--buro-delete-btn-hover-text) !important;
    border-color: var(--buro-delete-btn-hover-bg) !important;
}

/* --- Strategy canvas: programmatic confirm modal --- */
.confirm-modal-overlay.buro-delete-confirm-modal {
    background: var(--buro-delete-overlay);
    backdrop-filter: blur(4px);
}

.confirm-modal.buro-delete-confirm-modal {
    background: var(--buro-delete-surface);
    border: 1px solid var(--buro-delete-border);
    box-shadow: 0 30px 80px rgba(7, 43, 46, 0.22);
}

.confirm-modal.buro-delete-confirm-modal .confirm-modal-header {
    border-bottom-color: var(--buro-delete-border);
}

.confirm-modal.buro-delete-confirm-modal .confirm-modal-header h3 {
    color: var(--buro-delete-text);
}

.confirm-modal.buro-delete-confirm-modal .confirm-modal-close {
    color: var(--buro-delete-text-muted);
}

.confirm-modal.buro-delete-confirm-modal .confirm-modal-close:hover {
    color: var(--buro-delete-text);
    background: rgba(90, 183, 116, 0.12);
}

.confirm-modal.buro-delete-confirm-modal .confirm-modal-body {
    color: var(--buro-delete-text-muted);
}

.confirm-modal.buro-delete-confirm-modal .confirm-modal-cancel {
    background: var(--buro-delete-secondary-bg);
    color: var(--buro-delete-text);
    border: 1px solid var(--buro-delete-secondary-border);
}

.confirm-modal.buro-delete-confirm-modal .confirm-modal-cancel:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--buro-brand-dark-green);
}

.confirm-modal.buro-delete-confirm-modal .confirm-modal-confirm {
    background: var(--buro-delete-btn-bg);
    color: var(--buro-delete-btn-text);
}

.confirm-modal.buro-delete-confirm-modal .confirm-modal-confirm:hover {
    background: var(--buro-delete-btn-hover-bg);
    color: var(--buro-delete-btn-hover-text);
}

/* --- Strategy canvas HTML modals: .modal-footer .btn-primary --- */
.modal-overlay.buro-delete-confirm-modal .modal-footer .btn-primary.buro-delete-confirm-primary {
    background: var(--buro-delete-btn-bg) !important;
    color: var(--buro-delete-btn-text) !important;
    border-color: var(--buro-delete-btn-bg) !important;
}

.modal-overlay.buro-delete-confirm-modal .modal-footer .btn-primary.buro-delete-confirm-primary:hover {
    background: var(--buro-delete-btn-hover-bg) !important;
    color: var(--buro-delete-btn-hover-text) !important;
    border-color: var(--buro-delete-btn-hover-bg) !important;
}

/* --- Chat / strategy list: custom-popup when danger --- */
.custom-popup-overlay.buro-delete-confirm {
    background-color: var(--buro-delete-overlay) !important;
}

.custom-popup-overlay.buro-delete-confirm .custom-popup {
    background: var(--buro-delete-surface) !important;
    border: 1px solid var(--buro-delete-border);
    box-shadow: 0 25px 50px -12px rgba(7, 43, 46, 0.28);
}

.custom-popup-overlay.buro-delete-confirm .custom-popup-title {
    color: var(--buro-delete-text) !important;
}

.custom-popup-overlay.buro-delete-confirm .custom-popup-message {
    color: var(--buro-delete-text-muted) !important;
}

.custom-popup-overlay.buro-delete-confirm .custom-popup-icon.danger {
    background-color: var(--buro-delete-icon-bg) !important;
    color: var(--buro-delete-icon-fg) !important;
}

.custom-popup-overlay.buro-delete-confirm .custom-popup-btn-secondary {
    background-color: var(--buro-delete-secondary-bg) !important;
    color: var(--buro-delete-text) !important;
    border-color: var(--buro-delete-secondary-border) !important;
}

.custom-popup-overlay.buro-delete-confirm .custom-popup-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: var(--buro-brand-dark-green) !important;
}

.custom-popup-overlay.buro-delete-confirm .custom-popup-btn-primary.danger {
    background-color: var(--buro-delete-btn-bg) !important;
    border-color: var(--buro-delete-btn-bg) !important;
    color: var(--buro-delete-btn-text) !important;
}

.custom-popup-overlay.buro-delete-confirm .custom-popup-btn-primary.danger:hover {
    background-color: var(--buro-delete-btn-hover-bg) !important;
    border-color: var(--buro-delete-btn-hover-bg) !important;
    color: var(--buro-delete-btn-hover-text) !important;
}