/* 深色模式样式 */
:root {
  /* 浅色模式变量 - 与原始样式保持一致 */
  --primary-color: #F8BBD0; /* 淡粉色主题色 */
  --primary-color-rgb: 248, 187, 208; /* 淡粉色RGB值 */
  --primary-dark: #F48FB1;
  --primary-light: #FCE4EC;
  --primary-text: #212121;
  --secondary-text: #757575;
  --divider-color: #EEEEEE;
  --accent-color: #FF4081;
  --background-color: #FFFFFF;
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --transition-speed: 0.3s;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 深色模式变量 */
.dark-mode {
  --primary-color: #AD1457; /* 深粉色主题色 */
  --primary-color-rgb: 173, 20, 87; /* 深粉色RGB值 */
  --primary-dark: #880E4F;
  --primary-light: #D81B60;
  --primary-text: #E0E0E0;
  --secondary-text: #BDBDBD;
  --divider-color: #424242;
  --accent-color: #FF4081;
  --background-color: #121212;
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  --glass-bg: rgba(18, 18, 18, 0.7);
  --glass-border: rgba(66, 66, 66, 0.5);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* 深色模式下的主体样式 */
.dark-mode body, .dark-mode html {
  color: var(--primary-text);
  background-color: var(--background-color);
}

/* 深色模式下的侧边栏样式 */
.dark-mode .sidebar {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}

.dark-mode .sidebar-nav {
  background-color: rgba(33, 33, 33, 0.5);
  border-right: 1px solid var(--divider-color);
}

.dark-mode .sidebar-nav .nav-item {
  color: var(--secondary-text);
}

.dark-mode .sidebar-nav .nav-item.active {
  background-color: rgba(var(--primary-color-rgb), 0.2);
  color: var(--primary-color);
}

.dark-mode .sidebar-title {
  color: var(--primary-text);
}

/* 深色模式下的搜索框样式 */
.dark-mode .search-input-wrapper {
  background-color: rgba(33, 33, 33, 0.7);
  border: 1px solid var(--divider-color);
}

.dark-mode .search-input {
  color: var(--primary-text);
  background-color: transparent;
}

.dark-mode .search-input::placeholder {
  color: var(--secondary-text);
}

.dark-mode .search-button {
  background-color: var(--primary-color);
}

/* 深色模式下的列表样式 */
.dark-mode .list-group-item {
  background-color: rgba(33, 33, 33, 0.7);
  border-color: var(--divider-color);
  color: var(--primary-text);
}

.dark-mode .list-group-item:hover {
  background-color: rgba(66, 66, 66, 0.7);
}

.dark-mode .anime-item .anime-title {
  color: var(--primary-text);
}

.dark-mode .anime-item .anime-count {
  color: var(--secondary-text);
}

/* 深色模式下的信息卡片样式 */
.dark-mode .info-card {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}

.dark-mode .card-title, .dark-mode .card-text {
  color: var(--primary-text);
}

.dark-mode .btn-close {
  filter: invert(1);
}

/* 深色模式下的按钮样式 */
.dark-mode .btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #FFFFFF;
}

.dark-mode .btn-primary:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}

.dark-mode .btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.dark-mode .btn-outline-primary:hover {
  background-color: rgba(var(--primary-color-rgb), 0.2);
  color: var(--primary-color);
}

.dark-mode .btn-outline-secondary {
  color: var(--secondary-text);
  border-color: var(--divider-color);
}

/* 深色模式下的表单元素样式 */
.dark-mode .form-control, .dark-mode .form-select {
  background-color: rgba(33, 33, 33, 0.7);
  border-color: var(--divider-color);
  color: var(--primary-text);
}

.dark-mode .form-control:focus, .dark-mode .form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
}

.dark-mode .form-text {
  color: var(--secondary-text);
}

/* 深色模式下的设置面板样式 */
.dark-mode #settings-panel .nav-tabs {
  border-bottom-color: var(--divider-color);
}

.dark-mode #settings-panel .nav-tabs .nav-link {
  color: var(--secondary-text);
}

.dark-mode #settings-panel .nav-tabs .nav-link.active {
  color: var(--primary-color);
}

.dark-mode .settings-section {
  background-color: rgba(33, 33, 33, 0.5);
  border: 1px solid var(--divider-color);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.dark-mode .settings-section-title {
  color: var(--primary-text);
  border-bottom-color: var(--divider-color);
}

/* 深色模式下的地图图层设置样式 */
.dark-mode .map-layer-settings {
  color: var(--primary-text);
}

.dark-mode .map-layer-settings .form-label {
  color: var(--primary-text);
  font-weight: 500;
}

.dark-mode .map-layer-settings .form-select {
  background-color: rgba(33, 33, 33, 0.7);
  border-color: var(--divider-color);
  color: var(--primary-text);
}

.dark-mode .map-layer-settings .form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
}

