/* Yttre radens cell */
.outer-cell {
    padding: 10px 0 15px 0; /* avstånd runt allt */
}

/* Avstånd mellan övre och nedre tabellen */
.upper-table {
    margin-bottom: 10px; /* avstånd nedåt */
}

/* Om du även vill ha avstånd under nedersta tabellen */
.lower-table {
    margin-bottom: 10px;
    margin-left: auto;
}




.album-container .albums {
    margin: 0 auto;
}




.track-table {
  border-collapse: collapse; /* viktigt så att border fungerar som förväntat */
  width: 100%;
}

.track-table tr {
  border-bottom: 1px dashed #999; /* sträckad linje, grå */
  padding-top: 15px;
}




.track-table tr:last-child {
  border-bottom: none; /* ta bort linje på sista raden */
}


table.albums {
width: auto;  /* Viktigt */
border-collapse: collapse; /* Valfritt för kompakt layout */
}

table.albums td {
vertical-align: top;
padding: 0px 0;
}

.cover-img {
margin-right: 0px;
max-width: 100px;
}


.album-title {
font-weight: bold;
font-size: 1.2em;
margin-bottom: 5px;
}


.track-table td {
  vertical-align: middle; /* fallback */
}


input[type="checkbox"] {
  position: relative;
  top: -10px; /* Try different values, like 1px or -1px */
}

.track-table td.icon {
  text-align: center; /* fallback */
}

.track-title.playing {
  font-style: italic;
}


.breadcrumb-item a {
  color: #A5A9B4;
  text-decoration: none; /* valfritt: tar bort understrykning */
}

.breadcrumb-item a:hover {
  color: #888B97; /* valfritt: ändra färg vid hover */
}


.scroll-container-album {
  height: calc(100vh - 500px);
  overflow: auto;
}

.scroll-container-album-small {

  overflow: visible;
}


.scroll-container-main {
  height: calc(100vh - 250px);
  overflow-y: auto;
}

.scroll-container-artist {
  height: calc(100vh - 370px);
  overflow-y: auto;
}

/* Flexlayout för toppknappen */
.header {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.play-all {
  background-color: #A5A9B4;
  color: white;
  padding: 0.2em 1.2em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
}

.play-all:hover {
  background-color: #888B97;
}

/* Tabellutseende */
.track-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 14px; /* Radavstånd */
  font-family: sans-serif;
}

.track-table th {
  text-align: left;
  color: #666;
  font-size: 0.85rem;
  padding: 0 20px;
}

.track-table td {
  background-color: #fff;
  padding: 14px 20px;
  border-radius: 10px;
  vertical-align: middle;
}

/* Luft mellan kolumner genom padding + spacing */
.track-table td:not(:last-child) {
  padding-right: 30px;
}

/* Knappar */
.icon-button {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #444;
}

.icon-button:hover {
  color: #1e90ff;
}

.action-button {
  background-color: #A5A9B4;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}

.action-button:hover {
  background-color: #e0e0e0;
}

/* Checkbox centrerad */
.track-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
}



/* Grundinställning: dolda små-layouten */
.album-layout-small {
  display: none;
}
/* Under 1000px */
@media (max-width: 1000px) {

  .album-layout-large {
    display: none;
  }

  .album-layout-small {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    font-size: 1rem;
  }

  .album-layout-small nav.breadcrumb {
    font-size: 0.9rem;
  }

  .album-layout-small nav.breadcrumb img {
    height: 1em;
    width: auto;
    margin-right: 5px;
  }

	.album-container {
		max-height: calc(0.75 * (100vh - 200px));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch; /* smidig inertial scrolling på iOS */
		touch-action: auto;               /* säkerställer att touch scroll fungerar */
	}

	.album-container img {
		max-width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
		-webkit-user-drag: none; /* hindrar bilder från att dras */
	}

  .scroll-container-album {
    overflow-x: auto;
  }

  .track-table {
    width: 100%;
    border-collapse: collapse;
  }

  .track-table td,
  .track-table th {
    padding: 1px 1px; /* mindre padding mellan kolumner */
    font-size: 0.85rem;
  }

  /* Track-title fix: tillåt radbrytning */
  .track-table td.track-title {
    white-space: normal;
    word-break: break-word;
    max-width: 150px;
  }


	.track-title.playing {
		font-style: italic;
	}

  .play-button,
  .playlist-button,
  .cue-button,
  .info-button,
  .play-all {
    font-size: 0.8rem;
    padding: 1px 1px; /* kompaktare knappar */
  }
  
  
  


	.drawer-tab {
	  position: absolute;
	  left: -40px;
	  width: 40px;
	  height: 60px;
	  background-color: #A5A9B4;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border-top-left-radius: 8px;
	  border-bottom-left-radius: 8px;
	  box-shadow: -1px 0 3px rgba(0, 0, 0, 0.2);
	  cursor: pointer;
	  z-index: 1060;
	  transform: translateY(-50%);
	  top: calc(var(--drawer-offset-percent, 35%) + 125px + var(--drawer-offset, 0px)) !important;
	}


	.drawer-tab-shadow {
	  position: absolute;
	  left: -40px;
	  width: 40px;
	  height: 60px;
	  background-color: #5f5c5c; /* mörkare grå */
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border-top-left-radius: 8px;
	  border-bottom-left-radius: 8px;
	  box-shadow: inset -4px 3px 6px rgba(0, 0, 0, 0.3), -1px 0 3px rgba(0, 0, 0, 0.2);
	  cursor: pointer;
	  z-index: 1060;
	  transform: translateY(-50%);
	  visibility: hidden;
	  top: calc(var(--drawer-offset-percent, 35%) + 125px + var(--drawer-offset, 0px)) !important;
	}



}








/* Under 600px */
@media (max-width: 600px) {
  .track-table td,
  .track-table th {
    padding: 1px 1px; /* ännu mindre padding */
  }

  .album-layout-small {
    font-size: 0.9rem;
    padding: 1px;
  }

  .album-cover {
    width: 200px;
  }

  .play-button,
  .playlist-button,
  .cue-button,
  .info-button,
  .play-all {
    font-size: 0.7rem;
    padding: 1px 1px;
  }
}

/* Under 500px */
@media (max-width: 500px) {
  .track-table td,
  .track-table th {
    padding: 1px 1px;
  }

  .album-layout-small {
    font-size: 0.85rem;
  }
}

/* Under 450px */
@media (max-width: 450px) {
  .track-table td,
  .track-table th {
    padding: 0 1px;
  }

  .album-layout-small {
    font-size: 0.8rem;
  }
}

/* Under 400px */
@media (max-width: 400px) {
  .track-table td,
  .track-table th {

    padding: 0 1px;
  }

  .album-layout-small {
    font-size: 0.75rem;
    padding: 2px;
  }

  .track-table td.track-title {
    max-width: 120px;
  }
}