/* Custom styles to enhance Tailwind for specific elements */

body {

font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

background-color: #1a1a1a; /* Unified background color */

color: #e2e8f0; /* Light text */

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

padding: 1rem; /* Default padding for desktop */

box-sizing: border-box;

user-select: none; /* Make all text non-selectable */

}

.container {

background-color: transparent; /* No specific background for container, body handles it */

border-radius: 0; /* No border-radius on container */

padding: 1.5rem; /* Default padding for desktop */

width: 100%; /* Full width */

box-sizing: border-box;

display: flex;

flex-direction: column; /* Default to column for mobile */

gap: 1.5rem; /* Default gap for desktop */

min-height: calc(100vh - 2rem); /* Adjusted to account for body padding */

box-shadow: none; /* No shadow on container */

}



/* Mobile-specific adjustments */

@media (max-width: 767px) { /* Small screens (mobile) */

body {

padding: 0; /* No padding on mobile body */

}

.container {

padding: 0; /* No padding on mobile container */

gap: 0; /* No gap between columns on mobile */

min-height: 100vh; /* Make container truly full height on mobile */

height: 100vh; /* Explicitly set height for mobile */

border-radius: 0; /* No border radius for full screen effect */

box-shadow: none; /* No shadow for full screen effect */

}

.left-column, .right-column {

flex-grow: 1; /* Allow both columns to grow and share space */

width: 100%; /* Ensure they take full width */

}

.left-column {

padding-bottom: 0; /* Remove bottom padding for "linking" */

display: flex; /* Make it a flex container to manage its children */

flex-direction: column;

}

.right-column {

padding-top: 0; /* Remove top padding for "linking" */

display: flex; /* Make it a flex container to manage its children */

flex-direction: column;

}

.section-panel {

background-color: #1a1a1a; /* Changed to match body background as requested */

border: none; /* No borders on mobile panels */

border-radius: 0; /* No border-radius on mobile panels */

padding: 1rem; /* Adjust internal padding for mobile */

flex-grow: 1; /* Allow content inside to grow */

display: flex; /* Make section panels flex containers for their content */

flex-direction: column;

box-shadow: none; /* No shadow on panels */

}

#padEditorSection { /* Top panel on mobile */

border-bottom: none; /* Explicitly ensure no bottom border */

padding-bottom: 0; /* Add this as requested */

}

.right-column .section-panel { /* Bottom panel on mobile (which contains pad grid) */

border-top: none; /* Explicitly ensure no top border */

}

.pad-grid {

width: 100%;

max-width: none; /* Let it expand */

flex-grow: 1; /* Allow the pad grid to take available vertical space */

margin: 0; /* No margin on mobile */

height: auto; /* Allow height to adjust based on flex-grow */

}

}



.section-panel {

background-color: #1a1a1a; /* Changed to match body background as requested */

border: none; /* No border */

border-radius: 0; /* No border-radius */

padding: 1.5rem;

flex-grow: 1;

box-shadow: none; /* No shadow */

}



.pad-grid {

display: grid;

grid-template-columns: repeat(4, 1fr); /* Force 4x4 grid */

gap: 0.75rem;

aspect-ratio: 1 / 1; /* Keep grid square */

width: 100%; /* Occupy full width of its parent */

max-width: 400px; /* Max width to ensure pads aren't too big on large screens */

margin: 0 auto; /* Center the grid */

}

.pad {

background-color: #3d3d3d; /* Dark pad color */

border-radius: 0.125rem; /* Sharper corners */

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

font-weight: bold;

cursor: pointer;

transition: background-color 0.2s, transform 0.1s, border-color 0.2s;

position: relative;

padding: 0.5rem;

box-sizing: border-box;

border: none; /* No border */

overflow: hidden; /* Hide anything outside the pad boundaries */

box-shadow: none; /* No shadow */

}

.pad.active-playing {

background-color: #007bff; /* Brighter blue for active playing */

transform: scale(0.98);

}

.pad:hover {

background-color: #555555;

}

.pad:active {

transform: scale(0.95);

}

.pad.selected {

border: 3px solid #007bff; /* Blue border for selected pad */

}

.pad.recording-active {

 background-color: #ffcc00; /* Yellow when recording */

 color: #333;

 border-color: #cc9900;

}

.pad-text {

display: none; /* Hide by default */

}

.pad.has-sample .pad-text {

color: #ffffff;

}

.pad-waveform-canvas {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none; /* Don't block clicks on pad */

opacity: 0.8; /* Slightly transparent */

}



/* Reusable button styles */

.action-button {

background-color: #007bff; /* Equivalent to bg-blue-700 */

color: white;

font-weight: bold;

padding: 0.5rem 1rem; /* Equivalent to py-2 px-4 */

border-radius: 0.125rem; /* Equivalent to rounded-sm */

transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;

border: none; /* No border */

text-transform: lowercase;

box-shadow: none; /* No shadow */

}

