/*
 * Dark theme overrides
 * Automatically applied when <html class="dark"> is set.
 * Overrides existing Tailwind utilities so components need zero changes.
 */

/* ── Backgrounds ── */

.dark .bg-white {
    background-color: #1e1f2b !important;
}

.dark .bg-tertiary-500 {
    background-color: #262838 !important;
}

.dark .bg-neutral-50 {
    background-color: #262838 !important;
}

.dark .bg-neutral-100 {
    background-color: #2e3045 !important;
}

.dark .bg-neutral-200 {
    background-color: #363952 !important;
}

/* ── Hover backgrounds ── */

.dark .hover\:bg-neutral-50:hover {
    background-color: #2e3045 !important;
}

.dark .hover\:bg-neutral-100:hover {
    background-color: #363952 !important;
}

.dark .hover\:bg-neutral-200:hover {
    background-color: #3a3d54 !important;
}

.dark .hover\:bg-neutral-300:hover {
    background-color: #3a3d54 !important;
}

.dark .hover\:shadow-md:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3) !important;
}

/* ── Text ── */

.dark .text-neutral-900 {
    color: #e5e5e5 !important;
}

.dark .text-neutral-800 {
    color: #d4d4d8 !important;
}

.dark .text-neutral-700 {
    color: #a1a1aa !important;
}

.dark .text-neutral-600 {
    color: #8b8b9a !important;
}

.dark .text-neutral-500 {
    color: #71717a !important;
}

.dark .text-neutral-400 {
    color: #606070 !important;
}

.dark .text-neutral-300 {
    color: #52525b !important;
}

/* ── Hover text ── */

.dark .hover\:text-neutral-700:hover {
    color: #d4d4d8 !important;
}

.dark .hover\:text-neutral-600:hover {
    color: #a1a1aa !important;
}

/* ── Borders ── */

.dark .border-neutral-200 {
    border-color: #3a3d54 !important;
}

.dark .border-neutral-100 {
    border-color: #2e3045 !important;
}

.dark .border-neutral-300 {
    border-color: #3a3d54 !important;
}

.dark .hover\:border-neutral-300:hover {
    border-color: #4a4d64 !important;
}

.dark .hover\:border-neutral-400:hover {
    border-color: #4a4d64 !important;
}

/* ── Ring ── */

.dark .ring-black\/5 {
    --tw-ring-color: rgb(255 255 255 / 0.05) !important;
}

/* ── Specific component overrides ── */

/* Modal header bg */
.dark .bg-neutral-50\/80 {
    background-color: rgb(38 40 56 / 0.8) !important;
}

/* Sidebar collapse button */
.dark .shadow-sm {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.2) !important;
}

/* User dropdown */
.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3) !important;
}

/* Forms: inputs, selects, textareas */
.dark input:not([type="checkbox"]):not([type="radio"]),
.dark textarea,
.dark select {
    background-color: #1e1f2b !important;
    color: #e5e5e5 !important;
    border-color: #3a3d54 !important;
}

.dark input:not([type="checkbox"]):not([type="radio"])::placeholder,
.dark textarea::placeholder {
    color: #606070 !important;
}

.dark input:not([type="checkbox"]):not([type="radio"]):focus,
.dark textarea:focus,
.dark select:focus {
    border-color: #222783 !important;
}

/* Labels */
.dark label {
    color: #a1a1aa;
}

/* ── Malio Layer UI components ── */

/* MalioSelect: floating label has hardcoded background: white */
.dark .floating-label {
    background: #1e1f2b !important;
    color: #a1a1aa !important;
}

/* MalioSelect: text-black used for selected value and options */
.dark .text-black {
    color: #e5e5e5 !important;
}

.dark .text-black\/60 {
    color: #71717a !important;
}

.dark .text-black\/40 {
    color: #606070 !important;
}

/* MalioSelect: border-black used when option is selected */
.dark .border-black {
    border-color: #a1a1aa !important;
}

/* MalioSelect: border-m-muted default border */
.dark .border-m-muted {
    border-color: #3a3d54 !important;
}

/* MalioSelect: dropdown option hover background */
.dark .bg-m-muted\/10 {
    background-color: rgb(160 174 192 / 0.15) !important;
}

/* MalioSelect: dropdown shadow */
.dark .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5) !important;
}

/* Checkbox/radio hardcoded black borders */
.dark .inp-cbx + .cbx svg {
    stroke: #e5e5e5 !important;
}

.dark .inp-cbx + .cbx {
    border-color: #a1a1aa !important;
}

/* Red/colored backgrounds for buttons */
.dark .bg-red-50 {
    background-color: rgb(127 29 29 / 0.2) !important;
}

.dark .hover\:bg-red-100:hover {
    background-color: rgb(127 29 29 / 0.3) !important;
}

.dark .bg-blue-50 {
    background-color: rgb(30 58 138 / 0.2) !important;
}

/* Datetime/date input color-scheme for dark mode */
.dark input[type="datetime-local"],
.dark input[type="date"],
.dark input[type="time"] {
    color-scheme: dark;
}

/* Scrollbar */
.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark ::-webkit-scrollbar-track {
    background: #1e1f2b;
}

.dark ::-webkit-scrollbar-thumb {
    background: #3a3d54;
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #4a4d64;
}