.dark-mode .map-layer-settings .form-text {
  color: var(--secondary-text);
}

.dark-mode .map-layer-settings .form-check-input {
  background-color: rgba(33, 33, 33, 0.7);
  border-color: var(--divider-color);
}

.dark-mode .map-layer-settings .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* 深色模式下的移动端抽屉样式 */
.dark-mode .mobile-drawer {
  background: var(--glass-bg);
  border-top: 1px solid var(--glass-border);
}

.dark-mode .drawer-handle {
  background-color: var(--divider-color);
}

.dark-mode .mobile-drawer-content {
  background-color: transparent;
}

.dark-mode .mobile-drawer-handle {
  background-color: var(--divider-color);
}

.dark-mode .mobile-drawer-search {
  background: var(--glass-bg);
}

/* 效果级别样式 - 根据性能检测应用不同级别的视觉效果 */

/* 高效果级别 - 完整的视觉效果 */
.effects-high .mobile-drawer {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.75);
}

/* 中效果级别 - 减少模糊半径和透明度 */
.effects-medium .mobile-drawer {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.85);
}

/* 低效果级别 - 最小模糊效果 */
.effects-low .mobile-drawer {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background: rgba(255, 255, 255, 0.9);
}

/* 无效果级别 - 完全不使用模糊效果 */
.effects-none .mobile-drawer,
.android-device .mobile-drawer {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}

/* 深色模式下的效果级别调整 */
.dark-mode.effects-high .mobile-drawer {
  background: rgba(30, 30, 30, 0.75);
}

.dark-mode.effects-medium .mobile-drawer {
  background: rgba(30, 30, 30, 0.85);
}

.dark-mode.effects-low .mobile-drawer {
  background: rgba(30, 30, 30, 0.9);
}

.dark-mode.effects-none .mobile-drawer,
.dark-mode.android-device .mobile-drawer {
  background: rgba(30, 30, 30, 0.95);
}

/* 针对Android设备的特殊优化 */
.android-device .mobile-drawer-handle {
  background-color: var(--primary-color);
  opacity: 0.8;
}

.android-device .mobile-drawer {
  transition: transform 0.2s ease;
}

.android-device .swipe-container {
  transform: none;
  -webkit-transform: none;
}

.android-device .swipe-actions,
.android-device .swipe-content {
  transition: transform 0.2s ease;
}

