/* Plot styling - match code block borders */
/* Bootstrap 5 Sandstone uses --bs-border-radius: .375rem for pre/code */
img.r-plt,
.figure img,
figure img,
img.figure-img,
svg.inline-svg {
  max-width: 100%;
  width: 100%;
  height: auto;
  border: 1px solid #DFD7CA;
  border-radius: .375rem;
  overflow: hidden;
  display: block;
  margin-bottom: 1rem;
}

/* Mobile: code block text wrapping (LaTeX-style) */
/* Wrap at spaces, break long tokens only when necessary, no horizontal scroll */
@media (max-width: 575.98px) {
  pre.sourceCode,
  .sourceCode pre {
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-x: hidden !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
  }
  pre.sourceCode code,
  .sourceCode pre code {
    white-space: pre-wrap !important;
    word-break: break-all !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
  }
}

/* Mobile: match code block full-width behavior */
/* Code blocks use negative margins to expand on mobile - plots should too */
/* Note: <p><div> is invalid HTML - browser auto-closes <p>, so .svg-container becomes a sibling */
/* Target .svg-container directly since it is no longer inside <p> after browser parsing */
@media (max-width: 575.98px) {
  /* Target p wrapping standalone SVGs/imgs, and svg-container directly */
  p:has(> svg.inline-svg),
  p:has(> img.r-plt),
  .svg-container {
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * -.5) !important;
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5) !important;
    width: calc(100% + var(--bs-gutter-x, 1.5rem)) !important;
    max-width: none !important;
  }
  /* SVGs/imgs - rectangular borders on mobile */
  p > svg.inline-svg,
  p > img.r-plt,
  .svg-container > svg.inline-svg {
    border-radius: 0 !important;
    border: 1px solid #DFD7CA !important;
    width: 100% !important;
    max-width: none !important;
  }
  /* Dark mode mobile border */
  [data-bs-theme="dark"] p > svg.inline-svg,
  [data-bs-theme="dark"] p > img.r-plt,
  [data-bs-theme="dark"] .svg-container > svg.inline-svg {
    border: 1px solid #495057 !important;
  }
  /* Figure elements */
  .section .figure,
  .section figure,
  div > div > .figure,
  div > div > figure {
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * -.5) !important;
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5) !important;
    width: calc(100% + var(--bs-gutter-x, 1.5rem)) !important;
    max-width: none !important;
    border-radius: 0;
  }
  .section .figure img,
  .section figure img,
  div > div > .figure img,
  div > div > figure img {
    border-radius: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* Dark mode border */
[data-bs-theme="dark"] img.r-plt,
[data-bs-theme="dark"] .figure img,
[data-bs-theme="dark"] figure img,
[data-bs-theme="dark"] img.figure-img,
[data-bs-theme="dark"] svg.inline-svg {
  border-color: #495057;
}

/* Dark mode colors for inline SVG elements (base R svg format) */
/* Use !important to override embedded SVG <style> blocks */
[data-bs-theme="dark"] .theme-bg {
  fill: #343739 !important;
}

[data-bs-theme="dark"] .theme-text {
  fill: #DFD7CA !important;
}

/* Hide clipPath rects - they should not be visible */
svg.inline-svg clipPath rect,
svg.inline-svg defs rect {
  stroke: none !important;
  fill: none !important;
}

/* Dark mode colors for svglite format */
/* Override the embedded styles in inline SVGs */
/* No stroke on svg-bg - the outer CSS border handles rounding */
[data-bs-theme="dark"] svg.inline-svg .svg-bg {
  fill: #343739 !important;
  stroke: none !important;
}

/* Light mode - ensure svg-bg has no stroke */
svg.inline-svg .svg-bg {
  stroke: none !important;
}

[data-bs-theme="dark"] svg.inline-svg .svglite line,
[data-bs-theme="dark"] svg.inline-svg .svglite polyline,
[data-bs-theme="dark"] svg.inline-svg .svglite polygon,
[data-bs-theme="dark"] svg.inline-svg .svglite path,
[data-bs-theme="dark"] svg.inline-svg .svglite circle {
  stroke: #DFD7CA !important;
}

/* Dark mode text color - but NOT for text on custom legend backgrounds */
[data-bs-theme="dark"] svg.inline-svg .svglite text:not(.preserve-color) {
  fill: #DFD7CA !important;
}

/* Text on custom legend backgrounds keeps dark color for contrast */
svg.inline-svg .svglite text.preserve-color {
  fill: #3E3F3A !important;
}

/* Rect strokes (histogram bars, etc.) - match text color */
/* Use > g > rect to exclude clipPath rects; exclude stroke: none (empty legend keys) */
/* Exclude rects with rx attribute (rounded corners = plot frame rects handled by CSS border) */
[data-bs-theme="dark"] svg.inline-svg .svglite > g > rect:not([style*="stroke: none"]):not([rx]) {
  stroke: #DFD7CA !important;
}

/* Plot frame rects (with rx for rounded corners) - remove stroke, CSS border handles the frame */
svg.inline-svg .svglite > g > rect[rx] {
  stroke: none !important;
}

/* Legend box backgrounds - override inline fill */
/* Exclude svg-bg which is the main plot background */
[data-bs-theme="dark"] svg.inline-svg .svglite rect[style*="fill: #F5F6F8"]:not(.svg-bg),
[data-bs-theme="dark"] svg.inline-svg .svglite rect.legend-bg {
  fill: #343739 !important;
}

/* Grid lines */
/* White grid lines need to become dark in light mode, stay light in dark mode */
/* Light mode: dark grid on light bg */
svg.inline-svg .svglite polyline[style*="stroke: #FFFFFF"],
svg.inline-svg .svglite polyline[style*="stroke: #ffffff"] {
  stroke: #3E3F3A !important;
}
/* Dark mode: light grid on dark bg */
[data-bs-theme="dark"] svg.inline-svg .svglite polyline[style*="stroke: #FFFFFF"],
[data-bs-theme="dark"] svg.inline-svg .svglite polyline[style*="stroke: #ffffff"],
[data-bs-theme="dark"] svg.inline-svg .svglite polyline[style*="stroke: #3E3F3A"],
[data-bs-theme="dark"] svg.inline-svg .svglite polyline[style*="stroke: #3e3f3a"] {
  stroke: #DFD7CA !important;
}

/* ggplot2 theme_minimal() gridlines - light grey, adapt to dark mode */
[data-bs-theme="dark"] svg.inline-svg .svglite line[style*="stroke: #EBEBEB"],
[data-bs-theme="dark"] svg.inline-svg .svglite line[style*="stroke: #ebebeb"],
[data-bs-theme="dark"] svg.inline-svg .svglite polyline[style*="stroke: #EBEBEB"],
[data-bs-theme="dark"] svg.inline-svg .svglite polyline[style*="stroke: #ebebeb"] {
  stroke: #495057 !important;
}

/* Base R and other grey gridline variants */
[data-bs-theme="dark"] svg.inline-svg line[style*="stroke: #EBEBEB"],
[data-bs-theme="dark"] svg.inline-svg line[style*="stroke: #ebebeb"],
[data-bs-theme="dark"] svg.inline-svg line[style*="stroke: grey"],
[data-bs-theme="dark"] svg.inline-svg line[style*="stroke: gray"] {
  stroke: #495057 !important;
}

/* SVG copy button - container positioning */
.svg-container {
  position: relative;
  display: block;
}

/* SVG copy button styling - matches code block copy button */
.btn-copy-svg {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
  z-index: 10;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* Show button on hover */
.svg-container:hover .btn-copy-svg,
.svg-container:focus-within .btn-copy-svg {
  opacity: 1;
}

/* Keep button visible when focused (for keyboard users) */
.btn-copy-svg:focus {
  opacity: 1;
}

/* Mobile: always show button (no hover on touch) */
@media (max-width: 575.98px) {
  .btn-copy-svg {
    opacity: 0.7;
  }
  .svg-container:hover .btn-copy-svg {
    opacity: 1;
  }
  /* Adjust position for full-width mobile SVGs */
  .svg-container {
    position: relative;
  }
}