/* Theme Overrides - Ensures user theme choice is respected */

/* Force light theme when user has chosen light */
html.light {
    color-scheme: light !important;
}

/* Force dark theme when user has chosen dark */
html.dark {
    color-scheme: dark !important;
}

/* Override any browser default color scheme */
html[data-theme="light"] {
    color-scheme: light !important;
}

html[data-theme="dark"] {
    color-scheme: dark !important;
}

/* Ensure form elements follow theme */
html.light input,
html.light textarea,
html.light select {
    color-scheme: light !important;
}

html.dark input,
html.dark textarea,
html.dark select {
    color-scheme: dark !important;
}

/* Override any system preference when user has made a choice */
html.light * {
    color-scheme: light !important;
}

html.dark * {
    color-scheme: dark !important;
}

/* Ensure scrollbars follow theme */
html.light ::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
}

html.light ::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
}

html.dark ::-webkit-scrollbar-track {
    background: #1e293b !important;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #475569 !important;
}

/* Force theme colors for common elements */
html.light {
    --bg-primary: #ffffff !important;
    --bg-secondary: #f8fafc !important;
    --text-primary: #1e293b !important;
    --text-secondary: #64748b !important;
}

html.dark {
    --bg-primary: #0f172a !important;
    --bg-secondary: #1e293b !important;
    --text-primary: #f1f5f9 !important;
    --text-secondary: #94a3b8 !important;
}

/* Additional overrides to prevent browser from changing theme */
html.light {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

html.dark {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

/* Force body background */
html.light body {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

html.dark body {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

/* Prevent any automatic theme switching */
html[data-theme="light"],
html.light {
    color-scheme: light !important;
    background-color: #ffffff !important;
}

html[data-theme="dark"],
html.dark {
    color-scheme: dark !important;
    background-color: #0f172a !important;
}

/* Theme Overrides untuk mengatasi masalah tema yang memaksa kembali ke dark */

/* Force light theme when user explicitly chooses it */
html[data-theme="light"] {
    color-scheme: light !important;
}

html[data-theme="light"] body {
    background-color: #ffffff !important;
    color: #111827 !important;
}

/* Force dark theme when user explicitly chooses it */
html[data-theme="dark"] {
    color-scheme: dark !important;
}

html[data-theme="dark"] body {
    background-color: #111827 !important;
    color: #f9fafb !important;
}

/* Override any forced dark mode from browser/system */
html[data-theme="light"] * {
    color-scheme: light !important;
}

html[data-theme="dark"] * {
    color-scheme: dark !important;
}

/* Ensure form elements respect theme */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

/* Override any CSS variables that might force dark mode */
html[data-theme="light"] {
    --tw-bg-opacity: 1 !important;
    --tw-text-opacity: 1 !important;
}

html[data-theme="dark"] {
    --tw-bg-opacity: 1 !important;
    --tw-text-opacity: 1 !important;
}

/* Force remove any system dark mode classes when user chooses light */
html[data-theme="light"].dark {
    background-color: #ffffff !important;
    color: #111827 !important;
}

html[data-theme="light"].dark * {
    background-color: inherit !important;
    color: inherit !important;
}

/* Ensure sidebar respects theme choice */
html[data-theme="light"] .flux-sidebar {
    background: linear-gradient(
        150deg,
        #ffffff 0%,
        #f8fafc 50%,
        #f1f5f9 100%
    ) !important;
    border-right: 1px solid rgba(226, 232, 240, 0.8) !important;
}

html[data-theme="dark"] .flux-sidebar {
    background: linear-gradient(
        150deg,
        #1f2937 0%,
        #111827 50%,
        #0f172a 100%
    ) !important;
    border-right: 1px solid rgba(59, 130, 246, 0.2) !important;
}

/* Override any Tailwind dark mode classes when user has explicit choice */
html[data-theme="light"] .dark\:bg-gray-900 {
    background-color: #ffffff !important;
}

html[data-theme="light"] .dark\:text-white {
    color: #111827 !important;
}

html[data-theme="light"] .dark\:border-gray-700 {
    border-color: #d1d5db !important;
}

html[data-theme="dark"] .light\:bg-white {
    background-color: #111827 !important;
}

html[data-theme="dark"] .light\:text-gray-900 {
    color: #f9fafb !important;
}

html[data-theme="dark"] .light\:border-gray-200 {
    border-color: #4b5563 !important;
}