/* Custom CSS for ROTC Attendance System */

/* Custom animations */
@keyframes pulse-once {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.animate-pulse-once {
    animation: pulse-once 2s ease-in-out;
}

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

.animate-spin-slow {
    animation: spin-slow 20s linear infinite;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1a202c;
}

::-webkit-scrollbar-thumb {
    background: #4a5568;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #718096;
}

/* Form focus styles */
input:focus, button:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Transition utilities */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* Backdrop blur */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

/* Custom shadows */
.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
/* Custom CSS for ROTC Attendance System */

/* Custom animations */
@keyframes pulse-once {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

.animate-pulse-once {
    animation: pulse-once 2s ease-in-out;
}

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

.animate-spin-slow {
    animation: spin-slow 20s linear infinite;
}

@keyframes bounceIn {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

.animate-bounce-in {
    animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

@keyframes slideDown {
    0% { transform: translateY(-20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.animate-slide-down {
    animation: slideDown 0.4s ease-out;
}

@keyframes vibrate {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

.animate-vibrate {
    animation: vibrate 0.3s linear infinite;
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.error-shake {
    animation: errorShake 0.5s ease-in-out;
}

@keyframes errorPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.error-pulse {
    animation: errorPulse 0.5s ease-in-out;
}

@keyframes errorFlash {
    0%, 100% { background-color: rgba(239, 68, 68, 0.2); }
    50% { background-color: rgba(239, 68, 68, 0.4); }
}

.error-flash {
    animation: errorFlash 0.5s ease-in-out;
}

@keyframes inputError {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

.input-error {
    animation: inputError 0.5s ease-in-out;
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Auto-dismiss animation */
.auto-dismiss {
    animation: fadeOutHide 0.5s ease 5s forwards;
    animation-fill-mode: forwards;
}

@keyframes fadeOutHide {
    0% { opacity: 1; visibility: visible; }
    99% { opacity: 0; visibility: visible; }
    100% { opacity: 0; visibility: hidden; height: 0; margin: 0; padding: 0; border: 0; }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1a202c;
}

::-webkit-scrollbar-thumb {
    background: #4a5568;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #718096;
}

/* Form focus styles */
input:focus, button:focus, select:focus, textarea:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Transition utilities */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* Backdrop blur */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Custom shadows */
.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.shadow-glow-blue {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.shadow-glow-red {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

.shadow-glow-green {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

/* Gradient backgrounds */
.gradient-blue {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-red {
    background: linear-gradient(135deg, #f56565 0%, #ed64a6 100%);
}

.gradient-green {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}

/* Button shine effect */
.button-shine {
    position: relative;
    overflow: hidden;
}

.button-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.button-shine:hover::after {
    left: 100%;
}