/* Custom styles that augment Tailwind */

/* Hide scrollbar for device list but keep functionality */
#device-list-container::-webkit-scrollbar {
    width: 6px;
}
#device-list-container::-webkit-scrollbar-track {
    background: transparent;
}
#device-list-container::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 10px;
}
.dark #device-list-container::-webkit-scrollbar-thumb {
    background-color: rgba(75, 85, 99, 0.5);
}

/* Range Input Styling */
input[type=range] {
    -webkit-appearance: none;
    background: transparent;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #2563eb;
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #e5e7eb;
    border-radius: 2px;
}

.dark input[type=range]::-webkit-slider-runnable-track {
    background: #374151;
}

/* Canvas checkerboard pattern for transparency */
#workspace-container {
    background-image: 
      linear-gradient(45deg, #e5e7eb 25%, transparent 25%), 
      linear-gradient(-45deg, #e5e7eb 25%, transparent 25%), 
      linear-gradient(45deg, transparent 75%, #e5e7eb 75%), 
      linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.dark #workspace-container {
    background-image: 
      linear-gradient(45deg, #1f2937 25%, transparent 25%), 
      linear-gradient(-45deg, #1f2937 25%, transparent 25%), 
      linear-gradient(45deg, transparent 75%, #1f2937 75%), 
      linear-gradient(-45deg, transparent 75%, #1f2937 75%);
}

#preview-canvas {
    transition: opacity 0.2s ease;
}

/* Transitions */
.device-item {
    transition: all 0.2s ease;
}
.device-item:active {
    transform: scale(0.98);
}