/* ============================================================
   v6 Layout overhaul + density compaction
   ============================================================
   Two concerns:
     1. The song timeline (arrangement) was getting scrolled out of
        the viewport because tracks + strips consume too much space.
        Fix: pin the timeline at the BOTTOM of .main-content so it's
        always visible, and let the editor area scroll above it.
     2. Tracks were too tall (5 × ~190px = ~1000px). Cells were
        ~24px tall — way more than a step sequencer needs.
        Fix: cell rows shrink to 14-16px, headers to 36-38px,
        strips trim 30-40% of vertical space.
   These rules use !important sparingly to win over legacy style-v2.
   The intent is for this to become the default; not a toggle.
*/

@layer v6-shell {

  /* ============================================================
     CRITICAL: pin the song timeline at the bottom of .main-content
     ============================================================
     Layout becomes:
       .main-content (flex column, overflow hidden)
         > .container (flex 1, overflow-y auto — tracks scroll here)
         > #songTimelineContainer (flex-shrink 0 — always visible)
     The status bar stays pinned below via the existing body grid.
  */
  body > .daw-layout > .main-content {
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body > .daw-layout > .main-content > .container {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.10) transparent;
  }
  body > .daw-layout > .main-content > .container::-webkit-scrollbar {
    width: 9px;
  }
  body > .daw-layout > .main-content > .container::-webkit-scrollbar-track {
    background: transparent;
  }
  body > .daw-layout > .main-content > .container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    border: 2px solid var(--v6-bg, #0a0a0b);
  }
  body > .daw-layout > .main-content > .container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
  }

  body > .daw-layout > .main-content > #songTimelineContainer {
    flex: 0 0 auto;
    max-height: 40vh;
    min-height: 264px; /* room for sections strip + header + two-lane (178px) canvas */
    overflow: hidden;
    background: var(--surface-200, #111113);
    border-top: 1px solid var(--v6-border-strong, rgba(255, 255, 255, 0.14));
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45);
    /* Make the timeline visually distinct from the editor area above */
    position: relative;
    z-index: 1;
  }
}

/* ============================================================
   COMPACT TRACKS — the big win
   ============================================================ */
@layer v6-editor {

  /* Track container — tighter gap between tracks */
  .tracks-container {
    gap: 6px !important;
    padding-bottom: 4px;
  }

  /* Track wrapper */
  .track {
    margin: 0 !important;
  }

  /* Track header row — 38px instead of ~60-80px */
  .track .track-header {
    min-height: 38px !important;
    padding: 4px 10px !important;
    gap: 6px;
  }

  .track .track-info {
    gap: 4px !important;
  }
  .track .track-title {
    gap: 6px !important;
    flex-wrap: nowrap;
  }
  .track .track-controls {
    gap: 4px !important;
  }

  /* Track header buttons — smaller + flatter */
  .track-header .btn-edit,
  .track-header .btn-ai-generate {
    height: 24px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }
  .track-header .btn-edit .btn-text,
  .track-header .btn-ai-generate .btn-text {
    font-size: 11px;
  }
  .track-header .btn-octave {
    height: 20px !important;
    width: 20px;
    padding: 0 !important;
    font-size: 12px;
    line-height: 1;
  }
  .track-header .btn-icon {
    width: 22px !important;
    height: 22px !important;
    padding: 0;
  }
  .track-header .volume-slider {
    width: 56px !important;
    height: 3px !important;
  }
  .track-header select.instrument-select,
  .track-header select.drumkit-select {
    height: 24px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
  }
  .track-header .drag-handle {
    width: 12px;
  }

  /* ============================================================
     CELL SIZE — the single biggest space saver
     ============================================================
     Cells go from ~24px to 14px tall. Pattern remains readable
     and clickable; just less wasteful whitespace.
  */
  .sequencer-grid {
    grid-template-rows: repeat(8, 14px) !important;
    grid-auto-rows: 14px !important;
    gap: 1px !important;
    padding: 4px !important;
  }
  .sequencer-grid .cell {
    height: 14px !important;
    min-height: 14px !important;
    min-width: 0;
    border-radius: 2px !important;
  }

  /* Note labels (pitch column on the left of each grid) */
  .note-labels {
    gap: 1px !important;
    padding: 4px 0 !important;
  }
  .note-labels .note-label {
    height: 14px !important;
    min-height: 14px !important;
    line-height: 14px !important;
    font-size: 9px !important;
    padding: 0 4px !important;
  }
  .note-labels .note-label.drum-label {
    font-size: 10px !important;
  }

  /* Whole-track wrapper (sequencer + labels) */
  .sequencer-wrapper {
    gap: 4px !important;
    padding: 0 !important;
  }
}

