/* Giorno 5 — Rifiniture (HTML + CSS semplice)
   Completa 6 TODO totali: 2 in HTML e 4 in CSS.
*/

*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #0b1220;
  color: #e2e8f0;
}

a{ color: inherit; text-decoration: none; }

.app{
  display: flex;
  min-height: 100vh;
  padding-bottom: 86px;
}

/* Sidebar (già pronta) */
.sidebar{
  width: 280px;
  background: #0f172a;
  padding: 18px;
  border-right: 1px solid rgba(148,163,184,.15);
  overflow-y: auto;
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.brand img{ width: 34px; height: 34px; }
.brand__text{ font-weight: 700; }

.nav ul{ list-style: none; padding: 0; margin: 0 0 16px; }
.nav__item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
}
.nav__item img{ width: 18px; height: 18px; }
.nav__item.is-active{
  border-left: 4px solid #22c55e;
  background: rgba(148,163,184,.08);
}
.nav__item:hover{ background: rgba(148,163,184,.10); }

.playlists__title{ margin: 10px 0 8px; font-size: 14px; color: #94a3b8; }
.playlists ul{ list-style: none; padding: 0; margin: 0 0 10px; }
.playlists li{ padding: 6px 8px; border-radius: 10px; }
.playlists li:hover{ background: rgba(148,163,184,.08); }

.btn-side{
/* TODO (5/7): Stile del bottone "Crea playlist" (.btn-side)
   Obiettivo: farlo sembrare un bottone.
   Suggerimento: usa 3-4 proprietà tra: background, color, padding, border, border-radius, cursor.
*/
  background: rgba(34,197,94,.14);
  color: #e2e8f0;
  padding: 10px 12px;
  border: 1px solid rgba(34,197,94,.45);
  border-radius: 12px;
  cursor: pointer;

  width: 100%;
  margin-top: 10px;
}
.btn-side:hover{ background: rgba(34,197,94,.22); }

/* Contenuto */
.content{
  flex: 1;
  padding: 18px 22px;
  overflow: auto;
}

.topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.search{ flex: 1; max-width: 560px; }
.search input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.15);
  background: #0f172a;
  color: #e2e8f0;
}

.section h2{ margin: 15px 0 10px; }

.hero{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  margin-bottom: 14px;
}

.card{
  /* TODO (7/7): Stile dei div contenitori delle sezioni (.card)
   Obiettivo: farlo sembrare un bottone.
   Suggerimento: usa 3-4 proprietà tra: background, padding, border, border-radius.
*/
  background: #0f172a;
  padding: 14px;
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 16px;
}

.cards-grid{
  display: flex;
  gap: 12px;
}

img.cover {
  width: 20em;
}

img.mini-cover {
  width: 20em;
}

.mini-card {
  margin-right:15px;
}

.mini-grid {
  display: flex;
}

.card h3{ margin: 0 0 8px; font-size: 14px; color: #94a3b8; }

.album-row{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.album{
  min-width: 120px;
  background: rgba(148,163,184,.06);
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 14px;
  padding: 10px;
}
.album img{ width: 100%; border-radius: 12px; }
.album .t{ font-weight: 700; font-size: 13px; margin-top: 6px; }
.album .a{ color: #94a3b8; font-size: 12px; }

.songs-box{
/* TODO (3/7): Stile del contenitore della tabella (.songs-box)
   Obiettivo: renderlo una "scheda" come le altre.
   Suggerimento: usa 3-4 proprietà tra: background, padding, border-radius, border, margin-top.
*/
  background: #0f172a;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.15);
  margin-top: 14px;
}

.tracks{
  width: 100%;
  border-collapse: collapse;
}

.tracks th, .tracks td{
/* TODO (4/7): Stile di celle e intestazioni (th, td)
   Obiettivo: spazio e una riga di separazione.
   Suggerimento: usa 2-4 proprietà tra: padding, border-bottom, font-size, text-align, color.
*/
  padding: 10px 8px;
  border-bottom: 1px solid rgba(148,163,184,.12);
  font-size: 13px;
  text-align: left;
}
.tracks th{ color: #94a3b8; font-size: 12px; text-align: left; }

.tracks tbody tr:hover{
/* TODO (6/7): Hover sulle righe della tabella
   Obiettivo: quando passi il mouse su una riga, cambia leggermente lo sfondo.
   Suggerimento: usa background.
*/
  background: rgba(148,163,184,.08);
}

/* Player fisso */
.player{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 86px;
  background: #0f172a;
  border-top: 1px solid rgba(148,163,184,.15);
}
.player__inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  gap: 12px;
}
.player__now{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}
.player__cover{
  width: 46px; height: 46px;
  border-radius: 10px;
}
.player__meta .t{ font-weight: 700; font-size: 13px; }
.player__meta .a{ font-size: 12px; color: #94a3b8; }

.controls{
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn{
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.15);
  background: rgba(148,163,184,.06);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.btn:hover{ background: rgb(0, 218, 33); }
.btn img{ width: 18px; height: 18px; }
.btn--big{ width: 46px; height: 46px; border-color: rgba(34,197,94,.45); background-color: #94a3b8;}

.volume{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  justify-content: flex-end;
}
.volume .bar{
  width: 110px; height: 6px;
  background: rgba(148,163,184,.18);
  border-radius: 999px;
  overflow: hidden;
}
.volume .bar > span{
  display: block;
  height: 100%;
  width: 55%;
  background: #22c55e;
}