/* =====================================================
   editor-v2.css — beatmap editor, plain old-style UI
   Native HTML elements, minimal chrome. Black background,
   white foreground. Game visuals (preview strip / playtest)
   keep their in-game styling via the imports below.
   ===================================================== */

@import url('./gameplay.css');
@import url('./judgement.css');
@import url('./hud.css');

:root { color-scheme: dark; }

* { box-sizing: border-box; }

body {
    background: #000000;
    color: #ffffff;
    margin: 10px 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* form controls and <pre> don't inherit the body font by default */
button, input, select, textarea, pre {
    font-family: inherit;
}

a { color: #8ab4ff; }

hr { border: none; border-top: 1px solid #555; }

#editorHead button { float: right; }

/* ---------- setup panel ---------- */

details > summary { cursor: pointer; font-weight: bold; margin: 6px 0; }

.setup-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}

.setup-grid fieldset { margin: 0; border: 1px solid #555; }

.param-table td { padding: 1px 6px 1px 0; font-size: 13px; }

.param-table input[type="number"] { width: 70px; }
.param-table input[type="number"].narrow { width: 42px; }
.param-table input[type="text"] { width: 170px; }

/* ---------- toolbar rows ---------- */

#editorToolbar,
#eventPalette,
.timeline-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0;
}

.toolbar-label { font-size: 13px; color: #bbb; }
.toolbar-sep {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: #444;
    margin: 0 4px;
}

.plain-label { font-size: 13px; }

#playbackSlider { flex: 1 1 120px; min-width: 60px; }

#playbackTime,
#zoomLabel {
    font-size: 12px;
    min-width: 42px;
    text-align: right;
}

#selectedBeatDisplay {
    margin-left: auto;
    font-size: 13px;
    font-weight: bold;
}

.palette-hint { font-size: 11px; color: #888; margin-left: 6px; }
.palette-chip { cursor: grab; }
.palette-chip:active { cursor: grabbing; }

/* ---------- preview strip (in-game look) ---------- */

#mapPreview {
    background: #000;
    border: 1px solid #555;
    padding: 6px 12px;
    margin: 6px 0;
    min-height: 24px;
}

#mapPreview .sliders { width: 100%; margin: 0; pointer-events: none; }

/* ---------- timeline ---------- */

#timeline {
    border: 1px solid #555;
    margin: 6px 0;
    background: #000;
}

#timeline .timeline-toolbar {
    margin: 0;
    padding: 4px 8px;
    background: #111;
    border-bottom: 1px solid #555;
}

#timeline.hiding-markers .lane-event,
#timeline.hiding-markers .lane-ticker { display: none; }

.timeline-scroll { overflow: auto; max-height: 60vh; }

.timeline-canvas { position: relative; }

.timeline-ruler {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 22px;
    background: #111;
    border-bottom: 1px solid #555;
}

