/* Mitr4 4.6.2 Media Local Professional Playlist Layout
   Define uma listagem profissional e consistente para Media Local: capa, título, caminho, métricas e ações.
   Corrige cards desorganizados, botões cortados e falta de contagem clara de faixas/álbuns. */

#tab-media-local .media-local-layout,
#tab-media-local .playlist-section,
#tab-media-local .card{
  min-width:0!important;
}

#tab-media-local .media-local-list{
  display:grid!important;
  gap:14px!important;
  width:100%!important;
  min-width:0!important;
}

#tab-media-local .media-local-playlist-grid.professional{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr))!important;
  gap:14px!important;
  width:100%!important;
  align-items:stretch!important;
}

#tab-media-local .media-local-playlist-card.professional,
#tab-media-local .media-local-preview-card.professional{
  display:grid!important;
  grid-template-columns:88px minmax(0,1fr) minmax(190px,auto)!important;
  gap:16px!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  padding:16px!important;
  border-radius:24px!important;
  border:1px solid rgba(150,170,255,.22)!important;
  background:
    radial-gradient(circle at 12% 20%,rgba(57,183,255,.12),transparent 32%),
    linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.032))!important;
  box-shadow:0 18px 42px rgba(0,0,0,.22)!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

#tab-media-local .media-local-cover-wrap{
  width:88px!important;
  height:88px!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.26)!important;
}

#tab-media-local .media-local-cover-wrap img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
}

#tab-media-local .media-local-card-main,
#tab-media-local .media-local-preview-main{
  min-width:0!important;
  display:grid!important;
  gap:8px!important;
}

#tab-media-local .media-local-card-titleline{
  min-width:0!important;
  display:grid!important;
  gap:4px!important;
}

#tab-media-local .media-local-card-titleline strong,
#tab-media-local .media-local-preview-main strong{
  display:block!important;
  min-width:0!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
  font-size:18px!important;
  line-height:1.22!important;
  letter-spacing:-.015em!important;
}

#tab-media-local .media-local-card-titleline span{
  color:var(--m4-muted)!important;
  font-size:12px!important;
}

#tab-media-local .media-local-card-stats{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  min-width:0!important;
}

#tab-media-local .media-local-card-stats span{
  display:inline-flex!important;
  align-items:center!important;
  min-height:26px!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.06)!important;
  color:#dfe8ff!important;
  font-size:12px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}

#tab-media-local .media-local-card-path{
  min-width:0!important;
  color:rgba(219,228,255,.72)!important;
  font-size:12px!important;
  line-height:1.35!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  max-width:100%!important;
}

#tab-media-local .media-local-card-actions,
#tab-media-local .media-local-preview-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
}

#tab-media-local .media-local-card-actions .mini-btn,
#tab-media-local .media-local-preview-actions .mini-btn{
  min-width:86px!important;
  justify-content:center!important;
  white-space:nowrap!important;
}

#tab-media-local .media-local-empty{
  border-radius:24px!important;
  border:1px dashed rgba(150,170,255,.24)!important;
  background:rgba(255,255,255,.035)!important;
  padding:22px!important;
  display:grid!important;
  gap:6px!important;
  color:var(--m4-muted)!important;
}
#tab-media-local .media-local-empty strong{color:white!important;font-size:17px!important;}

#tab-media-local .media-local-preview-summary.workflow{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  flex-wrap:wrap!important;
  border-radius:22px!important;
  border:1px solid rgba(57,183,255,.22)!important;
  background:rgba(57,183,255,.07)!important;
  padding:14px!important;
}

#tab-media-local .media-local-preview-card.professional{
  grid-template-columns:minmax(0,1fr) auto!important;
}

#tab-media-local .downloaded-playlist-card.clean{
  display:grid!important;
  grid-template-columns:74px minmax(0,1fr) auto!important;
  gap:14px!important;
  align-items:center!important;
  min-width:0!important;
  width:100%!important;
  padding:14px!important;
  border-radius:24px!important;
}

#tab-media-local .downloaded-playlist-info strong{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  line-height:1.2!important;
}

@media (max-width:1080px){
  #tab-media-local .media-local-playlist-card.professional{
    grid-template-columns:78px minmax(0,1fr)!important;
  }
  #tab-media-local .media-local-card-actions{
    grid-column:1/-1!important;
    justify-content:flex-start!important;
  }
  #tab-media-local .downloaded-playlist-card.clean{
    grid-template-columns:68px minmax(0,1fr)!important;
  }
  #tab-media-local .downloaded-playlist-actions{
    grid-column:1/-1!important;
    justify-content:flex-start!important;
  }
}

@media (max-width:620px){
  #tab-media-local .media-local-playlist-grid.professional{grid-template-columns:1fr!important;}
  #tab-media-local .media-local-playlist-card.professional,
  #tab-media-local .media-local-preview-card.professional{
    grid-template-columns:1fr!important;
    text-align:left!important;
  }
  #tab-media-local .media-local-cover-wrap{width:74px!important;height:74px!important;}
  #tab-media-local .media-local-card-actions .mini-btn,
  #tab-media-local .media-local-preview-actions .mini-btn{flex:1 1 140px!important;}
}