/* ============================================================
   v6 Shell — DAW layout polish + bottom status bar
   ============================================================

   Keeps the existing .daw-layout (sidebar + main-content) intact
   but gives it a more professional, dense, Ableton/Bitwig feel:
     - Body becomes a true 3-row grid (body / statusbar) so the
       status bar lives at the bottom of the viewport regardless
       of content height
     - Existing header acts as the v6 top bar — sticky, refined
     - Sidebar + main pane get tightened gutters + cleaner borders
     - Status bar is dense, fixed at bottom, full-width

   No DOM reparent is required. The 3-pane shell with a dedicated
   right rail comes in P1 once we have content (Inspector / Mixer)
   to put in it.
*/

@layer v6-shell {

  /* ============================================================
     Root body — 3-row grid that pins the statusbar at the bottom
     ============================================================ */
  html, body {
    height: 100%;
  }
  body {
    margin: 0;
    background: var(--v6-bg, var(--surface-100, #0a0a0b));
    color: var(--text-primary, #fafafa);
    font-family: var(--font-sans, system-ui, sans-serif);
    display: grid;
    grid-template-rows: 1fr var(--statusbar-h, 26px);
    grid-template-columns: 1fr;
    overflow: hidden; /* status bar is always visible; only inner panes scroll */
  }

  /* The existing .daw-layout occupies the top row of the body grid.
     Legacy CSS sets min-height:100vh on .daw-layout which would push
     past the status bar; clamp to the grid cell instead. */
  body > .daw-layout {
    min-height: 0;
    height: 100%;
    overflow: hidden;
    grid-row: 1;
  }

  /* Legacy sidebar uses height:100vh + position:sticky. Inside the new
     grid cell, 100% of the cell is correct and sticky is redundant. */
  body > .daw-layout > .pattern-library-sidebar {
    height: 100%;
    position: relative;
    top: auto;
  }

  /* Statusbar lives in row 2 */
  body > .v6-statusbar {
    grid-row: 2;
  }

  /* Modals + tooltip are detached overlays — keep them out of grid flow */
  body > .modal,
  body > .v6-tooltip,
  body > #v6-icon-sprite-root {
    position: fixed;
  }

  /* ============================================================
     Sticky / dense top bar feel on existing <header>
     ============================================================ */
  .main-content header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky, 200);
    background: var(--v6-panel, var(--surface-300, #18181b));
    border-bottom: 1px solid var(--v6-border, rgba(255,255,255,0.08));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* Polished control panel (transport + edit context) — tighter spacing */
  .control-panel {
    background: linear-gradient(180deg,
      var(--surface-300, #18181b) 0%,
      var(--surface-200, #111113) 100%);
    border-bottom: 1px solid var(--v6-border-faint, rgba(255,255,255,0.04));
  }

  /* Inner main pane scrolls independently */
  .main-content {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
  }
  .main-content::-webkit-scrollbar {
    width: 10px;
  }
  .main-content::-webkit-scrollbar-track {
    background: transparent;
  }
  .main-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 5px;
    border: 2px solid var(--v6-bg, #0a0a0b);
  }
  .main-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.16);
  }

  /* Sidebar — slightly raised tone + cleaner right border */
  .pattern-library-sidebar {
    background: var(--v6-panel, var(--surface-300, #18181b));
    border-right: 1px solid var(--v6-border, rgba(255,255,255,0.08));
  }

  /* ============================================================
     STATUS BAR
     ============================================================ */
  .v6-statusbar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 12px;
    height: var(--statusbar-h, 26px);

    background: var(--v6-bg, var(--surface-100, #0a0a0b));
    border-top: 1px solid var(--v6-border, rgba(255,255,255,0.08));

    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 11px;
    line-height: 1;
    color: var(--text-muted, #71717a);
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
  }

  .v6-statusbar__group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    min-width: 0;
    height: 100%;
    cursor: default;
  }

  .v6-statusbar__group:hover {
    background: var(--surface-300, #18181b);
    color: var(--text-secondary, #a1a1aa);
  }

  .v6-statusbar__group .v6-icon {
    color: var(--text-muted, #71717a);
    flex-shrink: 0;
  }

  .v6-statusbar__sep {
    width: 1px;
    height: 14px;
    background: var(--v6-border, rgba(255,255,255,0.08));
    flex-shrink: 0;
  }

  .v6-statusbar__spacer {
    flex: 1;
  }

  .v6-statusbar__label {
    font-weight: 500;
    color: var(--text-muted, #71717a);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
  }

  .v6-statusbar__value {
    font-family: var(--font-mono, 'SF Mono', monospace);
    font-size: 11px;
    color: var(--text-secondary, #a1a1aa);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
  }

  .v6-statusbar__muted {
    color: var(--text-muted, #71717a);
    opacity: 0.5;
    padding: 0 2px;
  }

  /* Status dots — colored circles indicating state */
  .v6-statusbar__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted, #71717a);
    flex-shrink: 0;
    transition: background 120ms ease, box-shadow 200ms ease;
  }
  .v6-statusbar__dot[data-state="idle"]   { background: var(--text-muted, #52525b); }
  .v6-statusbar__dot[data-state="ready"]  { background: var(--accent-info, #06b6d4); }
  .v6-statusbar__dot[data-state="active"] {
    background: var(--accent-success, #22c55e);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
  }
  .v6-statusbar__dot[data-state="saved"]  { background: var(--accent-success, #22c55e); }
  .v6-statusbar__dot[data-state="dirty"]  { background: var(--accent-warning, #f59e0b); }
  .v6-statusbar__dot[data-state="error"]  { background: var(--accent-danger, #ef4444); }

  /* Save/editing groups stay more legible than ambient labels */
  .v6-statusbar__group--save .v6-statusbar__value,
  .v6-statusbar__group--editing .v6-statusbar__value {
    color: var(--text-primary, #fafafa);
    font-family: var(--font-sans, system-ui);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
  }

  /* ============================================================
     Master peak meter (in playback bar)
     ============================================================ */
  .v6-master-meter {
    display: inline-flex;
    align-items: center;
    width: 140px;
    height: 22px;
    margin-left: 8px;
    padding: 2px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--v6-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-sm, 4px);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  .v6-master-meter__canvas {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* ============================================================
     Per-track peak meter — injected by TrackMeters.js into
     each .track-controls (sits left of the volume slider).
     ============================================================ */
  .v6-track-meter {
    display: inline-flex;
    align-items: center;
    width: 60px;
    height: 18px;
    padding: 2px;
    margin-right: 6px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--v6-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-sm, 4px);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
  }
  .v6-track-meter__canvas {
    width: 100%;
    height: 100%;
    display: block;
  }
}

/* Metronome READOUT in the status bar.
   It was briefly a second toggle; item 2.2 gives the metronome one owner (the
   Tempo panel, per docs/visual-spec.md §8) and leaves this as the
   always-visible indicator — so: no pointer, no hover affordance, and the lit
   state is green (the spec's colour for Metronome/Follow), not the purple that
   now means "the AI did this". */
@layer components {
  .v6-statusbar__metronome {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted, #71717a);
    transition: color 120ms ease, background 120ms ease;
  }
  .v6-statusbar__metronome.is-on {
    color: var(--color-transport-play, #22c55e);
    background: rgba(34, 197, 94, 0.14);
  }
}