/* forms.css */

/* === GENERAL INPUT & SELECT STYLING === */
input[type="text"],
input[type="number"],
select {
    background-color: #111111;
    color: #cccccc;
    border: 1px solid #999999;
    padding: 4px 6px;
    font-size: var(--font-size-input-text);
    font-weight: normal;
    border-radius: 3px;
    box-sizing: border-box;
    width: 100%;
    margin-top: 0px;
    line-height: normal;
    height: calc(var(--font-size-input-text) + 10px + 2px);
}
select.compact-select { 
    height: calc(var(--font-size-input-text) + 10px + 0px); 
    padding: 3px 4px;
}


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

/* === CUSTOM CHECKBOX STYLING === */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #5f5f5f; /* Middle grey, like slider tracks */
    border: 1px solid #4a4a4a; /* Slightly darker border */
    border-radius: 3px;
    width: 16px;  /* Adjust size as needed */
    height: 16px; /* Adjust size as needed */
    cursor: pointer;
    position: relative;
    vertical-align: middle; /* Align with text */
    margin-right: 5px; /* Space to the right */
    outline: none;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}

input[type="checkbox"]:checked {
    background-color: #333333; /* Darker grey when checked */
    border-color: #222222;
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #bdbdbd; /* Bright grey checkmark */
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="checkbox"]:hover {
    border-color: #777777;
}

input[type="checkbox"]:focus-visible { /* For keyboard navigation */
    box-shadow: 0 0 0 2px #777777;
}


/* === UNIFIED BUTTON STYLING === */
button,
input[type="button"].play-stop,
input[type="button"].plusminus,
#lfo-rate-mode-toggle, 
.calc-action-button, 
.calc-form-submit-button,
#calculator-master-clear-button, 
#kb-octave-up, #kb-octave-down,
.seq-octave-btn, 
.osc-octave-btn,
.standard-button-inline
 {
    background-color: #555555; 
    color: #e0e0e0;       
    border: 1px solid #111111;
    
    border-radius: 5px; 
    padding: 2px 6px;   
    font-size: var(--font-size-button);
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    line-height: 1.4;
    min-height: 20px;
    transition: background-color 0.1s ease, color 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
    margin-top: 3px; 
    user-select: none;
    box-shadow: none; 
}

button:hover,
input[type="button"].play-stop:hover,
input[type="button"].plusminus:hover,
#lfo-rate-mode-toggle:hover,
.calc-action-button:hover,
.calc-form-submit-button:hover,
#calculator-master-clear-button:hover,
#kb-octave-up:hover, #kb-octave-down:hover,
.seq-octave-btn:hover,
.osc-octave-btn:hover,
.standard-button-inline:hover {
    background-color: #6c6c6c; 
    border-color: #585858;
}

button:active,
input[type="button"].play-stop:active,
input[type="button"].plusminus:active,
#lfo-rate-mode-toggle:active,
.calc-action-button:active,
.calc-form-submit-button:active,
#calculator-master-clear-button:active,
#kb-octave-up:active, #kb-octave-down:active,
.seq-octave-btn:active,
.osc-octave-btn:active,
.standard-button-inline:active {
    background-color: #7d7d7d; 
    transform: translateY(1px); 
}

/* Specific "ON" or "Active State" for Toggle Buttons */
#hold-button.active,
input[type="button"].play-stop.playing:not(#toggle):not(#toggleMetronome):not(#header-sequencer-play-stop):not(#header-metronome-toggle):not(#header-audio-player-toggle), 
#sequencer-play-stop.playing 
{
    background-color: #e0e0e0 !important; 
    color: #222222 !important;       
    border-color: #c0c0c0 !important; 
    box-shadow: inset 0 0 4px rgba(0,0,0,0.2); 
}

#toggle.playing, 
#toggleMetronome.playing, 
#header-metronome-toggle.playing,
#header-audio-player-toggle.playing,
#header-sequencer-play-stop.playing 
 {
    color: #222222 !important; 
    border-color: #c0c0c0 !important; 
    box-shadow: inset 0 0 4px rgba(0,0,0,0.2); 
}


#midi-learn-button.icon-button-learn { 
    color: #888 !important; 
}
#midi-learn-button.icon-button-learn:hover {
    background-color: #6c6c6c !important; 
    color: #aaa !important; 
}
#midi-learn-button.icon-button-learn.learning { 
    background-color: #555555 !important; 
    color: #DC143C !important; 
    border-color: #777 !important; 
    box-shadow: inset 0 0 3px rgba(220,20,60,0.5); 
}

