/* Essential animations and transitions */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loading spinner animation */
.loading-spinner {
    border: 3px solid #e2e8f0;
    border-radius: 50%;
    border-top: 3px solid #10b981;
    width: 24px;
    height: 24px;
    margin-bottom: 10px;
    animation: spin 1s linear infinite;
}

/* Background gradient */
.gradient-bg {
    background: url('/image/background.png') center center / cover no-repeat;
    background-attachment: fixed;
}

/* Modal animations */
.modal-enter {
    opacity: 0;
    transform: scale(0.9);
}

.modal-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 300ms, transform 300ms;
}

.modal-exit {
    opacity: 1;
    transform: scale(1);
}

.modal-exit-active {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 300ms, transform 300ms;
}

/* Accessibility focus styles */
.focus-outline:focus {
    outline: 2px solid #10b981;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
    }
    
    .content {
        margin: 0;
        padding: 0;
    }
}