/* ═══════════════════════════════════════════════════════════════
   StyleForge Lite — styles.css
   Mobile-first dark music sequencer aesthetic
   Design: monospace utility type, deep slate bg, amber accent
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  --bg0:      #0e0f14;   /* deepest background */
  --bg1:      #16181f;   /* panel background */
  --bg2:      #1e2029;   /* inset / well */
  --bg3:      #262933;   /* elevated surface */
  --line:     #2e3140;   /* dividers */
  --text0:    #e8eaf0;   /* primary text */
  --text1:    #9499b0;   /* secondary text */
  --text2:    #5a5f78;   /* placeholder / muted */
  --amber:    #f5a623;   /* primary accent */
  --amber-dk: #c07d10;   /* dark amber */
  --amber-lt: #ffd280;   /* light amber glow */
  --cyan:     #4ecdc4;   /* secondary accent – MIDI export */
  --red:      #e05c5c;   /* danger */
  --green:    #5cd68a;   /* active / play */
  --beat-a:   #1a1c25;   /* odd beat column */
  --beat-b:   #141620;   /* even beat column */
  --note-on:  #f5a623;   /* active note cell */
  --note-off: #1e2029;   /* empty note cell */
  --piano-w:  #e8eaf0;   /* white key */
  --piano-b:  #1a1c25;   /* black key */
  --radius:   6px;
  --radius-lg:12px;
  --font-ui:  'Courier New', Courier, monospace;
  --font-body: system-ui, -apple-system, sans-serif;
  --header-h: 52px;
  --transport-h: 52px;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; -webkit-tap-highlight-color: transparent; }
body {
  background: var(--bg0);
  color: var(--text0);
  font-family: var(--font-body);
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Scrollbar (webkit) ──────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg1); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */
.app-header {
  height: var(--header-h);
  background: var(--bg1);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  flex-shrink: 0;
  z-index: 10;
}

.header-left { display: flex; align-items: center; gap: 10px; }

.app-logo {
  font-size: 22px;
  color: var(--amber);
  line-height: 1;
  filter: drop-shadow(0 0 6px var(--amber-dk));
}

.app-title {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.app-name {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: var(--amber-lt);
}

.app-sub {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text1);
  letter-spacing: 0.12em;
}

.app-sub em { color: var(--amber); font-style: normal; }

.transport-status {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text1);
  letter-spacing: 0.1em;
}

.transport-status.playing { color: var(--green); }

/* ═══════════════════════════════════════════════════════════════
   TRANSPORT BAR
   ═══════════════════════════════════════════════════════════════ */
