/* === PROGRESS BAR (THEME-AWARE) === */

#progress-bar-wrapper {
  position: absolute;
  top: -10px; /* move bar slightly above input box */
  left: 0;
  width: 100%;
  height: 8px; /* total container height */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* --- Actual progress line --- */
#progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 10px; /* visible thickness */
  width: var(--progress);
  background: var(--accent);
  border-radius: 2px;
  box-shadow: var(--accent-glow);
  transition: width 0.6s ease, background 0.3s ease, box-shadow 0.3s ease;
}

/* Hide the label completely */
#progress-label {
  display: none;
}

/* === THEME OVERRIDES === */

/* Light theme */
:root[data-theme="light"] #progress-bar {
  background: linear-gradient(90deg, var(--accent, #292929), #444);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

/* Dark theme (Blue Saber) */
:root[data-theme="dark"] #progress-bar {
  background: linear-gradient(90deg, var(--accent, #00b4ff), #0077ff);
  box-shadow: var(--accent-glow, 0 0 8px rgba(0,180,255,0.8));
}

/* Red Saber (Pink Saber) theme */
:root[data-theme="red"] #progress-bar {
  background: linear-gradient(90deg, var(--accent, #ff4ea0,), #f813ff);
  box-shadow: var(--accent-glow, 0 0 12px rgba(247, 0, 114, 0.8));
}

/* --- Level hue shifts for subtle distinction --- */
#progress-bar[data-level="section"] { filter: hue-rotate(-25deg); }
#progress-bar[data-level="topic"] { filter: hue-rotate(0deg); }
#progress-bar[data-level="subtopic"] { filter: hue-rotate(25deg); }


#progress-bar-wrapper {
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
#progress-bar-wrapper.hidden {
  opacity: 0;
  visibility: hidden;
}