/* Custom styles for ArtGen Studio */

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

@keyframes shimmer {
    0% {
        background-position: -468px 0;
    }
    100% {
        background-position: 468px 0;
    }
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

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

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

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

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

/* Custom focus styles */
.focus-ring:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #6366f1, 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/* Image hover effects */
.image-hover-scale {
    transition: transform 0.3s ease-in-out;
}

.image-hover-scale:hover {
    transform: scale(1.05);
}

/* Backdrop blur fallback */
.backdrop-blur-fallback {
    background-color: rgba(255, 255, 255, 0.9);
}

@supports (backdrop-filter: blur(8px)) {
    .backdrop-blur-fallback {
        background-color: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(8px);
    }
}

/* Loading states */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, transparent 37%, #f0f0f0 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}

.loading-pulse {
    animation: pulse-soft 2s ease-in-out infinite;
}

/* Custom button styles */
.btn-primary {
    @apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium;
}

.btn-secondary {
    @apply px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors font-medium;
}

.btn-success {
    @apply px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium;
}

.btn-danger {
    @apply px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium;
}

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

.card-header {
    @apply px-6 py-4 border-b border-gray-200;
}

.card-body {
    @apply p-6;
}

.card-footer {
    @apply px-6 py-4 border-t border-gray-200 bg-gray-50;
}

/* Badge styles */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

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

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

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

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

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

/* Alert styles */
.alert {
    @apply p-4 rounded-lg border;
}

.alert-success {
    @apply bg-green-50 border-green-200 text-green-700;
}

.alert-error {
    @apply bg-red-50 border-red-200 text-red-700;
}

.alert-warning {
    @apply bg-yellow-50 border-yellow-200 text-yellow-700;
}

.alert-info {
    @apply bg-blue-50 border-blue-200 text-blue-700;
}

/* Form styles */
.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

.form-error {
    @apply text-sm text-red-600 mt-1;
}

.form-help {
    @apply text-sm text-gray-500 mt-1;
}

/* Modal styles */
.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50;
}

.modal-content {
    @apply bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-hidden;
}

.modal-header {
    @apply flex items-center justify-between p-6 border-b border-gray-200;
}

.modal-body {
    @apply p-6 overflow-y-auto;
}

.modal-footer {
    @apply flex items-center justify-end space-x-3 p-6 border-t border-gray-200 bg-gray-50;
}

/* Grid layouts */
.grid-gallery {
    @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6;
}

.grid-gallery-large {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8;
}

/* Aspect ratio utilities */
.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-photo {
    aspect-ratio: 4 / 3;
}

.aspect-portrait {
    aspect-ratio: 3 / 4;
}

/* HTMX loading indicators */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: block;
}

.htmx-request.htmx-indicator {
    display: block;
}

/* Custom transitions */
.transition-all-fast {
    transition: all 0.15s ease-in-out;
}

.transition-transform-fast {
    transition: transform 0.15s ease-in-out;
}

/* Print-specific styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
}

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

/* High contrast support */
@media (prefers-contrast: high) {
    .card {
        @apply border-2 border-gray-400;
    }
    
    .btn-primary {
        @apply border-2 border-blue-800;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Custom utility classes */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.shadow-soft {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.shadow-medium {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

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

/* Image quality indicators */
.quality-badge-hd {
    @apply bg-gradient-to-r from-green-400 to-green-600 text-white;
}

.quality-badge-standard {
    @apply bg-gradient-to-r from-blue-400 to-blue-600 text-white;
}

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

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

/* Tooltips */
.tooltip {
    @apply relative;
}

.tooltip:hover::before {
    content: attr(data-tooltip);
    @apply absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-10;
}

.tooltip:hover::after {
    content: '';
    @apply absolute bottom-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-gray-900;
}

/* Notification styles */
.notification {
    @apply fixed top-4 right-4 max-w-sm w-full bg-white rounded-lg shadow-lg border z-50 transform transition-all duration-300;
}

.notification.show {
    @apply translate-x-0 opacity-100;
}

.notification.hide {
    @apply translate-x-full opacity-0;
}

.notification-success {
    @apply border-green-200 bg-green-50;
}

.notification-error {
    @apply border-red-200 bg-red-50;
}

.notification-warning {
    @apply border-yellow-200 bg-yellow-50;
}

.notification-info {
    @apply border-blue-200 bg-blue-50;
}