/* JetSpotter Custom Styles */

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

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

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

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

/* Photo gallery hover effects */
.photo-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.photo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Loading spinner */
.loading-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

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

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

.btn-secondary {
    @apply bg-gray-200 text-gray-800 px-6 py-2 rounded-lg hover:bg-gray-300 transition-colors;
}

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

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

/* Alert styles */
.alert {
    @apply px-4 py-3 rounded-lg mb-4;
}

.alert-success {
    @apply bg-green-100 border border-green-400 text-green-700;
}

.alert-error {
    @apply bg-red-100 border border-red-400 text-red-700;
}

.alert-warning {
    @apply bg-yellow-100 border border-yellow-400 text-yellow-700;
}

/* Navigation active state */
.nav-active {
    @apply text-blue-600 font-semibold;
}

/* Photo grid responsive */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Masonry-style layout for photos */
.masonry {
    column-count: 3;
    column-gap: 1rem;
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .masonry {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .masonry {
        column-count: 1;
    }
}

/* Aviation-specific styles */
.aircraft-badge {
    @apply inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full;
}

.airline-badge {
    @apply inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full;
}

.airport-badge {
    @apply inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full;
}

/* Photo metadata */
.photo-meta {
    @apply text-sm text-gray-600 space-y-1;
}

.photo-meta dt {
    @apply font-medium text-gray-900;
}

.photo-meta dd {
    @apply text-gray-600;
}

/* Responsive utilities */
.container-narrow {
    @apply max-w-4xl mx-auto px-4;
}

.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Responsive list-row layout for mobile: small thumb left, content right, meta stacked */
@media (max-width: 640px) {
    .list-row { align-items: flex-start; gap: 0.75rem; }
    .list-row > a.flex-shrink-0 { flex: 0 0 88px; width: 88px; }
    .list-row > a.flex-shrink-0 img, .list-row img.w-72 { width: 88px !important; height: 56px !important; object-fit: cover; }
    .list-row > .flex-1 { order: 2; min-width: 0; }
    .list-row > .w-56 { order: 3; flex-basis: 100%; width: 100% !important; text-align: left; margin-top: 0.5rem; }
    .list-row h3 { font-size: 1rem; margin-bottom: 0.25rem; }
    .list-row .text-xs { font-size: 12px; }
    .list-row .text-sm { font-size: 13px; }
}