/* Microsoft MIDI Play - Windows 98 Style CSS */

/* Pulse animation for playing step */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

body {
    margin: 0;
    padding: 0;
    background-color: #d4d0c8;
    font-family: 'PixelatedMsSansSerif', 'MS Sans Serif', sans-serif;
    font-size: 11px;
    /* overflow: hidden; */
}

.midi-play-container {
    padding: 8px 8px 0 8px; /* No bottom padding since status bar is external */
    height: 100vh; /* Restore full viewport height for iframe */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Top Controls */
.top-controls {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.left-controls {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.control-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.control-row label {
    min-width: 50px;
}

/* Custom Dropdown Components - Full control over styling */
.custom-dropdown {
    position: relative;
    display: inline-block;
    height: 21px;
    min-width: 50px;
    font-family: 'PixelatedMsSansSerif', sans-serif;
    font-size: 11px;
    cursor: pointer;
}

.dropdown-display {
    width: 100%;
    height: 21px;
    padding: 3px 18px 3px 4px;
    box-sizing: border-box;
    background-color: #ffffff;
    border: none;
    box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
    color: #000000;
    line-height: 15px;
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.dropdown-arrow {
    position: absolute;
    top: 0;
    right: 2px;
    width: 16px;
    height: 21px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 17'%3E%3Cpath fill='%23dfdfdf' fill-rule='evenodd' d='M15,0H0v16h1V1h14V0Z'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M2,1h-1v14h1V2h12v-1H2Z'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M16,17H0v-1h15V0h1v17Z'/%3E%3Cpath fill='gray' fill-rule='evenodd' d='M15,1h-1v14H1v1h14V1Z'/%3E%3Crect fill='%23d4d0c8' x='2' y='2' width='12' height='13'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M11,6h-7v1h1v1h1v1h1v1h1v-1h1v-1h1v-1h1v-1Z'/%3E%3C/svg%3E");
    background-size: 16px 21px;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

.custom-dropdown:active .dropdown-arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 17'%3E%3Cpath fill='gray' fill-rule='evenodd' d='M0,0h16v17H0V0ZM1,16h14V1H1v15Z'/%3E%3Crect fill='%23d4d0c8' x='1' y='1' width='14' height='15'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12,7h-7v1h1v1h1v1h1v1h1v-1h1v-1h1v-1h1v-1Z'/%3E%3C/svg%3E");
}

.dropdown-list {
    position: absolute;
    top: 21px;
    left: 0;
    right: 0;
    background-color: #ffffff;
    border: 1px solid #000000;
    max-height: 150px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.dropdown-option {
    padding: 2px 4px;
    background-color: #ffffff;
    color: #000000;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-option:hover {
    background-color: #000080 !important; /* Proper Windows 98 blue */
    color: #ffffff !important;
}

.dropdown-option.selected {
    background-color: #000080;
    color: #ffffff;
}

.custom-dropdown.wide {
    min-width: 120px;
}

.custom-dropdown.pitch-select {
    width: 60px;
}


.midi-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    box-sizing: border-box;
    border: none;
    box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
    background-color: #ffffff;
    border-radius: 0;
    height: 21px;
    padding: 3px 4px;
    padding-right: 18px; /* Space for dropdown button */
    
    /* Proper Windows 98 dropdown arrow - keep button grey */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 17'%3E%3Cpath fill='%23dfdfdf' fill-rule='evenodd' d='M15,0H0v16h1V1h14V0Z'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M2,1h-1v14h1V2h12v-1H2Z'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M16,17H0v-1h15V0h1v17Z'/%3E%3Cpath fill='gray' fill-rule='evenodd' d='M15,1h-1v14H1v1h14V1Z'/%3E%3Crect fill='%23d4d0c8' x='2' y='2' width='12' height='13'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M11,6h-7v1h1v1h1v1h1v1h1v-1h1v-1h1v-1h1v-1Z'/%3E%3C/svg%3E");
    background-position: right 2px top 0px;
    background-repeat: no-repeat;
    background-size: 16px 21px;
    background-clip: border-box;
    
    font-family: 'PixelatedMsSansSerif', sans-serif;
    font-size: 11px;
    color: #000000;
}

.midi-select:focus {
    outline: none;
    color: #000000;
    background-color: #ffffff;
}

.midi-select:active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 17'%3E%3Cpath fill='gray' fill-rule='evenodd' d='M0,0h16v17H0V0ZM1,16h14V1H1v15Z'/%3E%3Crect fill='%23d4d0c8' x='1' y='1' width='14' height='15'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12,7h-7v1h1v1h1v1h1v1h1v-1h1v-1h1v-1h1v-1Z'/%3E%3C/svg%3E");
}

/* Fix dropdown option list to be white instead of blue */
.midi-select option {
    background-color: #ffffff;
    color: #000000;
}

.midi-select option:hover {
    background-color: #000080 !important; /* Proper Windows 98 blue */
    color: #ffffff !important;
}

.midi-select option:checked {
    background-color: #000080 !important; /* Proper Windows 98 blue */
    color: #ffffff !important;
}

.midi-select.wide {
    min-width: 120px;
}

/* Windows 98 Button Styles - Local copy for iframe use */
.win98-button {
    min-width: 75px;
    height: 23px;
    border: none;
    background-color: #d4d0c8;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
    font-family: 'PixelatedMsSansSerif', 'MS Sans Serif', sans-serif;
    font-size: 11px;
    color: #222222;
    cursor: pointer;
    padding: 0 12px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.win98-button:active {
    box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
	background-color: #808080;
	
}

.win98-button:focus {
    outline: 1px dotted #000000;
    outline-offset: -4px;
}

.win98-button-square {
    width: 24px;
    height: 24px;
    border: none;
    background-color: #d4d0c8;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
    font-size: 0;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.win98-button-square:active {
    box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
	background-color: #808080;
}

.win98-button-square:focus {
    outline: 1px dotted #000000;
    outline-offset: -2px;
}

/* BPM Display */
.right-controls {
    display: flex;
    align-items: center;
}

.bpm-display {
    text-align: center;
}

.bpm-digits {
    width: 60px;
    height: 30px;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px inset #808080;
    margin-bottom: 2px;
    font-size: 0; /* Hide any text content */
    line-height: 0; /* Ensure no line height for text */
    overflow: hidden; /* Hide any overflow text */
}

/* Only apply text styling if no images are present (fallback) */
.bpm-digits:empty {
    color: #ff0000;
    font-family: 'Digital', monospace;
    font-size: 24px;
}

/* Fieldsets */
fieldset {
    border: 1px solid #808080;
    box-shadow: inset 1px 1px 0 #ffffff;
    margin: 0 0 8px 0;
    padding: 8px;
}

legend {
    padding: 0 4px;
    background-color: #d4d0c8;
}

/* Sequencer */
.sequencer-fieldset {
    flex-shrink: 0; /* Keep original fixed sizing */
}

.sequencer-grid {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 2px;
    padding: 8px;
    background-color: #c0c0c0;
  box-shadow: inset 1px 1px 0 #404040, /* Darkest shadow (top-left) */
              inset 2px 2px 0 #808080, /* Medium shadow (top-left, offset) */
              inset -1px -1px 0 #ffffff, /* Brightest highlight (bottom-right) */
              inset -2px -2px 0 #dfdfdf; /* Medium highlight (bottom-right, offset) */
    margin-bottom: 8px;
}

/* Step buttons use .step-button for spacing, but inherit .win98-button-square for styling */
.step-button {
    width: 18px;
    height: 18px;
}

.step-button.active {
    background-color: #808080;
}

.step-button.playing {
    /* Pressed-in state for current playing step - more dramatic visual feedback */
    box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
    background-color: #c0c0c0 !important; /* Lighter color to stand out more */
    border: 1px solid #000000; /* Black border for normal playback */
    animation: pulse 0.1s ease-in-out;
}

.step-button.recording {
    /* Recording state - red border for armed/recording steps */
    border: 2px solid #ff0000 !important; /* Red border for recording mode */
}

.step-button.recording.playing {
    /* Recording + playing state - red border with pressed-in appearance */
    border: 2px solid #ff0000 !important;
    box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
    background-color: #c0c0c0 !important;
    animation: pulse 0.1s ease-in-out;
}

.step-button.selected {
    outline: 2px solid #0054e3;
    outline-offset: -2px;
}

.step-button:nth-child(4n) {
    margin-right: 6px;
}

.sequencer-controls {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
}

.step-control {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sequencer-controls .bpm-field {
    display: flex;
    align-items: center;
    gap: 4px;
}


.spinner-container {
    display: inline-flex;
    align-items: center;
    height: 20px;
    position: relative;
    width: 40px;
}

.step-input {
    width: 100%;
    height: 18px;
    text-align: center;
    border: 1px solid;
    border-color: #808080 #dfdfdf #dfdfdf #808080;
    background-color: white;
    font-family: 'PixelatedMsSansSerif', sans-serif;
    font-size: 11px;
    padding: 0 18px 0 3px;
    outline: none;
    box-sizing: border-box;
    margin: 0;
    line-height: 1;
}

/* Hide browser default spinners */
.step-input::-webkit-inner-spin-button, 
.step-input::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    margin: 0;
}

.step-input[type="number"] {
    -moz-appearance: textfield;
}

.spinner-buttons {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 2px;
    right: 1px;
    bottom: 1px;
    width: 15px;
    height: 16px;
    margin: 0;
    padding: 0;
}

.spinner-button {
    width: 15px;
    height: 8px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    display: block;
}

.spinner-up {
    background-image: url('/assets/svg/controls/spinner-up.svg');
}

.spinner-down {
    background-image: url('/assets/svg/controls/spinner-down.svg');
}

.spinner-up:active {
    background-image: url('/assets/svg/controls/spinner-up-active.svg');
}

.spinner-down:active {
    background-image: url('/assets/svg/controls/spinner-down-active.svg');
}

/* Windows 98 Checkboxes - Using InternetExplorerErrorApp pattern */
.checkbox-group {
    display: flex;
    gap: 16px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.checkbox-label.disabled {
    color: #808080;
    cursor: default;
}

.checkbox-label input[type="checkbox"] {
    width: 13px;
    height: 13px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background-color: white;
    box-shadow: inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 9px;
    height: 9px;
    background-image: url('/assets/svg/controls/checkmark.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 7px 7px;
}

.checkbox-label input[type="checkbox"]:disabled {
    background-color: #d4d0c8;
    box-shadow: inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}

.checkbox-label input[type="checkbox"]:disabled:checked::after {
    background-image: url('/assets/svg/controls/checkmark-disabled.svg');
}

/* Patch Editor */
.patch-editor-fieldset {
    flex-shrink: 0;
}

.patch-editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 120px;
    gap: 16px;
}

.patch-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.patch-column-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.slider-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.slider-group.horizontal {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Windows 98 Sliders using proper SVG thumb */
.volume-slider {
    width: 80px;
    height: 21px;
    position: relative;
    cursor: pointer;
}

.volume-track {
    position: absolute;
    top: 50%;
    transform: translateY(-3px);
    width: 100%;
    height: 1px;
    background-color: #808080;
    border-top: 1px solid #404040;
    border-left: 1px solid #404040;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    box-sizing: content-box;
}

.volume-track::before {
    content: '';
    position: absolute;
    top: -9px;
    left: 0;
    right: 0;
    height: 21px;
}

.slider-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 11px;
    height: 21px;
    background-image: url('/assets/svg/controls/indicator-rectangle-horizontal.svg');
    background-size: 100% 100%;
    pointer-events: none;
}

.slider-value {
    min-width: 20px;
    text-align: right;
}

/* Enhanced Slider Dragging States */
.volume-slider.dragging {
    cursor: ew-resize;
}

.volume-slider.dragging .slider-thumb {
    cursor: ew-resize;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.volume-slider .slider-thumb {
    transition: box-shadow 0.1s ease;
}

.volume-slider .slider-thumb:hover {
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

/* Pitch and Velocity */
.pitch-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pitch-select {
    width: 60px;
}

.velocity-group {
    padding: 8px 4px;
}

/* Windows 98 Radio Buttons */
.radio-label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    cursor: pointer;
}

.radio-label input[type="radio"] {
    width: 12px;
    height: 12px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background-image: url('/assets/svg/controls/radio-border.svg');
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    position: relative;
}

.radio-label input[type="radio"]:checked {
    background-image: url('/assets/svg/controls/radio-border.svg');
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.radio-label input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    background-image: url('/assets/svg/controls/radio-dot.svg');
    background-size: 4px 4px;
    background-repeat: no-repeat;
    background-position: center;
}

.radio-label input[type="radio"]:disabled {
    background-image: url('/assets/svg/controls/radio-border-disabled.svg');
}

.radio-label input[type="radio"]:disabled:checked::after {
    background-image: url('/assets/svg/controls/radio-dot-disabled.svg');
}

/* General Section */
.general-fieldset {
    flex-shrink: 0;
}

.general-content {
    display: flex;
    justify-content: space-between;
}

.general-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.general-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Logo and Transport Controls */
.logo-transport-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding: 8px 0;
}

.gm-logo-main {
    width: 48px;
    height: 34px;
    flex-shrink: 0;
}

.transport-controls {
    display: flex;
    gap: 4px;
}

/* Status Bar - Hidden since we use enhanced status bar in parent */
.status-bar {
    display: none !important; /* Hide internal status bar completely */
}

.status-text {
    display: none !important; /* Hide internal status text */
}

/* Transport button icons using proper SVG graphics from MediaPlayer */
#playBtn {
    background-image: url('/assets/img/ui/transport/play.svg');
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
}

#pauseBtn {
    background-image: url('/assets/img/ui/transport/pause.svg');
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
}

#stopBtn {
    background-image: url('/assets/img/ui/transport/stop.svg');
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
}

#recordBtn {
    background-image: url('/assets/svg/controls/record.svg');
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
    filter: grayscale(100%); /* Greyscale when not recording */
}

#recordBtn.recording {
    filter: grayscale(0%); /* Full color when recording */
    box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
    background-color: #808080; /* Pressed-in appearance when recording */
}

.loop-controls {
    display: flex;
    align-items: center;
    gap: 8px; 
    /* Moved to transport section in HTML */
}

/* Status Bar */
.status-text {
    flex: 1;
    padding-left: 4px;
}

.bpm-field {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
}

/* BPM Spinner (smaller version for status bar) */
.bpm-spinner-container {
    display: inline-flex;
    align-items: center;
    height: 20px;
    position: relative;
    width: 50px;
}

.bpm-input {
    width: 100%;
    height: 18px;
    text-align: center;
    border: 1px solid;
    border-color: #808080 #dfdfdf #dfdfdf #808080;
    background-color: white;
    font-family: 'PixelatedMsSansSerif', sans-serif;
    font-size: 11px;
    padding: 0 18px 0 3px;
    outline: none;
    box-sizing: border-box;
    margin: 0;
    line-height: 1;
}

/* Hide browser default spinners for BPM input */
.bpm-input::-webkit-inner-spin-button, 
.bpm-input::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    margin: 0;
}

.bpm-input[type="number"] {
    -moz-appearance: textfield;
}

.bpm-spinner-buttons {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 4px;
    right: 1px;
    bottom: 1px;
    width: 15px;
    height: 16px;
    margin: 0;
    padding: 0;
}

.bpm-spinner-button {
    width: 15px;
    height: 8px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    display: block;
}

.bpm-spinner-up {
    background-image: url('/assets/svg/controls/spinner-up.svg');
}

.bpm-spinner-down {
    background-image: url('/assets/svg/controls/spinner-down.svg');
}

.bpm-spinner-up:active {
    background-image: url('/assets/svg/controls/spinner-up-active.svg');
}

.bpm-spinner-down:active {
    background-image: url('/assets/svg/controls/spinner-down-active.svg');
}

.gm-logo {
    height: 16px;
    width: auto;
}