/* Additional custom styles for TSJ */

/* Smooth transitions */
* {
    transition-property: color, background-color, border-color, box-shadow;
    transition-timing-function: ease-in-out;
    transition-duration: 150ms;
}

/* Status badges */
.badge-new { background-color: #dbeafe; color: #1e40af; }
.badge-in-progress { background-color: #fef3c7; color: #92400e; }
.badge-done { background-color: #d1fae5; color: #065f46; }
.badge-urgent { background-color: #ffedd5; color: #9a3412; }

.deadline-overdue { color: #dc2626; font-weight: 600; }
.deadline-urgent { color: #ea580c; font-weight: 600; }

/* Dark mode overrides for components that Tailwind can't reach via utility classes */
.dark .bg-white { background-color: #1f2937 !important; }
.dark .border-gray-200 { border-color: #374151 !important; }
.dark .border-gray-100 { border-color: #374151 !important; }
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #374151; }
.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #374151; }
.dark .bg-gray-50 { background-color: #111827 !important; }
.dark .hover\:bg-gray-50:hover { background-color: #1a2332 !important; }
.dark .text-gray-900 { color: #f9fafb !important; }
.dark .text-gray-800 { color: #e5e7eb !important; }
.dark .text-gray-700 { color: #d1d5db !important; }
.dark .text-gray-600 { color: #9ca3af !important; }
.dark .text-gray-500 { color: #9ca3af !important; }
.dark .text-gray-400 { color: #6b7280 !important; }
.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3); }
.dark input, .dark textarea, .dark select {
    background-color: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}
.dark input:focus, .dark textarea:focus, .dark select:focus {
    border-color: #3b82f6;
}

/* Photo gallery grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}
.gallery-grid img, .gallery-grid video {
    width: 100%;
    border-radius: 0.5rem;
    object-fit: cover;
    aspect-ratio: 1;
}
.gallery-grid img:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}