/* =========================================================
   Navidrome Web Player - Spotify Dark / Glassmorphism Theme
   ========================================================= */

:root {
  --spotify-green: #1DB954;
  --spotify-green-hover: #1aa34a;
  --spotify-black: #121212;
  --spotify-card: #181818;
  --spotify-card-hover: #282828;
  --spotify-subtext: #b3b3b3;
  --glass-bg: rgba(24, 24, 24, 0.85);
  --glass-border: rgba(255, 255, 255, 0.08);
}

body, html, #root {
  background-color: var(--spotify-black) !important;
  color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Containers, Cards, Papers, Menus */
.MuiPaper-root,
.MuiDrawer-paper,
.MuiAppBar-root,
.MuiCard-root,
.MuiDialog-paper,
.MuiMenu-paper,
.MuiPopover-paper {
  background-color: var(--spotify-card) !important;
  color: #ffffff !important;
  border-color: var(--glass-border) !important;
}

/* Sidebar / Navigation Drawer */
.MuiDrawer-paper {
  background-color: #000000 !important;
  border-right: 1px solid var(--glass-border) !important;
}

.MuiListItem-root.Mui-selected,
.MuiListItem-root.Mui-selected:hover {
  background-color: rgba(29, 185, 84, 0.15) !important;
  color: var(--spotify-green) !important;
  border-left: 4px solid var(--spotify-green) !important;
}

.MuiListItem-root:hover {
  background-color: var(--spotify-card-hover) !important;
}

.MuiListItemIcon-root {
  color: var(--spotify-green) !important;
}

.MuiListItemIcon-root svg,
.MuiListItemIcon-root svg path {
  fill: var(--spotify-green) !important;
  color: var(--spotify-green) !important;
}

