/**
 * Custom CSS for AIELTS System
 * Extends Tailwind CSS with custom styles
 */

/* Gradient Backgrounds */
.gradient-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
}

.gradient-secondary {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

.gradient-accent {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
}

/* Card Styles */
.card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200;
}

.card-hover {
    @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}

/* Button Styles */
.btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200;
}

.btn-primary {
    @apply bg-indigo-600 text-white hover:bg-indigo-700;
}

.btn-secondary {
    @apply bg-purple-600 text-white hover:bg-purple-700;
}

.btn-accent {
    @apply bg-pink-500 text-white hover:bg-pink-600;
}

.btn-outline {
    @apply border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-50;
}

.btn-ghost {
    @apply text-gray-700 hover:bg-gray-100;
}

/* Input Styles */
.input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent;
}

.input-error {
    @apply border-red-500 focus:ring-red-500;
}

/* Badge Styles */
.badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-error {
    @apply bg-red-100 text-red-800;
}

.badge-info {
    @apply bg-blue-100 text-blue-800;
}

/* Stat Card */
.stat-card {
    @apply bg-white rounded-lg p-6 shadow-sm border border-gray-200 card-hover;
}

.stat-icon {
    @apply w-12 h-12 rounded-lg flex items-center justify-center text-white text-xl;
}

/* Progress Bar */
.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2 overflow-hidden;
}

.progress-fill {
    @apply h-full rounded-full transition-all duration-500;
}

/* Band Score Colors */
.band-9 { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.band-8-5 { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.band-8 { background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%); }
.band-7-5 { background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); }
.band-7 { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.band-6-5 { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); }
.band-6 { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }

/* Skill Icons */
.skill-listening { @apply text-blue-500; }
.skill-reading { @apply text-green-500; }
.skill-writing { @apply text-purple-500; }
.skill-speaking { @apply text-pink-500; }

/* Animation Classes */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.animate-slide-in-right {
    animation: slideInRight 0.3s ease-out;
}

.animate-slide-in-left {
    animation: slideInLeft 0.3s ease-out;
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

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

/* Hover Effects */
.hover-scale {
    @apply transition-transform duration-200 hover:scale-105;
}

.hover-lift {
    @apply transition-all duration-200 hover:-translate-y-1 hover:shadow-lg;
}

/* Loading Spinner */
.spinner {
    border: 3px solid rgba(99, 102, 241, 0.1);
    border-top-color: #6366f1;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

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

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

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none;
    }
}

/* Tooltip */
.tooltip {
    pointer-events: none;
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1f2937 transparent transparent transparent;
}

/* Focus Visible (Accessibility) */
*:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

/* Text Gradient */
.text-gradient {
    background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glass Effect */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Wave Animation */
@keyframes wave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-wave {
    animation: wave 2s ease-in-out infinite;
}