@import url('fonts.css');

:root {
    --bg-dark: #000018;
    --bg-panel: #000033;
    --bg-field: #000022;
    --bg-highlight: #000055;
    --bg-row-current: #0000aa;
    --border-light: #6677aa;
    --border-dark: #000008;
    --text-primary: #8899cc;
    --text-bright: #ccccff;
    --text-yellow: #ffcc00;
    --text-cyan: #00ccff;
    --text-dim: #334466;
    --text-green: #44dd44;
    --text-red: #ff4444;
    --text-orange: #ff8844;
    --btn-face: #445588;
    --btn-light: #6677aa;
    --btn-dark: #223355;
    --btn-active: #2233aa;
    --vu-green: #22dd22;
    --vu-yellow: #dddd22;
    --vu-red: #dd2222;
    --channel-1: #4488ff;
    --channel-2: #44ddaa;
    --channel-3: #ddaa44;
    --channel-4: #dd4488;
}

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

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    background: var(--bg-dark);
    color: var(--text-primary);
    font-family: 'ProTracker', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.2;
    cursor: default;
    user-select: none;
    -webkit-font-smoothing: none;
    image-rendering: pixelated;
}

/* ===== APP LAYOUT ===== */
#app {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100vh;
    padding: 3px;
    gap: 3px;
}
#main-area {
    display: grid;
    grid-template-columns: 220px 1fr 300px;
    gap: 3px;
    min-height: 0;
    overflow: hidden;
}

/* ===== BUTTONS ===== */
.btn {
    font-family: 'ProTracker', monospace;
    font-size: 12px;
    color: var(--text-bright);
    background: var(--btn-face);
    border: 2px solid;
    border-color: var(--btn-light) var(--btn-dark) var(--btn-dark) var(--btn-light);
    padding: 2px 6px;
    cursor: pointer;
    text-transform: uppercase;
    white-space: nowrap;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn:active, .btn.active {
    border-color: var(--btn-dark) var(--btn-light) var(--btn-light) var(--btn-dark);
    background: var(--btn-active);
}
.btn:hover { background: var(--btn-light); }
.btn-sm { font-size: 10px; padding: 1px 4px; min-height: 18px; }
.btn-play { background: #224422; border-color: #448844 #112211 #112211 #448844; }
.btn-play:hover { background: #336633; }
.btn-stop { background: #442222; border-color: #884444 #221111 #221111 #884444; }
.btn-stop:hover { background: #663333; }

/* ===== PANELS ===== */
.panel {
    background: var(--bg-panel);
    border: 2px solid;
    border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
    padding: 3px;
    overflow: hidden;
}
.panel-inset {
    background: var(--bg-field);
    border: 2px solid;
    border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
    overflow: hidden;
}
.panel-title {
    font-size: 10px;
    color: var(--text-yellow);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
    padding: 0 2px;
}
.panel-title .dim { color: var(--text-dim); font-size: 9px; }

/* ===== TOP BAR ===== */
#top-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px;
    align-items: center;
    padding: 3px 6px;
}
#display-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    overflow: hidden;
}
.display-field {
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}
.display-field.dim { color: var(--text-cyan); font-size: 11px; }
.display-field.time {
    color: var(--text-green);
    font-variant-numeric: tabular-nums;
    min-width: 90px;
    text-align: right;
}
#transport { display: flex; gap: 2px; flex-shrink: 0; }

/* ===== LEFT COLUMN ===== */
#left-col {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 3px;
    min-height: 0;
    overflow: hidden;
}
#file-browser {
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    min-height: 0;
    position: relative;
}
#search-box {
    font-family: 'ProTracker', monospace;
    font-size: 11px;
    background: var(--bg-field);
    color: var(--text-bright);
    border: 2px solid;
    border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
    padding: 2px 4px;
    width: 100%;
    outline: none;
}
#search-box::placeholder { color: var(--text-dim); }
#search-box:focus { border-color: var(--text-cyan); }
#browser-nav { display: flex; gap: 2px; padding: 2px 0; }

