/* forms.css */

/* === GENERAL INPUT & SELECT STYLING === */
#icosmo-matrix-synth-container input[type="text"],
#icosmo-matrix-synth-container input[type="number"],
#icosmo-matrix-synth-container 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);
}
#icosmo-matrix-synth-container select.compact-select {
    height: calc(var(--font-size-input-text) + 10px + 0px);
    padding: 3px 4px;
}


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

/* === CUSTOM CHECKBOX STYLING === */
#icosmo-matrix-synth-container 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;
}

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

#icosmo-matrix-synth-container 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);
}

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

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


/* === UNIFIED BUTTON STYLING === */
#icosmo-matrix-synth-container button,
#icosmo-matrix-synth-container input[type="button"].play-stop,
#icosmo-matrix-synth-container input[type="button"].plusminus,
#icosmo-matrix-synth-container #lfo-rate-mode-toggle,
#icosmo-matrix-synth-container .calc-action-button,
#icosmo-matrix-synth-container .calc-form-submit-button,
#icosmo-matrix-synth-container #calculator-master-clear-button,
#icosmo-matrix-synth-container #kb-octave-up, #icosmo-matrix-synth-container #kb-octave-down,
#icosmo-matrix-synth-container .seq-octave-btn,
#icosmo-matrix-synth-container .osc-octave-btn,
#icosmo-matrix-synth-container .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;
}

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

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

/* Specific "ON" or "Active State" for Toggle Buttons */
#icosmo-matrix-synth-container #hold-button.active {
    background-color: #e0e0e0;
    color: #222222;
    border-color: #c0c0c0  !important;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
}

/* This rule is for buttons that should have their text color changed when active, but NOT their background color (which is set by JS) */
#icosmo-matrix-synth-container .play-stop.playing {
    color: #222222;
    border-color: #c0c0c0;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
}


#icosmo-matrix-synth-container #midi-learn-button.icon-button-learn {
    color: #888 !important;
}
#icosmo-matrix-synth-container #midi-learn-button.icon-button-learn:hover {
    background-color: #6c6c6c !important;
    color: #aaa !important;
}
#icosmo-matrix-synth-container #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);
}

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


#icosmo-matrix-synth-container #lfo-rate-mode-toggle { padding: 2px 5px; font-size: 0.7em; font-weight: normal; }
#icosmo-matrix-synth-container .calc-action-button {
    font-size: 0.7em; padding: 1px 5px;
    min-height: unset; height: 18px; line-height: 16px;
}
#icosmo-matrix-synth-container .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;
}
#icosmo-matrix-synth-container #calculator-master-clear-button.play-stop.heading-play-button,
#icosmo-matrix-synth-container 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;
}

#icosmo-matrix-synth-container .seq-octave-btn,
#icosmo-matrix-synth-container .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 === */
#icosmo-matrix-synth-container .input-button-inline-group {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
}
#icosmo-matrix-synth-container .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;
}
#icosmo-matrix-synth-container .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;
}
#icosmo-matrix-synth-container .icon-button-save {
    color: #FF6347 !important;
}
#icosmo-matrix-synth-container .icon-button-save:hover {
    background-color: #6c6c6c !important;
}
#icosmo-matrix-synth-container .icon-button-load {
    color: #87CEEB !important;
}
#icosmo-matrix-synth-container .icon-button-load:hover {
    background-color: #6c6c6c !important;
}

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


/* === CONTROL GROUP STYLING === */
#icosmo-matrix-synth-container .control-group {
    width: 100%; box-sizing: border-box; margin-bottom: 8px;
}
#icosmo-matrix-synth-container 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;
}
#icosmo-matrix-synth-container .control-group .value-display {
    font-size: var(--font-size-value-display); color: #aaa;
    min-height: 1em; text-align: right; margin-top: 1px;
}
#icosmo-matrix-synth-container .button-group-inline { display:flex; gap:5px; margin-top:4px; }
#icosmo-matrix-synth-container .button-group-inline button:not(.icon-button) { flex-grow: 1; }


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

/* === GENERAL SLIDER (input type="range") STYLING === */
#icosmo-matrix-synth-container input[type="range"]:not(.master-volume-overlay-fader){ -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer; outline:none; padding:0; margin:0; }
#icosmo-matrix-synth-container input[type="range"].standard-horizontal-fader, #icosmo-matrix-synth-container input[type="range"]:not(.vertical-slider):not(.lfo-mod-depth):not(.master-volume-overlay-fader) { height:20px; }
#icosmo-matrix-synth-container input[type="range"].standard-horizontal-fader::-webkit-slider-runnable-track, #icosmo-matrix-synth-container 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; }
#icosmo-matrix-synth-container input[type="range"].standard-horizontal-fader::-moz-range-track, #icosmo-matrix-synth-container 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; }
#icosmo-matrix-synth-container input[type="range"].standard-horizontal-fader::-webkit-slider-thumb, #icosmo-matrix-synth-container 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; }
#icosmo-matrix-synth-container input[type="range"].standard-horizontal-fader::-moz-range-thumb, #icosmo-matrix-synth-container 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; }
#icosmo-matrix-synth-container 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; }
#icosmo-matrix-synth-container input[type="range"].vertical-slider::-webkit-slider-runnable-track{ width: 7px; height: 100%; background: #5f5f5f; border-radius: 3px; }
#icosmo-matrix-synth-container input[type="range"].vertical-slider::-moz-range-track{ width: 7px; height: 100%; background: #5f5f5f; border-radius: 3px; border: none; }
#icosmo-matrix-synth-container 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; }
#icosmo-matrix-synth-container 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 === */
#icosmo-matrix-synth-container .input-row-compact,
#icosmo-matrix-synth-container .compact-osc-controls {
    display: flex; flex-wrap: nowrap; align-items: flex-end;
    gap: 8px; margin-bottom: 8px; width: 100%;
}
#icosmo-matrix-synth-container .input-row-compact .inline-control-item,
#icosmo-matrix-synth-container .compact-osc-controls .inline-control-item {
    display: flex; flex-direction: column;
}
#icosmo-matrix-synth-container .inline-control-item input.compact-input,
#icosmo-matrix-synth-container .inline-control-item input.tuning-input,
#icosmo-matrix-synth-container .inline-control-item input.tempoInput,
#icosmo-matrix-synth-container .inline-control-item select.compact-select {
    width: 100%; box-sizing: border-box; margin-right: 0;
}

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

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