/* ── Page transition — smooth theme switch ──────────────────────── */
/* Scoped under .theme-ready so transitions only fire on user toggle,
   not on page load when the initial data-bs-theme is applied.       */
html.theme-ready body,
html.theme-ready .navbar,
html.theme-ready .navbar-brand,
html.theme-ready pre,
html.theme-ready code,
html.theme-ready a,
html.theme-ready .sidebar,
html.theme-ready .content {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

/* ── Hyperlinks — restore default, override inside code only ────── */
a, a:visited {
  color: #FF6B6B;
}

/* Navbar links stay white */
.navbar a, .navbar a:visited {
  color: white !important;
}

/* Dropdown toggle button */
.navbar-nav .nav-item.dropdown > .nav-link,
.navbar-nav .nav-item.dropdown > .nav-link:visited,
.navbar-nav .dropdown-toggle,
.navbar-nav .dropdown-toggle:visited {
  color: white !important;
}

.navbar-nav .nav-item.dropdown > .nav-link:hover,
.navbar-nav .dropdown-toggle:hover {
  color: #FF6B6B !important;
}

/* Dropdown menu items */
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item:visited {
  color: white !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  color: #FF6B6B !important;
  background-color: transparent !important;
}

/* ── Navbar tab animation — smooth coral hover + glow ───────────── */
/* Override Bootstrap's active-color variable so it uses coral instead
   of full-white emphasis, removing the built-in brightness "shadow". */
.navbar-nav {
  --bs-navbar-active-color: #FF6B6B;
  --bs-navbar-hover-color: #FF6B6B;
}

.navbar-nav .nav-link {
  transition: color 0.25s ease, text-shadow 0.25s ease !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  text-decoration: none !important;
  background: none !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-item.show > .nav-link {
  color: #FF6B6B !important;
  text-shadow: 0 0 10px rgba(255, 107, 107, 0.55);
  box-shadow: none !important;
  background: none !important;
  border: none !important;
}

/* Align navbar icons with text */
.navbar-nav .nav-link i.fa,
.navbar-nav .dropdown-toggle i.fa {
  vertical-align: -0.1em;
  margin-right: 0.3em;
}

.navbar a:hover {
  color: #FF6B6B !important;
}

/* ── Theme toggle switch ────────────────────────────────────────── */
/* NOTE: The JS toggle sets data-bs-theme="dark" for LIGHT mode and
   data-bs-theme="light" for DARK mode. This is intentional —
   see _pkgdown.yml after_body script. Do NOT change the selector
   mapping without also updating the JS toggle logic.               */

/* Button wrapper — no browser button styles */
.theme-switch {
  background: none;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* Track — dark mode default: white tones */
.theme-switch-track {
  width: 52px;
  height: 26px;
  border-radius: 13px;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.45);
  position: relative;
  display: block;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* Thumb — dark mode: white circle, sun icon, left side */
.theme-switch-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  position: absolute;
  top: 2px;
  left: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(0);
  transition: transform 0.3s ease, background 0.3s, color 0.3s;
  font-size: 10px;
  color: #FF6B6B;
}

/* Light mode active: thumb slides right, track becomes teal-tinted */
[data-bs-theme="dark"] .theme-switch-track {
  background: rgba(1,57,79,0.12);
  border-color: rgba(1,57,79,0.4);
}

[data-bs-theme="dark"] .theme-switch-thumb {
  transform: translateX(26px);
  background: #01394f;
  color: #FFB74D;
}

/* Hover glow */
.theme-switch:hover .theme-switch-track {
  border-color: #FF6B6B;
  box-shadow: 0 0 0 2px rgba(255,107,107,0.25);
}

pre a, pre a:visited {
  color: #80DEEA !important;
}

pre a:hover {
  color: #FF6B6B !important;
}

.navbar-brand::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-left: 10px;
  background-image: url("inst/figures/logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}



/* ── Code blocks — default = DARK theme ────────────────────────── */
/* Unscoped styles apply when data-bs-theme is unset or "light".
   bslib compiles the dark background (#01394f) as the site default,
   so these dark code block styles match that default state.        */

/* Fenced code blocks — lighter than page bg so they lift off */
pre {
  background-color: #1e576b !important;
  border: 1px solid #FF6B6B !important;
  border-radius: 6px !important;
  padding: 1rem !important;
  color: #e8f4f8 !important;
}

/* Inline code */
code {
  background-color: #1e576b !important;
  color: #FF6B6B !important;
  border-radius: 4px !important;
  padding: 0.15em 0.4em !important;
  font-size: 0.9em !important;
}

/* Syntax highlighting */
pre code {
  color: #e8f4f8 !important;         /* bright white-teal — default text */
}

/* downlit classes (used by pkgdown for R highlighting) */
.sourceCode .op       { color: #FF6B6B !important; }   /* coral  — operators: <- = () + ~ */
.sourceCode .kw       { color: #FF6B6B !important; }   /* coral  — keywords: if, for, function */
.sourceCode .fu       { color: #80CBC4 !important; }   /* teal   — function calls */
.sourceCode .st       { color: #A5D6A7 !important; }   /* cyan   — strings */
.sourceCode .dv,
.sourceCode .fl,
.sourceCode .in       { color: #FFD54F !important; }   /* yellow — numbers */
.sourceCode .co       { color: #90A4AE !important; font-style: italic; } /* muted — comments */
.sourceCode .cn       { color: #FFB74D !important; }   /* amber  — TRUE, FALSE, NULL, NA */
.sourceCode .sc       { color: #FF6B6B !important; }   /* coral  — special characters */
.sourceCode .va       { color: #e8f4f8 !important; }   /* white  — variable names */
.sourceCode .ot       { color: #e8f4f8 !important; }   /* white  — other identifiers */

/* ── Code blocks — LIGHT theme (selector = "dark") ─────────────── */
/* Scoped under [data-bs-theme="dark"] because the JS sets that
   attribute when the user switches TO light mode. Counterintuitive
   but intentional — matches the JS toggle in _pkgdown.yml.        */

[data-bs-theme="dark"] pre {
  background-color: #f5f5f5 !important;
  border: 1px solid #FF6B6B !important;
  border-radius: 6px !important;
  padding: 1rem !important;
  color: #1a1a1a !important;
}

[data-bs-theme="dark"] code {
  background-color: #f0f0f0 !important;
  color: #c0392b !important;
  border-radius: 4px !important;
  padding: 0.15em 0.4em !important;
  font-size: 0.9em !important;
}

[data-bs-theme="dark"] pre code {
  color: #1a1a1a !important;
}

[data-bs-theme="dark"] .sourceCode .op  { color: #c0392b !important; }
[data-bs-theme="dark"] .sourceCode .kw  { color: #c0392b !important; }
[data-bs-theme="dark"] .sourceCode .fu  { color: #00796b !important; }
[data-bs-theme="dark"] .sourceCode .st  { color: #2e7d32 !important; }
[data-bs-theme="dark"] .sourceCode .dv,
[data-bs-theme="dark"] .sourceCode .fl,
[data-bs-theme="dark"] .sourceCode .in  { color: #e65100 !important; }
[data-bs-theme="dark"] .sourceCode .co  { color: #78909c !important; font-style: italic; }
[data-bs-theme="dark"] .sourceCode .cn  { color: #6a1a6a !important; }
[data-bs-theme="dark"] .sourceCode .sc  { color: #c0392b !important; }
[data-bs-theme="dark"] .sourceCode .va  { color: #1a1a1a !important; }
[data-bs-theme="dark"] .sourceCode .ot  { color: #1a1a1a !important; }

[data-bs-theme="dark"] a,
[data-bs-theme="dark"] a:visited      { color: #c0392b; }
[data-bs-theme="dark"] pre a,
[data-bs-theme="dark"] pre a:visited  { color: #00796b !important; }
[data-bs-theme="dark"] pre a:hover    { color: #FF6B6B !important; }

/* ── Copy-code button — dark theme (default) ────────────────────── */
.btn-copy-code {
  background: transparent;
  border: 1.5px solid rgba(255, 107, 107, 0.45);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  color: rgba(255, 107, 107, 0.75);
  font-size: 1rem;
  line-height: 1;
  opacity: 1 !important;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.btn-copy-code:hover,
.btn-copy-code:focus {
  color: #FF6B6B;
  border-color: #FF6B6B;
  background: rgba(255, 107, 107, 0.1);
  outline: none;
  box-shadow: none;
}

/* ── Copy-code button — light theme ────────────────────────────── */
[data-bs-theme="dark"] .btn-copy-code {
  border-color: rgba(192, 57, 43, 0.35);
  color: rgba(192, 57, 43, 0.65);
}

[data-bs-theme="dark"] .btn-copy-code:hover,
[data-bs-theme="dark"] .btn-copy-code:focus {
  color: #c0392b;
  border-color: #c0392b;
  background: rgba(192, 57, 43, 0.08);
}

/* ── Code-folding toggle — dark theme (default) ─────────────────── */
details.code-fold > summary {
  display: flex !important;
  width: fit-content !important;
  margin: 0 auto 10px !important;
  align-items: center !important;
  gap: 7px;
  background: transparent !important;
  border: 1.5px solid rgba(255, 107, 107, 0.45) !important;
  border-radius: 6px !important;
  padding: 6px 16px !important;
  cursor: pointer;
  color: rgba(255, 107, 107, 0.85) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  list-style: none !important;
  transform: translateY(0);
  transition: color 0.2s ease, border-color 0.2s ease,
              background 0.2s ease, box-shadow 0.2s ease,
              transform 0.2s ease;
}

/* fa-code icon before the label */
details.code-fold > summary::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f121";
  font-size: 0.8rem;
  transition: transform 0.25s ease;
}

/* chevron after the label — rotates when open */
details.code-fold > summary::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f078";
  font-size: 0.7rem;
  margin-left: 2px;
  transition: transform 0.25s ease;
}

details[open].code-fold > summary::after {
  transform: rotate(180deg);
}

details.code-fold > summary:hover,
details.code-fold > summary:focus {
  color: #FF6B6B !important;
  border-color: #FF6B6B !important;
  background: rgba(255, 107, 107, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.15) !important;
  transform: translateY(-2px);
  outline: none;
}

details.code-fold > summary:hover::before {
  transform: scale(1.25);
}

/* ── Code-folding toggle — light theme ─────────────────────────── */
[data-bs-theme="dark"] details.code-fold > summary {
  border-color: rgba(192, 57, 43, 0.35) !important;
  color: rgba(192, 57, 43, 0.75) !important;
}

[data-bs-theme="dark"] details.code-fold > summary:hover {
  color: #c0392b !important;
  border-color: #c0392b !important;
  background: rgba(192, 57, 43, 0.06) !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12) !important;
}




/* reactable table ─────────────────────────── */

/* Make everything transparent */
.reactable, .ReactTable, .rt-table {
  background-color: transparent !important;
}

/* Header styling - lines and font in #FF6B6B */
.rt-thead {
  background-color: transparent !important;
  color: #FF6B6B !important;
  border-bottom: 2px solid #FF6B6B !important;
}

.rt-th {
  color: #FF6B6B !important;
  border-right: 1px solid #FF6B6B !important;
}

/* Body text in white */
.rt-tbody {
  background-color: transparent !important;
  color: white !important;
}

.rt-td {
  color: white !important;
  border-right: 1px solid rgba(255, 107, 107, 0.3) !important;
}

/* Striped rows - transparent */
.rt-tr-striped {
  background-color: transparent !important;
}

/* Hover effect */
.rt-tr:hover {
  background-color: transparent !important;
}

/* Search bar - general (top search) */
.rt-search {
  color: white !important;
}

.rt-search input {
  background-color: transparent !important;
  color: white !important;
  border: 1px solid #FF6B6B !important;
}

.rt-search input::placeholder {
  color: white !important;
}

/* Filter row and cells - transparent background */
.rt-tr-filters {
  background-color: transparent !important;
}

.rt-td-filter {
  background-color: transparent !important;
}


/* Filter inputs - by variable (column filters) */
.rt-thead-filter input, .rt-thead-filter select,
.rt-td-filter input, .rt-td-filter select {
  background-color: transparent !important;
  color: white !important;
  border: 1px solid #FF6B6B !important;
}

.rt-thead-filter input::placeholder,
.rt-td-filter input::placeholder {
  color: white !important;
}


/* Search input - the actual input field */
input.rt-search {
  background-color: transparent !important;
  color: white !important;
  border: 1px solid #FF6B6B !important;
}