#lists-dropdown-wrap { position: static; }
#lists-dropdown {
    position: absolute; top: auto; left: 4px; right: 4px; z-index: 100;
    background: #111133; border: 1px solid var(--border-light);
    max-height: 400px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--btn-face) var(--bg-field);
    box-shadow: 2px 4px 12px rgba(0,0,0,0.7);
}
#lists-dropdown.hidden { display: none; }
.dropdown-item {
    padding: 3px 8px; cursor: pointer; font-size: 11px;
    color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dropdown-item:hover { background: var(--bg-highlight); color: var(--text-bright); }
.dropdown-item .dd-icon { display: inline-block; width: 16px; text-align: center; margin-right: 4px; }
.dropdown-divider { height: 1px; background: var(--border-dark); margin: 2px 0; }
.dropdown-label { padding: 3px 8px; font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
.dropdown-item .dim { color: var(--text-dim); font-size: 10px; }

.curated-row { display: flex !important; gap: 4px; align-items: baseline; }
.cr-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-bright); }
.cr-artist { flex-shrink: 0; max-width: 35%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); font-size: 10px; }
.cr-stat { flex-shrink: 0; color: var(--text-yellow); font-size: 10px; white-space: nowrap; }
#file-list {
    overflow-y: auto; font-size: 11px;
    scrollbar-width: thin; scrollbar-color: var(--btn-face) var(--bg-field);
}
#file-list::-webkit-scrollbar { width: 8px; }
#file-list::-webkit-scrollbar-track { background: var(--bg-field); }
#file-list::-webkit-scrollbar-thumb { background: var(--btn-face); }

.file-item {
    padding: 0 4px; cursor: pointer; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; font-size: 11px;
}
.file-item:hover { background: var(--bg-highlight); color: var(--text-bright); }
.file-item.playing { background: var(--bg-row-current); color: var(--text-yellow); }
.file-item.selected { background: var(--bg-highlight); outline: 1px solid var(--text-cyan); }
.file-item .artist-name { color: var(--text-yellow); }
.file-item .file-title { color: var(--text-primary); }
.file-item .file-count { color: var(--text-dim); font-size: 10px; }

#song-info-panel { font-size: 11px; }
#song-info-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1px 6px;
    padding: 2px;
}
.si-label { color: var(--text-yellow); text-align: right; font-size: 10px; text-transform: uppercase; }
.si-value { color: var(--text-bright); font-size: 11px; }

/* ===== CENTER COLUMN ===== */
#center-col {
    display: grid;
    grid-template-rows: 48px 1fr 80px 140px;
    gap: 3px;
    min-height: 0;
    overflow: hidden;
}

/* Position Map */
#position-map { height: 48px; max-height: 48px; overflow: hidden; }
#position-cells {
    display: flex; flex-wrap: wrap; gap: 1px; padding: 2px;
    max-height: 28px; overflow: hidden;
}
.pos-cell {
    width: 16px; height: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 7px; color: #000; font-weight: bold;
    cursor: pointer; border: 1px solid transparent; opacity: 0.6;
}
.pos-cell.current {
    opacity: 1; border-color: #fff;
    box-shadow: 0 0 6px rgba(255,255,255,0.6);
    transform: scale(1.15);
}

/* ===== CHANNEL STRIPS (main visual area) ===== */
#channel-strips-panel {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 1px;
    border-width: 1px;
    min-height: 0;
    overflow: hidden;
}
.ch-strip {
    flex: 1;
    display: flex;
    align-items: stretch;
    min-height: 0;
    overflow: hidden;
    position: relative;
}
.ch-strip-label {
    position: absolute;
    top: 1px;
    left: 3px;
    font-size: 8px;
    font-weight: bold;
    line-height: 1;
    z-index: 1;
    opacity: 0.6;
    pointer-events: none;
}
.strip-canvas {
    flex: 1;
    width: 100%;
    min-height: 0;
    background: #000014;
    display: block;
}

