/* INTENSE, LEGIBLE COLOR SCHEME */
:root {
    --tr-bg: #111827; /* Dark Navy/Black */
    --tr-panel: #1D2E40; /* Dark Teal Panel */
    --tr-white: #FEFEFE; /* Near Bright White for text */
    
    /* Pad/Accent Colors (African/Caribbean Vibe: Red, Gold, Green) */
    --tr-accent-primary: #FF4D00; /* Kick - Bright Red-Orange (Mute) */
    --tr-accent-secondary: #00FF00; /* Snare/Clave - Neon/Citrus Green */
    --tr-accent-tertiary: #0096FF; /* Toms/Conga - Bright Sky Blue */
    --tr-accent-quaternary: #FFC300; /* Hats/Shakers/Tamb - Vibrant Gold/Yellow */
    --tr-accent-cymbal: #9D00FF; /* Crash/Ride - Deep Violet */
    --tr-accent-misc: #E0E0E0; /* Near White */
    /* New Cowbell/Unmute color from Tailwind pink-500 */
    --tr-accent-cowbell: #EC4899; 
    --tr-accent-solo: #10B981; /* Tailwind Emerald/Green for Solo */
}

body {
    font-family: 'Space Grotesk', sans-serif;
    background-color: #112429;
    color: var(--tr-white);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 8px;
    min-height: 100vh;
}




#app-container {
  border-radius: 14px;
  z-index: 0;
}

/* START animated border */
#app-container::before {
  content: "";
  position: absolute;
  inset: 0; /* cover the element fully */
  padding: 2px; /* this defines border width */
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    lime,
    cyan,
    blue,
    magenta,
    red
  );
  background-size: 300% 300%;
  animation: rainbowMove 40s linear infinite;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude; /* ensures the inside is cut out */
  z-index: -1;
}

@keyframes rainbowMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
/* END animated border */



.main-panel {
    background-color: var(--tr-bg);
    border: 2px solid #333;
    width: 100%; 
    max-width: 900px;
    padding-bottom: 24px; 
    position: relative; 
}

/* --- MODULAR SEQUENCER LAYOUT --- */

.instrument-module {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 0;
    display: flex; 
    align-items: flex-start;
}

/* Muting/Soloing state CSS for track title */
.module-title {
    width: 120px; /* Increased width to fit mute/solo/copy/paste buttons */
    flex-shrink: 0;
    padding: 0 8px;
    font-size: 0.8rem;
    line-height: 1.25;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column; /* Stack name and controls */
    align-items: flex-end;
    justify-content: flex-start;
    transition: color 0.1s;
}

[id^="mute-btn-"] {}

.module-title-text {
    font-weight: bold;
    letter-spacing: normal; 
    text-transform: capitalize; 
    text-align: right;
    line-height: 1; /* Keep track name tight */
    cursor: pointer;
    width: 100%;
    margin-bottom: 4px;
    display: flex; /* Allow icon and text to sit next to each other */
    justify-content: flex-end;
    align-items: center;
}

/* Muted Text Status */
.muted .module-title-text {
    color: rgba(255, 255, 255, 0.4) !important;
    /* ISSUE 3 FIX: Red Glow on Mute */
    text-shadow: 0 0 5px var(--tr-accent-primary); 
}

/* Soloed Text Status */
.soloed .module-title-text {
    /* ISSUE 2 FIX: Change Solo glow color to Green */
    color: var(--tr-accent-solo) !important; 
    text-shadow: 0 0 5px var(--tr-accent-solo);
}

/* Style for Mute/Solo/Copy/Paste buttons next to track name */
.track-controls {
    display: flex;
    gap: 2px;
    margin-top: 4px;
}
.track-control-btn {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    line-height: 1;
    border-radius: 4px;
    /* INITIAL BUTTON BG SET TO DARK GRAY (OFF STATE) */
    background-color: #333; 
    color: var(--tr-white);
    cursor: pointer;
    transition: background-color 0.1s;
    font-weight: bold;
}
.track-control-btn:hover {
    background-color: #555;
}
.track-control-btn[data-state="on"] {
    /* This state is controlled by JS when active */
    background-color: var(--tr-accent-cowbell);
    color: #111;
    box-shadow: 0 0 5px var(--tr-accent-cowbell);
}

/* Mobile Adjustment: Reduce track name size to give pads more space */
@media (max-width: 768px) {
    .module-title {
        width: 90px; /* Reduced width for mobile */
        font-size: 0.7rem;
    }
    .track-controls {
        gap: 1px;
        margin-top: 2px;
    }
    .track-control-btn {
        width: 15px;
        height: 15px;
        font-size: 0.5rem;
    }
}