.transport-bar {
  height: var(--transport-h);
  background: var(--bg1);
  border-bottom: 2px solid var(--amber-dk);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  overflow-x: auto;
  flex-shrink: 0;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.06em;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  padding: 6px 12px;
  white-space: nowrap;
  transition: background 0.12s, transform 0.08s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

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

.btn-primary {
  background: var(--amber);
  color: #000;
}
.btn-primary:hover { background: var(--amber-lt); }
.btn-primary.playing { background: var(--red); color: #fff; }

.btn-secondary {
  background: var(--bg3);
  color: var(--text0);
  border: 1px solid var(--line);
}
.btn-secondary:hover { background: var(--bg2); }

.btn-accent {
  background: var(--bg3);
  color: var(--cyan);
  border: 1px solid var(--cyan);
}
.btn-accent:hover { background: rgba(78,205,196,0.12); }

.btn-outline {
  background: transparent;
  color: var(--text1);
  border: 1px solid var(--line);
}
.btn-outline:hover { border-color: var(--amber); color: var(--amber); }

.btn-danger {
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
}
.btn-danger:hover { background: rgba(224,92,92,0.12); }

.btn-lg { padding: 8px 18px; font-size: 12px; }
.btn-sm { padding: 5px 10px; font-size: 10px; }

/* ═══════════════════════════════════════════════════════════════
   APP BODY — flex column on mobile, grid on wider screens
   ═══════════════════════════════════════════════════════════════ */
.app-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (min-width: 700px) {
  .app-body {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "settings  seq       inspector"
      "tracks    seq       inspector";
  }
  .settings-panel { grid-area: settings; }
  .track-list-panel { grid-area: tracks; }
  .sequencer-panel  { grid-area: seq; }
  .inspector-panel  { grid-area: inspector; }
}

/* ═══════════════════════════════════════════════════════════════
   PANELS
   ═══════════════════════════════════════════════════════════════ */
.panel {
  background: var(--bg1);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* On mobile, settings and inspector are collapsible */
@media (max-width: 699px) {
  .settings-panel,
  .inspector-panel {
    flex-shrink: 0;
  }
  .settings-panel .panel-body.collapsed,
  .inspector-panel .panel-body.collapsed {
    display: none;
  }
  .track-list-panel {
    flex-shrink: 0;
    max-height: 120px;
    overflow: hidden;
  }
  .sequencer-panel {
    flex: 1;
    min-height: 0;
  }
}

@media (min-width: 700px) {
  .settings-panel  { overflow-y: auto; }
  .inspector-panel { overflow-y: auto; }
  .track-list-panel { overflow-y: auto; }
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.12em;
  color: var(--text1);
  text-transform: uppercase;
  flex-shrink: 0;
}

.panel-toggle {
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: 10px;
  padding: 2px 4px;
}

.panel-body {
  padding: 10px;
  overflow-y: auto;
  flex: 1;
}

.seq-hint {
  font-size: 9px;
  font-weight: normal;
  color: var(--text2);
  letter-spacing: 0;
  font-family: var(--font-body);
}

/* ═══════════════════════════════════════════════════════════════
   SETTINGS PANEL
   ═══════════════════════════════════════════════════════════════ */
.field-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text1);
  margin-bottom: 12px;
}

.field-input {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text0);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 6px 8px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}

.field-input:focus { border-color: var(--amber); }

.field-sm { font-size: 12px; padding: 4px 6px; }

.tempo-row { display: flex; gap: 6px; align-items: center; }

.slider {
  flex: 1;
  accent-color: var(--amber);
  cursor: pointer;
}

.tempo-num { width: 64px; flex-shrink: 0; }

/* Segmented control */
.seg-control {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.seg-btn {
  flex: 1;
  background: var(--bg2);
  border: none;
  color: var(--text1);
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 6px 4px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.seg-btn.active { background: var(--amber); color: #000; font-weight: bold; }

/* STY sub-panel */
.sty-panel {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 4px;
}

.sty-row { margin-bottom: 6px; }

.sty-status {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text2);
  line-height: 1.5;
  background: var(--bg2);
  padding: 6px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════
   TRACK LIST
   ═══════════════════════════════════════════════════════════════ */
.track-list-body {
  padding: 6px;
}

.track-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.1s, border-color 0.1s;
  margin-bottom: 3px;
}

.track-item:hover { background: var(--bg3); }
.track-item.active {
  background: var(--bg3);
  border-color: var(--amber);
}

.track-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.track-name {
  font-size: 12px;
  font-weight: 600;
  flex: 1;
  color: var(--text0);
}

.track-ch {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text2);
}

.track-note-count {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--amber);
  min-width: 18px;
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════
   SEQUENCER
   ═══════════════════════════════════════════════════════════════ */
.sequencer-body {
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* ── Drum Grid ────────────────────────────────────────────────── */
.drum-grid {
  display: flex;
  flex-direction: column;
  min-width: min-content;
}

.drum-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.drum-row-label {
  width: 72px;
  flex-shrink: 0;
  font-size: 10px;
  font-family: var(--font-ui);
  color: var(--text1);
  padding: 4px 6px;
  letter-spacing: 0.04em;
  user-select: none;
  background: var(--bg2);
  border-right: 1px solid var(--line);
}

.drum-cells {
  display: flex;
}

.drum-cell {
  width: 30px;
  height: 30px;
  border-right: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.08s;
  flex-shrink: 0;
}

.drum-cell.beat-odd  { background: var(--beat-a); }
.drum-cell.beat-even { background: var(--beat-b); }
.drum-cell.active    { background: var(--note-on); }

.drum-cell:hover { filter: brightness(1.3); }

/* Beat header row */
.beat-header {
  display: flex;
  border-bottom: 1px solid var(--line);
}

.beat-header-pad {
  width: 72px;
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--line);
}

.beat-header-cells {
  display: flex;
}

.beat-header-cell {
  width: 30px;
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text2);
  text-align: center;
  padding: 3px 0;
  border-right: 1px solid var(--line);
}

