/*
  Steminote – Modern körövningsplattform

  Detta stylesheet bygger ett professionellt gränssnitt inspirerat av
  digitala ljudarbetsstationer (DAWs). Färgskalan domineras av mörka
  nyanser för att reducera ögonbelastning och låta de färgglada
  stämmorna poppa fram. Flexbox och CSS‑variabler används för
  responsiv design och enkel temahantering.
*/

/* Färgvariabler */
/*
  Light theme for Steminote
  The dark palette has been replaced with a light, neutral palette so that
  the black logo contrasts nicely against the backgrounds. All core
  variables have been updated to provide a crisp, modern feel while
  retaining the overall layout and structure of the original design.
*/
:root {
  /* Background colours */
  /*
    Light neutral palette with soft greys. The page uses a very light gradient
    to give depth without distracting from the content. Panels are a
    slightly darker grey so they stand out against the page background. A
    clean white background is kept for the rendered sheet music itself.
  */
  /*
    Uppdaterade bakgrundsfärger för ett lyxigt, tonat grått tema. 
    Vi lämnar den helt vita färgen och använder istället mjuka
    skiftningar av grått med en antydan av blått för att skapa
    djup och premiumkänsla utan att bli för mörkt. 
  */
  --bg-body: #e5e7eb;      /* Page background (ljus, tonad grå) */
  --bg-header: #f0f2f4;    /* Header background (mycket ljus grå) */
  --bg-panel: #e8ebef;     /* Panels (score wrapper, timeline, controls) */
  --bg-score: #f3f5f8;     /* Sheet music background (ljus grå/blå) */
  /* Text colours */
  --text-light: #1f2937;   /* Primary text (dark) */
  --text-muted: #64748b;   /* Muted text (cool grey) */
  /* Accent colours */
  --accent: #2563eb;       /* Primary accent (blue) */
  --accent-light: #3b82f6; /* Lighter accent */
  --error: #dc2626;        /* Error message (red) */
  /* Timeline colours */
  /*
    Justera tidslinjens bakgrund och linjer för att matcha det tonade
    grå temat. En något mörkare nyans gör att eventsegmenten poppar,
    samtidigt som linjerna förblir diskreta. 
  */
  --timeline-bg: #dfe3e8;  /* Background for timeline bars (mjuk grå) */
  --timeline-line: rgba(0, 0, 0, 0.1); /* Timeline vertical lines */
}

/* Globala inställningar */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  /* Apply a subtle vertical gradient to the body to add depth. The
     gradient transitions from the page background colour to a slightly
     darker grey at the bottom. */
  /* Använd en subtil grå gradient som går från den ljusaste bakgrunden 
     till en något mörkare ton för att skapa djup. */
  background: linear-gradient(to bottom, var(--bg-body) 0%, #dfe3e8 100%);
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header med logotyp och navigation */
.site-header {
  background: var(--bg-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  /* Light theme: soften the drop shadow */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo-wrapper {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 36px;
  width: auto;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 24px;
}

.main-nav .nav-link {
  color: var(--text-light);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  transition: color 0.2s ease;
}

.main-nav .nav-link:hover {
  color: var(--accent);
}

/* Innehållssektioner */
.page-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
  gap: 24px;
}

/* Översta uppladdningsbaren */
.upload-bar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.upload-btn {
  background: var(--accent);
  color: var(--bg-body);
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.upload-btn:hover {
  background: var(--accent-light);
}

.file-name {
  font-size: 0.9rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.error-message {
  color: var(--error);
  font-size: 0.9rem;
}

/* Scorevisning */
.score-wrapper {
  background: var(--bg-panel);
  padding: 24px;
  border-radius: 8px;
  /* Light theme: soften shadows */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: auto;
  min-height: 300px;
}

.score-container {
  position: relative;
  /* Use a very light gradient inside the score container to visually
     separate it from the panel. This subtle blue‑grey gradient echoes
     the mockup while remaining neutral enough for the black notes to
     stand out. */
  /* Nytt tonat grå-blått bakgrund i notbladet för att förhöja känslan 
     av elegans och samtidigt ge bra kontrast mot de svarta noterna. */
  background: linear-gradient(to bottom, #f3f5f8 0%, #e7ecf3 100%);
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
  min-height: 280px;
}

/* Markering för vald stämma (ligger ovanpå notbladet) */
.staff-highlight {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(59, 130, 246, 0.15);
  pointer-events: none;
  z-index: 2;
}

/* Tidslinje */
.timeline-wrapper {
  background: var(--bg-panel);
  padding: 16px;
  border-radius: 8px;
  /* Light theme: soften shadows */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
  display: none; /* visas när fil är laddad */
}

.measure-labels {
  display: flex;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.measure-labels > div {
  flex: 1;
  text-align: center;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

/* Progresslinje över tidslinjen */
.progress-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  pointer-events: none;
  z-index: 3;
  transform: translateX(0);
}

/* Rader i tidslinjen för varje stämma */
.timeline-row {
  display: flex;
  align-items: center;
}

/* Namnbrickan till vänster */
.track-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  /* Light theme: make label text white for better contrast against accent backgrounds */
  color: #ffffff;
  margin-right: 8px;
  min-width: 100px;
  text-align: left;
  cursor: pointer;
}

/* Litet bokstavsblock (S/M/T/B) */
.voice-abbr {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-body);
  color: var(--text-light);
  font-size: 0.75rem;
  border-radius: 4px;
  margin-right: 8px;
}

/* Container som håller events för varje stämma */
.track-bar-container {
  position: relative;
  flex: 1;
  height: 36px;
  background: var(--timeline-bg);
  border-radius: 4px;
  overflow: hidden;
}

/* Eventsegment i tidslinjen */
.track-event {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  opacity: 0.8;
}

/* Markering av vald stämma i tidslinjen */
.timeline-row.selected .track-label,
.timeline-row.selected .voice-abbr {
  filter: brightness(1.2);
}

/* Transportkontroller */
.controls-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  background: var(--bg-panel);
  border-radius: 8px;
  /* Light theme: soften shadows */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: none; /* döljs tills filen är laddad */
}

.controls {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 600px;
}

.control-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.control-btn:hover {
  background: var(--accent-light);
}

.control-btn .icon {
  width: 24px;
  height: 24px;
  fill: var(--bg-body);
}

.progress-container {
  flex: 1;
  height: 6px;
  /* Light theme: subtle grey bar */
  background: rgba(0,0,0,0.1);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.1s linear;
}

/* Responsivitet */
@media (max-width: 768px) {
  .main-nav ul {
    gap: 16px;
  }
  .upload-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .track-label {
    min-width: 80px;
  }
}