/* ============================================================
   v6 Phase F — Sample track styling
   ============================================================
   - .sample-label row labels (one per slot, name from sampleSlots)
   - .sample-label--empty for unassigned slots
   - .v6-sample-picker popover
*/

@layer v6-components {

  /* Sample row labels — wider than melodic/drum labels so sample names fit */
  .note-labels .sample-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 6px !important;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--v6-border-faint, rgba(255, 255, 255, 0.04));
    border-radius: 4px;
    color: var(--text-secondary, #a1a1aa);
    font-family: var(--font-mono, monospace);
    font-size: 9px !important;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background var(--duration-fast, 120ms),
                color var(--duration-fast, 120ms);
  }
  .note-labels .sample-label:hover {
    background: rgba(236, 72, 153, 0.15);
    color: #fff;
  }
  .note-labels .sample-label--empty {
    color: var(--text-muted, #71717a);
    font-style: italic;
    border-style: dashed;
  }
  .note-labels .sample-label--empty:hover {
    border-color: var(--accent-secondary, #ec4899);
    color: #fff;
  }

  /* ============================================================
     Sample-picker popover
     ============================================================ */
  .v6-sample-picker {
    position: fixed;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    max-width: 360px;
    max-height: 70vh;
    background: var(--v6-panel, var(--surface-300, #18181b));
    border: 1px solid var(--v6-border-strong, rgba(255, 255, 255, 0.14));
    border-radius: 10px;
    box-shadow: var(--shadow-4, 0 16px 48px rgba(0, 0, 0, 0.60));
    overflow: hidden;
    animation: v6-sample-picker-pop 160ms ease-out;
  }
  @keyframes v6-sample-picker-pop {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .v6-sample-picker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--v6-border-faint, rgba(255, 255, 255, 0.06));
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.10), rgba(139, 92, 246, 0.05));
  }
  .v6-sample-picker__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-primary, #fafafa);
  }
  .v6-sample-picker__clear {
    background: transparent;
    border: 1px solid var(--v6-border, rgba(255, 255, 255, 0.10));
    border-radius: 4px;
    padding: 2px 8px;
    color: var(--text-muted, #71717a);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background var(--duration-fast, 120ms), color var(--duration-fast, 120ms);
  }
  .v6-sample-picker__clear:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.50);
    color: #fff;
  }
  .v6-sample-picker__body {
    padding: 8px;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .v6-sample-picker__group + .v6-sample-picker__group {
    margin-top: 8px;
  }
  .v6-sample-picker__group-name {
    display: block;
    padding: 2px 6px 4px;
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--text-muted, #71717a);
  }
  .v6-sample-picker__item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
  }
  .v6-sample-picker__audition {
    flex: 0 0 24px;
    height: 22px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid var(--accent-success, #22c55e);
    border-radius: 4px;
    color: #fff;
    font-size: 9px;
    cursor: pointer;
    transition: background var(--duration-fast, 120ms);
  }
  .v6-sample-picker__audition:hover {
    background: rgba(34, 197, 94, 0.35);
  }
  /* v9.12 — playing: ◼ stop affordance */
  .v6-sample-picker__audition.is-playing {
    background: rgba(236, 72, 153, 0.30);
    border-color: var(--accent-secondary, #ec4899);
  }
  .v6-sample-picker__apply {
    flex: 1;
    text-align: left;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-primary, #fafafa);
    font-size: 12px;
    cursor: pointer;
    transition: background var(--duration-fast, 120ms),
                border-color var(--duration-fast, 120ms);
  }
  .v6-sample-picker__apply:hover {
    background: rgba(236, 72, 153, 0.10);
    border-color: rgba(236, 72, 153, 0.40);
  }

  /* v9.12 — user uploads */
  .v6-sample-picker__head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .v6-sample-picker__upload {
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid var(--accent-primary, #8b5cf6);
    border-radius: 4px;
    padding: 2px 8px;
    color: var(--text-primary, #fafafa);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration-fast, 120ms);
  }
  .v6-sample-picker__upload:hover {
    background: rgba(139, 92, 246, 0.35);
  }
  .v6-sample-picker__group--user .v6-sample-picker__group-name {
    color: var(--accent-primary, #8b5cf6);
  }
  .v6-sample-picker__empty {
    padding: 8px 6px;
    font-size: 11px;
    color: var(--text-muted, #71717a);
    border: 1px dashed var(--v6-border, rgba(255, 255, 255, 0.10));
    border-radius: 4px;
    text-align: center;
  }
  .v6-sample-picker__del {
    flex: 0 0 auto;
    height: 22px;
    padding: 0 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-muted, #71717a);
    font-size: 11px;
    cursor: pointer;
    transition: background var(--duration-fast, 120ms),
                border-color var(--duration-fast, 120ms), color var(--duration-fast, 120ms);
  }
  .v6-sample-picker__del:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.50);
    color: #fff;
  }
  .v6-sample-picker__del.is-confirming {
    background: rgba(239, 68, 68, 0.85);
    border-color: rgba(239, 68, 68, 0.85);
    color: #fff;
    font-weight: 600;
  }
  .v6-sample-picker__hint {
    padding: 6px 12px 8px;
    font-size: 10px;
    color: var(--text-muted, #71717a);
    border-top: 1px solid var(--v6-border-faint, rgba(255, 255, 255, 0.06));
  }
  .v6-sample-picker--drop {
    outline: 2px dashed var(--accent-primary, #8b5cf6);
    outline-offset: -4px;
    background: rgba(139, 92, 246, 0.08);
  }
}