/* Dark Mode Styles */
html.dark-mode,
html.dark-mode body {
    background-color: #141218 !important;
    color: #E6E0E9 !important;
}

/* Background overrides */
html.dark-mode .bg-\[\#FEF7FF\],
html.dark-mode .bg-\[\#FEF7FF\]\/85 {
    background-color: rgba(20, 18, 24, 0.85) !important;
}

html.dark-mode .bg-white,
html.dark-mode .bg-white\/40,
html.dark-mode .bg-white\/50,
html.dark-mode .bg-white\/60,
html.dark-mode .bg-white\/80,
html.dark-mode .bg-white\/90,
html.dark-mode .bg-white\/95 {
    background-color: rgba(43, 41, 48, 0.95) !important;
}

html.dark-mode .bg-\[\#F3EDF7\] {
    background-color: #232127 !important;
}

html.dark-mode .bg-\[\#F8F9FA\] {
    background-color: #1A181D !important;
}

html.dark-mode .hover\:bg-\[\#F3EDF7\]:hover {
    background-color: #36343B !important;
}

html.dark-mode .bg-\[\#E8DEF8\],
html.dark-mode .bg-\[\#EADDFF\] {
    background-color: #4A4458 !important;
}

html.dark-mode .bg-\[\#EADDFF\]\/40 {
    background-color: rgba(74, 68, 88, 0.4) !important;
}

html.dark-mode .bg-\[\#FFD8E4\]\/30 {
    background-color: rgba(84, 56, 70, 0.3) !important;
}

html.dark-mode .hover\:bg-\[\#EADDFF\]\/50:hover {
    background-color: rgba(74, 68, 88, 0.5) !important;
}

html.dark-mode .bg-\[\#FDF7FF\] {
    background-color: #141218 !important;
}

/* Texts overrides */
html.dark-mode .text-\[\#1D1B20\],
html.dark-mode .text-\[\#49454F\],
html.dark-mode .text-\[\#49454F\]\/80,
html.dark-mode .text-\[\#49454F\]\/70,
html.dark-mode .text-\[\#49454F\]\/40,
html.dark-mode .text-\[\#21005D\] {
    color: #E6E0E9 !important;
}

html.dark-mode .text-\[\#6750A4\] {
    color: #D0BCFF !important;
}

html.dark-mode .group:hover .group-hover\:text-\[\#6750A4\] {
    color: #D0BCFF !important;
}

html.dark-mode .hover\:text-\[\#1D1B20\]:hover,
html.dark-mode .hover\:text-\[\#21005D\]:hover {
    color: #FFFFFF !important;
}

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
    color: #FFFFFF !important;
}

/* Border overrides */
html.dark-mode .border-white\/20,
html.dark-mode .border-white\/50,
html.dark-mode .border-white\/60,
html.dark-mode .border-white\/80,
html.dark-mode .border-gray-100 {
    border-color: rgba(202, 196, 208, 0.2) !important;
}

html.dark-mode .border-\[\#CAC4D0\] {
    border-color: #49454F !important;
}

/* Skeletons */
html.dark-mode .skeleton-loader {
    background-color: #141218 !important;
}

html.dark-mode .skeleton {
    background: linear-gradient(90deg, #2B2930 25%, #36343B 50%, #2B2930 75%) !important;
    background-size: 200% 100% !important;
}

/* Other generic elements */
html.dark-mode .bg-gray-50,
html.dark-mode .bg-gray-100,
html.dark-mode .bg-gray-200 {
    background-color: #2B2930 !important;
}

html.dark-mode .hover\:bg-gray-50:hover,
html.dark-mode .hover\:bg-gray-100:hover,
html.dark-mode .hover\:bg-gray-200:hover {
    background-color: #36343B !important;
}

html.dark-mode .bg-gray-800,
html.dark-mode .bg-gray-900 {
    background-color: #49454F !important;
}

html.dark-mode .text-gray-900,
html.dark-mode .text-gray-800,
html.dark-mode .text-gray-700,
html.dark-mode .text-gray-600 {
    color: #E6E0E9 !important;
}

/* Shadows */
html.dark-mode .shadow-sm,
html.dark-mode .shadow-md,
html.dark-mode .shadow-lg,
html.dark-mode .shadow-xl {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .shadow-\[0_10px_40px_rgba\(0\,0\,0\,0\.1\)\] {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Form Elements */
html.dark-mode select,
html.dark-mode input,
html.dark-mode textarea {
    background-color: #2B2930 !important;
    color: #FFF !important;
    border-color: #49454F !important;
}

html.dark-mode input.bg-transparent,
html.dark-mode textarea.bg-transparent {
    background-color: transparent !important;
}

@media (min-width: 768px) {
    html.dark-mode input.md\:bg-transparent {
        background-color: transparent !important;
    }
}

/* Add custom transition for smooth theme switching */
html.dark-mode * {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Specific elements like Cards, Containers that use Tailwind default white */
html.dark-mode .card,
html.dark-mode .box {
    background-color: #2B2930 !important;
    border-color: #49454F !important;
}

/* Glassmorphism elements overrides */
html.dark-mode .glass-search,
html.dark-mode .glass-card {
    background: rgba(30, 27, 34, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .glass-search:hover,
html.dark-mode .glass-card:hover {
    background: rgba(43, 41, 48, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark-mode .bg-white\/50 {
    background-color: rgba(43, 41, 48, 0.5) !important;
}

/* Theme cards gradient override */
html.dark-mode .theme-card {
    background: #232127 !important;
    border-color: #36343B !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Icons specific background mapping in dark mode */
html.dark-mode .bg-\[\#E0F3FF\] {
    background-color: #004A77 !important;
}

html.dark-mode .bg-\[\#FFECA9\] {
    background-color: #5C4000 !important;
}

html.dark-mode .bg-\[\#C4EED0\] {
    background-color: #005237 !important;
}

html.dark-mode .bg-\[\#F1F8F1\] {
    background-color: #1B5E20 !important;
}

html.dark-mode .bg-\[\#FFF8E1\] {
    background-color: #B26400 !important;
}

html.dark-mode .bg-\[\#F3E5F5\] {
    background-color: #7B1FA2 !important;
}

html.dark-mode .bg-\[\#E8EAF6\] {
    background-color: #3F51B5 !important;
}

html.dark-mode .bg-\[\#FCE4EC\] {
    background-color: #C2185B !important;
}

html.dark-mode .bg-\[\#EDE7F6\] {
    background-color: #5E35B1 !important;
}

html.dark-mode .bg-\[\#FFDBCF\] {
    background-color: #5C220E !important;
}

html.dark-mode .bg-\[\#F3F4F6\] {
    background-color: #2B2930 !important;
    color: #FFF !important;
}

html.dark-mode .bg-\[\#F9DEDC\] {
    background-color: #601410 !important;
}

html.dark-mode .bg-\[\#FFDDA3\] {
    background-color: #523000 !important;
}

html.dark-mode .bg-\[\#FFD8E4\] {
    background-color: #631133 !important;
}

html.dark-mode .bg-\[\#D0BCFF\] {
    background-color: #4F378B !important;
}

/* Readability overrides for various text colors used across inner cards/icons */
html.dark-mode .text-\[\#001D35\],
html.dark-mode .text-\[\#261900\],
html.dark-mode .text-\[\#00210E\],
html.dark-mode .text-\[\#1B5E20\],
html.dark-mode .text-\[\#FF8F00\],
html.dark-mode .text-\[\#7B1FA2\],
html.dark-mode .text-\[\#3F51B5\],
html.dark-mode .text-\[\#C2185B\],
html.dark-mode .text-\[\#5E35B1\],
html.dark-mode .text-\[\#616161\],
html.dark-mode .text-\[\#31111D\],
html.dark-mode .text-\[\#B3261E\],
html.dark-mode .text-\[\#3B0900\],
html.dark-mode .text-\[\#9C4217\],
html.dark-mode .text-\[\#381E72\],
html.dark-mode .text-\[\#006C4C\],
html.dark-mode .text-\[\#410E0B\],
html.dark-mode .text-\[\#004A77\],
html.dark-mode .text-\[\#291800\] {
    color: #E6E0E9 !important;
}

html.dark-mode .text-\[\#005FAF\] {
    color: #A8C7FA !important;
}

/* Glassmorphism elements overrides */
html.dark-mode .glass-search,
html.dark-mode .glass-card {
    background: rgba(30, 27, 34, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .glass-search:hover,
html.dark-mode .glass-card:hover {
    background: rgba(43, 41, 48, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark-mode .bg-white\/50 {
    background-color: rgba(43, 41, 48, 0.5) !important;
}

/* Theme cards gradient override */
html.dark-mode .theme-card {
    background: #232127 !important;
    border-color: #36343B !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Icons specific background mapping in dark mode */
html.dark-mode .bg-\[\#E0F3FF\] {
    background-color: #004A77 !important;
}

html.dark-mode .bg-\[\#FFECA9\] {
    background-color: #5C4000 !important;
}

html.dark-mode .bg-\[\#C4EED0\] {
    background-color: #005237 !important;
}

html.dark-mode .bg-\[\#F1F8F1\] {
    background-color: #1B5E20 !important;
}

html.dark-mode .bg-\[\#FFF8E1\] {
    background-color: #B26400 !important;
}

html.dark-mode .bg-\[\#F3E5F5\] {
    background-color: #7B1FA2 !important;
}

html.dark-mode .bg-\[\#E8EAF6\] {
    background-color: #3F51B5 !important;
}

html.dark-mode .bg-\[\#FCE4EC\] {
    background-color: #C2185B !important;
}

html.dark-mode .bg-\[\#EDE7F6\] {
    background-color: #5E35B1 !important;
}

html.dark-mode .bg-\[\#FFDBCF\] {
    background-color: #5C220E !important;
}

html.dark-mode .bg-\[\#F3F4F6\] {
    background-color: #2B2930 !important;
    color: #FFF !important;
}

/* Readability overrides for various text colors used across inner cards/icons */
html.dark-mode .text-\[\#001D35\],
html.dark-mode .text-\[\#261900\],
html.dark-mode .text-\[\#00210E\],
html.dark-mode .text-\[\#1B5E20\],
html.dark-mode .text-\[\#FF8F00\],
html.dark-mode .text-\[\#7B1FA2\],
html.dark-mode .text-\[\#3F51B5\],
html.dark-mode .text-\[\#C2185B\],
html.dark-mode .text-\[\#5E35B1\],
html.dark-mode .text-\[\#616161\],
html.dark-mode .text-\[\#31111D\],
html.dark-mode .text-\[\#B3261E\],
html.dark-mode .text-\[\#3B0900\],
html.dark-mode .text-\[\#9C4217\],
html.dark-mode .text-\[\#381E72\],
html.dark-mode .text-\[\#006C4C\] {
    color: #E6E0E9 !important;
}

/* Prose/Typography Tailwind Overrides in Dark Mode */
html.dark-mode .prose {
    color: #E6E0E9 !important;
}

html.dark-mode .prose p,
html.dark-mode .prose ul,
html.dark-mode .prose ol,
html.dark-mode .prose li,
html.dark-mode .prose blockquote,
html.dark-mode .prose span {
    color: #E6E0E9 !important;
}

html.dark-mode .prose h1,
html.dark-mode .prose h2,
html.dark-mode .prose h3,
html.dark-mode .prose h4,
html.dark-mode .prose h5,
html.dark-mode .prose h6,
html.dark-mode .prose strong,
html.dark-mode .prose b {
    color: #FFFFFF !important;
}

html.dark-mode .prose a {
    color: #D0BCFF !important;
}

html.dark-mode .text-\[\#1D1B20\]\/90 {
    color: #E6E0E9 !important;
}

/* Card Status Highlights for Produk Hukum */
html.dark-mode .bg-green-50,
html.dark-mode .hover\:bg-green-50:hover {
    background-color: rgba(27, 94, 32, 0.4) !important;
}

html.dark-mode .border-green-200 {
    border-color: rgba(76, 175, 80, 0.5) !important;
}

html.dark-mode .text-green-700 {
    color: #81C784 !important;
}

html.dark-mode .bg-yellow-50,
html.dark-mode .hover\:bg-yellow-50:hover {
    background-color: rgba(245, 127, 23, 0.4) !important;
}

html.dark-mode .border-yellow-200 {
    border-color: rgba(255, 193, 7, 0.5) !important;
}

html.dark-mode .text-yellow-700 {
    color: #FFF176 !important;
}

html.dark-mode .bg-red-50,
html.dark-mode .hover\:bg-red-50:hover {
    background-color: rgba(183, 28, 28, 0.4) !important;
}

html.dark-mode .border-red-200 {
    border-color: rgba(244, 67, 54, 0.5) !important;
}

html.dark-mode .text-red-700 {
    color: #E57373 !important;
}

html.dark-mode .text-gray-500 {
    color: #CAC4D0 !important;
}

/* Additional Koleksi Dokumen Hukum Overrides */
html.dark-mode .bg-\[\#F2F2F2\],
html.dark-mode .hover\:bg-\[\#F2F2F2\]:hover {
    background-color: #36343B !important;
}

html.dark-mode .text-\[\#1D192B\],
html.dark-mode .group:hover .group-hover\:text-\[\#1D192B\] {
    color: #E6E0E9 !important;
}

html.dark-mode .group:hover .group-hover\:bg-\[\#E8DEF8\] {
    background-color: #4A4458 !important;
}

/* ApexCharts Dark Mode Overrides */
html.dark-mode .apexcharts-canvas .apexcharts-text {
    fill: #E6E0E9 !important;
}

html.dark-mode .apexcharts-canvas .apexcharts-gridline {
    stroke: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .apexcharts-tooltip {
    background: #2B2930 !important;
    border: 1px solid #49454F !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important;
    color: #FFF !important;
}

html.dark-mode .apexcharts-tooltip-title {
    background: #36343B !important;
    border-bottom: 1px solid #49454F !important;
}

html.dark-mode .apexcharts-xaxis-tick {
    stroke: rgba(255, 255, 255, 0.2) !important;
}

/* Accessibility Menu Overrides */
html.dark-mode {
    --acc-primary: #D0BCFF;
    --acc-primary-dark: #381E72;
    --acc-surface: #141218;
    --acc-surface-variant: #4A4458;
    --acc-text: #E6E0E9;
    --acc-text-secondary: #CAC4D0;
    --acc-card-bg: #2B2930;
    --acc-border: #49454F;
}

html.dark-mode #acc-menu {
    background-color: var(--acc-surface) !important;
    border-left: 1px solid var(--acc-border) !important;
}

html.dark-mode .acc-header {
    background-color: #21005D !important;
}

html.dark-mode .acc-header h2,
html.dark-mode .acc-close-btn {
    color: #E6E0E9 !important;
}

html.dark-mode .acc-dropdown {
    background: var(--acc-card-bg) !important;
}

html.dark-mode .acc-section-top .bg-gray-200 {
    background-color: #49454F !important;
}

html.dark-mode .acc-section-top .bg-white.text-blue-700 {
    background-color: #D0BCFF !important;
    color: #381E72 !important;
}

html.dark-mode .acc-section-top .text-gray-600 {
    color: #CAC4D0 !important;
}

html.dark-mode .bg-black.text-white {
    background-color: #E6E0E9 !important;
    color: #1A181D !important;
}

html.dark-mode .acc-profile-content {
    border-color: var(--acc-border) !important;
}