.action-button:hover {

background-color: #0056b3; /* Equivalent to hover:bg-blue-800 */

}

.action-button:disabled {

background-color: #6b7280; /* This gray will be overridden by specific button disabled styles */

cursor: not-allowed;

border-color: #4b5563; /* This border will technically not show if border:none is global, but kept for specificity */

}



/* Cut Button Specific Styling - Always green, only opacity changes when disabled */

button#cutButton {

background: limegreen !important; /* Force limegreen */

border: none; /* No border */

}

button#cutButton:hover {

background: limegreen !important; /* Keep the same limegreen on hover */

border: none; /* Ensure no border on hover */

}

button#cutButton:disabled {

background: limegreen !important; /* Keep limegreen when disabled */

opacity: 0.5; /* Only change opacity when disabled */

cursor: not-allowed;

border: none; /* No border */

}





/* Message box styles (kept for reference, but should be unused) */

.warning-message, .success-message, .error-message {

display: none !important; /* Force hide if any were accidentally left */

}



/* Waveform canvas styling for the main trim section */

#waveformCanvas {

background-color: #0d0d0d; /* Even darker background */

border-radius: 0.125rem;

margin-top: 1rem;

width: 100%;

height: 100px; /* Fixed height for waveform */

cursor: ew-resize;

touch-action: none;

border: none; /* No border */

box-shadow: none; /* No shadow */

}

.trim-controls {

display: flex;

align-items: center;

justify-content: center;

gap: 1rem;

margin-top: 0.5rem;

flex-wrap: wrap;

}

.trim-controls input[type="range"] {

flex-grow: 1;

width: 45%;

max-width: 250px;

-webkit-appearance: none;

height: 8px;

background: #4a4a4a; /* Darker track */

border-radius: 5px;

outline: none;

opacity: 0.8;

transition: opacity .2s;

margin: 0.5rem 0;

}

.trim-controls input[type="range"]:hover {

opacity: 1;

}

.trim-controls input[type="range"]::-webkit-slider-thumb {

-webkit-appearance: none;

appearance: none;

width: 20px;

height: 20px;

border-radius: 0.125rem; /* Sharper corners for thumb */

background: #007bff; /* Brighter blue */

cursor: pointer;

box-shadow: none; /* No shadow on thumb */

border: none; /* No border on thumb */

}

.trim-controls input[type="range"]::-moz-range-thumb {

width: 20px;

height: 20px;

border-radius: 0.125rem; /* Sharper corners for thumb */

background: #007bff; /* Brighter blue */

cursor: pointer;

box-shadow: none; /* No shadow on thumb */

border: none; /* No border on thumb */

}



/* Playback mode buttons (now central) */

.mode-button-group .playback-mode-btn {

background-color: #333333; /* Darker button */

color: #cccccc;

padding: 0.3rem 0.6rem;

border-radius: 0.125rem; /* Sharper corners */

cursor: pointer;

transition: background-color 0.2s, color 0.2s;

border: none; /* No border */

text-transform: lowercase; /* All UI text lowercase */

box-shadow: none; /* No shadow */

}

.mode-button-group .playback-mode-btn:hover {

background-color: #4a4a4a;

color: #ffffff;

}

.mode-button-group .playback-mode-btn.active {

background-color: #007bff; /* Active blue */

color: #ffffff;

border: none; /* No border */

}

/* Style for the new discrete record button */

#recordButton {

background-color: #e53e3e; /* Red for record */

color: white;

padding: 0.5rem 1rem;

border-radius: 0.125rem;

cursor: pointer;

transition: background-color 0.2s;

font-weight: bold;

border: none; /* No border */

text-transform: lowercase; /* All UI text lowercase */

box-shadow: none; /* No shadow */

}

#recordButton:hover {

background-color: #ff3333;

}

#recordButton.recording {

background-color: #ffcc00; /* Yellow when recording */

color: #333;

border: none; /* No border */

}

#recordButton:disabled {

background-color: #999;

cursor: not-allowed;

border: none; /* No border */

}

/* Clear button next to record button */

#clearSelectedPadButton {

background-color: #333333; /* Darker button, like mode buttons */

color: #cccccc;

padding: 0.5rem 1rem;

border-radius: 0.125rem;

cursor: pointer;

transition: background-color 0.2s, color 0.2s;

font-weight: bold;

border: none; /* No border */

text-transform: lowercase; /* All UI text lowercase */

box-shadow: none; /* No shadow */

}

#clearSelectedPadButton:hover {

background-color: #4a4a4a;

color: #ffffff;

}

#clearSelectedPadButton:disabled {

background-color: #666;

cursor: not-allowed;

border: none; /* No border */

}