/* Top App Bar & Header */
.MuiAppBar-root {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

/* Bottom Player Bar */
footer,
.player,
[class*="player-bar"],
[class*="Player"],
[class*="player"] {
  background: rgba(18, 18, 18, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid var(--glass-border) !important;
}

/* Iconos de control estándar (Anterior, Siguiente, Aleatorio, Repetir, Volumen) -> Iconos Blancos Nítidos */
footer .MuiIconButton-root,
.player .MuiIconButton-root,
[class*="player"] .MuiIconButton-root,
[class*="Player"] .MuiIconButton-root {
  color: #ffffff !important;
  background-color: transparent !important;
}

footer .MuiIconButton-root svg,
footer .MuiIconButton-root svg path,
.player .MuiIconButton-root svg,
.player .MuiIconButton-root svg path,
[class*="player"] .MuiIconButton-root svg,
[class*="player"] .MuiIconButton-root svg path,
[class*="Player"] .MuiIconButton-root svg,
[class*="Player"] .MuiIconButton-root svg path {
  fill: #ffffff !important;
  color: #ffffff !important;
  opacity: 0.9 !important;
  visibility: visible !important;
}

/* Al pasar el cursor por los botones de control -> Cambian a Verde Spotify */
footer .MuiIconButton-root:hover svg,
footer .MuiIconButton-root:hover svg path,
.player .MuiIconButton-root:hover svg,
.player .MuiIconButton-root:hover svg path,
[class*="player"] .MuiIconButton-root:hover svg,
[class*="player"] .MuiIconButton-root:hover svg path {
  fill: var(--spotify-green) !important;
  color: var(--spotify-green) !important;
  opacity: 1 !important;
}

/* Botones destacados de acción (PLAY, PAUSA, DESCARGAR, COMPARTIR) -> Fondo VERDE y Símbolo NEGRO */
.MuiFab-primary,
.MuiFab-root,
.MuiButton-containedPrimary,
.MuiIconButton-colorPrimary,
button[aria-label*="play" i],
button[aria-label*="Play" i],
button[aria-label*="pause" i],
button[aria-label*="Pause" i],
button[aria-label*="download" i],
button[aria-label*="Download" i],
button[aria-label*="share" i],
button[aria-label*="Share" i],
.play-button {
  background-color: var(--spotify-green) !important;
  color: #000000 !important;
  box-shadow: 0 0 16px rgba(29, 185, 84, 0.5) !important;
}

.MuiFab-primary svg,
.MuiFab-primary svg path,
.MuiFab-root svg,
.MuiFab-root svg path,
.MuiButton-containedPrimary svg,
.MuiButton-containedPrimary svg path,
.MuiIconButton-colorPrimary svg,
.MuiIconButton-colorPrimary svg path,
button[aria-label*="play" i] svg,
button[aria-label*="play" i] svg path,
button[aria-label*="Play" i] svg,
button[aria-label*="Play" i] svg path,
button[aria-label*="pause" i] svg,
button[aria-label*="pause" i] svg path,
button[aria-label*="Pause" i] svg,
button[aria-label*="Pause" i] svg path,
button[aria-label*="download" i] svg,
button[aria-label*="download" i] svg path,
button[aria-label*="Download" i] svg,
button[aria-label*="Download" i] svg path,
button[aria-label*="share" i] svg,
button[aria-label*="share" i] svg path,
button[aria-label*="Share" i] svg,
button[aria-label*="Share" i] svg path {
  fill: #000000 !important;
  color: #000000 !important;
  opacity: 1 !important;
}

.MuiFab-primary:hover,
button[aria-label*="play" i]:hover,
button[aria-label*="Play" i]:hover {
  background-color: var(--spotify-green-hover) !important;
  transform: scale(1.06);
}

/* Sliders (Progress Bar & Volume) */
.MuiSlider-root {
  color: var(--spotify-green) !important;
}

.MuiSlider-rail {
  background-color: rgba(255, 255, 255, 0.2) !important;
  opacity: 1 !important;
}

.MuiSlider-track {
  background-color: var(--spotify-green) !important;
}

.MuiSlider-thumb {
  background-color: #ffffff !important;
}

.MuiSlider-thumb:hover,
.MuiSlider-thumb.Mui-focusVisible {
  box-shadow: 0px 0px 0px 8px rgba(29, 185, 84, 0.25) !important;
}

/* Song Titles -> VERDE VISIBLE Y DESTACADO */
.song-title,
[class*="title"],
[class*="Title"],
.MuiTableCell-body a,
.MuiTableCell-body .MuiTypography-root,
.MuiCardHeader-title,
.MuiTypography-h6,
.MuiTypography-subtitle1,
td.MuiTableCell-body,
[data-testid*="title"] {
  color: var(--spotify-green) !important;
  font-weight: 600 !important;
}

/* Highlight primary text in tables & lists */
.MuiTypography-body1 {
  color: #ffffff !important;
}

.MuiTableCell-root {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.MuiTableCell-head {
  color: var(--spotify-subtext) !important;
  font-weight: 600 !important;
  background-color: var(--spotify-black) !important;
}

.MuiTableRow-root:hover {
  background-color: var(--spotify-card-hover) !important;
}

/* Cards & Media Grid Items */
.MuiCard-root {
  transition: background-color 0.3s ease, transform 0.2s ease !important;
  border-radius: 8px !important;
}

.MuiCard-root:hover {
  background-color: var(--spotify-card-hover) !important;
}

/* Text Colors */
.MuiTypography-colorTextSecondary,
.subtext,
[class*="secondaryText"] {
  color: var(--spotify-subtext) !important;
}

/* Inputs & Form Controls */
.MuiOutlinedInput-root {
  background-color: #282828 !important;
  color: #ffffff !important;
  border-radius: 4px !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: transparent !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--spotify-green) !important;
}

.MuiInputLabel-root {
  color: var(--spotify-subtext) !important;
}

.MuiInputLabel-root.Mui-focused {
  color: var(--spotify-green) !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--spotify-black);
}

::-webkit-scrollbar-thumb {
  background: #282828;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3e3e3e;
}