[data-bs-theme="light"] {
  --bs-app-header-base-bg-color: #FFFFFF !important;
  --bs-app-header-color: #1A365D !important;
  --bs-app-sidebar-light-bg-color: #527fb3 !important;
  --bs-app-sidebar-light-menu-heading-color: #f7f7f7 !important;
  --bs-app-bg-color: #e2ecf2 !important;
  --bs-text-title: #1A202C !important;
  --bs-body-color: #2D3748 !important;
  --bs-body-bg: #FFFFFF !important;
  --bs-card-head-bg: #EDF2F7 !important;
  --bs-cheader-text: #1A365D !important;
  --bs-link-color: #0066CC !important;
  --bs-link-hover-color: #004C99 !important;
  --bs-accent: #00D9FF !important;
  --bs-accent-inverse: #1A202C !important;
  --bs-primary: #0066CC !important;
  --bs-primary-inverse: #FFFFFF !important;
  --bs-secondary: #00A8E8 !important;
  --bs-secondary-inverse: #FFFFFF !important;
  --bs-app-footer-bg-color: #aecadd !important;
  --bs-app-footer-color: #2D3748 !important;
  --bs-app-footer-link-color: #0066CC !important;
}
[data-bs-theme="dark"] {
  --dark-bs-app-header-base-bg-color: #064E3B !important;
  --dark-bs-app-header-color: #D1FAE5 !important;
  --dark-bs-app-sidebar-light-bg-color: #1F2937 !important;
  --dark-bs-app-sidebar-light-menu-heading-color: #D1FAE5 !important;
  --dark-bs-app-bg-color: #111827 !important;
  --dark-bs-text-title: #F9FAFB !important;
  --dark-bs-body-color: #D1D5DB !important;
  --dark-bs-card-bg: #1F2937 !important;
  --dark-bs-card-head-bg: #374151 !important;
  --dark-bs-cheader-text: #F3F4F6 !important;
  --dark-bs-link-color: #34D399 !important;
  --dark-bs-link-hover-color: #6EE7B7 !important;
  --dark-bs-accent: #6EE7B7 !important;
  --dark-bs-accent-inverse: #111827 !important;
  --dark-bs-primary: #10B981 !important;
  --dark-bs-primary-inverse: #FFFFFF !important;
  --dark-bs-secondary: #34D399 !important;
  --dark-bs-secondary-inverse: #111827 !important;
  --dark-bs-app-footer-bg-color: #1F2937 !important;
  --dark-bs-app-footer-color: #D1D5DB !important;
  --dark-bs-app-footer-link-color: #34D399 !important;
}

/* Bridge CSS - Maps CSS variables to element selectors */

/* Sync --color-primary (Tailwind) with --bs-primary (designer) */
[data-bs-theme="light"] {
  --color-primary: var(--bs-primary) !important;
  --color-primary-hover: var(--bs-primary) !important;
}
.app-header {
  background-color: var(--bs-app-header-base-bg-color) !important;
}
.app-header a,
.app-header .menu-link,
.app-header .btn-icon i,
.app-header .topbar a {
  color: var(--bs-app-header-color) !important;
}
.app-sidebar {
  background-color: var(--bs-app-sidebar-light-bg-color) !important;
}
.app-sidebar .menu-heading,
.app-sidebar .menu-title,
.app-sidebar .menu-link,
.app-sidebar .menu-link .menu-icon i,
.app-sidebar .menu-link .menu-icon .svg-icon,
.app-sidebar .menu-link .menu-icon .svg-icon svg,
.app-sidebar .menu-link .menu-arrow,
.app-sidebar a {
  color: var(--bs-app-sidebar-light-menu-heading-color) !important;
}
.app-sidebar .menu-link .menu-arrow::after {
  background-color: var(--bs-app-sidebar-light-menu-heading-color) !important;
}
body,
.app-wrapper,
.app-main {
  background-color: var(--bs-app-bg-color) !important;
}
body {
  color: var(--bs-body-color);
}
h1, h2, h3, h4, h5, h6,
.card-title,
.fw-bold,
.font-bold {
  color: var(--bs-text-title) !important;
}
.card {
  background-color: var(--bs-card-bg, var(--bs-body-bg)) !important;
}
.card-header {
  background-color: var(--bs-card-head-bg) !important;
}
.card-header .card-title,
.card-header h3,
.card-header h4,
.card-header h5 {
  color: var(--bs-cheader-text) !important;
}
a:not(.btn):not(.menu-link):not(.nav-link) {
  color: var(--bs-link-color) !important;
}
a:not(.btn):not(.menu-link):not(.nav-link):hover {
  color: var(--bs-link-hover-color) !important;
}
.btn-primary,
.bg-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
.btn-primary,
.btn-primary .indicator-label,
.btn-primary span:not(.badge) {
  color: var(--bs-primary-inverse) !important;
}
.nav-pills .nav-link.active {
  color: var(--bs-primary-inverse) !important;
}
.btn-secondary,
.bg-secondary {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}
.btn-secondary {
  color: var(--bs-secondary-inverse) !important;
}
.bg-accent,
.badge-accent {
  background-color: var(--bs-accent) !important;
  color: var(--bs-accent-inverse) !important;
}
.app-footer {
  background-color: var(--bs-app-footer-bg-color) !important;
  color: var(--bs-app-footer-color) !important;
}
.app-footer a,
.app-footer a:not(.btn):not(.menu-link):not(.nav-link) {
  color: var(--bs-app-footer-link-color, var(--bs-app-footer-color)) !important;
}

