/* ============================================================
   ROW 2 — PANEL STABILIZATION (AUTO-DJ, SMART AUTO-MIX, MASTER MIX, DECK CONTROL)
   ============================================================ */

/* Parent row: balanced spacing, no stretching */
#dxl-control-row {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
}

/* AUTO-DJ PANEL WIDTH */
#dxl-auto-dj-panel {
  width: 300px;
  max-width: 320px;
  min-height: 200px;
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* SMART AUTO-MIX PANEL WIDTH */
#dxl-smart-auto-mix-panel {
  width: 240px;
  max-width: 260px;
  min-height: 200px;
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* MASTER MIX PANEL WIDTH */
#dxl-master-mix-panel {
  width: 220px;
  max-width: 240px;
  min-height: 200px;
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* DECK CONTROL PANEL WIDTH */
#dxl-deck-control-bar {
  width: 300px;
  max-width: 320px;
  min-height: 200px;
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Select + buttons tuned to fit 380px panel */
#dxl-deck-control-bar select {
  width: 140px;
  max-width: 140px;
  font-size: 12px;
  padding: 4px 6px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#dxl-deck-control-bar button {
  width: 56px;
  font-size: 11px;
  padding: 4px 5px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   LIBRARY + PLAYLIST ROW — unchanged
   ============================================================ */

#dxl-library-row {
  display: grid;
  grid-template-columns: 380px 360px;
  justify-content: center;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

#dxl-library-column {
  width: 380px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#dxl-playlist-column {
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#dxl-playlist {
  max-height: calc(3 * 60px);
  overflow-y: auto;
  overflow-x: hidden;
}

.dxl-playlist-item {
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  background: #3a2a24;
  border: 1px solid #7b4f3c;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dxl-playlist-item:hover {
  background: #4a3328;
}

.dxl-playlist-title {
  font-weight: 600;
  color: #f3e7d2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dxl-playlist-meta {
  font-size: 0.75rem;
  color: #d8c7b0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   WAVEFORM CONTAINER — unchanged
   ============================================================ */

#waveform-container {
  width: 80%;
  max-width: 450px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
/* ============================================================
   AUTO-DJ — INTERNAL SPACING OPTIMIZATION
   ============================================================ */

/* Ribbon spacing (top-level container inside panel) */
#dxl-auto-dj-panel .dxl-auto-dj-ribbon {
  display: flex;
  flex-direction: column;
  gap: 8px;        /* was 6px — more breathing room */
  padding: 6px 0;  /* adds vertical rhythm */
}

/* Status + track + metrics lines */
#dxl-auto-dj-panel .dxl-auto-dj-line {
  display: flex;
  justify-content: center;
  gap: 10px;       /* was 12px — tighter, more balanced */
  padding: 2px 0;  /* subtle vertical spacing */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Button row */
#dxl-auto-dj-panel .dxl-auto-dj-controls {
  display: flex;
  justify-content: center;
  gap: 6px;        /* was 10px — tighter, more compact */
  padding-top: 4px;
}

/* Buttons */
#dxl-auto-dj-panel .dxl-auto-dj-controls button {
  width: 78px;     /* slight reduction for balance */
  font-size: 12px;
  padding: 4px 6px;
  box-sizing: border-box;
}
/* ============================================================
   SMART AUTO-MIX — INTERNAL SPACING OPTIMIZATION
   ============================================================ */

/* Main container inside the panel */
#dxl-smart-auto-mix-panel #dxl-smart-mix-modes {
  display: flex;
  flex-direction: column;
  gap: 6px;          /* was 8px — tighter vertical rhythm */
  padding: 4px 0;    /* adds subtle breathing room */
  margin-top: 6px;   /* was 10px — reduces top float */
}

/* Each mode row */
#dxl-smart-auto-mix-panel .dxl-smart-mix-row {
  display: flex;
  justify-content: center;
  gap: 8px;          /* was 12px — tighter, more balanced */
  padding: 2px 0;    /* subtle vertical spacing */
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Mode buttons */
#dxl-smart-auto-mix-panel .dxl-mix-mode-btn {
  width: 72px;       /* was 80px — fits better in 240px panel */
  font-size: 12px;
  padding: 4px 5px;  /* slightly tighter padding */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Main Smart Auto-Mix button (top button) */
#dxl-smart-auto-mix-panel .dxl-smart-main-btn {
  width: 120px;      /* balanced center width */
  margin: 0 auto;    /* centers it perfectly */
  padding: 5px 8px;
  font-size: 13px;
}
/* ============================================================
   MASTER MIX — INTERNAL SPACING OPTIMIZATION
   ============================================================ */

/* Main wrapper inside panel */
#dxl-master-mix-panel .dxl-master-mix-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;     /* center-align entire block */
  align-items: center;
  gap: 12px;                    /* was space-between — now balanced */
  padding: 6px 0;               /* adds warm vertical rhythm */
}

/* A / B labels */
#dxl-master-mix-panel .dxl-master-mix-label {
  font-size: 13px;
  padding: 0 4px;               /* subtle breathing room */
  white-space: nowrap;
}

/* Slider */
#dxl-master-mix-panel .dxl-master-mix-slider {
  width: 180px;                 /* tuned for 220px panel */
  max-width: 180px;
  margin: 0 4px;                /* centers slider visually */
}

/* Panel-level padding */
#dxl-master-mix-panel {
  padding-top: 4px;             /* reduces top float */
  padding-bottom: 6px;          /* adds grounding */
}
/* ============================================================
   DECK CONTROL — 2px Horizontal Nudge Between Deck A & Deck B
   ============================================================ */

#dxl-deck-control-bar .dxl-deck-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;        /* was 8px — adds the 2px nudge */
  padding: 2px 0;
  overflow: hidden;
}