/* Custom styles for DigiPharmacie Scraper */

/* Custom animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

/* Progress bar animations */
@keyframes progress {
    0% { width: 0%; }
}

.progress-bar {
    animation: progress 1s ease-in-out;
}

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

.custom-scrollbar::-webkit-scrollbar-track {
    background: #fdfcfd; /* magnolia-900 */
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #f3eff5; /* magnolia-500 */
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #5a9216; /* apple-green-500 */
}

/* Status indicators */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
}

.status-success { background-color: #347019; } /* office-green-500 */
.status-error { background-color: #ef4444; }
.status-warning { background-color: #5a9216; } /* apple-green-500 */
.status-info { background-color: #454955; } /* charcoal-500 */

/* Loading states */
.loading-skeleton {
    background: linear-gradient(90deg, #fdfcfd 25%, #f8f6f9 50%, #fdfcfd 75%); /* magnolia shades */
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Tables */
.table-hover tbody tr:hover {
    background-color: #fdfcfd; /* magnolia-900 */
}

/* Form enhancements */
.form-input:focus {
    box-shadow: 0 0 0 3px rgba(90, 146, 22, 0.1); /* apple-green-500 with opacity */
    border-color: #5a9216; /* apple-green-500 */
}

.form-select:focus {
    box-shadow: 0 0 0 3px rgba(90, 146, 22, 0.1); /* apple-green-500 with opacity */
    border-color: #5a9216; /* apple-green-500 */
}

/* Modal enhancements */
.modal-backdrop {
    backdrop-filter: blur(4px);
}

/* Button states */
/* Button variants */
.btn-primary {
    @apply inline-flex justify-center rounded bg-apple-green-500 hover:bg-apple-green-600 text-white font-semibold px-4 py-2 transition-colors focus:outline-none focus:ring-2 focus:ring-apple-green-500 focus:ring-offset-2;
}

.btn-secondary {
    @apply bg-office-green-500 hover:bg-office-green-600 rounded text-white font-semibold px-4 py-2 transition-colors focus:outline-none focus:ring-2 focus:ring-office-green-500 focus:ring-offset-2;
}

.btn-outline {
    @apply inline-flex justify-center rounded border border-magnolia-500 bg-white px-4 py-2 text-base font-semibold text-night-600 hover:bg-magnolia-900 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-apple-green-500 focus:ring-offset-2 sm:col-start-1 sm:mt-0 transition-all duration-200;
}

.btn-success {
    @apply bg-green-600 text-white hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2;
    transition: all 0.2s ease-in-out;
}

.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-2 focus:ring-red-500 focus:ring-offset-2;
    transition: all 0.2s ease-in-out;
}

/* Notification styles */
.notification {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    animation: slideIn 0.3s ease-out;
}

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

/* Progress indicators */
.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring__circle {
    transition: stroke-dasharray 0.35s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* Dark mode compatibility */
@media (prefers-color-scheme: dark) {
    .dark-mode {
        --bg-primary: #1f2937;
        --bg-secondary: #374151;
        --text-primary: #f9fafb;
        --text-secondary: #d1d5db;
        --border-color: #4b5563;
    }
}

/* Responsive utilities */
@media (max-width: 640px) {
    .mobile-hidden {
        display: none;
    }
    
    .mobile-full {
        width: 100%;
    }
}

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

/* Accessibility improvements */
.focus-visible:focus {
    outline: 2px solid #5a9216; /* apple-green-500 */
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Custom utilities */
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.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;
}