/* Container for the pads and controls to occupy remaining space */
.module-content {
    flex-grow: 1;
}

/* Pad Grid for 16 Steps (Small for mobile) */
.pads-grid {
    display: grid;
    grid-template-columns: repeat(16, 1fr); 
    gap: 2px;
    padding: 0 4px;
}

.drum-pad {
    height: 18px; 
    width: 100%; 
    transition: background-color 0.1s, transform 0.05s;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #333;
    cursor: pointer;
    border-radius: 2px;
}

/* Add tick marks as strong borders on the 4th, 8th, and 12th pads */
.pads-grid .drum-pad:nth-child(4n) {
    border-right: 2px solid rgba(255, 255, 255, 0.2); 
}
/* Ensure the very last pad doesn't get a border */
.pads-grid .drum-pad:nth-child(16) {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}


/* Controls Row Below Pads */
.controls-row {
    display: flex;
    justify-content: space-around;
    padding: 8px 4px 0 4px; 
    gap: 8px;
}

.control-group {
    flex-grow: 1;
    flex-basis: 0; 
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.control-label {
    font-size: 0.6rem;
    color: #ccc;
    margin-bottom: 2px;
    line-height: 1;
}

/* Horizontal Sliders (Default appearance) */
.control-group input[type="range"] {
    width: 100%; 
    height: 5px;
    margin: 0;
    padding: 0;
    -webkit-appearance: none; 
    background: #555;
    border-radius: 2px;
}
.control-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: var(--tr-white);
    cursor: pointer;
}

/* Playback/Active state styles */
.active-step {
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8); /* Brighter glow */
    border-color: var(--tr-white) !important;
    background-color: rgba(255, 255, 255, 0.25);
}

/* UPDATED COLORS */
.kick.on, .kick2.on { background-color: var(--tr-accent-primary); } /* Both kicks use primary accent */
/* Snare, Rim, Claves, Conga use secondary accent (Green) */
.snare.on, .rim.on, .claves.on, .conga.on { background-color: var(--tr-accent-secondary); color: #000; }
.ltom.on, .mtom.on, .htom.on { background-color: var(--tr-accent-tertiary); }
.ch.on, .oh.on, .shaker.on, .tamb.on { background-color: var(--tr-accent-quaternary); }
/* Crash and Ride use the cymbal accent (Violet) */
.crash.on, .ride.on { background-color: var(--tr-accent-cymbal); } 
/* Cowbell uses the same color as the Unmute All button (Tailwind pink-500) */
.cowbell.on { background-color: var(--tr-accent-cowbell); color: #111; } 

/* Custom style for buttons */
.control-button {
    height: 40px; 
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.control-button[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}

.control-button span {
    line-height: 1.1; 
    text-align: center;
    text-transform: capitalize; 
}
/* Mobile specific style for tighter buttons */
@media (max-width: 640px) {
    .control-button span {
        white-space: pre-line; 
    }
}

.main-panel h1 {
    text-transform: none;
    letter-spacing: 0.05em;
}
/* New class for non-bold button text in the randomization row */
.non-bold-btn {
    font-weight: 500;
    font-size: 0.75rem; 
}

/* --- Global Button Group --- */
#master-button-row {
    display: flex;
    flex-wrap: nowrap; /* Default nowrap for desktop */
    justify-content: space-between;
    gap: 4px; /* Small gap between buttons */
}

/* Desktop: Ensure all 10 buttons fit evenly */
#master-button-row .control-button {
    flex-basis: calc(10% - 4px); /* Adjusted to fit 10 buttons */
    min-width: 0;
    font-size: 0.65rem; /* Shrink text for 10 buttons to fit */
}

/* Mobile: Ensure buttons wrap (3/3/4 layout) */
@media (max-width: 768px) {
    #master-button-row {
        flex-wrap: wrap; /* Allow wrapping */
        gap: 4px;
    }

    /* FIX 2: Mobile Button Layout (3/3/4) */
    #master-button-row .control-button {
        margin-bottom: 4px; /* Space between rows */
        font-size: 0.7rem; /* Restore slightly larger font */
    }

    /* First 6 buttons (rows 1 & 2): 3 per row */
    #master-button-row .control-button:nth-child(-n+6) {
        flex-basis: calc(33.333% - 4px);
    }

    /* Last 4 buttons (row 3): 4 per row */
    #master-button-row .control-button:nth-child(n+7) {
        flex-basis: calc(25% - 4px);
    }

    .text-sm {font-size: 0.7rem!important;} 

}