/* pkgdown extra CSS - Full-width vignettes
   Per issue #17: Vignette content must fill ~95% of browser window */

/* Override Bootstrap container max-width at ALL breakpoints */
body > .container,
.container {
  max-width: 95% !important;
  width: 95%;
}

/* Expand content column, shrink TOC */
.col-md-9 {
  flex: 0 0 80%;
  max-width: 80%;
}

.col-md-3 {
  flex: 0 0 20%;
  max-width: 20%;
}

/* Ensure .contents area uses full available width */
.contents {
  max-width: none;
  width: 100%;
}

/* pkgdown article body */
.page-content,
main .contents {
  max-width: none;
}

/* Smaller TOC font to save space */
#toc {
  font-size: 0.85rem;
}

#toc .nav-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}

/* Hide TOC on mobile for clean layout */
@media (max-width: 991.98px) {
  #toc {
    display: none;
  }

  .col-md-9 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Tables fill available width */
.table-responsive {
  overflow-x: auto;
}

table {
  width: 100%;
  max-width: 100%;
}

/* DT datatable: full width with horizontal scroll for overflow */
.dataTables_wrapper {
  width: 100%;
  overflow-x: auto;
}

/* Plotly charts: full width */
.plotly {
  width: 100% !important;
}

.js-plotly-plot {
  width: 100% !important;
}

/* Code folding: hide/show toggle for .fold-hide chunks */
.fold-hide {
  display: none;
}

.code-fold-toggle {
  cursor: pointer;
  color: #0d6efd;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  user-select: none;
}

.code-fold-toggle:hover {
  text-decoration: underline;
}

.code-fold-toggle::before {
  content: "\25B6  ";
  font-size: 0.7rem;
}

.code-fold-toggle.open::before {
  content: "\25BC  ";
}

/* DT table column widths: prevent excessive wrapping */
.dataTables_wrapper {
  font-size: 0.9rem;
}

.dataTables_wrapper td,
.dataTables_wrapper th {
  white-space: nowrap;
  padding: 4px 8px !important;
}

/* Dark plot container for risk comparison plots */
.dark-plot-container {
  background-color: #1a1a1a;
  padding: 10px;
  border-radius: 4px;
}

/* Allow wrapping only on columns explicitly marked, with generous min-width */
.dataTables_wrapper td.dt-wrap,
.dataTables_wrapper th.dt-wrap {
  white-space: normal;
  min-width: 300px;
}