/* ===== METER ROW: Spectrogram + Stereo Field + Waveform + VU ===== */
#meter-strip {
    display: grid;
    grid-template-columns: 1fr 60px 1fr 54px;
    gap: 2px;
    padding: 2px;
    border-width: 1px;
}

.meter-canvas {
    width: 100%;
    height: 100%;
    border: 1px solid var(--border-dark);
    background: #000014;
    display: block;
}
.meter-canvas-sm {
    width: 100%;
    height: 100%;
    border: 1px solid var(--border-dark);
    background: #000014;
    display: block;
}

#vu-section {
    display: flex;
    gap: 3px;
    align-items: stretch;
    height: 100%;
}
.vu-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.vu-label { font-size: 8px; font-weight: bold; line-height: 1; }
.vu-track {
    flex: 1;
    width: 100%;
    background: #000011;
    border: 1px solid var(--border-dark);
    position: relative;
}
.vu-fill {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top,
        var(--vu-green) 0%,
        var(--vu-green) 50%,
        var(--vu-yellow) 75%,
        var(--vu-red) 100%
    );
    transition: height 0.05s linear;
    min-height: 0;
}

/* ===== COMPACT PATTERN (6 rows) ===== */
#pattern-panel { height: 140px; max-height: 140px; overflow: hidden; }
#pattern-status-bar {
    display: flex;
    gap: 8px;
    padding: 1px 4px;
    font-size: 10px;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border-dark);
}
#pattern-status-bar b { color: var(--text-bright); font-weight: normal; }

#pattern-view { overflow: hidden; font-size: 11px; line-height: 1; }
#pattern-rows { overflow: hidden; }

.prow {
    display: grid;
    grid-template-columns: 24px repeat(4, 1fr);
    height: 18px;
    align-items: center;
    padding: 0 2px;
}
.prow .p-rn { color: var(--text-dim); text-align: center; font-size: 9px; }
.prow .p-ch { text-align: center; font-size: 11px; letter-spacing: 0.3px; white-space: nowrap; }
.prow .ch1 { color: var(--channel-1); }
.prow .ch2 { color: var(--channel-2); }
.prow .ch3 { color: var(--channel-3); }
.prow .ch4 { color: var(--channel-4); }
.prow .p-ch .note { font-weight: normal; }
.prow .p-ch .smp { opacity: 0.6; }
.prow .p-ch .eff { color: var(--text-orange); opacity: 0.7; }
.prow .p-ch .dim { opacity: 0.2; }
.prow .p-ch.empty { opacity: 0.12; }

.prow.current { background: var(--bg-row-current); }
.prow.current .p-ch { color: var(--text-bright) !important; opacity: 1 !important; }
.prow.current .p-ch .eff { color: var(--text-yellow); }
.prow.current .p-ch .dim { opacity: 0.4; }
.prow.current .p-ch.empty { opacity: 0.3; }
.prow.current .p-rn { color: var(--text-yellow); }

/* ===== RIGHT COLUMN ===== */
#right-col {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 3px;
    min-height: 0;
    overflow: hidden;
}

#sample-panel {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
    overflow: hidden;
}
#sample-table {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--btn-face) var(--bg-field);
    font-size: 10px;
}
#sample-table::-webkit-scrollbar { width: 8px; }
#sample-table::-webkit-scrollbar-track { background: var(--bg-field); }
#sample-table::-webkit-scrollbar-thumb { background: var(--btn-face); }

.sample-row {
    display: grid;
    grid-template-columns: 20px 1fr 36px 18px 18px 100px;
    gap: 2px;
    padding: 1px 2px;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.15);
}
.sample-row.header {
    color: var(--text-yellow);
    font-size: 8px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-light);
    position: sticky; top: 0;
    background: var(--bg-field);
    z-index: 1;
}
.sample-row.no-data { opacity: 0.25; }
.sample-row.has-data:hover { background: var(--bg-highlight); }