.beat-header-cell.bar-start {
  color: var(--amber);
  font-weight: bold;
}

/* ── Piano Roll ──────────────────────────────────────────────── */
.piano-roll {
  display: flex;
  flex-direction: row;
  min-width: min-content;
  height: 100%;
}

.piano-keyboard {
  width: 48px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  position: sticky;
  left: 0;
  z-index: 2;
}

.piano-note-rows {
  flex: 1;
  overflow: auto;
  position: relative;
}

.piano-key {
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.25);
  user-select: none;
  transition: filter 0.1s;
}

.piano-key:active, .piano-key.preview { filter: brightness(0.7); }

.piano-key.white-key {
  background: var(--piano-w);
  color: #333;
  font-family: var(--font-ui);
  font-size: 8px;
}

.piano-key.black-key {
  background: var(--piano-b);
  color: var(--text2);
  font-size: 8px;
  font-family: var(--font-ui);
  border-bottom: 1px solid #000;
  margin-left: 8px;
  width: 40px;
}

.piano-roll-row {
  display: flex;
  height: 18px;
  border-bottom: 1px solid rgba(0,0,0,0.2);
}

.piano-roll-cell {
  width: 30px;
  height: 18px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.08s;
}

.piano-roll-cell.beat-odd   { background: var(--beat-a); }
.piano-roll-cell.beat-even  { background: var(--beat-b); }
.piano-roll-cell.active     { background: var(--note-on); }
.piano-roll-cell.black-row  { filter: brightness(0.7); }
.piano-roll-cell:hover      { filter: brightness(1.4); }

/* ── Playhead ──────────────────────────────────────────────────── */
.playhead {
  position: absolute;
  top: 0;
  width: 2px;
  background: var(--green);
  pointer-events: none;
  z-index: 5;
  opacity: 0.8;
  height: 100%;
  transition: left 0.05s linear;
}

/* ═══════════════════════════════════════════════════════════════
   INSPECTOR
   ═══════════════════════════════════════════════════════════════ */
.inspector-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.inspector-label {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text2);
  letter-spacing: 0.08em;
  min-width: 48px;
}

.inspector-value {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--amber);
}

.inspector-actions {
  display: flex;
  gap: 6px;
  margin: 10px 0;
}

.inspector-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 10px 0;
}

.inspector-section-label {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.export-log {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text1);
  line-height: 1.6;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  word-break: break-word;
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}

.log-ok   { color: var(--green); }
.log-warn { color: var(--amber); }
.log-err  { color: var(--red); }

/* ═══════════════════════════════════════════════════════════════
   TRACK COLOR DOTS
   ═══════════════════════════════════════════════════════════════ */
.color-0 { background: #f5a623; }
.color-1 { background: #4ecdc4; }
.color-2 { background: #9b59b6; }
.color-3 { background: #e74c3c; }
.color-4 { background: #3498db; }
.color-5 { background: #2ecc71; }
.color-6 { background: #e67e22; }
.color-7 { background: #1abc9c; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE TWEAKS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 699px) {
  .settings-panel .panel-body { padding: 8px; }
  .inspector-panel .panel-body { padding: 8px; }
  .field-label { font-size: 9px; margin-bottom: 8px; }
  .tempo-num { width: 52px; }
  .drum-row-label { width: 58px; font-size: 9px; }
  .drum-cell { width: 26px; height: 26px; }
  .beat-header-cell { width: 26px; }
  .piano-roll-cell { width: 26px; }
  .piano-keyboard { width: 40px; }
  .piano-key { height: 16px; }
  .piano-roll-row { height: 16px; }
  .piano-roll-cell { height: 16px; }
  .track-list-panel { max-height: 100px; }
  .transport-bar { padding: 0 6px; gap: 4px; }
  .btn { padding: 5px 8px; font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   UTILITY
   ═══════════════════════════════════════════════════════════════ */
.hidden { display: none !important; }

.no-scroll { overflow: hidden; }

select option { background: var(--bg1); }