:root {
    /* Color Palette - Retro/Earthy */
    --bg-color: #5D4037;
    /* Brown */
    --panel-bg: #D68910;
    /* Darker Muted Orange */
    --panel-text: #FFFFFF;

    /* Instrument Colors (Complementary to Orange/Brown) */
    --inst-1: #F1C40F;
    /* Yellow/Gold */
    --inst-2: #2ECC71;
    /* Green */
    --inst-3: #3498DB;
    /* Blue */
    --inst-4: #9B59B6;
    /* Purple */

    --primary-color: #D35400;
    /* Darker Orange for buttons */
    --secondary-color: #27AE60;
    /* Green for Play */
    --danger-color: #C0392B;
    /* Red for Stop */
    --accent-color: #F39C12;
    /* Lighter Orange */

    --text-color: #2D3436;
    /* Keep dark text for inside inputs if needed, but panels might need light text */
    --border-radius: 16px;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    --font-heading: 'Fredoka', sans-serif;
    --font-body: 'Outfit', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-color);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#app {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: 20px;
    gap: 20px;
}

.top-bar {
    background: var(--panel-bg);
    padding: 10px 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-right: 4px solid #3E2723;
}

.logo {
    font-family: var(--font-heading);
    color: var(--primary-color);
    font-size: 2rem;
    letter-spacing: 1px;
}

/* Hamburger Menu */
.hamburger-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-right: 15px;
}

.hamburger-btn span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 2px;
    transition: all 0.3s;
}

.hamburger-btn:hover span {
    background-color: var(--accent-color);
}

/* Menu Overlay */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px;
    transition: opacity 0.3s;
}

.menu-overlay.hidden {
    display: none;
}

.menu-content {
    background-color: var(--panel-bg);
    border-radius: var(--border-radius);
    padding: 30px;
    min-width: 250px;
    box-shadow: var(--shadow);
    position: relative;
}

.menu-with-archive {
    background: transparent;
    padding: 0;
}

.menu-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-color);
    cursor: pointer;
    line-height: 1;
    padding: 5px 10px;
}

.menu-close:hover {
    color: var(--danger-color);
}

.menu-nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.menu-item {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--text-color);
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    transition: background-color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.menu-item:hover {
    background-color: rgba(255, 255, 255, 0.2);
}


.main-layout {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
    /* Important for scrolling */
}

.panel {
    background: var(--panel-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.left-panel {
    flex: 1;
    max-width: 350px;
    border-right: 4px solid #3E2723;
}

.right-panel {
    flex: 2;
    border-left: none;
    border-right: 4px solid #3E2723;
}

h2 {
    font-family: var(--font-heading);
    margin-bottom: 20px;
    color: var(--text-color);
    opacity: 0.8;
}

/* Transport Controls */
#transport-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

.btn {
    font-family: var(--font-heading);
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.1s, filter 0.1s;
}

.btn:active {
    transform: scale(0.95);
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: white;
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
}

.btn-accent {
    background-color: var(--accent-color);
    color: var(--text-color);
}

/* Instrument Panel Styles */
.instrument-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.instrument-card h3 {
    margin-bottom: 10px;
    font-size: 1.1rem;
    color: #555;
}

.controls-grid {
    display: grid;
    gap: 10px;
}

.control-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.control-wrapper label {
    font-size: 0.8rem;
    color: #777;
    font-weight: 500;
}

input[type="range"] {
    width: 100%;
    accent-color: var(--secondary-color);
    /* Fallback */
    -webkit-appearance: none;
    background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--thumb-color, var(--secondary-color));
    cursor: pointer;
    margin-top: -6px;
    /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

input[type="range"]::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--thumb-color, var(--secondary-color));
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #ddd;
    border-radius: 2px;
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #ddd;
    border-radius: 2px;
}

select {
    padding: 5px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-family: var(--font-body);
}

/* Sequencer Styles */
#sequencer-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

.sequencer-row {
    display: flex;
    gap: 6px;
    height: 40px;
}

.step {
    flex: 1;
    background: #eee;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.1s, transform 0.1s;
}

.step:hover {
    background: #ddd;
}

.step.active {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.step.highlight {
    border: 2px solid var(--text-color);
}

/* Group Header Styles */
.group-header {
    background-color: transparent;
    border-radius: 8px;
    margin: 4px 0;
    transition: background-color 0.2s;
}

.group-header:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Invalid Input Feedback */
.input-error {
    background-image: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.9),
            rgba(255, 255, 255, 0.9) 10px,
            rgba(255, 0, 0, 0.2) 10px,
            rgba(255, 0, 0, 0.2) 20px) !important;
    border: 2px solid var(--danger-color) !important;
    transition: all 0.2s ease;
}