.s-num { color: var(--text-dim); text-align: right; font-size: 9px; }
.s-name {
    color: var(--text-cyan);
    overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: 10px;
}
.has-data .s-name { color: var(--text-bright); }
.s-len { color: var(--text-green); text-align: right; font-size: 9px; }
.s-vol { color: var(--text-yellow); text-align: center; font-size: 9px; }
.s-loop { color: var(--channel-1); font-size: 8px; text-align: center; }
.s-wave { display: flex; align-items: center; }
.wave-thumb { width: 100px; height: 22px; display: block; }

/* Metadata Panel */
#metadata-panel {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 120px;
    max-height: 250px;
}
#metadata-content {
    overflow-y: auto; font-size: 11px; padding: 4px;
    scrollbar-width: thin; scrollbar-color: var(--btn-face) var(--bg-field);
}
#metadata-content::-webkit-scrollbar { width: 8px; }
#metadata-content::-webkit-scrollbar-track { background: var(--bg-field); }
#metadata-content::-webkit-scrollbar-thumb { background: var(--btn-face); }

.meta-placeholder { color: var(--text-dim); font-style: italic; padding: 8px; }
.meta-section { margin-bottom: 6px; }
.meta-label { color: var(--text-yellow); font-size: 9px; text-transform: uppercase; margin-bottom: 1px; }
.meta-value { color: var(--text-cyan); word-break: break-word; }
.meta-value.message { color: var(--text-green); white-space: pre-wrap; line-height: 1.3; font-size: 11px; }
.meta-tag {
    display: inline-block; background: var(--bg-highlight);
    color: var(--text-bright); padding: 1px 3px; margin: 1px; font-size: 9px;
}

