/* Tabs horizontal scroll + fade indicators (v2 for updated modal-header)
 *
 * Updated modal-header structure:
 * <div class="modal-header ... d-flex gap-2">
 *   <div class="tabs-fade-shell flex-grow-1">
 *     <div class="tabs-scroll-wrapper">
 *       <ul class="nav nav-tabs flex-nowrap" id="modalTabs" role="tablist">...</ul>
 *       <div class="scroll-hint" id="modalTabsScrollHint">Scroll</div>
 *     </div>
 *   </div>
 *   <button class="btn-close modal-tabs-close" ...></button>
 * </div>
 *
 * Notes:
 * - The scroller is .tabs-scroll-wrapper
 * - Fade overlays are on .tabs-fade-shell so they DO NOT scroll with content
 * - Toggle .at-start / .at-end on .tabs-fade-shell via JS
 */

/* ---------- Outer shell (NOT scrollable): holds fade overlays ---------- */
.tabs-fade-shell {
  position: relative;
  /* Small gap so the last tab doesn't touch the close button area */
  padding-right: 8px;
  min-width: 0; /* allow flex item to shrink properly */
}

/* Left/Right fades */
.tabs-fade-shell::after,
.tabs-fade-shell::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 24px;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.15s ease;
}

/* Left fade */
.tabs-fade-shell::before {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
}

/* Right fade */
.tabs-fade-shell::after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
}

/* Hide fades when at the ends */
.tabs-fade-shell.at-start::before {
  opacity: 0;
}
.tabs-fade-shell.at-end::after {
  opacity: 0;
}

/* ---------- Inner wrapper (scrollable) ---------- */
.tabs-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  scrollbar-width: none; /* Firefox hide scrollbar */
}

/* Hide scrollbar on WebKit */
.tabs-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

/* Prevent tabs from shrinking / wrapping */
.tabs-scroll-wrapper .nav-tabs {
  flex-wrap: nowrap;
  white-space: nowrap;
  margin-bottom: 0; /* modal-header already has its own spacing */
}

/* ---------- Scroll hint (optional) ---------- */
.scroll-hint {
  position: absolute;
  top: 40%;
  right: 30%;
  padding: 4px 10px;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
  z-index: 3;
}

.scroll-hint.show {
  opacity: 1;
  transform: translateX(0);
}

/* ---------- Close button always on top ---------- */
.modal-tabs-close {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
}