/* About Dialog */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: opacity 0.3s;
}

.dialog-overlay.hidden {
    display: none;
}

.dialog-content {
    background-color: var(--panel-bg);
    border-radius: var(--border-radius);
    padding: 40px;
    max-width: 500px;
    width: 100%;
    box-shadow: var(--shadow);
    position: relative;
    color: var(--panel-text);
}

.dialog-content h2 {
    font-family: var(--font-heading);
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 2rem;
}

.dialog-content h3 {
    font-family: var(--font-heading);
    color: var(--text-color);
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.dialog-content p {
    color: var(--panel-text);
    margin-bottom: 15px;
    line-height: 1.6;
}

.dialog-content ul {
    list-style-position: inside;
    color: var(--panel-text);
    line-height: 1.8;
}

.dialog-content li {
    margin-bottom: 5px;
}

.dialog-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-color);
    cursor: pointer;
    line-height: 1;
    padding: 5px 10px;
    transition: color 0.2s;
}

.dialog-close:hover {
    color: var(--danger-color);
}

/* Export Dialog */
.export-dialog .export-options {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.export-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    min-height: 120px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.export-option:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.export-icon {
    font-size: 2.5rem;
}

.export-label {
    font-weight: 600;
    font-size: 1.1rem;
}

.export-desc {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Menu with Archive Integration */
.menu-with-archive {
    display: flex;
    max-width: 90vw;
    width: 1200px;
    height: 80vh;
    max-height: 800px;
    /* Purple Theme Variables */
    --menu-bg: #4A148C;
    --menu-panel: #9C27B0;
    --menu-light: #BA68C8;
    --menu-primary: #E1BEE7;
    --menu-text: #FFFFFF;
    --menu-text-dark: #2D3436;
}

.menu-sidebar {
    width: 250px;
    background: var(--menu-bg);
    padding: 30px 20px;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-sidebar h3 {
    font-family: var(--font-heading);
    color: var(--menu-primary);
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.menu-sidebar .menu-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu-sidebar .menu-item {
    text-align: left;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--menu-text);
    border-radius: 8px;
    transition: all 0.2s;
}

.menu-sidebar .menu-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(5px);
}

.menu-archive {
    flex: 1;
    padding: 30px;
    background: var(--menu-panel);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    overflow-y: auto;
    position: relative;
}

.menu-archive h2 {
    font-family: var(--font-heading);
    color: var(--menu-primary);
    margin-bottom: 20px;
}

.menu-with-archive .menu-close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    color: var(--menu-text);
}

.songs-grid {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.song-card {
    background: var(--menu-light);
    padding: 20px;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.song-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.song-card h3 {
    color: var(--menu-text-dark);
    margin-bottom: 10px;
    font-size: 1.1rem;
    font-family: var(--font-heading);
}

.song-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 15px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
}

.song-actions {
    display: flex;
    gap: 10px;
}

.song-actions .btn {
    flex: 1;
    padding: 8px;
    font-size: 0.9rem;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    font-family: var(--font-heading);
    transition: filter 0.2s;
}

.song-actions .btn-primary {
    background: var(--menu-primary);
    color: var(--menu-text-dark);
}

.song-actions .btn-danger {
    background: #D81B60;
    color: white;
}

.song-actions .btn:hover {
    filter: brightness(1.1);
}

.empty-state {
    text-align: center;
    color: var(--menu-primary);
    opacity: 0.8;
    padding: 40px 20px;
}

.empty-state p {
    margin: 10px 0;
}

/* Drums Container */
.drums-container {
    background-color: rgba(0, 0, 0, 0.1);
    /* Slightly darker than panel */
    border-radius: 12px;
    padding: 10px;
    margin: 5px 0 15px 0;
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.drums-container .sequencer-row {
    height: 28px;
    /* Reduced height for subtracks */
}

.drums-container .step {
    border-radius: 4px;
}

.drums-container .note-select {
    height: 24px;
    font-size: 0.75rem;
    padding: 0 4px;
}

.drums-container input[type="checkbox"] {
    transform: scale(0.85);
}

/* Volume Slider Popup */
.volume-slider-popup {
    position: absolute;
    background-color: #fff;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 15px 10px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 60px;
    height: 220px;
}

.volume-slider-wrapper {
    width: 30px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.volume-slider-popup input[type="range"] {
    width: 150px;
    height: 20px;
    transform: rotate(-90deg);
    cursor: pointer;
    margin: 0;
}

.volume-value {
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-color);
    margin-top: 5px;
    font-family: var(--font-heading);
}

/* Portrait Mode Support */
@media (orientation: portrait),
(max-width: 768px) {
    body {
        overflow: auto;
        /* Allow body to scroll */
    }

    #app {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .main-layout {
        flex-direction: column;
        overflow: visible;
        /* Remove internal scrolling */
        height: auto;
        flex: none;
    }

    .panel {
        width: 100%;
        max-width: none;
        /* Reset max-width for left panel */
        border: none;
        /* Remove side borders */
        border-bottom: 4px solid #3E2723;
        /* Add bottom border for separation */
        flex: none;
        /* Let content dictate height or use auto */
        height: auto;
        /* Ensure panels expand to fit content */
        overflow: visible;
        /* No internal scrolling needed if body scrolls */
        min-height: 400px;
        /* Ensure sequencer has space */
    }

    .left-panel {
        border-right: none;
        order: 2;
        /* Instruments below Sequencer */
    }

    .top-bar {
        padding: 5px 15px;
        gap: 10px;
        /* Remove overflow: hidden to allow dropdown to show */
        overflow: visible;
        /* Keep items close together, let spacer fill gap */
        justify-content: flex-start;
    }

    .logo {
        display: none;
    }

    #transport-controls {
        flex-wrap: nowrap;
        /* Remove overflow-x: auto as we are using dropdown now */
        overflow: visible;
        padding-bottom: 0;
        mask-image: none;
        -webkit-mask-image: none;

        /* Take up remaining space */
        flex: 1;
        display: flex;
        align-items: center;
        min-width: 0;
        /* Allow flex items to shrink below content size if needed */
    }

    /* Hide Desktop Buttons on Mobile */
    .desktop-btn {
        display: none;
    }

    /* Show Actions Button on Mobile */
    .actions-btn {
        display: inline-block !important;
        padding: 6px 12px;
        font-size: 0.8rem;
        flex-shrink: 0;
        /* Never shrink the actions button */
        margin-left: 10px !important;
        /* Ensure gap from input */
    }

    /* Actions Menu Styling */
    .actions-menu {
        position: absolute;
        top: 60px;
        /* Below top bar */
        right: 10px;
        background-color: var(--panel-bg);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        z-index: 1000;
        min-width: 150px;
    }

    .actions-menu.hidden {
        display: none;
    }

    .menu-item {
        background: none;
        border: none;
        color: var(--text-color);
        font-family: var(--font-heading);
        font-size: 1rem;
        padding: 8px 12px;
        text-align: left;
        cursor: pointer;
        border-radius: 4px;
        transition: background-color 0.2s;
    }

    .menu-item:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .btn-accent-text {
        color: var(--accent-color);
        font-weight: bold;
    }

    /* Compact controls for mobile */
    #transport-controls input[type="text"] {
        width: auto !important;
        /* Override fixed width */
        flex-grow: 1;
        /* Fill remaining space */
        min-width: 60px;
        /* Prevent total collapse */
        font-size: 0.8rem;
        padding: 4px;
        margin-right: 0 !important;
        /* Remove default margin */
    }

    #transport-controls .btn {
        padding: 6px 12px;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    /* Hide BPM label text on very small screens */
    #transport-controls span {
        display: none;
    }

    /* Hide BPM slider on mobile to save space? Or keep it?
       User didn't ask to hide it, but it might crowd the title.
       Let's keep it for now but maybe make it smaller or just the input.
    */
    #transport-controls input[type="range"] {
        width: 60px !important;
        flex-shrink: 0;
    }
}

/* Mobile Menu Adjustments */
.menu-with-archive {
    flex-direction: column;
    width: 95%;
    height: 90vh;
    max-height: none;
    overflow: hidden;
    /* Let internal parts scroll */
}

.menu-sidebar {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    padding: 15px;
}

.menu-sidebar .menu-nav {
    flex-direction: row;
    flex-wrap: wrap;
}

.menu-sidebar .menu-item {
    width: auto;
    flex: 1;
    text-align: center;
}

.menu-archive {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    padding: 15px;
}

.songs-grid {
    grid-template-columns: 1fr;
    /* Single column for songs on mobile */
}
}

/* Ensure hidden class always works */
.menu-overlay.hidden {
    display: none !important;
}

/* Muted Drums Group */
.drums-muted {
    opacity: 0.5;
    pointer-events: none;
    /* Optional: prevent interaction when muted */
    transition: opacity 0.3s ease;
}