:root {
    --cd-bg: #f5f7fb;
    --cd-surface: #ffffff;
    --cd-surface-2: #f1f4f8;
    --cd-text: #233446;
    --cd-muted: #6b7a90;
    --cd-border: #d9e0ea;
    --cd-input-bg: #ffffff;
    --cd-link: #4f7cff;
}

html[data-color-mode="dark"] {
    --cd-bg: #0f1724;
    --cd-surface: #172233;
    --cd-surface-2: #1e2b3f;
    --cd-text: #e8eef9;
    --cd-muted: #afbdd3;
    --cd-border: #2c3a4f;
    --cd-input-bg: #111a29;
    --cd-link: #7ea2ff;

    /* Override custom.css variables */
    --primary-bg: #0f1724;
    --secondary-bg: #172233;
    --text-primary: #e8eef9;
    --text-secondary: #afbdd3;
    --border-color: #2c3a4f;
}

html[data-color-mode="light"] {
    /* Override custom.css variables for light mode */
    --primary-bg: #f5f7fb;
    --secondary-bg: #ffffff;
    --text-primary: #233446;
    --text-secondary: #6b7a90;
    --border-color: #d9e0ea;
}

html[data-color-mode="dark"] body:not(.no-theme),
html[data-color-mode="light"] body:not(.no-theme) {
    background: var(--cd-bg) !important;
    color: var(--cd-text) !important;
}

html[data-color-mode="light"] body:not(.no-theme) {
    background-color: #F9FAFB !important;
    color: #1F2937 !important;
}

html[data-color-mode="dark"] .card,
html[data-color-mode="dark"] .modal-content,
html[data-color-mode="dark"] .dropdown-menu,
html[data-color-mode="dark"] .bg-footer-theme,
html[data-color-mode="dark"] .bg-navbar-theme,
html[data-color-mode="dark"] .bg-menu-theme,
html[data-color-mode="dark"] .content-footer,
html[data-color-mode="dark"] .list-group-item,
html[data-color-mode="dark"] .accordion-item,
html[data-color-mode="dark"] .offcanvas,
html[data-color-mode="dark"] .swal2-popup {
    background-color: var(--cd-surface) !important;
    color: var(--cd-text) !important;
    border-color: var(--cd-border) !important;
}

html[data-color-mode="dark"] .table,
html[data-color-mode="dark"] .table th,
html[data-color-mode="dark"] .table td,
html[data-color-mode="dark"] .table thead th {
    color: var(--cd-text) !important;
    border-color: var(--cd-border) !important;
}

html[data-color-mode="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    color: var(--cd-text) !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
}

html[data-color-mode="dark"] .form-control,
html[data-color-mode="dark"] .form-select,
html[data-color-mode="dark"] .input-group-text,
html[data-color-mode="dark"] textarea,
html[data-color-mode="dark"] input,
html[data-color-mode="dark"] select {
    background-color: var(--cd-input-bg) !important;
    color: var(--cd-text) !important;
    border-color: var(--cd-border) !important;
}

html[data-color-mode="dark"] .form-control::placeholder,
html[data-color-mode="dark"] input::placeholder,
html[data-color-mode="dark"] textarea::placeholder {
    color: var(--cd-muted) !important;
}

html[data-color-mode="dark"] a {
    color: var(--cd-link);
}

html[data-color-mode="dark"] .text-muted,
html[data-color-mode="dark"] .text-secondary,
html[data-color-mode="dark"] .small,
html[data-color-mode="dark"] small,
html[data-color-mode="dark"] .text-light-muted {
    color: var(--cd-muted) !important;
}

html[data-color-mode="dark"] .border,
html[data-color-mode="dark"] .border-top,
html[data-color-mode="dark"] .border-bottom,
html[data-color-mode="dark"] .border-start,
html[data-color-mode="dark"] .border-end,
html[data-color-mode="dark"] hr {
    border-color: var(--cd-border) !important;
}

html[data-color-mode="dark"] .layout-menu,
html[data-color-mode="dark"] .menu-vertical,
html[data-color-mode="dark"] .menu-inner,
html[data-color-mode="dark"] .menu-link,
html[data-color-mode="dark"] .menu-text,
html[data-color-mode="dark"] .app-brand-text,
html[data-color-mode="dark"] .navbar,
html[data-color-mode="dark"] .nav-link,
html[data-color-mode="dark"] .dropdown-item,
html[data-color-mode="dark"] .page-link {
    color: var(--cd-text) !important;
}

html[data-color-mode="dark"] .menu-link:hover,
html[data-color-mode="dark"] .dropdown-item:hover,
html[data-color-mode="dark"] .page-link:hover,
html[data-color-mode="dark"] .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-color-mode="dark"] .bg-white,
html[data-color-mode="dark"] .bg-light,
html[data-color-mode="dark"] .bg-gray-50,
html[data-color-mode="dark"] .bg-gray-100,
html[data-color-mode="dark"] .bg-slate-50,
html[data-color-mode="dark"] .bg-slate-100 {
    background-color: var(--cd-surface) !important;
}

