/* Mobile Dark Mode Toggle Fix */

/* Add dark mode toggle to mobile menu */
.mobile-nav-list {
  position: relative;
  padding-bottom: 80px; /* Make room for dark mode toggle */
}

/* Mobile dark mode toggle button */
.mobile-dark-mode-toggle {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  background: var(--primary-color, #5d5fef);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.mobile-dark-mode-toggle:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.mobile-dark-mode-toggle i {
  font-size: 1.2rem;
}

/* Only show in mobile menu */
.mobile-dark-mode-toggle {
  display: none;
}

.mobile-menu.active .mobile-dark-mode-toggle {
  display: flex;
}

/* Dark mode styles for mobile menu */
[data-theme="dark"] .mobile-menu {
  background: #0F172A;
  color: #E2E8F0;
}

[data-theme="dark"] .mobile-nav-item a {
  color: #E2E8F0;
}

[data-theme="dark"] .mobile-nav-item a:hover,
[data-theme="dark"] .mobile-nav-item a:active {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

[data-theme="dark"] .mobile-nav-section h3 {
  color: #94A3B8;
}

[data-theme="dark"] .close-menu {
  background: #1E293B;
  color: #E2E8F0;
}

[data-theme="dark"] .close-menu:hover {
  background: #334155;
}

/* Analytics dark mode text fix */
[data-theme="dark"] .muscle-group-label {
  fill: #E2E8F0 !important;
  color: #E2E8F0 !important;
}

[data-theme="dark"] .analytics-dashboard text {
  fill: #E2E8F0 !important;
}

[data-theme="dark"] .analytics-dashboard .chart-title {
  color: #E2E8F0 !important;
}

[data-theme="dark"] .analytics-dashboard .metric-label {
  color: #94A3B8 !important;
}

/* Video Coach Session Settings Light Mode Fix */
.session-ui-container .settings-panel {
  background: white;
  color: #374151;
}

[data-theme="light"] .session-ui-container .settings-panel,
[data-theme="light"] .session-ui-container .settings-content {
  background: white !important;
  color: #374151 !important;
}

[data-theme="light"] .session-ui-container .settings-header h3 {
  color: #1F2937 !important;
}

[data-theme="light"] .session-ui-container label {
  color: #4B5563 !important;
}

[data-theme="light"] .session-ui-container select,
[data-theme="light"] .session-ui-container input[type="checkbox"] {
  color: #374151 !important;
  background: #F3F4F6 !important;
  border-color: #D1D5DB !important;
}

/* Session UI Position Fix for Bottom Positions */
.session-ui-container {
  max-width: 320px;
  max-height: 90vh;
}

/* Bottom right position fix */
.session-ui-container[data-position="bottom-right"] {
  bottom: 20px !important;
  right: 20px !important;
  top: auto !important;
  left: auto !important;
}

/* Bottom left position fix */
.session-ui-container[data-position="bottom-left"] {
  bottom: 20px !important;
  left: 20px !important;
  top: auto !important;
  right: auto !important;
}

/* Top positions for completeness */
.session-ui-container[data-position="top-right"] {
  top: 80px !important;
  right: 20px !important;
  bottom: auto !important;
  left: auto !important;
}

.session-ui-container[data-position="top-left"] {
  top: 80px !important;
  left: 20px !important;
  bottom: auto !important;
  right: auto !important;
}

/* Ensure session panel doesn't overflow viewport */
.session-panel {
  max-height: calc(90vh - 40px);
  overflow-y: auto;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .session-ui-container {
    max-width: calc(100vw - 40px);
  }
  
  .session-ui-container[data-position="bottom-right"],
  .session-ui-container[data-position="bottom-left"] {
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
    width: calc(100% - 20px) !important;
  }
}

/* Ensure settings panel doesn't overflow */
.settings-panel {
  max-height: 400px;
  overflow-y: auto;
}

/* Fix for mobile menu dark mode toggle visibility */
@media (max-width: 768px) {
  .desktop-nav .dark-mode-toggle {
    display: none !important;
  }
}