/* Enhanced Select Styling - Matches EvoSim Interface Vibe */

select {
  background: linear-gradient(135deg, 
    rgba(15, 22, 32, 0.95) 0%, 
    rgba(20, 28, 40, 0.9) 50%, 
    rgba(15, 22, 32, 0.95) 100%) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  padding: 10px 16px !important;
  font-size: 12px !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all var(--transition-speed) ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  
  /* Custom sleek dropdown arrow */
  background-image: 
    linear-gradient(45deg, transparent 40%, var(--accent) 50%, transparent 60%),
    linear-gradient(-45deg, transparent 40%, var(--accent) 50%, transparent 60%) !important;
  background-position: 
    calc(100% - 12px) calc(50% - 2px),
    calc(100% - 8px) calc(50% - 2px) !important;
  background-size: 4px 4px, 4px 4px !important;
  background-repeat: no-repeat !important;
  padding-right: 32px !important;
}

select:hover {
  border-color: var(--accent) !important;
  background: linear-gradient(135deg, 
    rgba(20, 28, 40, 0.95) 0%, 
    rgba(25, 35, 50, 0.9) 50%, 
    rgba(20, 28, 40, 0.95) 100%) !important;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(94, 234, 212, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-1px) !important;
}

select:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.25),
    0 0 0 2px rgba(94, 234, 212, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-1px) !important;
}

select:active {
  transform: translateY(0) !important;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 0 0 2px rgba(94, 234, 212, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

select option {
  background: var(--bg) !important;
  color: var(--text) !important;
  padding: 12px 16px !important;
  font-weight: 500 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

select option:hover {
  background: rgba(94, 234, 212, 0.1) !important;
  color: var(--accent) !important;
}

select option:checked {
  background: var(--accent) !important;
  color: var(--bg) !important;
  font-weight: 600 !important;
}

/* Grid selector specific styling */
#scatter {
  position: relative;
}

#scatter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  background: linear-gradient(45deg, 
    rgba(94, 234, 212, 0.1) 0%, 
    transparent 50%, 
    rgba(94, 234, 212, 0.1) 100%);
  opacity: 0;
  transition: opacity var(--transition-speed) ease;
  pointer-events: none;
  z-index: -1;
}

#scatter:focus::before {
  opacity: 1;
}

/* Label styling to match */
.scatter-control label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text);
}

.scatter-control .val {
  color: var(--accent);
  font-weight: 600;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  font-size: 11px;
  background: rgba(94, 234, 212, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(94, 234, 212, 0.2);
}