/* Mini MIDI Sequencer Styles */

/* Bootstrap Icons */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");

/* Container styles */
.sequencer-container {
    overflow-x: auto;
}

/* Sequencer grid layout */
#sequencer {
    display: grid;
    grid-template-columns: auto; /* For channel labels */
    gap: 0.5rem;
    padding: 1rem;
}

/* Channel row styling */
.channel-row {
    display: contents; /* Allows direct grid layout of children */
}

/* Channel label styling */
.channel-label {
    padding: 0.6rem;
    font-weight: bold;
    text-align: right;
    background-color: var(--bs-dark);
    border-radius: 4px 0 0 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 80px;
}

/* Pattern selector container styling */
.pattern-selector-container {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    background-color: var(--bs-dark);
    border-radius: 0 4px 4px 0;
    padding-left: 0.6rem;
}

/* Sequencer step styling */
.step {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--bs-secondary);
    background-color: var(--bs-dark);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s ease;
}

/* Beat marker styling for different step sizes */
.step.beat-marker {
    border-bottom: 3px solid var(--bs-primary);
    opacity: 0.8;
}

.step.beat-marker::after {
    content: "";
    position: absolute;
    bottom: 2px;
    width: 4px;
    height: 4px;
    background-color: var(--bs-primary);
    border-radius: 50%;
    opacity: 0.7;
}

/* Active step styling */
.step.active {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

/* Current playing step highlight */
.step.current {
    box-shadow: 0 0 0 2px var(--bs-primary);
}

/* Channel colors */
.channel-0 .step.active {
    background-color: var(--bs-danger); /* Kick */
}

.channel-1 .step.active {
    background-color: var(--bs-warning); /* Snare */
}

.channel-2 .step.active {
    background-color: var(--bs-info); /* Hi-Hat */
}

.channel-3 .step.active {
    background-color: var(--bs-cyan); /* Crash */
}

/* Media queries for responsive design */
@media (max-width: 768px) {
    .step {
        width: 1.8rem;
        height: 1.8rem;
    }
    
    .channel-label {
        min-width: 60px;
        font-size: 0.9rem;
    }
    
    .pattern-selector-container select {
        font-size: 0.9rem;
    }
}