/* Dark mode bridge overrides */
[data-bs-theme="dark"] {
  --color-primary: var(--dark-bs-primary) !important;
  --color-primary-hover: var(--dark-bs-primary) !important;
}
[data-bs-theme="dark"] .app-header {
  background-color: var(--dark-bs-app-header-base-bg-color) !important;
}
[data-bs-theme="dark"] .app-header a,
[data-bs-theme="dark"] .app-header .menu-link {
  color: var(--dark-bs-app-header-color) !important;
}
[data-bs-theme="dark"] .app-sidebar {
  background-color: var(--dark-bs-app-sidebar-light-bg-color) !important;
}
[data-bs-theme="dark"] .app-sidebar .menu-heading,
[data-bs-theme="dark"] .app-sidebar .menu-title,
[data-bs-theme="dark"] .app-sidebar .menu-link,
[data-bs-theme="dark"] .app-sidebar .menu-link .menu-icon .svg-icon,
[data-bs-theme="dark"] .app-sidebar .menu-link .menu-icon .svg-icon svg,
[data-bs-theme="dark"] .app-sidebar a {
  color: var(--dark-bs-app-sidebar-light-menu-heading-color) !important;
}
[data-bs-theme="dark"] .app-sidebar .menu-link .menu-arrow::after {
  background-color: var(--dark-bs-app-sidebar-light-menu-heading-color) !important;
}
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .app-wrapper,
[data-bs-theme="dark"] .app-main {
  background-color: var(--dark-bs-app-bg-color) !important;
}
[data-bs-theme="dark"] .card {
  background-color: var(--dark-bs-card-bg, var(--dark-bs-body-bg)) !important;
}
[data-bs-theme="dark"] .card-header {
  background-color: var(--dark-bs-card-head-bg) !important;
}
[data-bs-theme="dark"] .card-header .card-title,
[data-bs-theme="dark"] .card-header h3,
[data-bs-theme="dark"] .card-header h4 {
  color: var(--dark-bs-cheader-text) !important;
}
[data-bs-theme="dark"] body {
  color: var(--dark-bs-body-color);
}
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6 {
  color: var(--dark-bs-text-title) !important;
}
[data-bs-theme="dark"] a:not(.btn):not(.menu-link) {
  color: var(--dark-bs-link-color) !important;
}
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .bg-primary {
  background-color: var(--dark-bs-primary) !important;
}
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-primary .indicator-label,
[data-bs-theme="dark"] .btn-primary span:not(.badge) {
  color: var(--dark-bs-primary-inverse) !important;
}
[data-bs-theme="dark"] .nav-pills .nav-link.active {
  color: var(--dark-bs-primary-inverse) !important;
}
[data-bs-theme="dark"] .app-footer {
  background-color: var(--dark-bs-app-footer-bg-color) !important;
  color: var(--dark-bs-app-footer-color) !important;
}
[data-bs-theme="dark"] .app-footer a,
[data-bs-theme="dark"] .app-footer a:not(.btn):not(.menu-link):not(.nav-link) {
  color: var(--dark-bs-app-footer-link-color, var(--dark-bs-app-footer-color)) !important;
}