#panic-button, 
#panic-button:hover,
#panic-button:active {
    background-color: #cc4444 !important;
    border-color: #aa3333 !important;
    color: white !important;
}
#panic-button:hover { background-color: #dd5555 !important; border-color: #bb4444 !important; }
#panic-button:active { background-color: #aa2222 !important; transform: translateY(1px); }


#lfo-rate-mode-toggle { padding: 2px 5px; font-size: 0.7em; font-weight: normal; }
.calc-action-button { 
    font-size: 0.7em; padding: 1px 5px;
    min-height: unset; height: 18px; line-height: 16px;
}
.calc-form-submit-button { 
    font-size: 0.9em; padding: 1px 5px;
    min-height: unset; height: calc(var(--font-size-input-text) + 10px + 2px);
    line-height: calc(var(--font-size-input-text) + 10px + 0px);
    width: auto; margin: 0 0 0 5px;
}
#calculator-master-clear-button.play-stop.heading-play-button, 
input[type="button"].play-stop.heading-play-button:not(#toggle):not(#toggleMetronome) { 
    padding: 1px 5px; font-size: 0.75em;
    min-height: unset; height: 18px; line-height: 16px; width: auto;
}

.seq-octave-btn,
.osc-octave-btn {
    padding: 0px 4px; 
    font-size: 0.9em;  
    line-height: 1;   
    min-width: 18px;   
    min-height: 18px;  
    margin: 0;        
    border-radius: 3px; 
}

/* === NEW STYLES FOR INLINE INPUT + ICON BUTTONS === */
.input-button-inline-group {
    display: flex;
    align-items: center; 
    gap: 5px; 
    width: 100%;
}
.input-button-inline-group .inline-input-field {
    flex-grow: 1; 
    height: calc(var(--font-size-button) + 10px + 2px); 
    font-size: var(--font-size-input-text); 
    margin-top: 0; 
}
.icon-button {
    font-size: 1.1em; 
    padding: 3px 6px; 
    min-width: 30px; 
    height: calc(var(--font-size-button) + 10px + 2px); 
    line-height: 1; 
    flex-shrink: 0; 
    margin-top: 0; 
}
.icon-button-save {
    color: #FF6347 !important; 
}
.icon-button-save:hover {
    background-color: #6c6c6c !important; 
}
.icon-button-load {
    color: #87CEEB !important; 
}
.icon-button-load:hover {
    background-color: #6c6c6c !important;
}

.standard-button-inline { 
    height: calc(var(--font-size-button) + 10px + 2px);
    line-height: 1; 
    margin-top: 0;
    padding: 4px 8px; 
}


/* === CONTROL GROUP STYLING === */
.control-group {
    width: 100%; box-sizing: border-box; margin-bottom: 8px;
}
label.control-group-label {
    display: block; font-size: var(--font-size-label); color: #bdbdbd;
    font-weight: normal; margin-bottom: 4px; white-space: nowrap;
    text-align: left; padding-left: 1px;
}
.control-group .value-display {
    font-size: var(--font-size-value-display); color: #aaa;
    min-height: 1em; text-align: right; margin-top: 1px;
}
.button-group-inline { display:flex; gap:5px; margin-top:4px; }
.button-group-inline button:not(.icon-button) { flex-grow: 1; } 


/* === FADER GROUP STYLING === */
.fader-group:not(#synth-master-volume-wrapper) {
    display: flex; align-items: center; gap: 6px; width: 100%;
}
.fader-group:not(#synth-master-volume-wrapper) label.control-group-label {
    flex-shrink: 0; margin-bottom: 0; text-align: left;
}
.fader-group:not(#synth-master-volume-wrapper) input[type="range"].standard-horizontal-fader {
    flex-grow: 1; width: auto;
}
.fader-group:not(#synth-master-volume-wrapper) .value-display {
    flex-shrink: 0; min-width: 3em; text-align: right;
}