/* ===== HEADPHONE MODAL ===== */
#headphone-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,18,0.92);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000;
}
#headphone-modal.hidden { display: none; }
.hp-box {
    background: var(--bg-panel);
    border: 3px solid;
    border-color: #112244 #8899bb #8899bb #112244;
    padding: 24px 32px;
    text-align: center;
    max-width: 340px;
}
.hp-icon {
    color: var(--channel-1);
    line-height: 1;
    margin-bottom: 12px;
}
.hp-icon pre {
    font-family: 'ProTracker', monospace;
    font-size: 6px;
    line-height: 0.7;
    letter-spacing: 1px;
}
.hp-title {
    color: var(--text-yellow);
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.hp-text {
    color: var(--text-primary);
    font-size: 11px;
    line-height: 1.5;
    margin-bottom: 16px;
}
.hp-btn {
    font-family: 'ProTracker', monospace;
    font-size: 13px;
    color: var(--text-bright);
    background: #224422;
    border: 3px solid;
    border-color: #1a331a #55aa55 #55aa55 #1a331a;
    padding: 8px 24px;
    cursor: pointer;
    letter-spacing: 1px;
}
.hp-btn:hover { background: #336633; }
.hp-btn:active { border-color: #55aa55 #1a331a #1a331a #55aa55; }

@media (max-width: 480px) {
    .hp-box { padding: 20px 16px; max-width: 300px; }
    .hp-icon pre { font-size: 5px; }
    .hp-title { font-size: 12px; }
    .hp-text { font-size: 10px; }
    .hp-btn { font-size: 11px; padding: 8px 16px; }
}

/* ===== LOADING SCREEN ===== */
#loading {
    position: fixed; inset: 0;
    background: var(--bg-dark);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 1000; gap: 12px;
}
#loading .title { font-size: 24px; color: var(--text-yellow); text-transform: uppercase; }
#loading .status { font-size: 14px; color: var(--text-cyan); }
#loading.hidden { display: none; }

/* Mobile-only elements hidden on desktop */
#mobile-samples-btn { display: none; }
#mobile-overlay-close { display: none; }

/* ===== MOBILE: Single screen, no scroll ===== */
@media (max-width: 480px) {
    html, body { font-size: 11px; }

    #app {
        height: 100dvh;
        padding: 1px;
        gap: 0;
        grid-template-rows: auto 1fr auto;
    }

    /* Top bar: thin single line, display only */
    #top-bar {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 2px 6px;
        min-height: 0;
    }
    #display-bar { gap: 6px; }
    #display-songname { font-size: 9px; flex: 1; }
    .display-field.dim { display: none; }
    .display-field.time { font-size: 9px; min-width: 60px; }
    #transport { gap: 1px; justify-content: center; }

    .btn { font-size: 9px; padding: 1px 4px; min-height: 20px; }
    .btn-sm { font-size: 8px; padding: 1px 3px; min-height: 16px; }

    /* Main area: single column */
    #main-area {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        gap: 1px;
        overflow: hidden;
    }

    /* Reorder: center col first, then left col (browser) */
    #center-col { order: 1; }
    #left-col { order: 2; }
    #right-col { order: 3; }

    /* Center column: compact viz stack */
    #center-col {
        grid-template-rows: auto auto auto;
        gap: 1px;
    }

    /* Hide position map */
    #position-map { display: none; }

    /* Channel strips: 2x2 grid */
    #channel-strips-panel {
        flex-direction: row;
        flex-wrap: wrap;
        height: 180px;
        min-height: 180px;
        max-height: 180px;
        padding: 0;
        gap: 1px;
    }
    .ch-strip {
        flex: none;
        width: calc(50% - 1px);
        height: calc(50% - 1px);
    }
    .ch-strip-label { font-size: 7px; }

    /* Meter strip: spectrogram + VU only, hide stereo + wave */
    #meter-strip {
        grid-template-columns: 1fr 50px;
        grid-template-rows: 1fr;
        height: 50px;
        min-height: 50px;
        max-height: 50px;
        padding: 1px;
        gap: 1px;
    }
    #spectrogram-canvas { grid-column: 1; grid-row: 1; }
    #stereo-field { display: none; }
    #scope-wave { display: none; }
    #vu-section { grid-column: 2; grid-row: 1; }
    .vu-label { font-size: 7px; }

    /* Pattern: compact 4 rows */
    #pattern-panel {
        height: 76px;
        min-height: 76px;
        max-height: 76px;
    }
    #pattern-status-bar { font-size: 7px; gap: 3px; padding: 0 2px; }
    .prow { height: 13px; }
    .prow .p-rn { font-size: 7px; }
    .prow .p-ch { font-size: 7px; letter-spacing: 0; }

    /* Left column: browser fills remaining space */
    #left-col {
        grid-template-rows: 1fr;
        gap: 1px;
        min-height: 0;
    }
    #song-info-panel { display: none; }
    #file-browser { padding: 2px; }
    #search-box { font-size: 10px; padding: 2px 3px; }
    #browser-nav { padding: 1px 0; }
    .file-item { font-size: 10px; }
    #lists-dropdown { max-height: 50vh; }

    /* Right column: hidden, shown as overlay */
    #right-col {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 500;
        background: var(--bg-dark);
        padding: 4px;
        overflow-y: auto;
    }
    #right-col.mobile-visible {
        display: grid;
        grid-template-rows: auto 1fr auto;
    }

    /* Bottom bar: samples button only, no transport */
    #mobile-samples-btn {
        display: flex;
        background: var(--bg-panel);
        border: 1px solid;
        border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
        padding: 0;
        align-items: center;
    }
    #mobile-transport { display: none; }
    #mobile-samples-toggle {
        flex: 1;
        color: var(--text-yellow);
        font-family: 'ProTracker', monospace;
        font-size: 9px;
        padding: 4px;
        cursor: pointer;
        letter-spacing: 1px;
        text-align: center;
    }

    /* Close button inside overlay */
    #mobile-overlay-close {
        display: block;
        background: var(--btn-face);
        border: 2px solid;
        border-color: var(--btn-light) var(--btn-dark) var(--btn-dark) var(--btn-light);
        color: var(--text-bright);
        font-family: 'ProTracker', monospace;
        font-size: 10px;
        padding: 6px;
        cursor: pointer;
        text-align: center;
        text-transform: uppercase;
        margin-top: 4px;
    }

    #metadata-panel { min-height: 80px; max-height: 150px; }

    #loading .title { font-size: 16px; }
    #loading .status { font-size: 11px; }
}