.ruler-beat {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.ruler-beat:hover { background: #2a2a2a; }
.ruler-beat.in-range { background: #1c3050; }
.ruler-beat.selected { background: #2a4a7a; }
.ruler-beat.current { background: #1d3a1d; }

.ruler-beat-num {
    font-size: 10px;
    color: #ccc;
    padding-top: 2px;
}

.ruler-beat.init .ruler-beat-num { color: #666; }

.ruler-beat-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 6px;
    background: #555;
}

.ruler-beat-line.measure { height: 12px; width: 2px; background: #999; }

.ruler-bpm { border-bottom: 2px solid #5b9bd5; }
.ruler-bpm-value { font-size: 8px; color: #6699ff; margin-top: -3px; }

/* ---------- lanes ---------- */

.timeline-lanes { position: relative; min-width: 100%; }

.timeline-lane {
    position: relative;
    border-bottom: 1px solid #222;
    height: 26px;
    min-width: 100%;
}

.lane-label {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: #aaa;
    z-index: 5;
    pointer-events: none;
    transform: translateX(-50%);
}

.lane-track { position: relative; height: 100%; background: #161616; cursor: crosshair; }

.lane-track[data-dropping="1"] { background: #1c2a14; outline: 1px solid #7a5; }

.visual-lane { border-bottom: 1px solid #335; }
.visual-lane .lane-label { color: #6699ff; }
.visual-lane .lane-track { background: #10141f; }
.visual-lane .lane-track[data-dropping="1"] { background: #16203a; outline: 1px solid #57a; }

.lane-grid-line {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: #222;
    pointer-events: none;
}

.lane-grid-line.measure { background: #444; }
.lane-grid-line.zero { background: #888; width: 2px; }

/* new-slider ghost lane */
.new-slider-lane .lane-track { background: #0d0d0d; cursor: default; }
.new-slider-lane .lane-label { color: #444; }

.new-slider-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: #555;
    pointer-events: none;
    white-space: nowrap;
    user-select: none;
}

.new-slider-lane .lane-track[data-dropping="1"] { background: #1c2a14; }
.new-slider-lane .lane-track[data-dropping="1"] .new-slider-hint { color: #a3e635; }

/* ---------- ticker marks ---------- */

.lane-ticker {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 14px;
    background: #888;
    border: 1px solid #bbb;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 3;
}

.lane-ticker:hover { background: #ccc; }

.lane-ticker.end { width: 4px; height: 18px; background: #555; }

/* ---------- event marks ---------- */

.lane-event {
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    transform: translate(-50%, -50%);
    z-index: 4;
    cursor: pointer;
}

.lane-event:hover { outline: 2px solid #fff; }
.lane-event.dragging { outline: 2px solid #fff; z-index: 8; }

/* hit objects */
.lane-event.snare         { background: #4ade80; border: 1px solid #86efac; }
.lane-event.hold          { background: #a78bfa; border: 1px solid #c4b5fd; width: 5px; height: 15px; }
.lane-event.criticalSnare { background: #fbbf24; border: 1px solid #fde68a; width: 12px; height: 12px; }

/* lifecycle events — vertical bars */
.lane-event.introduce { background: #22d3ee; border: 1px solid #67e8f9; width: 5px; height: 18px; }
.lane-event.start     { background: #a3e635; border: 1px solid #d9f99d; width: 5px; height: 18px; }
.lane-event.stop      { background: #94a3b8; border: 1px solid #cbd5e1; width: 5px; height: 18px; }
.lane-event.delete    { background: #f87171; border: 1px solid #fca5a5; width: 4px; height: 18px; }
.lane-event.clear     { background: #f472b6; border: 1px solid #f9a8d4; width: 4px; height: 15px; }

/* effects */
.lane-event.visual { background: #60a5fa; border: 1px solid #93c5fd; width: 4px; height: 15px; }
.lane-event.speed  { background: #818cf8; border: 1px solid #a5b4fc; width: 4px; height: 15px; }

.lane-hover-highlight {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background: #668;
    pointer-events: none;
    z-index: 2;
}

.lane-playback-knob {
    position: absolute;
    top: 0;
    width: 3px;
    height: 100%;
    background: #e8a000;
    z-index: 6;
    pointer-events: none;
    transform: translateX(-50%);
}

/* ---------- event popup ---------- */

.event-popup {
    position: fixed;
    z-index: 2000;
    background: #111;
    border: 1px solid #888;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
}

.event-popup-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 4px 3px 8px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    border-left: 4px solid currentColor;
    background: #1c1c1c;
}

.event-popup-chip:hover { background: #2e2e2e; }

.event-popup-del {
    flex-shrink: 0;
    line-height: 1;
    cursor: pointer;
}

.event-popup-chip.snare         { color: #4ade80; }
.event-popup-chip.hold          { color: #a78bfa; }
.event-popup-chip.criticalSnare { color: #fbbf24; }
.event-popup-chip.introduce     { color: #22d3ee; }
.event-popup-chip.start         { color: #a3e635; }
.event-popup-chip.stop          { color: #94a3b8; }
.event-popup-chip.delete        { color: #f87171; }
.event-popup-chip.clear         { color: #f472b6; }
.event-popup-chip.visual        { color: #60a5fa; }
.event-popup-chip.speed         { color: #818cf8; }

.event-popup-chip span { color: #fff; }

/* ---------- BPM lane ---------- */

.timeline-bpm { border-top: 1px solid #555; background: #0d0d0d; }

.bpm-toolbar {
    padding: 1px 8px;
    font-size: 11px;
    border-bottom: 1px solid #222;
    background: #111;
}

.bpm-toolbar-label { color: #6699ff; }

.bpm-lane { position: relative; height: 26px; }

.bpm-event-box {
    position: absolute;
    top: 2px;
    height: 21px;
    background: #000;
    border: 1px solid #5b9bd5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #7ab3e8;
    cursor: grab;
    user-select: none;
    z-index: 2;
    min-width: 40px;
    padding: 0 3px;
    transform: translateX(-50%);
}

.bpm-event-box:hover { background: #101a2a; }
.bpm-event-box.dragging { cursor: grabbing; background: #16243c; border-color: #e8a000; }

.bpm-bookmark {
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    border-left: 2px dashed #e8a000;
    z-index: 1;
    pointer-events: none;
}

.bpm-bookmark-label {
    position: absolute;
    top: -13px;
    font-size: 9px;
    color: #e8a000;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* ---------- playback cursor ---------- */

.timeline-cursor {
    position: absolute;
    top: 0;
    width: 2px;
    background: #4caf50;
    z-index: 20;
    pointer-events: none;
}

/* ---------- json / shortcuts panels ---------- */

#jsonPreview {
    background: #111;
    border: 1px solid #444;
    padding: 8px;
    font-size: 11px;
    max-height: 40vh;
    overflow-y: auto;
    white-space: pre-wrap;
    margin: 4px 0;
}

.shortcuts-table {
    background: #111;
    border: 1px solid #444;
    border-collapse: collapse;
    font-size: 12px;
    margin: 4px 0;
}

.shortcuts-table td {
    padding: 2px 14px 2px 8px;
    border-bottom: 1px solid #222;
}

.shortcuts-table td:nth-child(odd) {
    font-weight: bold;
    white-space: nowrap;
}

/* ---------- dialogs ---------- */

.dialogOverlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.dialogBox {
    background: #000;
    color: #fff;
    border: 2px solid #aaa;
    padding: 14px 16px;
    width: 70vw;
    max-width: 560px;
}

.dialogTitle { font-weight: bold; margin-bottom: 10px; }

.dialogFields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.dialogFields label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 13px;
}

.dialogFields input,
.dialogFields select { width: 160px; }

.dialogButtons { display: flex; gap: 6px; justify-content: flex-end; }

/* ---------- tickers editor rows ---------- */

.ticker-list {
    max-height: 40vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ticker-row {
    display: flex;
    gap: 4px;
    align-items: center;
    border: 1px solid #444;
    background: #111;
    padding: 3px 5px;
    flex-wrap: wrap;
}

.ticker-row input { width: 70px; }
.ticker-row select { width: auto; }

.ticker-row-label { font-size: 11px; color: #aaa; }
.ticker-row-end-label { font-size: 11px; font-weight: bold; min-width: 24px; }

.ticker-row .ticker-row-delete { margin-left: auto; }
.dialogFields > .ticker-row-delete { margin-top: 6px; align-self: flex-start; }

.ticker-sync-btn.unsynced { color: #777; }

.ticker-add-btn { margin-top: 4px; align-self: flex-start; }

/* ---------- beatmap picker cards ---------- */

.beatmap-card {
    border: 1px solid #555;
    padding: 6px 10px;
    cursor: pointer;
    background: #111;
}

.beatmap-card:hover { background: #222; }

.beatmap-card-title { font-weight: bold; }
.beatmap-card-artist { font-size: 12px; color: #bbb; }

.beatmap-card-meta { font-size: 11px; color: #999; display: flex; gap: 10px; }

.beatmap-picker-loading,
.beatmap-picker-error { padding: 10px; font-size: 13px; color: #999; }
.beatmap-picker-error { color: #f87171; }