/* GATAC documentation — custom styles (scanpydoc / sphinx-book-theme base) */

/* ── Brand colours ───────────────────────────────────────────────────────── */
:root {
  --gatac-green:     #73b301;   /* logo green */
  --gatac-green-dark:#5a8c00;
  --gatac-gpu:       #76b900;   /* NVIDIA green */
  --pst-color-link-hover: var(--gatac-green);
  --pst-color-secondary: var(--gatac-green);
}

html[data-theme="light"] {
  --pst-color-secondary: var(--gatac-green);
}

html[data-theme="dark"] {
  --pst-color-link-hover: var(--gatac-green);
  --pst-color-secondary: var(--gatac-green);
}

/* ── Logo spacing ────────────────────────────────────────────────────────── */
.navbar-brand img {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  max-height: 100px;
}

/* ── Toctree caption headings (sidebar section labels) ───────────────────── */
p.caption .caption-text,
.bd-sidebar-secondary .onthispage {
  color: var(--gatac-green);
  font-weight: 600;
  text-transform: uppercase;
}

/* ── Custom small/smaller roles (mirrors rapids-singlecell usage) ─────────── */
.small   { font-size: 40% !important; }
.smaller { font-size: 70% !important; }

/* ── Landing page hero cards ─────────────────────────────────────────────── */
.sd-card {
  border-radius: 8px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.sd-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* ── API summary tables ──────────────────────────────────────────────────── */
table.autosummary td:first-child code {
  white-space: nowrap;
}

/* ── Code blocks ─────────────────────────────────────────────────────────── */
div.highlight pre {
  border-radius: 6px;
}

/* Inline code */
code.literal {
  background-color: var(--pst-color-surface);
  border: 1px solid var(--pst-color-border);
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 0.88em;
}

/* ── Admonition tweaks ───────────────────────────────────────────────────── */
div.admonition.note > p.admonition-title::before {
  content: "ℹ️  ";
}
div.admonition.warning > p.admonition-title::before {
  content: "⚠️  ";
}
div.admonition.tip > p.admonition-title::before {
  content: "💡  ";
}

/* ── Mermaid diagrams ────────────────────────────────────────────────────── */
.mermaid svg {
  max-width: 100%;
  border-radius: 6px;
}

/* ── Sidebar active link ─────────────────────────────────────────────────── */
.bd-sidebar-primary .nav-link.active {
  border-left: 3px solid var(--gatac-green);
  font-weight: 600;
}

/* ── Back-to-top button ──────────────────────────────────────────────────── */
#pst-back-to-top {
  background-color: var(--gatac-green);
  color: #fff;
}

#pst-back-to-top:hover {
  background-color: var(--gatac-green-dark);
  color: #fff;
}

#pst-back-to-top:focus-visible {
  outline-color: var(--gatac-green);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer.bd-footer {
  border-top: 1px solid var(--pst-color-border);
  font-size: 0.85rem;
}

/* ── GPU badge (used in API pages) ──────────────────────────────────────── */
.gpu-badge {
  display: inline-block;
  background: var(--gatac-gpu);
  color: #000;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 4px;
}

/* ── Responsive tables ───────────────────────────────────────────────────── */
table.docutils {
  width: 100%;
  overflow-x: auto;
  display: block;
}

/* ── Heading anchor links ─────────────────────────────────────────────────── */
a.headerlink {
  color: var(--gatac-green);
}

a.headerlink:hover {
  color: var(--gatac-green-dark);
}

/* ── Notebook output images ──────────────────────────────────────────────── */
/* Override the fixed width/height attributes baked into notebook outputs so
   images scale responsively with the page width.                             */
.cell_output img,
.output img {
  max-width: 100%;
  height: auto !important;
  width: auto !important;
}

/* ── Dark mode overrides ─────────────────────────────────────────────────── */
html[data-theme="dark"] {
  --gatac-blue: #58a6ff;
}

html[data-theme="dark"] code.literal {
  background-color: #161b22;
  border-color: #30363d;
}