/* Tighten vertical gaps around stacked elements */
.tight-gap { margin-top: 8px; }
.tight-gap:first-child { margin-top: 0; }

/* Remove extra whitespace from plots/tables inside tight sections */
.tight-gap .shiny-plot-output { margin-bottom: 0 !important; }

/* DataTables adds .row wrappers with default Bootstrap margins; neutralize them */
.dataTables_wrapper .row { margin-left: 0; margin-right: 0; }
.dataTables_wrapper .row:first-child { margin-top: 4px; }
.dataTables_wrapper .row:last-child  { margin-bottom: 0; }

/* Keep download button snug to the table area */
.ws-table-wrap .dt-buttons,
.ws-table-wrap .dataTables_length { margin-top: 6px; }

/* ---------- Cleaner tab nav (pills) ---------- */
/* Tabs: fix wrapping/overflow */
.tabs-wrap .nav-pills .nav-item {
  flex: 0 0 auto;               /* never stretch to fill row */
}

.tabs-wrap .nav-pills .nav-link {
  display: inline-flex;          /* size to content */
  align-items: center;
  white-space: nowrap;           /* prevent line-wrap */
  max-width: 100%;               /* safety on tiny screens */
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 1.1;              /* tighter vertical rhythm */
}

/* Kill the decorative underline to avoid extra height */
.tabs-wrap .nav-pills .nav-link.active::after { display: none; }

/* If a tab must wrap on very small screens, keep the pill tidy */
@media (max-width: 420px) {
  .tabs-wrap .nav-pills { row-gap: 6px; }   /* nicer multi-row spacing */
  .tabs-wrap .nav-pills .nav-link { white-space: normal; }
}

/* Hover/active treatments */
.tabs-wrap .nav-pills .nav-link:hover {
  background: rgba(var(--bs-primary-rgb), .08);
  color: var(--bs-primary);
  border-color: rgba(var(--bs-primary-rgb), .18);
}

.tabs-wrap .nav-pills .nav-link.active {
  color: #fff;
  background: var(--bs-primary);
  box-shadow: 0 4px 14px rgba(var(--bs-primary-rgb), .25);
}

/* Optional: subtle underline on active tab */
.tabs-wrap .nav-pills .nav-link.active::after {
  content: "";
  display: block;
  height: 2px;
  background: #fff;
  opacity: .5;
  margin-top: 4px;
  border-radius: 2px;
}

/* Tighten heading spacing below tabs */
.tab-content h4 { margin-top: 10px; }

/* Compact the tab bar on mobile */
@media (max-width: 576px) {
  .tabs-wrap { padding: 6px 0 8px; }
  .tabs-wrap .nav-pills .nav-link { padding: 8px 12px; }
}

/* Soft badge used in helper text / tooltips */
.badge-soft {
  display:inline-block;
  width:18px; height:18px; line-height:18px;
  text-align:center; border-radius:50%;
  background:#eef3f7; color:#334e68; font-weight:600;
  border:1px solid #d6e1ea; cursor:help;
}

/* ========= Fix Weekly Stats + QB Tables: Horizontal Scrolling ========= */

/* Force DT scroll wrapper to allow overflow */
div.dt-scroll,
.dataTables_wrapper .dataTables_scrollBody {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
}

/* Ensure wide tables do not collapse */
table.dataTable {
    width: 100% !important;
    white-space: nowrap !important;
}

/* Ensure parent wrapper expands */
.dataTables_wrapper {
    width: 100% !important;
    display: block !important;
}

.ws-table-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.dataTables_wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.dataTables_scrollBody {
  max-height: 520px !important;
}

/* ================= Mobile polish ================= */
@media (max-width: 768px) {
  .well {
    padding: 12px;
  }

  .well .form-label,
  .well .control-label {
    font-size: 0.95rem;
    margin-bottom: 6px;
    line-height: 1.2;
  }

  .well .form-group {
    margin-bottom: 10px;
  }

  table.dataTable th,
  table.dataTable td {
    padding: 6px 8px;
    font-size: 13px;
  }
}

/* ----------------- Viz metadata overlays ----------------- */
.viz-with-meta { position: relative; }

.viz-subtitle-tr {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 12px;
  color: #6c757d;
  text-align: right;
  max-width: 70%;
}

.viz-caption-br {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 11px;
  color: #6c757d;
  text-align: right;
}

.viz-table-caption {
  caption-side: bottom;
  text-align: right;
  color: #6c757d;
  padding: 6px 8px 4px;
  font-size: 12px;
}

.viz-table-caption .viz-subtitle-tr,
.viz-table-caption .viz-caption-br {
  position: static;
  display: block;
}

@media (max-width: 640px) {
  /* Make the tab bar horizontally scrollable instead of wrapping awkwardly */
  .tabs-wrap .nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    column-gap: 8px;
    padding-bottom: 4px;
  }

  .tabs-wrap .nav-pills::-webkit-scrollbar {
    display: none;
  }

  .tabs-wrap .nav-pills .nav-item {
    flex: 0 0 auto;
  }

  /* Keep top filter toggles from squeezing */
  .well .form-check-inline {
    margin-right: 10px;
  }
}