/* static/css/custom.css */

/* Custom animations and effects */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-red {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .8;
    }
}

/* Utility classes */
.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

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

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

::-webkit-scrollbar-track {
    background: #ffffff;
}

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

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

/* Enhanced form inputs with red hover outline */
.form-input {
    @apply w-full px-4 py-3 border border-red-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-all duration-200;
}

.form-input:hover {
    border-color: #dc2626;
    outline: 2px solid rgba(220, 38, 38, 0.3);
    outline-offset: 1px;
}

.form-input:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    outline: 2px solid #dc2626;
    outline-offset: 1px;
}

/* Additional input variants with hover effects */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
textarea:hover,
select:hover {
    border-color: #dc2626 !important;
    outline: 2px solid rgba(220, 38, 38, 0.3);
    outline-offset: 1px;
    transition: all 0.2s ease-in-out;
}

/* Button variants */
.btn-primary {
    @apply bg-red-600 text-white font-medium px-6 py-3 rounded-lg hover:bg-red-700 transition-all duration-200 shadow-md hover:shadow-lg;
}

.btn-secondary {
    @apply border border-red-600 text-red-600 font-medium px-6 py-3 rounded-lg hover:bg-red-50 transition-all duration-200;
}

.btn-ghost {
    @apply text-red-600 hover:text-red-800 font-medium border-b-2 border-transparent hover:border-red-600 pb-1 transition-all duration-200;
}

/* Card hover effects */
.card-hover {
    @apply transition-all duration-200 hover:shadow-lg hover:-translate-y-1;
}

.card-hover:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Red gradient backgrounds */
.bg-gradient-red {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
}

.bg-gradient-red-light {
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
}

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

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Custom border patterns */
.border-pattern {
    border-image: linear-gradient(45deg, #dc2626, #ef4444) 1;
}

/* Loading spinner */
.spinner {
    border: 3px solid #fee2e2;
    border-top: 3px solid #dc2626;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Toast notifications */
.toast {
    @apply fixed top-4 right-4 bg-white border border-red-200 rounded-lg shadow-lg p-4 z-50;
    animation: slideInRight 0.3s ease-out;
}

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

/* Progress bars */
.progress-bar {
    @apply w-full bg-red-100 rounded-full h-2;
}

.progress-fill {
    @apply bg-red-600 h-2 rounded-full transition-all duration-300;
}

/* Badge styles */
.badge {
    @apply inline-block px-3 py-1 rounded-full text-sm font-medium;
}

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

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

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

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

/* Avatar placeholders */
.avatar {
    @apply w-10 h-10 rounded-full flex items-center justify-center font-semibold text-sm;
}

.avatar-red {
    @apply bg-red-100 text-red-600;
}

/* Dropdown menus */
.dropdown {
    @apply absolute right-0 mt-2 bg-white border border-red-200 rounded-lg shadow-lg;
    min-width: 12rem;
    z-index: 50;
}

.dropdown-item {
    @apply block px-4 py-2 text-red-600 hover:bg-red-50 hover:text-red-800 transition-colors duration-200;
}

/* Mobile responsiveness helpers */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none;
    }
    
    .mobile-full {
        width: 100%;
    }
    
    .mobile-p-4 {
        padding: 1rem;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none;
    }
    
    .print-break {
        page-break-after: always;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .border-red-200 {
        border-color: #dc2626;
    }
    
    .text-gray-600 {
        color: #374151;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    /* Maintain hover effects even with reduced motion */
    .form-input:hover,
    input[type="text"]:hover,
    input[type="email"]:hover,
    input[type="password"]:hover,
    input[type="number"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    textarea:hover,
    select:hover {
        transition-duration: 0.01ms !important;
    }
}