:root {
    color-scheme: light;
}

.dark {
    color-scheme: dark;
}

body {
    font-family: 'Inter', sans-serif;
}

summary::-webkit-details-marker {
    display: none;
}

body,
.bg-white,
.bg-slate-50,
.bg-slate-100,
.border-slate-100,
.border-slate-200,
.divide-slate-100>*+*,
input,
select,
textarea,
button,
a {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.dark body,
.dark .bg-slate-100 {
    background-color: #020617 !important;
    color: #e2e8f0;
}

.dark .bg-white,
.dark .bg-slate-50 {
    background-color: #0f172a !important;
}

.dark .bg-red-50 {
    background-color: rgba(127, 29, 29, .38) !important;
}

.dark .bg-blue-50 {
    background-color: rgba(30, 64, 175, .28) !important;
}

.dark .bg-green-50 {
    background-color: rgba(22, 101, 52, .28) !important;
}

.dark .bg-yellow-50 {
    background-color: rgba(133, 77, 14, .28) !important;
}

.dark .bg-purple-50 {
    background-color: rgba(88, 28, 135, .28) !important;
}

.dark .hover\:bg-slate-100:hover,
.dark .hover\:bg-red-50:hover,
.dark .hover\:bg-red-100:hover {
    background-color: #1e293b !important;
}

.dark .text-slate-900,
.dark .text-slate-800,
.dark .text-slate-700 {
    color: #f8fafc !important;
}

.dark .text-slate-600,
.dark .text-slate-500,
.dark .text-slate-400 {
    color: #cbd5e1 !important;
}

.dark .text-red-800,
.dark .text-red-700,
.dark .text-red-600,
.dark .hover\:text-red-600:hover {
    color: #fca5a5 !important;
}

.dark .text-blue-700,
.dark .text-blue-600 {
    color: #93c5fd !important;
}

.dark .text-green-700,
.dark .text-green-600 {
    color: #86efac !important;
}

.dark .text-yellow-800,
.dark .text-yellow-700,
.dark .text-yellow-600 {
    color: #fde68a !important;
}

.dark .text-purple-700,
.dark .text-purple-600 {
    color: #d8b4fe !important;
}

.dark .border-slate-100,
.dark .border-slate-200,
.dark .border-slate-300,
.dark .border-red-100,
.dark .border-red-200,
.dark .border-red-400,
.dark .border-green-200,
.dark .border-yellow-200,
.dark .ring-slate-600\/10,
.dark .ring-red-100 {
    border-color: #334155 !important;
}

.dark .divide-slate-100>*+*,
.dark .divide-slate-200>*+* {
    border-color: #334155 !important;
}

.dark .ring-red-100 {
    --tw-ring-color: rgba(248, 113, 113, .22) !important;
}

.dark .ring-white {
    --tw-ring-color: #0f172a !important;
}

.dark input,
.dark select,
.dark textarea {
    background-color: #020617 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

.dark select option,
.dark select optgroup {
    background-color: #020617 !important;
    color: #f8fafc !important;
}

.dark input[readonly],
.dark input:disabled,
.dark select:disabled,
.dark textarea:disabled {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #e2e8f0;
}

.dark input[type="date"],
.dark input[type="datetime-local"],
.dark input[type="time"],
.dark input[type="number"] {
    color-scheme: dark;
}

.dark input[type="checkbox"],
.dark input[type="radio"] {
    accent-color: #dc2626;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #94a3b8 !important;
}

.dark table thead,
.dark .bg-slate-900 {
    background-color: #111827 !important;
}

.dark .shadow-sm,
.dark .shadow,
.dark .shadow-lg,
.dark .shadow-xl,
.dark .shadow-2xl {
    box-shadow: 0 18px 45px rgba(0, 0, 0, .35) !important;
}

.dark .ts-control,
.dark .ts-dropdown {
    background-color: #020617 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

.dark .ts-wrapper.single .ts-control,
.dark .ts-control input,
.dark .ts-control .item {
    background-color: transparent !important;
    color: #f8fafc !important;
}

.dark .ts-control input::placeholder {
    color: #94a3b8 !important;
}

.dark #productModal input[readonly],
.dark #productModal input,
.dark #productModal textarea,
.dark #productModal select,
.dark #productModal .ts-control {
    background-color: #020617 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

.dark #productModal input[readonly] {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0;
}

.dark .ts-dropdown .active,
.dark .ts-dropdown .option:hover {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

.dark .swal2-popup {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

.dark .swal2-title {
    color: #f8fafc !important;
}