/* ============================================
   KINETIC4MUSIC SONG LIST TABLE
   Warm browns, subtle gradients, Georgia serif
=============================================== */

/* Reset Bootstrap table behavior so our styling can take over */
.table {
  font-family: "Georgia", serif;
  color: #3b2a1f;
  border-collapse: separate !important;
  border-spacing: 0 8px !important; /* row spacing */
  background: transparent !important;
}

/* Remove Bootstrap's default striping */
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(even) {
  background-color: transparent !important;
}

/* Remove Bootstrap's default hover color */
.table-hover tbody tr:hover > * {
  background-color: transparent !important;
}

/* --------------------------------------------
   HEADER
-------------------------------------------- */

.table thead.table-dark {
  background: linear-gradient(
      to bottom,
      rgba(120, 80, 50, 0.35),
      rgba(80, 50, 30, 0.45)
  ) !important;
  color: #fdfdfd !important;
  border-radius: 6px;
}

.table thead.table-dark th {
  border: none !important;
  padding: 12px;
  letter-spacing: 0.03em;
  font-weight: bold;
}

/* --------------------------------------------
   ROWS
-------------------------------------------- */

.table tbody tr {
  background: linear-gradient(
      to bottom,
      rgba(255, 245, 235, 0.9),
      rgba(240, 225, 210, 0.9)
  ) !important;
  border: 1px solid rgba(120, 80, 50, 0.35) !important;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.25s ease;
}

/* Make rounded corners actually appear */
.table tbody tr > *:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.table tbody tr > *:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* --------------------------------------------
   HOVER
-------------------------------------------- */

.table-hover tbody tr:hover {
  background: linear-gradient(
      to bottom,
      rgba(150, 105, 70, 0.35),
      rgba(110, 75, 50, 0.45)
  ) !important;
  color: #2a1d15;
  box-shadow: 0 0 8px rgba(120, 80, 50, 0.35);
  transform: translateY(-1px);
}

/* --------------------------------------------
   CELLS
-------------------------------------------- */

.table td {
  padding: 12px;
  vertical-align: middle;
  border: none !important;
}

/* Audio player styling */
.table td audio {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}