/* Theme Variables and Styles - Apple Music iOS Style */

/* Light Theme (default) */
:root,
[data-theme="light"] {
  --accent: #007AFF;
  --accent-hover: #0051D5;
  --bg-gradient-start: #E8F0FE;
  --bg-gradient-end: #FFFFFF;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-shadow: rgba(0, 0, 0, 0.1);
  --card-bg: rgba(255, 255, 255, 0.6);
  --card-hover: rgba(255, 255, 255, 0.8);
  --text-primary: #000000;
  --text-secondary: rgba(0, 0, 0, 0.6);
  --text-tertiary: rgba(0, 0, 0, 0.4);
  --border: rgba(0, 0, 0, 0.1);
  --highlight-bg: rgba(255, 204, 0, 0.3);
  --player-bg: rgba(255, 255, 255, 0.85);
  --header-bg: rgba(255, 255, 255, 0.8);
}

/* Dark Theme */
[data-theme="dark"] {
  --accent: #0A84FF;
  --accent-hover: #409CFF;
  --bg-gradient-start: #000000;
  --bg-gradient-end: #1C1C1E;
  --glass-bg: rgba(28, 28, 30, 0.7);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: rgba(0, 0, 0, 0.3);
  --card-bg: rgba(28, 28, 30, 0.6);
  --card-hover: rgba(44, 44, 46, 0.8);
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-tertiary: rgba(255, 255, 255, 0.4);
  --border: rgba(255, 255, 255, 0.1);
  --highlight-bg: rgba(255, 204, 0, 0.25);
  --player-bg: rgba(28, 28, 30, 0.9);
  --header-bg: rgba(28, 28, 30, 0.8);
  color-scheme: dark;
}

/* VS Code Dark Theme */
[data-theme="code-dark"] {
  --accent: #007ACC;
  --accent-hover: #1E90FF;
  --bg-gradient-start: #1E1E1E;
  --bg-gradient-end: #252526;
  --glass-bg: rgba(37, 37, 38, 0.7);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: rgba(0, 0, 0, 0.3);
  --card-bg: rgba(37, 37, 38, 0.6);
  --card-hover: rgba(45, 45, 48, 0.8);
  --text-primary: #D4D4D4;
  --text-secondary: rgba(212, 212, 212, 0.6);
  --text-tertiary: rgba(212, 212, 212, 0.4);
  --border: rgba(255, 255, 255, 0.1);
  --highlight-bg: rgba(255, 204, 0, 0.25);
  --player-bg: rgba(37, 37, 38, 0.9);
  --header-bg: rgba(37, 37, 38, 0.8);
  color-scheme: dark;
}

/* Header positioning for theme button - LEFT SIDE */
header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #ffffff;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  flex: 1;
  text-align: center;
}

.theme-toggle-header {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
  font-size: 18px;
  z-index: 1500;
  background: transparent;
  padding: 6px 8px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.theme-toggle-header:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Theme Menu positioning - appears below left button */
.theme-menu {
  position: fixed;
  top: calc(var(--header-height) + 8px);
  left: 12px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 30px var(--glass-shadow);
  z-index: 1300;
  display: none;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}

.theme-menu.open {
  display: flex;
}

.theme-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  /* Reset color-scheme to prevent inheritance from data-theme attribute */
  color-scheme: normal;
}

/* Light theme: theme menu items should have dark text */
:root[data-theme="light"] .theme-menu .theme-item,
:root:not([data-theme]) .theme-menu .theme-item {
  color: #000000 !important;
}

/* Dark theme: theme menu items should have light text */
:root[data-theme="dark"] .theme-menu .theme-item,
:root[data-theme="code-dark"] .theme-menu .theme-item {
  color: #FFFFFF !important;
}

/* Active item always has white text */
.theme-menu .theme-item.active {
  color: #FFFFFF !important;
}

.theme-item:hover {
  background: var(--card-hover);
}

.theme-item.active {
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
}

.theme-preview {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.theme-preview.light {
  background: #ffffff;
  border-color: #e6e6e6;
}

.theme-preview.dark {
  background: #1f2937;
  border-color: #4b5563;
}

.theme-preview.code-dark {
  background: #007acc;
}

@media (max-width: 768px) {
  .theme-menu {
    left: 8px;
  }

  .theme-toggle-header {
    left: 8px;
  }
}