/* =============================================================================
   The Kneeldown v2 — functional layout fixes
   =============================================================================
   Design-system styling (shell, cards, nav, forms, footer) lives in
   www/custom.scss, compiled through the bslib theme (R/00-theme.R).
   This file only holds plain-CSS fixes for third-party widget layout
   (DataTables overflow, viz overlays) that don't need theme variables. */

/* 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; }

/* Soft badge used in helper text / tooltips. min-width (NOT a fixed width)
   plus nowrap: a hard 18px width forced multi-character content like "n=4182"
   to stack one character per line. Single-glyph help icons ("?") still render
   as an 18px circle-ish pill. */
.badge-soft {
  display:inline-block;
  min-width:18px; height:18px; line-height:18px;
  padding:0 5px;
  white-space:nowrap;
  text-align:center; border-radius:9px;
  background:#eef3f7; color:#334e68; font-weight:600;
  border:1px solid #d6e1ea; cursor:help;
}

/* Pill variant for inline sample-size chips ("n=4182") next to card titles. */
.badge-pill {
  display:inline-block;
  white-space:nowrap;
  padding:2px 8px;
  border-radius:10px;
  font-size:0.75rem;
  line-height:1.2;
  vertical-align:middle;
  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. overflow-y must stay `auto`:
   with the 520px max-height below, `hidden` silently cut off every row past
   the fold with no scrollbar to reach them. */
div.dt-scroll,
.dataTables_wrapper .dataTables_scrollBody {
    overflow-x: auto !important;
    overflow-y: auto !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;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.ws-table-wrap {
  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.8rem;
    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;
  }
}

@media (max-width: 640px) {
  /* Keep top filter toggles from squeezing */
  .well .form-check-inline {
    margin-right: 10px;
  }
}

/* ----------------- 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;
}