/* Loyihaga xos kichik uslublar. Asosiy dizayn Tailwind orqali. */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Yumshoq paydo bo'lish animatsiyasi (transkripsiya yangilanganda) */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in {
    animation: fade-in 240ms ease-out;
}

/* Toast: slide in from the right, then fade out */
.toast {
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 300ms ease, transform 300ms ease;
}
.toast.toast-in { opacity: 1; transform: translateX(0); }
.toast.toast-out { opacity: 0; transform: translateX(16px); }

/* Modal pop-in */
@keyframes modal-in {
    from { opacity: 0; transform: scale(0.96) translateY(6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-card { animation: modal-in 180ms ease-out; }

/* ===================================================================== */
/* Dark mode. Tailwind runs with darkMode:'class'; instead of adding a    */
/* `dark:` variant to every element, we remap the neutral utilities once  */
/* here (higher specificity than the single-class utilities, so they win).*/
/* ===================================================================== */
.dark body { color: #e2e8f0; }

/* Surfaces */
.dark .bg-white { background-color: #1e293b; }
.dark .bg-slate-50 { background-color: #0f172a; }
.dark .bg-slate-50\/90 { background-color: rgba(15, 23, 42, 0.92); }
.dark .bg-slate-100 { background-color: #334155; }
.dark .bg-slate-200 { background-color: #334155; }

/* Borders / dividers */
.dark .border-slate-100 { border-color: #334155; }
.dark .border-slate-200 { border-color: #334155; }
.dark .border-slate-300 { border-color: #475569; }
.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #334155; }

/* Text */
.dark .text-slate-800 { color: #f1f5f9; }
.dark .text-slate-700 { color: #e2e8f0; }
.dark .text-slate-600 { color: #cbd5e1; }
.dark .text-slate-500 { color: #94a3b8; }
.dark .text-slate-400 { color: #64748b; }
.dark .text-slate-300 { color: #475569; }

/* Indigo accents (lighter for contrast on dark) */
.dark .text-indigo-600,
.dark .text-indigo-700 { color: #a5b4fc; }
.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.18); }
.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.22); }

/* Status tints */
.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.16); }
.dark .border-emerald-200 { border-color: rgba(16, 185, 129, 0.4); }
.dark .text-emerald-700 { color: #6ee7b7; }
.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.16); }
.dark .border-red-200, .dark .border-red-300 { border-color: rgba(239, 68, 68, 0.4); }
.dark .text-red-700, .dark .text-red-600 { color: #fca5a5; }
.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.16); }
.dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.4); }
.dark .text-amber-700 { color: #fcd34d; }

/* Hover states */
.dark .hover\:bg-slate-50:hover { background-color: #334155; }
.dark .hover\:bg-slate-100:hover { background-color: #475569; }
.dark .hover\:bg-slate-200:hover { background-color: #475569; }
.dark .hover\:bg-white:hover { background-color: #334155; }
.dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.2); }
.dark .hover\:text-red-600:hover { color: #fca5a5; }
.dark .hover\:text-indigo-600:hover { color: #a5b4fc; }
.dark .hover\:bg-indigo-100:hover { background-color: rgba(99, 102, 241, 0.28); }

/* Form fields */
.dark input, .dark textarea, .dark select { background-color: #0f172a; color: #e2e8f0; }
.dark input::placeholder, .dark textarea::placeholder { color: #64748b; }
.dark input[type="file"]::file-selector-button {
    background-color: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}
/* Native date/time picker icon is dark by default — lighten it in dark mode */
.dark input[type="date"]::-webkit-calendar-picker-indicator,
.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.6);
    cursor: pointer;
}