/* Force the nested Media Library modal to be wider */
.ui-dialog.media-library-widget-modal {
  width: 95% !important;
  max-width: 1400px !important;
  border-color: var(--gin-border-color) !important;
}

/* Ensure the grid inside uses the full width */
.media-library-view {
  width: 100%;
}

/* Clean up the vertical tabs on the left if they feel cramped */
.media-library-menu {
  width: 15%;
  border-right: 1px solid var(--gin-border-color);
  background: var(--gin-bg-layer2);
}

.media-library-content {
  width: 85%;
}

.media-library-menu__link.is-active {
  border-left: 3px solid var(--gin-color-primary);
  background: var(--gin-bg-layer);
}


/* ==========================================================================
   Music Library List View - High Density Layout
   ========================================================================== */

/* Shave the row padding down to the absolute minimum */
.view-music-library .music-library-row {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  min-height: 44px; /* Ensures a perfect touch target height for mobile */
}

/* Shrink the mini audio player container and its controls */
.view-music-library .audio-player-mini .ds-audio-player {
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

/* Make the play and download buttons smaller and closer together */
.view-music-library .audio-player-mini .audio-controls .btn {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  font-size: 0.9rem !important;
}

/* Align the button icons perfectly center */
.view-music-library .audio-player-mini .audio-controls .btn i {
  line-height: 1 !important;
  display: inline-block;
  vertical-align: middle;
}

/* Bring the lyrics icon closer into the action group alignment */
.view-music-library .btn-link.text-secondary {
  height: 32px;
  width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}