/* keyboard.css */

/* === KEYBOARD AREA STYLING (within #keyboard-area-module-placeholder) === */

#keyboard-area-module-placeholder #keyboard-area-header {
    margin-bottom: 8px; /* Space between octave controls and keyboard */
    display: flex; /* Added to center the controls inside */
    justify-content: center; /* Center the .keyboard-controls div */
}

#keyboard-area-module-placeholder .keyboard-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center; /* Center buttons and octave display text */
}

#keyboard-area-module-placeholder .keyboard-controls button {
    /* General button styles are in forms.css */
    /* Specific overrides if needed: */
    padding: 5px 8px; /* Standard padding for these buttons */
    font-size: var(--font-size-button);
}

#keyboard-area-module-placeholder #kb-current-octave { /* Octave display text */
    padding: 0 10px; /* Space around the text */
    font-weight: bold;
    color: #f0f0f0;
    font-size: var(--font-size-input-text); /* Match other input text for consistency */
    min-width: 6em; /* Ensure enough space for "C3 - B6" like text */
    text-align: center;
}

#keyboard-area-module-placeholder #keyboard { /* The main keyboard container */
    width: 100%;
    height: 150px; /* Default height, can be adjusted */
    background-color: #181818; /* Dark background for the keyboard */
    border: 1px solid #101010; /* Darker border */
    border-radius: 6px;
    overflow: hidden; /* Clip keys if they somehow exceed bounds */
    box-sizing: border-box;
    display: flex; /* Arrange white keys horizontally */
    position: relative; /* For absolute positioning of black keys */
    padding: 0; /* No internal padding for the main keyboard div */
}

/* === INDIVIDUAL KEY STYLING === */
.key {
    box-sizing: border-box;
    border: 1px solid #000000; /* Black border for all keys */
    border-bottom-width: 3px; /* Thicker bottom border for 3D effect */
    border-radius: 0 0 5px 5px; /* Rounded bottom corners */
    cursor: pointer;
    display: flex; /* For aligning potential key text/icons (not used now) */
    align-items: flex-end;
    justify-content: center;
    user-select: none; /* Prevent text selection on keys */
    transition: background-color 0.05s ease-out, transform 0.05s ease-out, box-shadow 0.05s ease-out;
    /* Note: Color transition might be overridden by JS direct style set */
}

.key.white {
    flex-grow: 1; /* White keys share available space */
    flex-basis: 0; /* Start from 0 basis for equal distribution */
    height: 100%;
    background-color: #f0f0f0; /* Default white key color */
    margin-right: 1px; /* Tiny gap between white keys */
    position: relative; /* Ensure white keys are in the normal flow for black key positioning */
    z-index: 1; /* White keys are below black keys */
}
.key.white:last-child {
    margin-right: 0; /* No margin for the last white key */
}

.key.black {
    position: absolute; /* Positioned relative to the #keyboard container */
    height: 60%; /* Black keys are shorter */
    background-color: #222222; /* Default black key color */
    z-index: 2; /* Black keys are above white keys */
    /* Borders defined by .key, but can be overridden if needed */
    border-left: 1px solid #111;  /* Slightly different side borders */
    border-right: 1px solid #111;
    border-bottom: 2px solid #000; /* Slightly thinner bottom border for black keys */
    box-shadow: -1px 0 2px rgba(255,255,255,0.1) inset, /* Subtle inset highlight */
                0px 2px 3px rgba(0,0,0,0.5);       /* Subtle drop shadow */
    /* Width and left position are set by JavaScript */
}

.key.pressed { /* Visual feedback when a key is pressed */
    transform: translateY(1px) scale(0.98); /* Slight move and shrink effect */
    box-shadow: inset 0px 1px 4px rgba(0,0,0,0.6); /* Darker inset shadow */
    /* background-color will be dynamically darkened by JS */
}