/* ============================================================
   v6 legacy bridge — temporary compatibility shims that make the
   new SVG icon system render correctly inside v5-era containers
   (.btn .icon, .btn-icon-sm, .setting-label, .edit-context-icon,
   .song-name-edit-icon, etc.).

   Each rule here exists ONLY because the legacy v5 styling assumed
   text-based emoji icons sized via font-size. v6 SVGs need explicit
   width/height, so containers need to become inline-flex to center
   them and reserve no extra text-line height.

   This file gets deleted in P5/P6 once we land the full v6 layout
   and stop wrapping SVGs in legacy .icon spans.
   ============================================================ */

@layer v6-legacy-bridge {

  /* Standard button icon wrapper from v5: `<span class="icon">EMOJI</span>` */
  .btn .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .btn .icon .v6-icon {
    width: var(--icon-md);
    height: var(--icon-md);
    color: currentColor;
  }
  .btn.btn-lg .icon .v6-icon {
    width: var(--icon-lg);
    height: var(--icon-lg);
  }

  /* Icon-only buttons (no text label) need extra left/right padding cleanup
     so the button doesn't look lopsided. */
  .btn.btn-icon-only {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Small icon-only buttons (toggles, like scale highlight) */
  .btn-icon-sm .v6-icon {
    width: 14px;
    height: 14px;
    color: inherit;
  }

  /* Compact settings row labels: align inline SVG with text baseline */
  .setting-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
  }
  .setting-label .v6-icon {
    color: var(--text-muted);
  }

  /* Song-identity-bar pencil icon (appears on hover of the song name) */
  .song-name-edit-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }
  .song-name-edit-icon .v6-icon {
    color: currentColor;
  }

  /* Edit context banner icon (left side: pencil for "now editing") */
  .edit-context-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    line-height: 1;
  }
  .edit-context-icon .v6-icon {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
  }

  /* Link/unlink toggle inside edit context banner */
  .edit-context-link-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .edit-context-link-toggle .link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .edit-context-link-toggle .link-icon .v6-icon {
    width: 14px;
    height: 14px;
    color: currentColor;
  }

  /* Section help-icon (?) circles — used near section labels */
  .section-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .section-help-icon .v6-icon {
    color: var(--text-muted);
  }

  /* ============================================================
     Decorative icons — large icons in the welcome modal feature
     grid, workflow diagram, track-type picker, empty states.
     These were emoji at ~48px; bump v6 SVGs to match.
     ============================================================ */
  .feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
    color: var(--accent-primary);
  }
  .feature-icon .v6-icon {
    width: 36px;
    height: 36px;
  }

  .workflow-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--accent-primary);
  }
  .workflow-step-icon .v6-icon {
    width: 32px;
    height: 32px;
  }

  .workflow-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
  }
  .workflow-arrow .v6-icon {
    width: 24px;
    height: 24px;
  }

  .track-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
    color: var(--accent-primary);
  }
  .track-type-icon .v6-icon {
    width: 32px;
    height: 32px;
  }

  .empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    color: var(--text-muted);
    opacity: 0.6;
  }
  .empty-icon .v6-icon {
    width: 32px;
    height: 32px;
  }

  /* Drag handle (track header) — needs to be subtle and centered */
  .drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: grab;
  }
  .drag-handle:hover {
    color: var(--text-secondary);
  }
  .drag-handle:active {
    cursor: grabbing;
  }
  .drag-handle .v6-icon {
    width: 14px;
    height: 14px;
  }

  /* Sidebar collapse/expand toggle — subtle chevron */
  .sidebar-collapse-btn,
  .sidebar-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .sidebar-collapse-btn .v6-icon,
  .sidebar-expand-btn .v6-icon {
    color: var(--text-secondary);
  }
}