/* 针对iOS设备的特殊优化 */
.ios-device .mobile-drawer {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-mode .mobile-drawer-search .glass-input {
  background-color: rgba(33, 33, 33, 0.7);
  color: var(--primary-text);
  border-color: var(--divider-color);
}

.dark-mode .mobile-drawer .anime-cover-header {
  background: rgba(33, 33, 33, 0.7);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.dark-mode .mobile-drawer .anime-cover-name {
  color: var(--primary-text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.dark-mode .mobile-drawer .anime-cover-count {
  color: var(--primary-color);
}

/* 深色模式下的移动端导航栏样式 */
.dark-mode .mobile-nav {
  background: var(--glass-bg);
  border-top: 1px solid var(--glass-border);
}

.dark-mode .mobile-nav-item {
  color: var(--secondary-text);
}

.dark-mode .mobile-nav-item.active {
  color: var(--primary-color);
}

.dark-mode .mobile-nav-item span {
  color: var(--secondary-text);
}

.dark-mode .mobile-nav-item.active span {
  color: var(--primary-color);
}

/* 深色模式下的模式切换按钮样式 */
.dark-mode .mobile-mode-controls {
  background-color: rgba(33, 33, 33, 0.9);
}

/* 深色模式下的桌面版地图控制按钮样式 */
.dark-mode .map-controls {
  background-color: rgba(33, 33, 33, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(66, 66, 66, 0.5);
}

.dark-mode .map-controls .btn {
  color: #E0E0E0;
  border-color: rgba(173, 20, 87, 0.7);
}

.dark-mode .map-controls .btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #121212;
  font-weight: 500;
}

.dark-mode .map-controls .btn-primary:hover {
  background-color: var(--primary-light);
  border-color: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .map-controls .btn-outline-primary {
  color: #E0E0E0;
  border-color: var(--primary-color);
  background-color: rgba(33, 33, 33, 0.5);
}

.dark-mode .map-controls .btn-outline-primary:hover {
  background-color: rgba(173, 20, 87, 0.3);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* 深色模式下的标记点样式 */
.dark-mode .custom-marker {
  border-color: var(--divider-color);
}

.dark-mode .anime-marker {
  border-color: var(--divider-color);
}

.dark-mode .guide-marker {
  border-color: var(--divider-color);
}

/* 深色模式下的聚合标记样式 */
.dark-mode .marker-cluster-small,
.dark-mode .marker-cluster-medium,
.dark-mode .marker-cluster-large {
  background-color: rgba(var(--primary-color-rgb), 0.7);
  box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.3);
}

.dark-mode .marker-cluster-small div,
.dark-mode .marker-cluster-medium div,
.dark-mode .marker-cluster-large div {
  background-color: rgba(var(--primary-color-rgb), 0.9);
  color: #FFFFFF;
}

/* 深色模式下的附近巡礼点封面样式 */
.dark-mode .nearby-cover-item {
  border-color: var(--divider-color);
}

.dark-mode .nearby-cover-badge {
  background-color: var(--primary-color);
}

/* 深色模式下的滑动操作菜单样式 */
.dark-mode .swipe-hint {
  background-color: rgba(33, 33, 33, 0.7);
  color: var(--secondary-text);
}

/* 深色模式下的加载提示样式 */
.dark-mode .loading-tip {
  background-color: rgba(33, 33, 33, 0.9);
  color: var(--primary-text);
}

/* 深色模式下的动漫封面渐变效果 */
.dark-mode .anime-cover-gradient {
  background: linear-gradient(to bottom, rgba(18, 18, 18, 0), rgba(18, 18, 18, 1));
}

/* 深色模式下的动漫封面背景渐变效果 */
.dark-mode .anime-cover-bg::after {
  background: linear-gradient(to bottom,
              rgba(var(--theme-color-rgb), 0.4),
              rgba(18, 18, 18, 0));
}

/* 深色模式下的地图控件样式 */
.dark-mode .leaflet-control-zoom a,
.dark-mode .leaflet-control-layers a,
.dark-mode .leaflet-control-locate a,
.dark-mode .leaflet-control-random a {
  background-color: rgba(33, 33, 33, 0.9) !important;
  color: var(--primary-text) !important;
  border-color: var(--divider-color) !important;
}

.dark-mode .leaflet-control-zoom a:hover,
.dark-mode .leaflet-control-layers a:hover,
.dark-mode .leaflet-control-locate a:hover,
.dark-mode .leaflet-control-random a:hover {
  background-color: rgba(66, 66, 66, 0.9) !important;
  color: var(--primary-color) !important;
}

/* 深色模式下的地图控件容器样式 */
.dark-mode .leaflet-control-zoom,
.dark-mode .leaflet-control-locate,
.dark-mode .leaflet-control-random {
  background-color: rgba(33, 33, 33, 0.9) !important;
  box-shadow: var(--card-shadow) !important;
}

/* 深色模式下的缩放按钮分割线 */
.dark-mode .leaflet-control-zoom-in {
  border-bottom-color: var(--divider-color) !important;
}

/* 深色模式下的定位按钮激活状态 */
.dark-mode .leaflet-control-locate a.active {
  background-color: var(--primary-color) !important;
  color: #FFFFFF !important;
}

/* 深色模式下的用户位置标记样式 */
.dark-mode .user-location-marker {
  border-color: var(--divider-color) !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8) !important;
}

/* 深色模式下的位置信息弹窗样式 */
.dark-mode .location-popup h6 {
  color: var(--primary-color) !important;
}

.dark-mode .location-popup p {
  color: var(--primary-text) !important;
}

/* 深色模式下的巡礼点列表项样式 */
.dark-mode .point-item {
  background-color: rgba(33, 33, 33, 0.7);
  border-color: var(--divider-color);
}

.dark-mode .point-item:hover {
  background-color: rgba(66, 66, 66, 0.7);
}

.dark-mode .point-item .point-title {
  color: var(--primary-text);
}

.dark-mode .point-item .point-subtitle {
  color: var(--secondary-text);
}

/* 深色模式下的移动端抽屉中的列表项样式 */
.dark-mode #mobile-anime-list .anime-item,
.dark-mode #mobile-anime-list .point-item,
.dark-mode #mobile-anime-list .location-item {
  background-color: rgba(33, 33, 33, 0.7);
  border-color: var(--divider-color);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.dark-mode #mobile-anime-list .anime-item:hover,
.dark-mode #mobile-anime-list .anime-item:active,
.dark-mode #mobile-anime-list .point-item:hover,
.dark-mode #mobile-anime-list .point-item:active,
.dark-mode #mobile-anime-list .location-item:hover,
.dark-mode #mobile-anime-list .location-item:active {
  background-color: rgba(66, 66, 66, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.dark-mode #mobile-anime-list .anime-name,
.dark-mode #mobile-anime-list .point-name,
.dark-mode #mobile-anime-list .location-name {
  color: var(--primary-text);
}

.dark-mode #mobile-anime-list .anime-points,
.dark-mode #mobile-anime-list .anime-title,
.dark-mode #mobile-anime-list .point-episode,
.dark-mode #mobile-anime-list .location-address {
  color: var(--secondary-text);
}

.dark-mode #mobile-anime-list .back-button {
  background: rgba(33, 33, 33, 0.7);
  color: var(--primary-color);
}

.dark-mode #mobile-anime-list .back-button:hover,
.dark-mode #mobile-anime-list .back-button:active {
  color: var(--accent-color);
}

/* 深色模式下的电脑版侧边栏返回按钮 */
.dark-mode #anime-list .back-button {
  background: rgba(33, 33, 33, 0.8);
  color: var(--primary-color);
  border-color: rgba(var(--primary-color-rgb), 0.4);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.dark-mode #anime-list .back-button:hover {
  background: rgba(40, 40, 40, 0.95);
  color: var(--accent-color);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.dark-mode #mobile-anime-list .anime-title-header {
  color: var(--primary-text);
  border-bottom-color: var(--divider-color);
}

