/* ==========================================================
   Drum Notation Player — Editor Styles v1.7
   Scoped to .dnp-editor-wrap so both admin and public forms
   are fully styled identically.
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Shared CSS variables via class ── */
.dnp-editor-wrap,
.dnp-editor-wrap *,
.dnp-editor-wrap *::before,
.dnp-editor-wrap *::after {
    box-sizing: border-box;
}

.dnp-editor-wrap {
    --bg:             #f7f7f5;
    --surface:        #ffffff;
    --toolbar-bg:     #ffffff;
    --grid-bg:        #fafafa;
    --border:         #e0e0dc;
    --border-mid:     #ccc;
    --text:           #1a1a1a;
    --muted:          #888;
    --label-bg:       #f0f0ec;
    --label-w:        110px;
    --cell-empty:     #eae9e5;
    --cell-on:        #e63946;
    --cell-on-h:      #ff6b75;
    --cell-on-border: #c1121f;
    --accent:         #e63946;
    --accent2:        #1d3557;
    --row-h:          28px;
    --font:           'Inter', sans-serif;
    --mono:           'JetBrains Mono', monospace;

    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}

/* Admin editor: min-height to fill screen */
#dnp-editor-app.dnp-editor-wrap { min-height: 600px; }

/* ── Toolbar ── */
.dnp-ed-toolbar {
    background: var(--toolbar-bg);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 10px;
    gap: 4px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.dnp-ed-toolbar-sep {
    width: 1px; height: 22px;
    background: var(--border-mid);
    margin: 0 6px;
    flex-shrink: 0;
}

.dnp-ed-toolbar-group {
    display: flex; align-items: center; gap: 3px;
    flex-wrap: wrap;
}

.dnp-ed-tlabel {
    font-size: 0.68rem; color: var(--muted); font-weight: 500;
    margin-right: 4px; white-space: nowrap;
}

/* Icon buttons */
.dnp-ed-tbtn {
    width: 30px; height: 30px;
    border: 1px solid var(--border); border-radius: 4px;
    background: var(--surface); color: var(--text);
    font-size: 0.8rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.1s; flex-shrink: 0;
}
.dnp-ed-tbtn:hover { background: var(--bg); border-color: var(--border-mid); }
.dnp-ed-tbtn.danger:hover { color: var(--accent); border-color: var(--accent); }
.dnp-ed-tbtn svg { width: 14px; height: 14px; }

/* Text buttons */
.dnp-ed-tbtn-text {
    height: 30px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: 4px;
    background: var(--surface); color: var(--text);
    font-family: var(--font); font-size: 0.75rem; font-weight: 500;
    cursor: pointer;
    display: flex; align-items: center; gap: 5px;
    transition: all 0.1s; white-space: nowrap; flex-shrink: 0;
}
.dnp-ed-tbtn-text:hover { background: var(--bg); border-color: var(--border-mid); }

/* Play button */
.dnp-ed-play-btn {
    height: 30px; padding: 0 14px;
    border: none; border-radius: 4px;
    background: var(--accent); color: #fff;
    font-family: var(--font); font-size: 0.78rem; font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: all 0.1s; flex-shrink: 0;
}
.dnp-ed-play-btn:hover { background: #ff3a47; }
.dnp-ed-play-btn.playing { background: #c1121f; }
.dnp-ed-play-btn svg { width: 12px; height: 12px; }

/* BPM */
.dnp-ed-tempo-wrap { display: flex; align-items: center; gap: 6px; }
.dnp-ed-tempo-num {
    font-family: var(--mono); font-size: 0.85rem; font-weight: 500;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 4px; padding: 2px 7px;
    min-width: 40px; text-align: center;
}
.dnp-ed-bpm-slider {
    width: 80px; -webkit-appearance: none; appearance: none;
    height: 3px; background: var(--border-mid); border-radius: 2px;
    cursor: pointer; outline: none;
}
.dnp-ed-bpm-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 12px; height: 12px;
    background: var(--accent); border-radius: 50%; cursor: pointer;
}

/* Title input */
.dnp-ed-title-in {
    background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
    color: var(--text); font-family: var(--font); font-size: 0.78rem; font-weight: 500;
    padding: 0 8px; height: 30px; width: 150px; outline: none;
}
.dnp-ed-title-in:focus { border-color: var(--accent); }

/* Steps select */
.dnp-ed-steps-sel {
    background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
    color: var(--text); font-family: var(--font); font-size: 0.75rem;
    padding: 0 6px; height: 30px; cursor: pointer; outline: none;
}

/* Metronome toggle */
.dnp-ed-metro-btn {
    height: 30px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: 4px;
    background: var(--surface); color: var(--muted);
    font-family: var(--font); font-size: 0.74rem; cursor: pointer;
    transition: all 0.1s; white-space: nowrap;
}
.dnp-ed-metro-btn:hover { border-color: var(--accent2); color: var(--accent2); }
.dnp-ed-metro-btn.on { background: var(--accent2); color: #fff; border-color: var(--accent2); }

/* ── Score area ── */
.dnp-ed-score-area {
    background: var(--surface);
    border-bottom: 2px solid var(--border);
    padding: 12px 16px 8px;
    flex-shrink: 0;
    overflow-x: auto;
}

.dnp-ed-score-canvas {
    display: block;
    width: 100%;
}

/* ── Grid section ── */
.dnp-ed-grid-section {
    flex: 1;
    overflow: auto;
    background: var(--grid-bg);
    min-height: 200px;
}

.dnp-ed-grid-inner { min-width: 600px; }

/* Bar header */
.dnp-ed-bar-header {
    display: flex; background: var(--toolbar-bg);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 10;
}

.dnp-ed-bar-label-cell {
    width: var(--label-w); flex-shrink: 0;
    background: var(--toolbar-bg);
    border-right: 2px solid var(--border-mid);
    font-size: 0.65rem; font-weight: 600; color: var(--muted);
    display: flex; align-items: center; padding-left: 10px;
    text-transform: uppercase; letter-spacing: 0.08em;
    min-height: 26px;
}

.dnp-ed-bar-cell {
    flex: 1; border-right: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    gap: 4px; padding: 3px 4px;
    font-size: 0.7rem; color: var(--muted); font-weight: 500;
    min-height: 26px;
}
.dnp-ed-bar-num { font-family: var(--mono); font-size: 0.75rem; color: var(--accent2); font-weight: 600; }

/* Division row */
.dnp-ed-div-row {
    display: flex; background: var(--label-bg);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 26px; z-index: 9;
}

.dnp-ed-div-label {
    width: var(--label-w); flex-shrink: 0;
    font-size: 0.62rem; font-weight: 600; color: var(--muted);
    border-right: 2px solid var(--border-mid);
    display: flex; align-items: center; padding-left: 10px;
    text-transform: uppercase; letter-spacing: 0.06em; height: 20px;
}

.dnp-ed-div-cell {
    flex: 1; border-right: 1px solid var(--border);
    font-family: var(--mono); font-size: 0.58rem; color: #aaa;
    display: flex; align-items: center; justify-content: center;
    height: 20px;
}
.dnp-ed-div-cell.beat { color: var(--accent2); font-weight: 600; border-right: 1px solid #bbb; }

/* Instrument rows */
.dnp-ed-inst-row {
    display: flex; border-bottom: 1px solid var(--border);
    height: var(--row-h);
}
.dnp-ed-inst-row:last-child { border-bottom: none; }
.dnp-ed-inst-row:hover { background: rgba(0,0,0,0.01); }

.dnp-ed-inst-label {
    width: var(--label-w); flex-shrink: 0;
    display: flex; align-items: center; gap: 6px;
    padding: 0 8px 0 10px;
    border-right: 2px solid var(--border-mid);
    background: var(--label-bg);
    font-size: 0.74rem; font-weight: 500; color: var(--text);
    cursor: default; user-select: none;
}

.dnp-ed-inst-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* Step cells */
.dnp-ed-step {
    flex: 1; border-right: 1px solid var(--border);
    cursor: pointer; background: var(--cell-empty);
    transition: background 0.07s; position: relative; min-width: 0;
}
.dnp-ed-step:hover { background: #d8d8d3; }
.dnp-ed-step.beat-start { border-left: 1px solid #bbb; }
.dnp-ed-step.bar-start  { border-left: 2px solid var(--border-mid); }
.dnp-ed-step.on {
    background: var(--cell-on);
    border-color: var(--cell-on-border);
}
.dnp-ed-step.on:hover { background: var(--cell-on-h); }
.dnp-ed-step.playhead { outline: 2px solid rgba(230,57,70,0.7); outline-offset: -2px; }
.dnp-ed-step.on.playhead { background: #fff3f3; outline: 2px solid var(--accent); }

/* Snare variant badge */
.dnp-ed-step[data-inst="S"].on[data-sv]::after {
    content: attr(data-sv);
    position: absolute; top: 1px; right: 2px;
    font-size: 8px; font-weight: 700;
    color: var(--sv-color, #fff); line-height: 1; pointer-events: none;
}
.dnp-ed-step[data-inst="S"].on[data-sv] {
    border-top: 2px solid var(--sv-color, var(--cell-on-border));
}

/* ── Bottom panel (admin only) ── */
.dnp-ed-bottom {
    background: var(--toolbar-bg); border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; flex-shrink: 0; flex-wrap: wrap;
}
.dnp-ed-sc-label {
    font-size: 0.65rem; color: var(--muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
}
.dnp-ed-sc-out {
    flex: 1; min-width: 200px;
    background: #f5f5f2; border: 1px solid var(--border); border-radius: 4px;
    color: var(--accent2); font-family: var(--mono); font-size: 0.7rem;
    padding: 0 10px; height: 30px; outline: none;
    white-space: nowrap; overflow: hidden;
}
.dnp-ed-copy-btn {
    height: 30px; padding: 0 14px;
    background: var(--accent2); border: none; border-radius: 4px;
    color: #fff; font-family: var(--font); font-size: 0.75rem; font-weight: 600;
    cursor: pointer; white-space: nowrap; transition: background 0.1s;
}
.dnp-ed-copy-btn:hover { background: #2a4a6e; }

/* ── Context menu ── */
.dnp-ctx-menu {
    position: fixed;
    background: #1a1a2e; border: 1px solid #2a2a3e; border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    z-index: 99999; min-width: 180px; overflow: hidden;
    font-family: 'Inter', sans-serif; font-size: 0.78rem;
    animation: dnp-ctx-in 0.1s ease;
}
@keyframes dnp-ctx-in { from { opacity:0; transform:scale(0.96) translateY(-4px); } to { opacity:1; transform:none; } }
.dnp-ctx-title {
    padding: 8px 12px 6px; font-size: 0.62rem; text-transform: uppercase;
    letter-spacing: 0.1em; color: #666; border-bottom: 1px solid #2a2a3e; background: #111;
}
.dnp-ctx-item {
    padding: 9px 12px; cursor: pointer; color: #ccc;
    display: flex; align-items: center; gap: 10px; transition: background 0.08s;
}
.dnp-ctx-item:hover { background: #2a2a3e; color: #fff; }
.dnp-ctx-item.active { background: rgba(255,255,255,0.05); color: #fff; font-weight: 600; }
.dnp-ctx-item.active::before { content: '✓'; color: #e63946; font-size: 0.7rem; }
.dnp-ctx-item:not(.active)::before { content: ''; display: inline-block; width: 0.7rem; }

/* ── Public submit form footer ── */
.dnp-submit-form {
    background: #fafaf8; border-top: 2px solid var(--border);
    padding: 20px; flex-shrink: 0;
}
.dnp-submit-form-title {
    font-size: 0.95rem; font-weight: 600; margin: 0 0 14px; color: #1a1a2e;
    font-family: var(--font);
}
.dnp-submit-fields {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;
}
.dnp-submit-field--wide { grid-column: 1 / -1; }
.dnp-submit-field label {
    display: block; font-size: 0.78rem; font-weight: 500;
    color: #555; margin-bottom: 5px; font-family: var(--font);
}
.dnp-submit-hint { font-weight: 400; color: #aaa; }
.dnp-submit-field input,
.dnp-submit-field textarea {
    width: 100%; padding: 8px 10px;
    border: 1px solid #ddd; border-radius: 6px;
    font-family: var(--font); font-size: 0.85rem; color: #1a1a2e;
    outline: none; transition: border-color 0.15s; background: #fff;
}
.dnp-submit-field input:focus,
.dnp-submit-field textarea:focus { border-color: #1d3557; }
.dnp-submit-field textarea { resize: vertical; }
.dnp-submit-msg {
    padding: 10px 14px; border-radius: 6px;
    font-size: 0.85rem; margin-bottom: 12px;
    font-family: var(--font);
}
.dnp-submit-msg.success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.dnp-submit-msg.error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.dnp-submit-btn {
    width: 100%; padding: 12px;
    background: #e63946; border: none; border-radius: 6px;
    color: #fff; font-family: var(--font); font-size: 0.9rem; font-weight: 600;
    cursor: pointer; transition: background 0.15s;
}
.dnp-submit-btn:hover { background: #c1121f; }
.dnp-submit-btn:disabled { background: #ccc; cursor: not-allowed; }

/* ── Responsive ── */
@media (max-width: 640px) {
    .dnp-editor-wrap {
        --label-w: 80px;
        --row-h: 24px;
    }
    .dnp-ed-title-in { width: 110px; }
    .dnp-ed-bpm-slider { width: 60px; }
    .dnp-submit-fields { grid-template-columns: 1fr; }
    .dnp-ed-toolbar-sep { display: none; }
}