html[data-color-mode="dark"] .text-black,
html[data-color-mode="dark"] .text-dark,
html[data-color-mode="dark"] .text-body,
html[data-color-mode="dark"] h1,
html[data-color-mode="dark"] h2,
html[data-color-mode="dark"] h3,
html[data-color-mode="dark"] h4,
html[data-color-mode="dark"] h5,
html[data-color-mode="dark"] h6,
html[data-color-mode="dark"] p,
html[data-color-mode="dark"] span,
html[data-color-mode="dark"] label,
html[data-color-mode="dark"] td,
html[data-color-mode="dark"] th,
html[data-color-mode="dark"] li,
html[data-color-mode="dark"] .text-gray-900,
html[data-color-mode="dark"] .text-gray-800,
html[data-color-mode="dark"] .text-gray-700,
html[data-color-mode="dark"] .text-slate-900,
html[data-color-mode="dark"] .text-slate-800,
html[data-color-mode="dark"] .text-slate-700 {
    color: var(--cd-text) !important;
}

html[data-color-mode="dark"] .text-gray-600,
html[data-color-mode="dark"] .text-gray-500,
html[data-color-mode="dark"] .text-slate-600,
html[data-color-mode="dark"] .text-slate-500 {
    color: var(--cd-muted) !important;
}

html[data-color-mode="dark"] .border-gray-100,
html[data-color-mode="dark"] .border-gray-200,
html[data-color-mode="dark"] .border-gray-300,
html[data-color-mode="dark"] .border-slate-200,
html[data-color-mode="dark"] .border-slate-300 {
    border-color: var(--cd-border) !important;
}

/* Header and Navigation Styles */
html[data-color-mode="dark"] header,
html[data-color-mode="dark"] nav,
html[data-color-mode="dark"] .navbar {
    background: rgba(23, 34, 51, 0.8) !important;
    border-color: var(--cd-border) !important;
}

html[data-color-mode="dark"] header a,
html[data-color-mode="dark"] nav a,
html[data-color-mode="dark"] .navbar a {
    color: var(--cd-text) !important;
}

html[data-color-mode="dark"] header a:hover,
html[data-color-mode="dark"] nav a:hover,
html[data-color-mode="dark"] .navbar a:hover {
    color: #7ea2ff !important;
}

html[data-color-mode="dark"] .mobile-menu,
html[data-color-mode="dark"] #mobile-menu {
    background: rgba(15, 23, 36, 0.95) !important;
}

html[data-color-mode="dark"] button:not(.btn-primary):not([class*="btn-"]):not([class*="bg-orange"]) {
    color: var(--cd-text) !important;
}

html[data-color-mode="dark"] svg {
    stroke: currentColor !important;
}

/* Section backgrounds */
html[data-color-mode="dark"] section:not([class*="bg-"]) {
    background-color: var(--cd-bg) !important;
}

html[data-color-mode="dark"] .bg-gray-50,
html[data-color-mode="dark"] .bg-gray-100,
html[data-color-mode="dark"] .bg-slate-800 {
    background-color: var(--cd-surface-2) !important;
}

html[data-color-mode="dark"] .bg-white {
    background-color: var(--cd-surface) !important;
}

/* Footer styles */
html[data-color-mode="dark"] footer,
html[data-color-mode="dark"] .bg-slate-900 {
    background-color: var(--cd-surface) !important;
    border-color: var(--cd-border) !important;
}

html[data-color-mode="dark"] footer a,
html[data-color-mode="dark"] footer p {
    color: var(--cd-text) !important;
}

/* Details/Accordion elements */
html[data-color-mode="dark"] details,
html[data-color-mode="dark"] .faq-item {
    background-color: var(--cd-surface) !important;
    border-color: var(--cd-border) !important;
    color: var(--cd-text) !important;
}

html[data-color-mode="dark"] summary {
    color: var(--cd-text) !important;
}

/* Prose content (used in terms/privacy) */
html[data-color-mode="dark"] .prose {
    color: var(--cd-text) !important;
}

html[data-color-mode="dark"] .prose h1,
html[data-color-mode="dark"] .prose h2,
html[data-color-mode="dark"] .prose h3,
html[data-color-mode="dark"] .prose h4,
html[data-color-mode="dark"] .prose strong {
    color: var(--cd-text) !important;
}

/* Dashboard sidebar styles */
html[data-color-mode="dark"] .sidebar,
html[data-color-mode="dark"] .layout-menu,
html[data-color-mode="dark"] .menu-vertical {
    background-color: var(--cd-surface) !important;
}

