/* Ableton Live inspired styles */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --orange-primary: #ff6600;
  --orange-hover: #e55a00;
  --gray-darkest: #1a1a1a;
  --gray-darker: #2a2a2a;
  --gray-dark: #3a3a3a;
  --gray-medium: #4a4a4a;
  --gray-light: #6a6a6a;
}

body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Vertical slider styling for Ableton-like faders */
.slider.vertical {
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
  width: 6px;
  height: 64px;
  background: #2a2a2a;
  outline: none;
  border-radius: 3px;
  border: 1px solid #4a4a4a;
  cursor: pointer;
}

.slider.vertical::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 8px;
  background: #ff6600;
  border-radius: 2px;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.slider.vertical::-webkit-slider-thumb:hover {
  background: #e55a00;
}

.slider.vertical::-moz-range-thumb {
  width: 12px;
  height: 8px;
  background: #ff6600;
  border-radius: 2px;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Regular horizontal sliders */
.slider {
  -webkit-appearance: none;
  appearance: none;
  background: #2a2a2a;
  outline: none;
  border-radius: 3px;
  border: 1px solid #4a4a4a;
  height: 6px;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #ff6600;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #1a1a1a;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.slider::-webkit-slider-thumb:hover {
  background: #e55a00;
}

/* Button styles */
button {
  transition: all 0.15s ease;
  font-weight: 500;
  border: none;
  outline: none;
}

button:hover {
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0);
}

/* Clip slot specific styles */
.clip-slot {
  position: relative;
  overflow: hidden;
}

.clip-slot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
}

.clip-slot.playing {
  box-shadow: inset 0 0 0 2px #ff6600;
}

/* Grid styling for session view */
.session-grid {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 96px 48px;
}

/* Transport button special effects */
.transport-button {
  background: linear-gradient(135deg, #4a4a4a, #2a2a2a);
  border: 1px solid #6a6a6a;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.2);
}

.transport-button:hover {
  background: linear-gradient(135deg, #5a5a5a, #3a3a3a);
}

.transport-button:active {
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.1);
}

.transport-button.playing {
  background: linear-gradient(135deg, #ff6600, #e55a00);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 8px rgba(255, 102, 0, 0.3);
}

.transport-button.recording {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  animation: recordPulse 1.5s infinite ease-in-out;
}

@keyframes recordPulse {
  0%, 100% { 
    opacity: 1;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
  }
  50% { 
    opacity: 0.8;
    box-shadow: 0 2px 12px rgba(220, 38, 38, 0.6);
  }
}

/* Track controls styling */
.track-control {
  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
  border-right: 1px solid #3a3a3a;
}

.track-control:hover {
  background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
}

/* Browser panel styling */
.browser-category {
  position: relative;
  transition: all 0.15s ease;
}

.browser-category.active {
  background: linear-gradient(90deg, #ff6600, #e55a00);
  color: white;
}

.browser-category.active::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ff6600;
}

.browser-item:hover {
  background: rgba(255, 102, 0, 0.1);
  border-left: 2px solid #ff6600;
}

/* Scrollbar styling for Ableton look */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
  background: #4a4a4a;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6a6a6a;
}

::-webkit-scrollbar-corner {
  background: #1a1a1a;
}

/* Input field styling */
input[type="text"],
input[type="number"] {
  background: #2a2a2a;
  border: 1px solid #4a4a4a;
  color: white;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 3px;
  outline: none;
  transition: border-color 0.15s ease;
}

input[type="text"]:focus,
input[type="number"]:focus {
  border-color: #ff6600;
  box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.2);
}

/* Drag and drop styling */
.drag-over {
  background: rgba(255, 102, 0, 0.2) !important;
  border: 2px dashed #ff6600 !important;
}

.dragging {
  opacity: 0.8;
  transform: rotate(2deg);
}

/* Clip colors */
.clip-red { background: linear-gradient(135deg, #dc2626, #991b1b); }
.clip-orange { background: linear-gradient(135deg, #ff6600, #e55a00); }
.clip-yellow { background: linear-gradient(135deg, #eab308, #ca8a04); }
.clip-green { background: linear-gradient(135deg, #16a34a, #15803d); }
.clip-blue { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.clip-purple { background: linear-gradient(135deg, #9333ea, #7c3aed); }
.clip-pink { background: linear-gradient(135deg, #ec4899, #db2777); }

/* Animation for playing clips */
@keyframes clipPulse {
  0%, 100% {
    box-shadow: inset 0 0 0 2px rgba(255, 102, 0, 0.8);
  }
  50% {
    box-shadow: inset 0 0 0 2px rgba(255, 102, 0, 1), 0 0 10px rgba(255, 102, 0, 0.5);
  }
}

.clip-playing {
  animation: clipPulse 1s infinite ease-in-out;
}

/* Master section styling */
.master-section {
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  border-right: 2px solid #ff6600;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .browser-panel {
    width: 200px;
  }
  
  .track-width {
    min-width: 80px;
  }
}

@media (max-width: 768px) {
  .browser-panel {
    width: 150px;
  }
  
  .track-width {
    min-width: 60px;
  }
  
  .transport-controls {
    flex-wrap: wrap;
  }
}

/* Accessibility */
button:focus,
input:focus {
  outline: 2px solid #ff6600;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Performance optimizations */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --orange-primary: #ffaa00;
    --gray-darkest: #000000;
    --gray-darker: #111111;
  }
}