/* === GENERAL SLIDER (input type="range") STYLING === */
input[type="range"]:not(.master-volume-overlay-fader){ -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer; outline:none; padding:0; margin:0; }
input[type="range"].standard-horizontal-fader, input[type="range"]:not(.vertical-slider):not(.lfo-mod-depth):not(.master-volume-overlay-fader) { height:20px; }
input[type="range"].standard-horizontal-fader::-webkit-slider-runnable-track, input[type="range"]:not(.vertical-slider):not(.lfo-mod-depth):not(.master-volume-overlay-fader)::-webkit-slider-runnable-track { width:100%; height:7px; background:#5f5f5f; border-radius:3px; }
input[type="range"].standard-horizontal-fader::-moz-range-track, input[type="range"]:not(.vertical-slider):not(.lfo-mod-depth):not(.master-volume-overlay-fader)::-moz-range-track { width:100%; height:7px; background:#5f5f5f; border-radius:3px; }
input[type="range"].standard-horizontal-fader::-webkit-slider-thumb, input[type="range"]:not(.vertical-slider):not(.lfo-mod-depth):not(.master-volume-overlay-fader)::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; margin-top:-6.5px; width:10px; height:20px; background:#bdbdbd; border-radius:3px; border:1px solid #333; }
input[type="range"].standard-horizontal-fader::-moz-range-thumb, input[type="range"]:not(.vertical-slider):not(.lfo-mod-depth):not(.master-volume-overlay-fader)::-moz-range-thumb { width:10px; height:20px; background:#bdbdbd; border-radius:3px; border:1px solid #333; }
input[type="range"].vertical-slider{ writing-mode: vertical-lr; -webkit-appearance: none; appearance: none; width: 20px; height: 100px; padding: 0; margin: 0 auto; background: transparent; }
input[type="range"].vertical-slider::-webkit-slider-runnable-track{ width: 7px; height: 100%; background: #5f5f5f; border-radius: 3px; }
input[type="range"].vertical-slider::-moz-range-track{ width: 7px; height: 100%; background: #5f5f5f; border-radius: 3px; border: none; }
input[type="range"].vertical-slider::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; height: 10px; width: 20px; background: #bdbdbd; border-radius: 3px; border: 1px solid #333; cursor: ns-resize; margin-left: -6.5px; }
input[type="range"].vertical-slider::-moz-range-thumb{ height: 10px; width: 20px; background: #bdbdbd; border-radius: 3px; border: 1px solid #333; cursor: ns-resize; }


/* === COMPACT INPUT ROW STYLING === */
.input-row-compact,
.compact-osc-controls { 
    display: flex; flex-wrap: nowrap; align-items: flex-end; 
    gap: 8px; margin-bottom: 8px; width: 100%;
}
.input-row-compact .inline-control-item,
.compact-osc-controls .inline-control-item { 
    display: flex; flex-direction: column; 
}
.inline-control-item input.compact-input,
.inline-control-item input.tuning-input,
.inline-control-item input.tempoInput,
.inline-control-item select.compact-select {
    width: 100%; box-sizing: border-box; margin-right: 0;
}

/* MIDI Learn Visuals */
.midi-learn-active .mappable-control:hover { outline: 2px solid #ffd700; cursor: crosshair; box-shadow: 0 0 6px #ffd700b0; }
.mappable-control.midi-learn-waiting { outline: 3px dashed #ff8c00 !important; box-shadow: 0 0 10px #ff8c00b0 !important; }
.mappable-control.midi-mapped { border-left: 3px solid #4CAF50 !important; }

/* Responsive adjustments for compact input rows */
@media (max-width: 600px) {
    .input-row-compact,
    .compact-osc-controls,
    .input-button-inline-group 
     { 
        flex-direction: column; align-items: stretch; gap: 5px; 
    }
    .input-row-compact .inline-control-item,
    .compact-osc-controls .inline-control-item,
    .input-button-inline-group .inline-input-field, 
    .input-button-inline-group .icon-button, 
    .input-button-inline-group .standard-button-inline 
     { 
        width: 100%; min-width: unset !important; flex-grow: 0; flex-basis: auto; 
    }
    .inline-control-item input.compact-input,
    .inline-control-item input.tuning-input,
    .inline-control-item input.tempoInput,
    .inline-control-item select.compact-select { 
        min-width: unset !important; width: 100% !important; 
    }
}