/* Badges and Labels (Sneat template specific) */
html[data-color-mode="dark"] .badge.bg-label-primary { background-color: rgba(105, 108, 255, 0.16) !important; color: #696cff !important; }
html[data-color-mode="dark"] .badge.bg-label-secondary { background-color: rgba(133, 146, 163, 0.16) !important; color: #8592a3 !important; }
html[data-color-mode="dark"] .badge.bg-label-success { background-color: rgba(113, 221, 55, 0.16) !important; color: #71dd37 !important; }
html[data-color-mode="dark"] .badge.bg-label-info { background-color: rgba(3, 195, 236, 0.16) !important; color: #03c3ec !important; }
html[data-color-mode="dark"] .badge.bg-label-warning { background-color: rgba(255, 171, 0, 0.16) !important; color: #ffab00 !important; }
html[data-color-mode="dark"] .badge.bg-label-danger { background-color: rgba(255, 62, 29, 0.16) !important; color: #ff3e1d !important; }
html[data-color-mode="dark"] .badge.bg-label-dark { background-color: rgba(35, 52, 70, 0.16) !important; color: #e8eef9 !important; }

/* Avatar Label colors */
html[data-color-mode="dark"] .bg-label-primary { background-color: rgba(105, 108, 255, 0.16) !important; color: #696cff !important; }
html[data-color-mode="dark"] .bg-label-secondary { background-color: rgba(133, 146, 163, 0.16) !important; color: #8592a3 !important; }
html[data-color-mode="dark"] .bg-label-success { background-color: rgba(113, 221, 55, 0.16) !important; color: #71dd37 !important; }
html[data-color-mode="dark"] .bg-label-info { background-color: rgba(3, 195, 236, 0.16) !important; color: #03c3ec !important; }
html[data-color-mode="dark"] .bg-label-warning { background-color: rgba(255, 171, 0, 0.16) !important; color: #ffab00 !important; }
html[data-color-mode="dark"] .bg-label-danger { background-color: rgba(255, 62, 29, 0.16) !important; color: #ff3e1d !important; }

/* Alert boxes */
html[data-color-mode="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
}

html[data-color-mode="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.15) !important;
    color: #6ee7b7 !important;
    border-color: rgba(25, 135, 84, 0.3) !important;
}

html[data-color-mode="dark"] .alert-info {
    background-color: rgba(13, 202, 240, 0.1) !important;
    color: #7dd3fc !important;
    border-color: rgba(13, 202, 240, 0.2) !important;
}

html[data-color-mode="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
    color: #fcd34d !important;
    border-color: rgba(255, 193, 7, 0.2) !important;
}

/* Tailwind .dark class overrides (keeping existing and adding) */
.dark body { background-color: #0f172a !important; color: #e8eef9 !important; }
.dark .bg-white { background-color: #172233 !important; }
.dark .bg-gray-50, .dark .bg-gray-100, .dark .bg-slate-700, .dark .bg-slate-800 { background-color: #1e2b3f !important; }
.dark .bg-slate-900 { background-color: #0f1724 !important; }

.dark .text-gray-900, .dark .text-gray-800, .dark .text-gray-700, .dark .text-dark, .dark .text-black { color: #e8eef9 !important; }
.dark .text-gray-600, .dark .text-gray-500, .dark .text-gray-400 { color: #afbdd3 !important; }
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6, .dark p, .dark span, .dark label, .dark li { color: #e8eef9 !important; }

.dark .border-gray-200, .dark .border-slate-700 { border-color: #2c3a4f !important; }

/* Custom Fixes */
html[data-color-mode="dark"] .text-primary, 
.dark .text-primary { color: #e6f1ff !important; }

html[data-color-mode="dark"] .bg-primary-bg,
.dark .bg-primary-bg,
html[data-color-mode="dark"] .primary-bg,
.dark .primary-bg { background-color: #0f1724 !important; }

html[data-color-mode="dark"] .secondary-bg,
.dark .secondary-bg,
html[data-color-mode="dark"] .bg-secondary-bg,
.dark .bg-secondary-bg { background-color: #172233 !important; }

/* Fix for inputs that might have hardcoded dark color */
html[data-color-mode="dark"] input,
html[data-color-mode="dark"] select,
html[data-color-mode="dark"] textarea,
.dark input,
.dark select,
.dark textarea {
    color: var(--cd-text) !important;
}

/* btn-secondary dark mode fix */
html[data-color-mode="dark"] .btn-secondary,
.dark .btn-secondary {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e8eef9 !important;
}

#global-theme-toggle {
    border: 1px solid var(--cd-border);
    background: var(--cd-surface);
    color: var(--cd-text);
    border-radius: 9999px;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
}

html[data-color-mode="dark"] .btn-close,
.dark .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}