/* Dynamic button states for admin management */

/* Update Access button */
#update-access-btn {
    transition: all 0.2s ease;
    opacity: 1 !important;
}

#update-access-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

#update-access-btn:not(:disabled):active {
    transform: translateY(0);
    background: linear-gradient(90deg, #1d4ed8 0%, #4338ca 100%) !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

/* Remove All Access button */
#remove-access-btn {
    transition: all 0.2s ease;
    opacity: 1 !important;
}

#remove-access-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
}

#remove-access-btn:not(:disabled):active {
    transform: translateY(0);
    background: linear-gradient(90deg, #b91c1c 0%, #991b1b 100%) !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2);
}

/* Create User button */
#create-user-btn {
    transition: all 0.2s ease;
    opacity: 1 !important;
}

#create-user-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}

#create-user-btn:not(:disabled):active {
    transform: translateY(0);
    background: linear-gradient(90deg, #15803d 0%, #14532d 100%) !important;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.2);
}

/* Delete user buttons */
button[id*="delete-user-btn"] {
    transition: all 0.2s ease;
}

button[id*="delete-user-btn"]:hover:not(:disabled) {
    transform: scale(1.1);
}

button[id*="delete-user-btn"]:active:not(:disabled) {
    transform: scale(0.95);
}

button[id*="delete-user-btn"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Cache Management Buttons - Ensure they're always enabled when cache is on */
#clear-cache-btn,
#rebuild-cache-btn {
    opacity: 1 !important;
    cursor: pointer !important;
    color: white !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

#clear-cache-btn {
    background-color: #dc2626 !important; /* Red for clear */
}

#rebuild-cache-btn {
    background-color: #2563eb !important; /* Blue for rebuild */
}

#clear-cache-btn:hover {
    background-color: #b91c1c !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
}

#rebuild-cache-btn:hover {
    background-color: #1d4ed8 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

#clear-cache-btn:active,
#rebuild-cache-btn:active {
    transform: translateY(0);
}

/* Disabled state during loading */
#clear-cache-btn:disabled,
#rebuild-cache-btn:disabled {
    opacity: 0.7 !important;
    cursor: wait !important;
}

/* Loading state for buttons */
.button-loading {
    pointer-events: none;
    opacity: 0.6;
}

.button-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    margin: auto;
    border: 2px solid transparent;
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Fade in animation for alerts */
.animate-fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Spinner animation for loading states */
.fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Progress bar animation */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}