/* Add Ableton Sans font faces with correct filenames */
@font-face {
    font-family: 'Ableton Sans';
    src: url('/static/fonts/ableton-sans-regular.2667c981.woff2') format('woff2'),
         url('/static/fonts/ableton-sans-regular.96781b02.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ableton Sans';
    src: url('/static/fonts/ableton-sans-regular-italic.57c63ecd.woff2') format('woff2'),
         url('/static/fonts/ableton-sans-regular-italic.3396038c.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Ableton Sans';
    src: url('/static/fonts/ableton-sans-medium.0cbbf7a5.woff2') format('woff2'),
         url('/static/fonts/ableton-sans-medium.1dc02bda.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ableton Sans';
    src: url('/static/fonts/ableton-sans-medium-italic.0b876bb7.woff2') format('woff2'),
         url('/static/fonts/ableton-sans-medium-italic.2f6b17c5.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Ableton Sans';
    src: url('/static/fonts/ableton-sans-bold.3852fc5e.woff2') format('woff2'),
         url('/static/fonts/ableton-sans-bold.72207915.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Ableton Sans';
    src: url('/static/fonts/ableton-sans-bold-italic.472dc9f8.woff2') format('woff2'),
         url('/static/fonts/ableton-sans-bold-italic.e6c549c2.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

/* Base styles */
body {
    font-family: 'Ableton Sans', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f8f8;
    color: #262626;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.text-lg {
    font-size: 1.125rem;
}

@media (min-width: 768px) {
  .md\:text-xl {
    font-size: 2.375rem;
    line-height: 3.125rem;
    letter-spacing: normal;
  }
}

.font-medium {
    font-weight: 500;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.first\:mt-0:first-child {
    margin-top: 0;
}

.mt-0 {
    margin-top: 0;
}

h1, h2, h3, h4 {
    font-family: 'Ableton Sans', Arial, sans-serif;
    font-weight: 500;
    color: #262626;
    margin-top: 0;
}

#header, #footer {
    margin-left: 10px;
}

footer {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.375rem;
    font-weight: 500;
    color: #262626;
    line-height: 3.125rem;
    margin: 1.5rem 0;
    padding-bottom: 0.5rem;
    padding-left: 0.4rem;
    border-bottom: none;
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

/* Header/Navigation */
.tab {
    display: flex;
    background-color: transparent;
    overflow: visible;
}

.tab button,
.tab a {
    background: transparent;
    border: none;
    padding: 0.75rem 1.25rem;
    color: #262626;
    font-size: 1rem;
    font-weight: 400;
    margin-right: 0.25rem;
    transition: color 0.2s;
    text-decoration: none;
}

.tab button:hover,
.tab a:hover {
    color: #262626;
    background-color: transparent;
}

.tab button.active,
.tab a.active {
    color: #ff764d;
    background-color: transparent;
    border-bottom: none;
    border-radius: 0;
}
.tab a.right {
    margin-left: auto;
}

/* Main content area */
.tabcontent {
    background-color: white;
    border-radius: 4px;
    border: none;
    margin: 0;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Form elements */
input[type="text"],
input[type="number"],
input[type="file"],
select {
    /* display: block; */
    /* width: 100%; */
    max-width: 400px;
    padding: 0.625rem;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.875rem;
    background-color: white;
    /* font-family: 'Ableton Sans', Arial, sans-serif; */
}

input + small {
	margin-left: 0.25rem;
}

label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #444;
}

.slice-even-group label, .slice-transient-group label {   
    display: inline;
    margin-bottom: 0;
    font-weight: 500;
    color: #444;
}

button,
input[type="submit"] {
    background-color: #0000ff;
    color: white;
    border: none;
    border-radius: 0px;
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    font-family: 'Ableton Sans', Arial, sans-serif;
}

.drum-grid button {
    margin-left: 0.5rem;
}

button:hover, 
input[type="submit"]:hover {
    background-color: #0000cc;
}

button:disabled,
input[type="submit"]:disabled {
    background-color: #ccc;
    color: #666;
    cursor: default;
}

.color-dropdown {
	margin-bottom: 1rem;
}

/* Card styling for grid layouts */
.drum-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.5rem 0;
}

.drum-grid-row {
    display: flex;
    gap: 1rem;
}

.drum-grid-row .drum-cell {
    flex: 1 1 0;
    min-width: 0;
}

.drum-cell {
    background-color: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s;
}

.sample-name {
    overflow-wrap: break-word;
    word-break: break-all;
}

.drum-cell:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.pad-number {
    font-weight: 600;
    color: #555;
}

/* Waveform styling */
.waveform-container {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 0.5rem 0;
    padding: 0.5rem;
    min-height: 64px;
    cursor: pointer;
}

body.page-melodic-sampler .waveform-container {
    position: sticky;
    top: 0;
    z-index: 10;
}

#waveform {
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f5f5f5;
    margin-bottom: 1rem;
}

/* Success/Error messages */
.success {
    color: #00a550;
    padding: 0.75rem;
    background-color: #e6f7ef;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.error {
    color: #d73a49;
    padding: 0.75rem;
    background-color: #ffeef0;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* Informational messages */
.info {
    color: #155724;
    padding: 0.75rem;
    background-color: #e9f7fc;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.current-preset {
    font-weight: 500;
    margin-bottom: 1rem;
}

/* Chord grid styling */
.chord-list {
    margin-top: 2rem;
}

.chord-preview {
    background-color: #f5f5f5;
    border-radius: 4px;
    overflow: hidden;
}

/* Dropdown styling */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px;
    padding-right: 2.5rem;
    border: 1px solid #ddd;
}

/* Section titles */
.tabcontent h2 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    border-bottom: none;
}

/* List in dropdown */
/* select option {
    font-family: 'Ableton Sans', Arial, sans-serif;
    padding: 0.5rem;
} */

/* Responsive adjustments */
@media (max-width: 768px) {
    .tab {
        flex-wrap: wrap;
    }
    
    .tab button {
        flex: 1 0 auto;
    }
    
    .tabcontent {
        margin: 1rem 0.5rem;
        padding: 1rem;
    }
}


/* Sample-info layout tweaks */
.sample-info .sample-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sample-info .sample-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

/* Push sample-info to bottom of the cell */
.drum-cell .sample-info {
    margin-top: auto;
}
/* File browser styling */
.file-tree { list-style: none; padding-left: 0; }
.file-tree ul { list-style: none; margin-left: 1rem; padding-left: 0; }
.file-tree li { margin: 0; }
.file-tree .dir > span,
.file-tree .file-entry button { display: block; width: 100%; cursor: pointer; border: none; background: none; text-align: left; padding: 0; }
.file-tree .dir > span:hover,
.file-tree .file-entry button:hover { background: #f0f0f0; }
.file-tree .file-entry button { color: #0066cc; }
.file-tree .dir.closed > span::before { content: "\25B6"; display: inline-block; width: 1em; }
.file-tree .dir.open > span::before { content: "\25BC"; display: inline-block; width: 1em; }
.hidden { display: none; }
.file-tree .dir, .file-tree .file-entry {margin-left: 10px;}
.link-button {
    background: none;
    border: none;
    padding: 0;
    color: #0066cc;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

nav.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: transparent;
}

nav.breadcrumbs form {
    display: inline;
}

.breadcrumbs .link-button:hover {
    background-color: transparent;
}
.file-browser {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 0.25rem;
    margin-bottom: 1rem;
}

/* Pad grid for set management */
.pad-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
    max-width: 600px;
}

.pad-cell {
    box-shadow: inset 0 0 0 2px transparent;
    border-radius: 4px;
    padding: 0.5rem;
    text-align: center;
    font-weight: 600;
    box-sizing: border-box;
    aspect-ratio: 4 / 3; 
}

.pad-cell.free {
    cursor: pointer;
    background: #f0f0f0;
}

.pad-cell.occupied {
    cursor: default;
    background: #ffeef0;
}

.pad-grid input[type="radio"] {
    display: none;
}

.pad-grid input[type="radio"]:checked + label {
    box-shadow: inset 0 0 0 2px #333;
    background: #d0e8ff;
}

.pad-grid label {
        margin-bottom: 0;
}

/* Miniature grid wrapper */
.mini-grid {
    width: 90px;
    height: 40px;
    overflow: hidden;
    display: inline-block;
    cursor: pointer;
}

.mini-grid .pad-grid {
    transform: scale(0.4);
    transform-origin: top left;
}

.mini-grid input,
.mini-grid label {
    pointer-events: none;
}


/* Small icon button for reverting samples */
.sample-header .revert-button {
    background: none;
    border: none;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}


/* Knob interface layout */
#knob-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.knob-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
}

.knob-group > * {
    margin: 0.5rem 0;
}

/* Parameter editor dials */
.param-dial {
    margin: -0.25rem;
    display: inline-block;
}

.param-dial.filter-knob {
    width: 48px;
    height: 48px;
}

.param-slider {
    margin: 0.25rem;
    display: inline-block;
}

.param-label {
    font-size: 0.8rem;
    text-align: center;
    margin-bottom: 0.25rem;
}

.param-pair {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.75rem;
}

.param-pair .param-item, .param-pair .param-select {
    margin-bottom: 0;
    padding-bottom:0;
    padding-top:0;
    padding-top: 0;

    margin-top:-1px;
}

.param-panel.oscillators .param-pair .param-select, 
.filter-mod-row .param-select,
.param-panel.lfo .param-pair .param-select
{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; 
    border-bottom: 0px;
}

.param-panel.oscillators .param-pair .rect-slider-container, 
.filter-mod-row .param-pair .rect-slider-container,
.param-panel.lfo.param-pair .param-pair .rect-slider-container
{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.param-pair .param-item {
    border-radius:0px;
}
.param-panel.modulation .param-select {
    margin-top:0px;
}


.pitch-mod-label {
    width: 100%;
    text-align: left;
    margin-left:10px;
    font-weight: bold;
    margin-top: 0.5rem;
}

.freq-mod-label {
    width: 100%;
    ext-align: left;
    margin-left:10px;
    font-weight: bold;
    margin-top: 0.5rem;
}

.pitch-mod-row {
    /* justify-content: center; */
}

.filter-mod-row {
    /* justify-content: center; */
}

.mod-matrix-row {
    justify-content: center;
}

.mod-matrix-row .mod-group {
    flex: 1;
}

.mod-label {
    font-weight: bold;
    margin-bottom: 0.25rem;
    text-align: center;
    width: 100%;
}

.param-toggle {
    margin: 0.25rem;
    display: inline-block;
}

/* Layout for the Drift parameter editor */
.drift-param-panels {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.drift-param-panels + .drift-param-panels {
    margin-top: 0.5rem;
}

/* Layout for the Wavetable parameter editor */
.wavetable-param-panels {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.wavetable-param-panels + .wavetable-param-panels {
    margin-top: 0.5rem;
}

/* Layout for the Melodic Sampler parameter editor */
.melodic-param-panels {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.melodic-param-panels + .melodic-param-panels {
    margin-top: 0.5rem;
}

.wavetable-param-panels .param-select {
    width:auto;
}

.param-panel {
    border: 1px solid #ccc;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.param-panel.oscillators,
.param-panel.envelopes {
    flex: 2;
}
/* .param-list {
    max-width:975px;
}
.param-panel.oscillators{
    max-width: 280px;
}

.param-panel.mixer{
    max-width: 128px;
}

.param-panel.filter{
    max-width: 180px;
}

.param-panel.envelopes{
    max-width: 290px;
} 
*/

.param-panel.fx {
    min-width: 258px; 
}

.wavetable-param-panels.param-panel.mixer {
    min-width: 211px;
}

.param-panel.lfo {
    max-width: 181px;
}

.param-panel.modulation {
    /* max-width: 110px; */
} 

.param-panel.global {
    max-width: 200px;
}

.param-panel.filter .param-items {
    flex-direction: column;
}


.param-group-label {
    width: 100%;
    text-align: left;
    margin-left: 10px;
    font-weight: bold;
    margin-top: 0.5rem;
}

.param-row {
    display: flex;
    gap: 0.5rem;
    width:100%;
}

.param-columns {
    display: flex;
    gap: 0.5rem;
}

.param-column {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Ensure hidden rows stay hidden despite flex layout */

.param-row.hidden,
.param-item.hidden {
    display: none;
}



.param-row-label {
    width: 80px;
    display: flex;
    align-items: center;
    font-weight: bold;
}

.param-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.param-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* width: 90px; */
    padding: 0.15rem;
}
.param-number {
    /* margin-left: 0.5rem; */
    /* min-width: 60px; */
    min-width: 38px;
    display: inline-block;
    text-align: center;
    font-size: 0.6rem;
    margin-top: 0.25rem;
}

.param-input {
    margin: 0.25rem;
    width: 80px;
    text-align: center;
}

.param-select {
    margin: 0.25rem;
    width: 60px;
    height: 20px;
    font-size: 0.6rem;
    line-height: 20px;
    padding: 0 1.5rem 0 0.5rem;
    text-align: center;
}

.filter-type-select {
    /* width: 80px; */
}
  
.param-item {
    /* margin-bottom: 0.75rem; */
  }

.macro-knob-row {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 0.5rem 0 1rem 0;
}

.macro-knob {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
    padding: 0.375rem;
    opacity: 0.6;
}

.macro-label {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
    cursor: pointer;
}

.macro-label:hover {
  text-decoration: underline;
}

.macro-label.placeholder {
    color: #777;
}

.macro-number {
    margin-top: 0.25rem;
    font-size: 0.8rem;
}

.edit-macros-link {
    text-align: center;
    margin: 0 0 1rem;
}

.return-params-link {
    text-align: center;
    margin: 1rem 0;
}

.macro-knobs-section {
    text-align: center;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

body.page-melodic-sampler .macro-knobs-section {
    position: static;
    top: auto;
    background: none;
    z-index: auto;
}

.macro-knobs-section h3 {
    margin-bottom: 0.5rem;
}

/* Layout for preset editor controls */
.preset-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.preset-controls label {
    margin-bottom: 0;
}
.preset-controls input {
    margin-bottom: 0;
}
.preset-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
#randomize-btn {
    margin-left: auto;
}

/* Highlight parameters and macros by macro index */
.param-item.macro-0, .macro-knob.macro-0 {
    border: 2px solid #191970;
    background-color: rgba(25, 25, 112, 0.05);
    border-radius: 4px;
}
.param-item.macro-1, .macro-knob.macro-1 {
    border: 2px solid #006400;
    background-color: rgba(0, 100, 0, 0.05);
    border-radius: 4px;
}
.param-item.macro-2, .macro-knob.macro-2 {
    border: 2px solid #ff0000;
    background-color: rgba(255, 0, 0, 0.05);
    border-radius: 4px;
}
.param-item.macro-3, .macro-knob.macro-3 {
    border: 2px solid #ffd700;
    background-color: rgba(255, 215, 0, 0.1);
    border-radius: 4px;
}
.param-item.macro-4, .macro-knob.macro-4 {
    border: 2px solid #00ff00;
    background-color: rgba(0, 255, 0, 0.05);
    border-radius: 4px;
}
.param-item.macro-5, .macro-knob.macro-5 {
    border: 2px solid #00ffff;
    background-color: rgba(0, 255, 255, 0.05);
    border-radius: 4px;
}
.param-item.macro-6, .macro-knob.macro-6 {
    border: 2px solid #ff00ff;
    background-color: rgba(255, 0, 255, 0.05);
    border-radius: 4px;
}
.param-item.macro-7, .macro-knob.macro-7 {
    border: 2px solid #ffb6c1;
    background-color: rgba(255, 182, 193, 0.1);
    border-radius: 4px;
}




/* Rectangular slider component */
.rect-slider-container {
    position: relative;
    width: 80px;
    height: 24px;
    border: 1px solid #dedede;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: ns-resize;
    cursor: ew-resize;
    user-select: none;
    font-size: 0.6rem;
    text-align: center;
    line-height: 20px;
    width: 60px;
    height:19px
}
.rect-slider-container.disabled {
    pointer-events: none;
    opacity: 0.6;
}
.rect-slider-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background-color: #ff764d;
    pointer-events: none;
}
.rect-slider-container.center .rect-slider-fill {
    left: 50%;
    width: 0;
}
.rect-slider-label {
    position: relative;
    z-index: 1;
}

/* Macro sidebar */
.macro-sidebar {
    position: fixed;
    right: 0;
    top: 0;
    width: 575px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.3);
    padding: 1rem;
    overflow-y: auto;
    z-index: 1001;
}
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}
.sidebar-overlay.hidden, .macro-sidebar.hidden {
    display: none;
}
.macro-assigned-list {
    margin-top: 1rem;
}
.assign-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.assign-item select {
        margin-bottom: 0;
}
.assign-item .nested-dropdown {
    margin-bottom: 0;
}
.range-inputs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.range-inputs input {
    width: 60px;
    margin-bottom: 0;
}
.macro-add-section {
    margin-top: 0.5rem;
    /* display: flex; */
    gap: 0.25rem;
}

button#macro-add-param {
    float:right;
}
.macro-add-section select {
    margin-right: 25px;
    max-width: 100%;
}

/* Modulation matrix table */
#mod-matrix-section {
    margin-top: 1rem;
    width: 840px;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
}
#mod-matrix-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.8rem;
}
#mod-matrix-table th,
#mod-matrix-table td {
    padding: 0.25rem;
    text-align: center;
}
#mod-matrix-table th:not(:first-child),
#mod-matrix-table td.mod-source-cell {
    padding-left: 0;
    padding-right: 0;
}
#mod-matrix-table th:not(:first-child) {
    width: 48px;
}
#mod-matrix-table td.mod-source-cell .rect-slider-container {
    width: 48px;
}
.mod-dest-select {
    width: 320px;
}
#mod-matrix-table .mod-dest-value.rect-slider-container {
    width: 60px;
    display: inline-block;
    margin-left: 4px;
}
#mod-matrix-table .close-x {
    color: blue;
    height: 20px;
    width: 20px;
    padding: 0px;
    margin: 0px;
    font-size: 10px;
    background-color: transparent;
}
/* Nested dropdown for modulation matrix */
.nested-dropdown {
    position: relative;
    width: 300px;
}

