/*
 * Desktop Switcher UI Styles
 */

.desktop-switcher {
  position: relative;
  margin-right: var(--space-3);
  display: inline-block;
}

.nav-buttons .desktop-switcher {
  margin-right: var(--space-3);
}

.desktop-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  backdrop-filter: blur(10px);
  white-space: nowrap;
  height: fit-content;
}

.desktop-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.desktop-toggle svg {
  width: 20px;
  height: 20px;
}

.desktop-toggle-text {
  display: none;
}

@media (min-width: 768px) {
  .desktop-toggle-text {
    display: inline;
  }
}

/* Desktop Menu Dropdown */
.desktop-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 320px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--duration-base) var(--ease-standard);
  backdrop-filter: blur(20px);
  z-index: var(--z-dropdown);
}

.desktop-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.desktop-menu-header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.desktop-menu-header h3 {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.desktop-menu-header p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* Desktop Options */
.desktop-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.desktop-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  text-align: left;
}

.desktop-option:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-default);
  transform: translateX(4px);
}

.desktop-option.active {
  background: rgba(var(--brand), 0.1);
  border-color: var(--brand);
}

/* Desktop Preview Colors */
.desktop-preview {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.desktop-color {
  width: 12px;
  height: 40px;
  border-radius: 4px;
}

/* Color previews for each desktop */
[data-desktop="ocean"] .desktop-color-1 { background: #1E81B0; }
[data-desktop="ocean"] .desktop-color-2 { background: #76B5C5; }
[data-desktop="ocean"] .desktop-color-3 { background: #ABDBE3; }

[data-desktop="sunset"] .desktop-color-1 { background: #E28743; }
[data-desktop="sunset"] .desktop-color-2 { background: #EAB676; }
[data-desktop="sunset"] .desktop-color-3 { background: #873E23; }

[data-desktop="classic"] .desktop-color-1 { background: #1E81B0; }
[data-desktop="classic"] .desktop-color-2 { background: #E28743; }
[data-desktop="classic"] .desktop-color-3 { background: #76B5C5; }

[data-desktop="midnight"] .desktop-color-1 { background: #063970; }
[data-desktop="midnight"] .desktop-color-2 { background: #154C79; }
[data-desktop="midnight"] .desktop-color-3 { background: #1E81B0; }

[data-desktop="breeze"] .desktop-color-1 { background: #ABDBE3; }
[data-desktop="breeze"] .desktop-color-2 { background: #76B5C5; }
[data-desktop="breeze"] .desktop-color-3 { background: #EEEEE4; }

[data-desktop="ember"] .desktop-color-1 { background: #873E23; }
[data-desktop="ember"] .desktop-color-2 { background: #E28743; }
[data-desktop="ember"] .desktop-color-3 { background: #EAB676; }

/* Desktop Info */
.desktop-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.desktop-info strong {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.desktop-info span {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Check Icon */
.desktop-check {
  opacity: 0;
  color: var(--brand);
  transition: opacity var(--duration-fast) var(--ease-standard);
  flex-shrink: 0;
}

.desktop-option.active .desktop-check {
  opacity: 1;
}

/* Toast Notification */
.desktop-toast {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--duration-base) var(--ease-spring);
  z-index: var(--z-toast);
  backdrop-filter: blur(20px);
}

.desktop-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.desktop-toast svg {
  color: var(--brand);
  flex-shrink: 0;
}

.desktop-toast strong {
  color: var(--brand);
}

/* Mobile Adjustments */
@media (max-width: 767px) {
  .desktop-menu {
    right: -10px;
    min-width: 280px;
  }

  .desktop-toast {
    bottom: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
    font-size: var(--text-xs);
  }
}

/* Breeze desktop (light mode) adjustments */
[data-desktop="breeze"] .desktop-toggle {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-secondary);
}

[data-desktop="breeze"] .desktop-toggle:hover {
  background: rgba(0, 0, 0, 0.1);
}

[data-desktop="breeze"] .desktop-option {
  background: rgba(0, 0, 0, 0.02);
}

[data-desktop="breeze"] .desktop-option:hover {
  background: rgba(0, 0, 0, 0.05);
}