:root {
    --siged-bg: #f8fafc;
    --siged-border: #e2e8f0;
    --siged-text: #0f172a;
}

html.dark {
    --siged-bg: #0f172a;
    --siged-border: #334155;
    --siged-text: #f8fafc;
    color-scheme: dark;
}

html.dark body {
    background-color: #0f172a !important; /* slate-900 */
    color: #f1f5f9 !important; /* slate-100 */
}

html.dark .bg-white {
    background-color: #1e293b !important; /* slate-800 */
}

html.dark .bg-gray-50 {
    background-color: #1e293b !important; /* slate-800 */
}

html.dark .bg-gray-100 {
    background-color: #0f172a !important; /* slate-900 */
}

html.dark .bg-slate-50 {
    background-color: #1e293b !important;
}

html.dark .bg-slate-100 {
    background-color: #334155 !important;
}

html.dark .text-gray-900 {
    color: #f8fafc !important;
}

html.dark .text-gray-700 {
    color: #cbd5e1 !important;
}

html.dark .text-gray-600 {
    color: #94a3b8 !important;
}

html.dark .text-gray-500 {
    color: #64748b !important;
}

html.dark .text-slate-900 {
    color: #f8fafc !important;
}

html.dark .text-slate-700 {
    color: #cbd5e1 !important;
}

html.dark .text-slate-600 {
    color: #94a3b8 !important;
}

html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-slate-200 {
    border-color: #334155 !important; /* slate-700 */
}

/* Navbar specific */
html.dark header {
    background-color: rgba(30, 41, 59, 0.9) !important;
    border-color: #334155 !important;
}

html.dark #appsDropdown,
html.dark #notificationDropdown,
html.dark #profileDropdown,
html.dark #dropdownFavoritos,
html.dark #dropdownAlertas {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark .select2-container .select2-selection--single {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f8fafc !important;
}

html.dark .select2-dropdown {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark .select2-results__option--selectable {
    color: #cbd5e1 !important;
}

/* Tables */
html.dark table thead {
    background-color: #334155 !important;
}

html.dark table thead th {
    color: #f8fafc !important;
}

html.dark table tbody tr {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark table tbody tr:hover {
    background-color: #334155 !important;
}

/* Inputs */
html.dark input, 
html.dark select, 
html.dark textarea {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark input::placeholder {
    color: #64748b !important;
}

/* Modals */
html.dark .bg-opacity-75, 
html.dark .bg-opacity-50 {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

html.dark #uploadModal > div.bg-white,
html.dark #notiModal div.bg-white,
html.dark #logoutModal div.bg-white,
html.dark #modalGraficos div.bg-white {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Custom Scrollbar */
html.dark .custom-scroll::-webkit-scrollbar-thumb {
    background: #475569;
}

html.dark .custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Cards and UI Elements */
html.dark .bg-blue-50 { background-color: rgba(37, 99, 235, 0.1) !important; }
html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.1) !important; }
html.dark .bg-rose-50 { background-color: rgba(244, 63, 94, 0.1) !important; }
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.1) !important; }

/* Opacity-modified background styles in dark mode */
html.dark .bg-slate-50\/50,
html.dark .bg-slate-50\/80 {
    background-color: rgba(30, 41, 59, 0.5) !important;
}

html.dark .bg-gray-50\/50 {
    background-color: rgba(30, 41, 59, 0.5) !important;
}

html.dark .bg-amber-50\/50,
html.dark .bg-amber-100\/50 {
    background-color: rgba(245, 158, 11, 0.15) !important;
}

html.dark .bg-blue-50\/50,
html.dark .bg-blue-50\/30 {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

html.dark .bg-emerald-50\/50 {
    background-color: rgba(16, 185, 129, 0.15) !important;
}

html.dark .bg-rose-50\/50 {
    background-color: rgba(244, 63, 94, 0.15) !important;
}

html.dark .hover\:bg-slate-50\/50:hover {
    background-color: rgba(30, 41, 59, 0.5) !important;
}

html.dark .hover\:bg-slate-50\/80:hover {
    background-color: rgba(30, 41, 59, 0.8) !important;
}

html.dark .hover\:bg-blue-50\/30:hover {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

/* Buttons */
html.dark .bg-white.text-slate-600 {
    background-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark .hover\:bg-slate-50:hover {
    background-color: #334155 !important;
}