/* Pico vars */
:root {
  --pico-typography-spacing-vertical: 0;
}
[data-theme="dark"],
:root:not([data-theme="light"]) {
  --pico-h3-color: #fff;
}
/* Utility classes */
.flex {
  display: flex;
  align-items: center;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gap {
  gap: 1rem;
}
.border {
  border: 1px solid #ccc;
}
.container {
  max-width: 600px;
  margin: 0 auto;
  /* padding: 1rem; */
  /* background: #bbdefb; */
  border-radius: 8px;
}
.no-margin {
  margin: 0 !important;
}
.no-padding {
  padding: 0 !important;
}
.text-align-right {
  text-align: right;
}
.text-align-center {
  text-align: center;
}
.padding-1 {
  padding: 1rem !important;
}
.hidden {
  display: none !important;
}
.mb-1 {
  margin-bottom: 1rem !important;
}
.mb-2 {
  margin-bottom: 2rem !important;
}

/* APP STYLES */
header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* Ensures it stays above content */
}
header p {
  color: #fff !important;
}
footer {
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
}
.logo {
  height: 100%;
  max-width: 60px;
  overflow: visible;
}
.logo img {
  width: 100%;
  height: auto;
  display: block;
}
.title {
  text-align: center;
  padding-bottom: 0.5rem;
  /* color: #fff !important; */
  /* background: #0d47a1 !important; */
}
/* color: #fff !important; */
/* background: #0d47a1 !important; */
/* padding: 1rem; */

#bookmark_container ul {
  width: 80%;
  display: flex;
  flex-wrap: wrap !important; /* allow wrapping to next row */
  /* justify-content: flex-start !important; */
  gap: 0.5rem !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

#bookmark_container ul li {
  /* flex: 1 0 auto !important; /1* 4 items per row *1/ */
  box-sizing: border-box !important;
  padding: 0 !important;
}
#bookmark_container ul li button {
  margin: 0 !important;
  font-size: 0.8rem !important;
}

svg {
  width: 100%;
  height: auto;
  display: block;
}
.song-item,
.setlist-item {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border-bottom: 1px solid #90caf9;
  cursor: pointer;
}
.song-item i,
.setlist-item i {
  font-size: 1.5rem;
  margin-right: 1rem;
  /* color: #0d47a1; */
  cursor: pointer;
}
nav li {
  cursor: pointer;
}
.disabled {
  opacity: 0.5;
  pointer-events: none;
}

#app_loading_progress {
  width: 100%;
  height: 4px;
  margin: 0 !important;
  visibility: hidden;
}

/* A→B LOOP CONTROLS */
.loop-btn {
  opacity: 0.5;
}
.loop-btn.disabled {
  opacity: 0.25;
  pointer-events: none;
}
.loop-btn i,
#sheetMusicButton i {
  font-size: 1.5rem;
}
.loop-point-set i {
  color: #3c71f7;
  opacity: 1;
}
.loop-point-set {
  opacity: 1;
}
.loop-active i {
  color: #3c71f7;
  opacity: 1;
}
.loop-active {
  opacity: 1;
}
.loop-disengaged i {
  color: #9ca7fa;
}
.loop-clear-btn i {
  font-size: 1.2rem;
}

/* A→B region overlay on waveform */
#waveform-container {
  position: relative;
}
#loop-region {
  position: absolute;
  top: 0;
  height: 100%;
  pointer-events: none;
  border-radius: 2px;
  z-index: 10;
}
#loop-region.loop-region-active {
  background: rgba(60, 113, 247, 0.2);
  border-left: 2px solid #3c71f7;
  border-right: 2px solid #3c71f7;
}
#loop-region.loop-region-inactive {
  background: rgba(156, 167, 250, 0.1);
  border-left: 2px solid #9ca7fa;
  border-right: 2px solid #9ca7fa;
}

/* WAVESURFER STYLES */
.controls {
  display: flex;
  /* align-items: center; */
  gap: 10px;
  margin-bottom: 10px;
}
.waveform-container {
  width: 100%;
  /* height: 120px; */
  background: #ddd;
  margin-bottom: 10px;
  display: block;
  border: 1px solid blue;
  /* position: relative; */
}
.waveform {
  /* display: block; */
  /* border: 1px solid red; */
  margin-bottom: 10px;
  /* position: absolute; */
  /* top: 0; */
  /* left: 0; */
  /* right: 0; */
  /* bottom: 0; */
}
.controlButton {
  font-size: 1.5rem !important;
  cursor: pointer;
  /* color: #fff !important; */
}

/* =============================================
   LOADING OVERLAY — CASSETTE TAPE
   ============================================= */

#loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: clamp(120px, 15vh, 180px);
  gap: 1rem;
  opacity: 1;
  transition: opacity 0.6s ease;
  pointer-events: all;
}

#loading-overlay-inner {
  background: rgba(10, 15, 30, 0.97);
  border: 1px solid #3a3a5c;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
}

#loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

#loading-overlay.hidden {
  display: none;
}

/* --- SVG cassette drop shadow --- */
#cassette-svg {
  filter: drop-shadow(0 8px 32px rgba(0, 120, 255, 0.4));
}

/* Reel animation is handled by SVG animateTransform directly in index.html */

/* --- Loading message --- */
#loading-message {
  color: #aaaaee;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-align: center;
  min-height: 1.5em;
  animation: message-pulse 2s ease-in-out infinite;
  margin: 0;
}

@keyframes message-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}