/* ==============================================
   SVG Diagram Styling
   Theme-aware diagrams with consistent styling
   ============================================== */

/* Container for SVG diagrams */
.diagram-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
  margin-left: auto;
  margin-right: auto;
  /* Hidden overflow to prevent any content from escaping */
  overflow: hidden;
  color: var(--text-primary);
  text-align: center;
  max-width: 800px;
  /* Ensure container respects boundaries */
  box-sizing: border-box;
}

/* When diagram-box contains an object (external SVG) */
.diagram-box object {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Base image styling inside diagram-box */
.diagram-box img {
  /* Maximum width to prevent overflow */
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: var(--radius-sm);
  /* Ensure image respects container boundaries */
  box-sizing: border-box;
}

/* Diagram image class - explicit styling */
.diagram-box img.diagram-img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
}

/* PNG/JPG diagrams - white background, invert in dark mode */
.diagram-box img[src$=".png"],
.diagram-box img[src$=".jpg"],
.diagram-box img[src$=".jpeg"] {
  background: white;
  filter: invert(1) hue-rotate(180deg);
}

/* Chemistry SVG diagrams - designed for dark backgrounds */
.diagram-box img[src*="/chemistry/"][src$=".svg"] {
  /* Dark background matching the SVG design */
  background: #1e293b;
  border-radius: var(--radius-sm);
  padding: 12px;
  filter: none !important;
  /* Constrain width to container minus padding */
  width: 100%;
  max-width: calc(100% - 24px);
  /* Let height scale proportionally */
  height: auto;
  display: block;
  margin: 0 auto;
  /* Ensure SVG scales without cropping */
  object-fit: contain;
  /* Prevent overflow */
  overflow: hidden;
}

/* Light mode: PNG diagrams show normally */
#theme-toggle:checked ~ .page-wrapper .diagram-box img[src$=".png"],
#theme-toggle:checked ~ .page-wrapper .diagram-box img[src$=".jpg"],
#theme-toggle:checked ~ .page-wrapper .diagram-box img[src$=".jpeg"] {
  filter: none;
}

/* Chemistry SVGs keep dark background in light mode */
#theme-toggle:checked ~ .page-wrapper .diagram-box img[src*="/chemistry/"][src$=".svg"] {
  background: #1e293b !important;
  filter: none !important;
}

/* Additional diagram-box constraints */
/* (Main definition is at top of file) */

/* PNG diagrams - proper sizing for high-DPI converted images */
.diagram-box img[src$=".png"] {
  background: var(--bg-primary, #1e293b) !important;
  border-radius: var(--radius-sm);
  padding: 12px;
  /* PNG is now 800x444, display at natural size */
  width: 100% !important;
  max-width: 776px !important; /* 800px container - 24px padding */
  height: auto !important;
  display: block;
  margin: 0 auto;
  /* Maintain aspect ratio */
  object-fit: contain;
  /* Force these rules to override */
  white-space: normal !important;
  font-family: inherit !important;
}

/* Ensure PNG images specifically don't exceed bounds */
.diagram-box img.diagram-img[src$=".png"] {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
}

.diagram-box img[src$=".svg"],
.diagram-box object[type="image/svg+xml"] {
  background: var(--bg-primary, #1e293b);
  border-radius: var(--radius-sm);
  padding: 12px;
  /* Ensure SVG fits within container */
  width: 100%;
  max-width: calc(100% - 24px); /* Account for padding */
  height: auto;
  display: block;
  margin: 0 auto;
  /* Ensure SVG scales properly without clipping */
  object-fit: contain;
  /* Prevent any overflow */
  overflow: hidden;
  /* Let SVG handle its own aspect ratio via viewBox */
}

/* All diagrams now use fixed colors - no special handling needed */

/* Class for SVGs that should NOT be inverted */
.diagram-box img.diagram-no-invert {
  filter: none !important;
  background: white;
}

/* Wide diagrams (like spectrum) - constrain height */
.diagram-box img.diagram-wide {
  max-height: 250px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Standard diagrams - smaller width */
.diagram-box img.diagram-standard {
  max-width: 400px;
}

/* ASCII diagram styling - preserve whitespace and use monospace */
.diagram-box:not(:has(img)):not(:has(object)) {
  white-space: pre-wrap;
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--font-sm);
  line-height: 1.4;
  text-align: left;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .diagram-box {
    padding: var(--space-sm);
    font-size: 11px;
    /* Prevent overflow on mobile */
    overflow: hidden;
    max-width: 100%;
  }

  .diagram-box img[src$=".svg"] {
    /* Let SVG scale down on mobile */
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 400px) {
  .diagram-box img[src$=".svg"] {
    /* Scale down further on very small screens */
    width: 100%;
    max-width: 100%;
  }
}