/* ===== HEADER ===== */
.top-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  flex-wrap: wrap;
}

/* Move the Return button upward on subpages */
body.collab-page .header-actions {
  margin-top: -55px;   /* adjust between -10 and -20 if needed */
}



/* Layout & Controls */

.collab-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: center !important;
  width: 100%;
  padding: 0.5rem 0.8rem;
}

.collab-controls > * {
  flex: 0 1 auto;
}

/* Search */
#searchInput {
  flex: 1 1 220px;
  max-width: 340px;
}

/* Sort Button */
.sort-toggle-btn {
  background: #1c1c1c;
  border: 1px solid #444;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: #eee;
  transition: background .2s, border-color .2s;
}

.sort-toggle-btn:hover {
  background: #2a2a2a;
  border-color: #888;
}

/* Slider Containers  */

.slider-container,
.range-control,
#durationSliderContainer {
  all: unset;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 260px;
  max-width: 250px;
}

.slider-container {
  padding: 0;
  margin: 0;
}

#friendSliderContainer,
#durationSliderContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 8px;
}

/* Slider Header */
.slider-header,
.duration-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.slider-title {
  flex: 1 auto;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.edge-label {
  font-size: 0.85rem;
  min-width: 34px;
  text-align: center;
  color: #aaa;
}

/* Slider Track + Fill */
.slider-wrap {
  position: relative;
  width: 100%;
  height: 2px;
  display: flex;
  align-items: center;
}

.slider-track {
  position: absolute;
  width: 100%;
  height: 5px;
  background: #333;
  border-radius: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.slider-fill,
.range-fill {
  position: absolute;
  height: 6px;
  background: var(--teal);
  border-radius: 6px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Slider INPUTS (Shared) */

input[type="range"],
.slider-input {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
  background: transparent;
  width: 100%;
  height: 26px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Chrome / Edge / Safari Thumb */
input[type="range"]::-webkit-slider-thumb,
.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 12px;
  height: 12px;
  background: var(--teal);
  border: 2px solid #111;
  transform: rotate(45deg);
  border-radius: 0;
  cursor: pointer;
  box-sizing: border-box;
}

/* Firefox Thumb */
input[type="range"]::-moz-range-thumb {
  pointer-events: all;
  width: 12px;
  height: 12px;
  background: var(--teal);
  border: 2px solid #111;
  transform: rotate(45deg);
  border-radius: 0;
  cursor: pointer;
  box-sizing: border-box;
}

/* Hover + Active */
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:hover::-moz-range-thumb {
  background: #00bcd4;
  transform: rotate(45deg) scale(1.1);
}

input[type="range"]:active::-webkit-slider-thumb,
input[type="range"]:active::-moz-range-thumb {
  background: #00a0b5;
  transform: rotate(45deg) scale(1.1);
}

/* Firefox Fix */
@-moz-document url-prefix() {
  input[type="range"] {
    margin-top: 0;
  }
}

/* Baseline Alignment */
#durationSliderContainer .slider-wrap,
#friendSliderContainer .slider-wrap {
  margin-top: -1px;
}

/* Chrome / Edge / Safari thumb offset fix */
input[type="range"]::-webkit-slider-thumb {
  margin-top: -3px; 
}