/* Hide Alpine.js elements until initialized (prevents FOUC) */
[x-cloak] { display: none !important; }

/* Custom overrides for Meta Ads Uploader */

/* Smooth transitions for drop zone */
.border-dashed {
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Pulsing animation for in-progress statuses */
@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

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

/* ===== Dark Mode ===== */

html.dark {
    color-scheme: dark;
}

/* Transition for theme switch */
html.dark *,
html.dark *::before,
html.dark *::after {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Body & main backgrounds */
html.dark body.bg-gray-50,
html.dark .bg-gray-50 { background-color: #111827 !important; } /* gray-900 */
html.dark .bg-white { background-color: #1f2937 !important; } /* gray-800 */
html.dark .bg-gray-100 { background-color: #374151 !important; } /* gray-700 */

/* Text colors */
html.dark .text-gray-900 { color: #f3f4f6 !important; } /* gray-100 */
html.dark .text-gray-800 { color: #e5e7eb !important; } /* gray-200 */
html.dark .text-gray-700 { color: #d1d5db !important; } /* gray-300 */
html.dark .text-gray-600 { color: #9ca3af !important; } /* gray-400 */
html.dark .text-gray-500 { color: #9ca3af !important; } /* gray-400 */
html.dark .text-gray-400 { color: #6b7280 !important; } /* gray-500 */
html.dark .text-gray-300 { color: #6b7280 !important; }

/* Border colors */
html.dark .border-gray-200 { border-color: #374151 !important; } /* gray-700 */
html.dark .border-gray-100 { border-color: #1f2937 !important; } /* gray-800 */
html.dark .border-gray-300 { border-color: #4b5563 !important; } /* gray-600 */
html.dark .border-gray-50 { border-color: #1f2937 !important; }

/* Divide */
html.dark .divide-gray-50 > :not(:last-child) { border-color: #1f2937 !important; }
html.dark .divide-gray-100 > :not(:last-child) { border-color: #374151 !important; }

/* Inputs, selects */
html.dark select,
html.dark input[type="text"],
html.dark input[type="number"],
html.dark input[type="password"],
html.dark input[type="email"],
html.dark input[type="url"],
html.dark textarea {
    background-color: #1f2937 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
}
html.dark select option {
    background-color: #1f2937;
    color: #f3f4f6;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #6b7280 !important;
}

/* Checkbox */
html.dark input[type="checkbox"] {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
}

/* Hover states */
html.dark .hover\:bg-gray-50:hover { background-color: #374151 !important; }
html.dark .hover\:bg-gray-200:hover { background-color: #4b5563 !important; }
html.dark .hover\:text-gray-700:hover { color: #d1d5db !important; }
html.dark .hover\:text-gray-800:hover { color: #e5e7eb !important; }
html.dark .hover\:text-gray-900:hover { color: #f3f4f6 !important; }
html.dark .hover\:text-gray-600:hover { color: #9ca3af !important; }

/* Colored backgrounds — softer in dark mode */
html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; }
html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.2) !important; }
html.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.2) !important; }
html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; }
html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.2) !important; }
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.1) !important; }
html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.2) !important; }
html.dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.2) !important; }
html.dark .bg-orange-100 { background-color: rgba(249, 115, 22, 0.2) !important; }
html.dark .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.2) !important; }

/* Colored borders — softer */
html.dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.3) !important; }
html.dark .border-red-200 { border-color: rgba(239, 68, 68, 0.3) !important; }
html.dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.3) !important; }
html.dark .border-green-200 { border-color: rgba(34, 197, 94, 0.3) !important; }

/* Colored text stays mostly the same, just slightly adjust */
html.dark .text-blue-700 { color: #93c5fd !important; }
html.dark .text-blue-600 { color: #60a5fa !important; }
html.dark .text-green-700 { color: #86efac !important; }
html.dark .text-red-700 { color: #fca5a5 !important; }
html.dark .text-red-600 { color: #f87171 !important; }
html.dark .text-red-500 { color: #f87171 !important; }
html.dark .text-amber-800 { color: #fcd34d !important; }
html.dark .text-amber-700 { color: #fbbf24 !important; }
html.dark .text-amber-600 { color: #f59e0b !important; }
html.dark .text-amber-500 { color: #f59e0b !important; }
html.dark .text-purple-700 { color: #c4b5fd !important; }

/* Overlay backdrop */
html.dark .bg-black\/40 { background-color: rgba(0, 0, 0, 0.6) !important; }
html.dark .bg-black.bg-opacity-50 { background-color: rgba(0, 0, 0, 0.6) !important; }

/* Modal content */
html.dark .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3) !important; }
html.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3) !important; }

/* Tooltip */
html.dark .bg-gray-900 { background-color: #e5e7eb !important; }
html.dark .bg-gray-900 .text-white { color: #111827 !important; }
html.dark .bg-gray-900 .text-gray-300 { color: #4b5563 !important; }

/* Footer */
html.dark footer.border-t { border-color: #374151 !important; }

/* Scrollbar */
html.dark ::-webkit-scrollbar { width: 8px; }
html.dark ::-webkit-scrollbar-track { background: #1f2937; }
html.dark ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #6b7280; }