.nested-dropdown .dropdown-toggle {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
}
#mod-matrix-table .nested-dropdown {
    width: 240px;
    font-size: 0.6rem;
}

#mod-matrix-table .nested-dropdown .file-tree .file-entry button {
    font-size: 0.6rem;
}

#macro-sidebar .nested-dropdown .file-tree .file-entry button {
    font-size: 1rem;
}


.nested-dropdown .arrow {
    margin-left: auto;
}
.nested-dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}
.nested-dropdown .file-tree {
    margin: 0;
    padding-left: 0;
    list-style: none;
}
.nested-dropdown .file-tree ul {
    list-style: none;
    margin-left: 1rem;
    padding-left: 0;
}
.nested-dropdown .file-tree .file-entry button {
    padding: 0.25rem;
    padding: 0.25rem;
    font-size: 0.75rem;
    line-height: 0.5rem;
}
#mod-matrix-table td:first-child {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}



/* Modulation matrix control radius overrides */
.param-panel.modulation .mod-matrix-row .param-item:nth-of-type(1) .param-select {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.param-panel.modulation .mod-matrix-row .param-item:nth-of-type(2) .rect-slider-container {
    border-radius: 0;
}

.param-panel.modulation .mod-matrix-row .param-item:nth-of-type(3) .param-select {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.adsr-canvas {
    display: block;
    margin: 0.5rem 0;
    border: 1px solid #dedede;
    width:100%
}

.adsr-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 11;
}

.lfo-canvas {
    display: block;
    margin: 0.5rem 0;
    border: 1px solid #dedede;
    width:100%
}

.env-container {
    display: flex;
    align-items: top;
    gap: 0.5rem;
}

.env-container .param-row {
    width:235px;
}

.env-container .env-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.env-visualization {
    width: 200px;
    height: 88px;
}

/* Page-specific opacity rules */
.page-synth-params .macro-knob,
.page-wavetable-params .macro-knob {
    opacity: 1;
}

.page-synth-params .param-item.param-mapped,
.page-wavetable-params .param-item.param-mapped {
    opacity: 0.6;
}

#note_draw_toggle {
    background-color: transparent;
    padding: 0px;
    margin-top: 0px;
}