/* src/frontend/css/components.css - Component-specific styles */

/* Component-specific styling */
.component-subjectcard {
    /* Specific styles for subject cards */
}

/* Modal animations */
.animate-scale-in {
    animation: scaleIn 0.2s ease-out;
}

@keyframes scaleIn {
    0% {
        transform: scale(0.95);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Fade in animation */
.animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Slide up animation */
.animate-slide-up {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Bounce animation */
.animate-bounce-slow {
    animation: bounce 2s infinite;
}

/* Achievement badge effect */
.achievement-badge {
    position: relative;
    overflow: hidden;
}

.achievement-badge::before {
    content: '✨';
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 1.2rem;
    animation: pulse 2s infinite;
    opacity: 0.7;
}

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Custom scrollbar for content areas */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-300) var(--neutral-100);
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--neutral-100);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--primary-300);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--primary-400);
}

/* Component spacing utilities */
.component-padding {
    padding: var(--space-md);
}

.component-margin {
    margin: var(--space-md);
}

/* Interactive states */
.interactive-element {
    transition: all var(--transition-normal);
    cursor: pointer;
}

.interactive-element:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.interactive-element:active {
    transform: translateY(0);
}

/* Status indicators */
.status-online {
    color: var(--accent-600);
}

.status-offline {
    color: var(--neutral-400);
}

.status-loading {
    color: var(--primary-600);
}

/* Progress indicators */
.progress-container {
    background: var(--neutral-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.progress-fill {
    background: linear-gradient(90deg, var(--primary-500), var(--secondary-500));
    height: 100%;
    transition: width 0.3s ease;
}

/* File upload states */
.dropzone-active {
    border-color: var(--primary-400);
    background-color: var(--primary-50);
}

.dropzone-inactive {
    border-color: var(--neutral-300);
}

.dropzone-error {
    border-color: var(--red-400);
    background-color: var(--red-50);
}

/* Question card states */
.question-unanswered {
    border-left: 4px solid var(--neutral-300);
}

.question-correct {
    border-left: 4px solid var(--accent-500);
}

.question-incorrect {
    border-left: 4px solid var(--red-500);
}

/* Notification styles */
.notification-success {
    background: var(--accent-500);
    color: white;
}

.notification-error {
    background: var(--red-500);
    color: white;
}

.notification-warning {
    background: var(--yellow-500);
    color: white;
}

.notification-info {
    background: var(--primary-500);
    color: white;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .mobile-stack {
        flex-direction: column;
    }
    
    .mobile-full-width {
        width: 100%;
    }
    
    .mobile-hidden {
        display: none;
    }
}

/* Dark mode support (future enhancement) */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles can be added here */
}