/* Confirmation Modal Styles - Component-Based Architecture */

/* Base modal styles */
.confirmation-modal {
    /* Base styles handled by Preline UI */
}

/* Modal header base styles */
.modal-header {
    background-color: #eff6ff; /* Default blue-50 */
    transition: background-color 0.2s ease;
}

/* Modal icon base styles */
.modal-icon {
    color: #2563eb; /* Default blue-600 */
    transition: color 0.2s ease;
}

/* Modal button base styles */
.modal-button {
    background-color: #2563eb; /* Default blue-600 */
    transition: background-color 0.2s ease;
}

.modal-button:hover {
    background-color: #1d4ed8; /* Default blue-700 */
}

/* Action-specific styling using data attributes */

/* Approve Action - Green */
[data-action="approve"] #confirmationModalHeader,
[data-action="approve"] #templateConfirmationHeader {
    background-color: #f0fdf4 !important; /* green-50 */
}

[data-action="approve"] #confirmationModalIcon,
[data-action="approve"] #templateConfirmationIcon {
    color: #16a34a !important; /* green-600 */
}

[data-action="approve"] #confirmationModalButton,
[data-action="approve"] #templateConfirmButton {
    background-color: #16a34a !important; /* green-600 */
}

[data-action="approve"] #confirmationModalButton:hover,
[data-action="approve"] #templateConfirmButton:hover {
    background-color: #15803d !important; /* green-700 */
}

/* Disapprove Action - Amber */
[data-action="disapprove"] #confirmationModalHeader,
[data-action="disapprove"] #templateConfirmationHeader {
    background-color: #fffbeb !important; /* amber-50 */
}

[data-action="disapprove"] #confirmationModalIcon,
[data-action="disapprove"] #templateConfirmationIcon {
    color: #d97706 !important; /* amber-600 */
}

[data-action="disapprove"] #confirmationModalButton,
[data-action="disapprove"] #templateConfirmButton {
    background-color: #d97706 !important; /* amber-600 */
}

[data-action="disapprove"] #confirmationModalButton:hover,
[data-action="disapprove"] #templateConfirmButton:hover {
    background-color: #b45309 !important; /* amber-700 */
}

/* Delete Action - Red */
[data-action="delete"] #confirmationModalHeader,
[data-action="delete"] #templateConfirmationHeader {
    background-color: #fef2f2 !important; /* red-50 */
}

[data-action="delete"] #confirmationModalIcon,
[data-action="delete"] #templateConfirmationIcon {
    color: #dc2626 !important; /* red-600 */
}

[data-action="delete"] #confirmationModalButton,
[data-action="delete"] #templateConfirmButton {
    background-color: #dc2626 !important; /* red-600 */
}

[data-action="delete"] #confirmationModalButton:hover,
[data-action="delete"] #templateConfirmButton:hover {
    background-color: #b91c1c !important; /* red-700 */
}

/* Make Admin Action - Blue */
[data-action="make admin"] #confirmationModalHeader {
    background-color: #eff6ff !important; /* blue-50 */
}

[data-action="make admin"] #confirmationModalIcon {
    color: #2563eb !important; /* blue-600 */
}

[data-action="make admin"] #confirmationModalButton {
    background-color: #2563eb !important; /* blue-600 */
}

[data-action="make admin"] #confirmationModalButton:hover {
    background-color: #1d4ed8 !important; /* blue-700 */
}

/* Revoke Admin Action - Amber */
[data-action="revoke admin"] #confirmationModalHeader {
    background-color: #fffbeb !important; /* amber-50 */
}

[data-action="revoke admin"] #confirmationModalIcon {
    color: #d97706 !important; /* amber-600 */
}

[data-action="revoke admin"] #confirmationModalButton {
    background-color: #d97706 !important; /* amber-600 */
}

[data-action="revoke admin"] #confirmationModalButton:hover {
    background-color: #b45309 !important; /* amber-700 */
}

/* Delete User Action - Red */
[data-action="delete user"] #confirmationModalHeader {
    background-color: #fef2f2 !important; /* red-50 */
}

[data-action="delete user"] #confirmationModalIcon {
    color: #dc2626 !important; /* red-600 */
}

[data-action="delete user"] #confirmationModalButton {
    background-color: #dc2626 !important; /* red-600 */
}

[data-action="delete user"] #confirmationModalButton:hover {
    background-color: #b91c1c !important; /* red-700 */
}

/* Resend Verification Email Action - Blue */
[data-action="resend verification email"] #confirmationModalHeader {
    background-color: #eff6ff !important; /* blue-50 */
}

[data-action="resend verification email"] #confirmationModalIcon {
    color: #2563eb !important; /* blue-600 */
}

[data-action="resend verification email"] #confirmationModalButton {
    background-color: #2563eb !important; /* blue-600 */
}

[data-action="resend verification email"] #confirmationModalButton:hover {
    background-color: #1d4ed8 !important; /* blue-700 */
}

/* Button icon color inheritance */
#confirmationModalButtonIcon,
#templateConfirmIcon {
    color: inherit !important;
}

/* Loading state styles */
.modal-button-loading {
    display: none;
}

#confirmationModalButton:disabled .modal-button-loading,
#templateConfirmButton:disabled .modal-button-loading {
    display: inline-flex;
}

#confirmationModalButton:disabled .modal-button-text,
#confirmationModalButton:disabled .modal-button-icon,
#templateConfirmButton:disabled .modal-button-text,
#templateConfirmButton:disabled .modal-button-icon {
    display: none;
}

/* Warning note visibility control */
[data-action="approve"] #confirmationModalWarning,
[data-action="make admin"] #confirmationModalWarning,
[data-action="resend verification email"] #confirmationModalWarning {
    display: none;
}

[data-action="disapprove"] #confirmationModalWarning,
[data-action="revoke admin"] #confirmationModalWarning {
    display: block;
}

[data-action="delete"] #confirmationModalWarning,
[data-action="delete user"] #confirmationModalWarning {
    display: block;
}

/* Template-specific warning visibility */
[data-action="approve"] #templateWarning,
[data-action="make admin"] #templateWarning,
[data-action="resend verification email"] #templateWarning {
    display: none;
}

[data-action="disapprove"] #templateWarning,
[data-action="revoke admin"] #templateWarning {
    display: block;
}

[data-action="delete"] #templateWarning,
[data-action="delete user"] #templateWarning {
    display: block;
}