/* ============================================================
   COMPACT STRIPS — chord progression, tension, sections
   ============================================================ */
@layer v6-components {

  /* Chord progression strip */
  .v6-chord-strip {
    padding: 5px 14px !important;
    gap: 10px !important;
  }
  .v6-chord-slot {
    min-height: 36px !important;
    padding: 4px 8px !important;
  }
  .v6-chord-slot__degree {
    font-size: 12px !important;
  }
  .v6-chord-slot__name {
    font-size: 10px !important;
  }

  /* Tension curve lane — slimmer */
  .v6-tension-lane {
    padding: 4px 14px 6px !important;
    gap: 10px !important;
  }
  .v6-tension-lane__canvas-wrap {
    height: 42px !important;
  }
  .v6-tension-lane__label {
    padding-top: 14px !important;
    width: 80px !important;
  }

  /* Section strip — tighter.
     Horizontal padding must stay ZERO here (item 2.6): the band row is
     positioned from the canvas's own zoom/scroll, so any inset on the strip
     shifts every band off the clip column it labels. This rule used to say
     `padding: 5px 14px !important`, and being both later in @layer
     v6-components and !important it beat section-strip.css outright — so the
     alignment would have been 14px out with nothing in the aligned file to
     explain it. */
  .v6-section-strip {
    padding: 2px 0 3px !important;
  }
  .v6-section-strip__bands {
    height: 26px !important;
  }
  .v6-section-band {
    font-size: 10px !important;
    padding: 0 6px !important;
  }

  /* Edit context banner — tighter */
  .edit-context-banner {
    padding: 4px 14px !important;
    min-height: 32px !important;
  }
  .edit-context-name {
    font-size: 13px !important;
  }
  .edit-context-badge {
    font-size: 10px !important;
    padding: 1px 6px !important;
  }
}

/* ============================================================
   Smaller AddTrack button — was a giant centered CTA
   ============================================================ */
@layer v6-editor {
  #addTrackBtn,
  button[id="addTrackBtn"],
  .btn-add-track {
    height: 28px !important;
    padding: 0 14px !important;
    font-size: 11px !important;
    margin: 8px auto !important;
    min-width: 130px !important;
    width: auto !important;
    background: rgba(139, 92, 246, 0.10) !important;
    border: 1px dashed rgba(139, 92, 246, 0.50) !important;
    color: var(--accent-primary, #8b5cf6) !important;
    font-weight: 600 !important;
  }
  #addTrackBtn:hover,
  .btn-add-track:hover {
    background: rgba(139, 92, 246, 0.20) !important;
    border-style: solid !important;
  }
}

/* ============================================================
   Header (top bar) — tighten vertical padding
   ============================================================ */
@layer v6-shell {
  .main-content header {
    padding: 6px 14px !important;
  }
  .main-content .control-panel {
    padding: 4px 14px !important;
  }
  .main-content .playback-bar {
    padding: 4px 0 !important;
    gap: 8px;
  }
  .main-content .pattern-management-bar {
    padding: 0 !important;
    /* This row often empty in V5 — collapse */
    min-height: 0 !important;
  }
}

/* ============================================================
   Pattern library cards — tighter so more fit per scroll
   ============================================================ */
@layer v6-components {
  .pattern-card {
    padding: 6px !important;
    gap: 4px !important;
  }
  .pattern-card .pattern-name {
    font-size: 12px;
    line-height: 1.2;
  }
  .pattern-preview {
    padding: 4px !important;
  }
  .preview-grid {
    height: 44px !important;
  }
}

/* ============================================================
   Song timeline (when pinned) — tighten header so canvas gets
   more room
   ============================================================ */
@layer v6-shell {
  #songTimelineContainer .timeline-teaser-bar,
  #songTimelineContainer .timeline-header {
    padding: 4px 12px !important;
    min-height: 30px !important;
  }
  /* Make the canvas itself fill remaining space in the panel */
  #songTimelineContainer .timeline-canvas-wrapper,
  #songTimelineContainer canvas.timeline-canvas {
    /* defer to existing rules but ensure it doesn't overflow */
  }
}