/* ============================================================
   Dark theme override for nbconvert HTML output
   Matches the BioSNICAR Classroom design
   ============================================================ */

body {
  background: #0a0f1a !important;
  color: #e2e8f0 !important;
  font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif !important;
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
  -webkit-font-smoothing: antialiased;
  margin: 0 !important;
  padding: 0 !important;
}

/* Navigation bar injected at top */
.classroom-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(10, 15, 26, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #1e293b;
  padding: 0.75rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-family: 'Source Sans 3', system-ui, sans-serif;
}
.classroom-nav a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
}
.classroom-nav a:hover { color: #e2e8f0; }
.classroom-nav .brand {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #38bdf8;
  margin-right: auto;
}
.classroom-nav .active { color: #38bdf8; }

/* Main content container */
#notebook-container, .container, div#notebook {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 2rem !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Override nbconvert's white background on cells */
div.cell, .jp-Cell, div.text_cell, div.output_area,
div.output_subarea, div.output_text, div.output_html,
.jp-RenderedHTMLCommon, .rendered_html {
  background: transparent !important;
  color: #e2e8f0 !important;
  border: none !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.rendered_html h1, .rendered_html h2, .rendered_html h3,
.rendered_html h4, .rendered_html h5, .rendered_html h6 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #f0f9ff !important;
  border-bottom: none !important;
  text-shadow: 0 0 20px rgba(56, 189, 248, 0.15);
}
h1, .rendered_html h1 { font-size: 2.2rem !important; margin-top: 2rem !important; }
h2, .rendered_html h2 { font-size: 1.6rem !important; margin-top: 2.5rem !important; }
h3, .rendered_html h3 { font-size: 1.25rem !important; color: #38bdf8 !important; margin-top: 1.5rem !important; }

/* Paragraph text */
p, .rendered_html p {
  color: #e2e8f0 !important;
  margin-bottom: 1.2rem !important;
}

/* Links */
a, .rendered_html a {
  color: #38bdf8 !important;
}

/* Strong / emphasis */
strong, .rendered_html strong { color: #f0f9ff !important; }
em, .rendered_html em { color: #cbd5e1 !important; }

/* Code */
code, .rendered_html code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  background: #111827 !important;
  color: #38bdf8 !important;
  padding: 0.15em 0.4em !important;
  border-radius: 4px !important;
  font-size: 0.88em !important;
}

pre, .rendered_html pre {
  background: #111827 !important;
  border: 1px solid #1e293b !important;
  border-radius: 8px !important;
  padding: 1rem !important;
  color: #e2e8f0 !important;
  overflow-x: auto !important;
}

pre code {
  background: transparent !important;
  padding: 0 !important;
}

/* ============================================================
   Blockquotes — BioSNICAR connection boxes
   ============================================================ */
blockquote, .rendered_html blockquote {
  background: rgba(56, 189, 248, 0.05) !important;
  border-left: 3px solid #38bdf8 !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 1rem 1.25rem !important;
  margin: 1.5rem 0 !important;
  color: #cbd5e1 !important;
}

/* ============================================================
   Tables — clean dark styling, no alternating light rows
   ============================================================ */
table, .rendered_html table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 1.5rem 0 !important;
  font-size: 0.92rem !important;
}

thead, .rendered_html thead {
  background: none !important;
}

th, .rendered_html th {
  background: #1e293b !important;
  color: #f0f9ff !important;
  padding: 0.65rem 0.85rem !important;
  border: 1px solid #334155 !important;
  font-weight: 600 !important;
  text-align: left !important;
}

td, .rendered_html td {
  padding: 0.55rem 0.85rem !important;
  border: 1px solid #1e293b !important;
  color: #cbd5e1 !important;
  background: transparent !important;
}

/* Subtle stripe — dark on dark, NOT light */
tr:nth-child(even) td,
.rendered_html tr:nth-child(even) td {
  background: rgba(30, 41, 59, 0.35) !important;
}

tr:nth-child(odd) td,
.rendered_html tr:nth-child(odd) td {
  background: transparent !important;
}

/* Hover highlight */
tr:hover td,
.rendered_html tr:hover td {
  background: rgba(56, 189, 248, 0.06) !important;
}

/* ============================================================
   Images / Plots — dark-themed card frame
   Matplotlib outputs have white backgrounds; we invert them
   so they match the dark theme.
   ============================================================ */

/* Invert plot images: turns white bg → dark, preserves color hues */
div.output_png img,
div.output_jpeg img,
div.output_subarea img,
.jp-RenderedImage img {
  filter: invert(0.88) hue-rotate(180deg) !important;
  border-radius: 8px !important;
  border: 1px solid #1e293b !important;
  max-width: 100% !important;
  display: block !important;
  margin: 1rem auto !important;
}

/* Markdown-embedded images (not plot outputs) should NOT be inverted */
.rendered_html img:not([src^="data:"]),
.text_cell img {
  filter: none !important;
  border-radius: 8px !important;
  border: 1px solid #1e293b !important;
  max-width: 100% !important;
}

/* Output text (print statements) */
div.output_text pre, .jp-OutputArea-output pre,
div.output_subarea pre {
  color: #94a3b8 !important;
  font-size: 0.85rem !important;
  background: transparent !important;
  border: none !important;
  padding: 0.5rem 0 !important;
}

/* ============================================================
   MathJax
   ============================================================ */
.MathJax, .MathJax_Display {
  color: #e2e8f0 !important;
}

/* ============================================================
   Lists
   ============================================================ */
ul, ol, .rendered_html ul, .rendered_html ol {
  color: #e2e8f0 !important;
  padding-left: 1.5rem !important;
}
li, .rendered_html li {
  margin-bottom: 0.4rem !important;
}

/* ============================================================
   Horizontal rules
   ============================================================ */
hr, .rendered_html hr {
  border: none !important;
  border-top: 1px solid #1e293b !important;
  margin: 3rem 0 !important;
}

/* ============================================================
   Hide nbconvert prompts / UI chrome
   ============================================================ */
.prompt, .input_prompt, .output_prompt,
div#notebook-container > div.cell > div.prompt,
.jp-InputPrompt, .jp-OutputPrompt {
  display: none !important;
}

/* Hide pilcrow (¶) anchor links on headings */
.anchor-link, a.anchor-link,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.rendered_html h1 a, .rendered_html h2 a, .rendered_html h3 a {
  display: none !important;
}

/* Also hide any lingering input cells (--no-input should handle this
   but some nbconvert versions leak them) */
div.input, div.input_area {
  display: none !important;
}

/* ============================================================
   Lightbox overlay for click-to-expand images
   ============================================================ */
#lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
#lightbox-overlay.open { display: flex; }

#lightbox-overlay img {
  max-width: 95vw;
  max-height: 90vh;
  border-radius: 8px;
  border: 1px solid #334155;
  filter: invert(0.88) hue-rotate(180deg);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

/* Make plot images show a zoom cursor */
div.output_png img,
div.output_subarea img {
  cursor: zoom-in;
}

/* ============================================================
   Footer
   ============================================================ */
.classroom-footer {
  max-width: 800px;
  margin: 3rem auto 2rem;
  padding: 1.5rem 2rem;
  border-top: 1px solid #1e293b;
  text-align: center;
  font-size: 0.85rem;
  color: #64748b;
}
.classroom-footer a { color: #94a3b8 !important; text-decoration: none; }
.classroom-footer a:hover { color: #38bdf8 !important; }