.dark-mode #mobile-anime-list .points-list {
  background: rgba(33, 33, 33, 0.7);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.dark-mode #mobile-anime-list .no-results,
.dark-mode #mobile-anime-list .loading-indicator {
  background: rgba(33, 33, 33, 0.7);
  color: var(--secondary-text);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.dark-mode #mobile-anime-list .search-category {
  color: var(--secondary-text);
  border-bottom-color: var(--divider-color);
}

.dark-mode .expand-anime-btn {
  background-color: rgba(33, 33, 33, 0.8);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.dark-mode .expand-anime-btn:hover,
.dark-mode .expand-anime-btn:active {
  background-color: var(--primary-color);
  color: #FFFFFF;
}

/* 深色模式下的指南列表样式 */
.dark-mode .guide-item {
  background-color: rgba(33, 33, 33, 0.7);
  border-color: var(--divider-color);
}

.dark-mode .guide-item:hover {
  background-color: rgba(66, 66, 66, 0.7);
}

.dark-mode .guide-item .guide-title {
  color: var(--primary-text);
}

.dark-mode .guide-item .guide-subtitle {
  color: var(--secondary-text);
}

/* 深色模式下的弹窗样式 */
.dark-mode .modal-content {
  background-color: var(--background-color);
  border-color: var(--divider-color);
}

.dark-mode .modal-header {
  border-bottom-color: var(--divider-color);
}

.dark-mode .modal-footer {
  border-top-color: var(--divider-color);
}

.dark-mode .modal-title {
  color: var(--primary-text);
}

/* 深色模式下的地图图层控制样式 */
.dark-mode .leaflet-control-layers-expanded {
  background-color: rgba(33, 33, 33, 0.9) !important;
  color: var(--primary-text) !important;
  border-color: var(--divider-color) !important;
}

/* 深色模式下的地图归属信息样式 */
.dark-mode .leaflet-control-attribution {
  background-color: rgba(33, 33, 33, 0.7) !important;
  color: var(--secondary-text) !important;
}

.dark-mode .leaflet-control-attribution a {
  color: var(--primary-color) !important;
}

/* 深色模式下的指南详情窗口中巡礼点列表样式 */
.dark-mode .guide-points-list {
  background-color: rgba(33, 33, 33, 0.7);
  border: 1px solid var(--divider-color);
}

.dark-mode .guide-point-item {
  background-color: rgba(40, 40, 40, 0.8);
  border-bottom: 1px solid var(--divider-color);
}

.dark-mode .guide-point-item:hover {
  background-color: rgba(60, 60, 60, 0.9);
}

.dark-mode .guide-point-item .point-name {
  color: var(--primary-text);
}

.dark-mode .guide-point-item .point-anime {
  color: var(--secondary-text);
}

.dark-mode .guide-point-item .point-image {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.dark-mode .import-guide-points {
  background-color: rgba(33, 33, 33, 0.7);
  border: 1px solid var(--divider-color);
}

/* 深色模式下的地图源选择窗口样式 */
.dark-mode .map-source-button {
  background-color: rgba(33, 33, 33, 0.9);
  color: var(--primary-text);
  box-shadow: var(--card-shadow);
}

.dark-mode .map-source-button:hover {
  background-color: rgba(66, 66, 66, 0.9);
  color: var(--primary-color);
}

.dark-mode .map-source-content {
  background-color: var(--background-color) !important;
  color: var(--primary-text);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.dark-mode .map-source-header {
  border-bottom-color: var(--divider-color) !important;
}

.dark-mode .map-source-title {
  color: var(--primary-text);
}

.dark-mode .map-source-close {
  background-color: rgba(66, 66, 66, 0.8);
  color: var(--primary-text);
}

.dark-mode .map-source-close:hover {
  background-color: var(--primary-color);
  color: #FFFFFF;
}

.dark-mode .map-source-category {
  color: var(--primary-color);
  border-bottom-color: var(--divider-color);
}

.dark-mode .map-source-category i {
  color: var(--primary-color) !important;
}

.dark-mode .map-source-option {
  background-color: rgba(33, 33, 33, 0.8);
  border-color: var(--divider-color);
  color: var(--primary-text);
}

.dark-mode .map-source-option:hover {
  background-color: rgba(66, 66, 66, 0.9);
  border-color: var(--primary-color);
  color: var(--primary-text);
}

.dark-mode .map-source-option.active {
  background-color: rgba(var(--primary-color-rgb), 0.2);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.dark-mode .map-source-icon {
  color: var(--primary-color);
}

.dark-mode .map-source-option.active .map-source-icon {
  color: var(--primary-color);
}

.dark-mode .map-source-name {
  color: var(--primary-text);
}

.dark-mode .map-source-option.active .map-source-name {
  color: var(--primary-color);
}

/* 深色模式下的地图源选择窗口滚动条样式 */
.dark-mode .map-source-scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--primary-color) !important;
}

.dark-mode .map-source-scroll-wrapper::-webkit-scrollbar-track {
  background: rgba(33, 33, 33, 0.3) !important;
}

/* 深色模式下覆盖移动端修复文件中的硬编码颜色 */
.dark-mode .map-source-title {
  color: var(--primary-text) !important;
}

.dark-mode .map-source-close {
  color: var(--secondary-text) !important;
}

.dark-mode .map-source-close:hover,
.dark-mode .map-source-close:active {
  color: var(--primary-text) !important;
}

.dark-mode .map-source-category {
  color: var(--primary-color) !important;
}

.dark-mode .map-source-category i {
  color: var(--primary-color) !important;
}

.dark-mode .map-source-header {
  border-bottom-color: var(--divider-color) !important;
}

/* 深色模式下的移动端地图源选择窗口渐变效果 */
@media (max-width: 768px) {
  .dark-mode .map-source-scroll-wrapper::after {
    background: linear-gradient(to top, var(--background-color), transparent) !important;
  }

  .dark-mode .map-source-scroll-wrapper::before {
    background: linear-gradient(to bottom, var(--background-color), transparent) !important;
  }

  .dark-mode .map-source-close {
    color: var(--secondary-text) !important;
  }

  .dark-mode .map-source-close:hover,
  .dark-mode .map-source-close:active {
    color: var(--primary-text) !important;
  }

  .dark-mode .map-source-title {
    color: var(--primary-text) !important;
  }

  .dark-mode .map-source-header {
    border-bottom-color: var(--divider-color) !important;
  }

  .dark-mode .map-source-category {
    color: var(--primary-text) !important;
    border-left-color: var(--primary-color) !important;
  }

  .dark-mode .map-source-option {
    background-color: rgba(33, 33, 33, 0.8) !important;
    border-color: var(--divider-color) !important;
  }

  .dark-mode .map-source-option:active {
    background-color: rgba(66, 66, 66, 0.8) !important;
  }

  .dark-mode .map-source-option.active {
    background-color: rgba(var(--primary-color-rgb), 0.2) !important;
    border-color: var(--primary-color) !important;
  }

  .dark-mode .map-source-icon {
    color: var(--secondary-text) !important;
  }

  .dark-mode .map-source-option.active .map-source-icon {
    color: var(--primary-color) !important;
  }

  .dark-mode .map-source-name {
    color: var(--primary-text) !important;
  }

  .dark-mode .map-source-option.active .map-source-name {
    color: var(--primary-color) !important;
  }
}