/* ============================================================
   BRAC POC — custom Material overrides
   Wider content, larger fonts, more breathing room.
   ============================================================ */

/* ---------- Content width ---------- */

/* Material caps .md-grid at ~61rem by default. Widen the whole canvas
   so sidebars + content use more horizontal real-estate. */
.md-grid {
  max-width: 95rem;   /* ~1520px on standard screens */
}

/* Very large screens: go even wider (keep a sane cap to avoid
   90+ char line lengths on 4K displays). */
@media screen and (min-width: 125em) {
  .md-grid {
    max-width: 105rem;   /* ~1680px on big monitors */
  }
}

/* Let the content column breathe inside the wider grid. */
.md-content {
  max-width: none;
}

.md-content__inner {
  margin: 2rem 2rem;
  padding-top: 0;
  max-width: 72rem;   /* cap line length for readability */
}

@media screen and (min-width: 76.25em) {
  .md-content__inner {
    margin: 2rem 3rem;
  }
}

/* Sidebar sizing — with toc.integrate the right sidebar is gone,
   so we can afford a slightly wider left nav without cramping content. */
.md-sidebar {
  width: 15rem;
}

@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    width: 16rem;   /* left nav + integrated TOC */
  }
  /* Right sidebar is hidden when toc.integrate is on — no need to size it */
}

/* ---------- Typography ---------- */

/* Base font size: bump from 17px → 18px.
   Material uses rem everywhere, so this scales the whole site. */
html {
  font-size: 18px;
}

/* Body text: increase line-height for better readability */
.md-typeset {
  line-height: 1.75;
  font-size: 1rem;   /* inherits the new 17px base */
}

/* Paragraphs: more vertical rhythm */
.md-typeset p {
  margin: 1.25em 0;
}

/* Headings: larger + more top margin */
.md-typeset h1 {
  font-size: 2.4rem;
  margin-top: 0.8em;
  margin-bottom: 0.7em;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.md-typeset h2 {
  font-size: 1.75rem;
  margin-top: 2em;
  margin-bottom: 0.7em;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.md-typeset h3 {
  font-size: 1.35rem;
  margin-top: 1.7em;
  margin-bottom: 0.55em;
  font-weight: 600;
  line-height: 1.3;
}

.md-typeset h4 {
  font-size: 1.15rem;
  margin-top: 1.5em;
  font-weight: 600;
}

/* List items: more spacing between adjacent items */
.md-typeset ul li,
.md-typeset ol li {
  margin-bottom: 0.4em;
}

.md-typeset ul li > p,
.md-typeset ol li > p {
  margin: 0.4em 0;
}

/* ---------- Tables ---------- */

.md-typeset table:not([class]) {
  font-size: 0.95rem;
  margin: 1.5em 0;
}

.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: 0.85em 1em;
  line-height: 1.55;
}

.md-typeset table:not([class]) th {
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

/* ---------- Admonitions & details ---------- */

.md-typeset .admonition,
.md-typeset details {
  padding: 0 1rem;
  margin: 1.6em 0;
  border-left-width: 4px;
  font-size: 0.98rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
  padding: 0.6em 0.6em 0.6em 2.25rem;
  font-size: 1rem;
}

/* ---------- Code blocks ---------- */

.md-typeset pre > code {
  padding: 1em 1.1em;
  font-size: 0.9rem;
  line-height: 1.65;
}

.md-typeset code {
  padding: 0.15em 0.4em;
  font-size: 0.9em;
  border-radius: 0.25rem;
}

/* ---------- Home-page grid cards ---------- */

.md-typeset .grid.cards > ul > li {
  border-radius: 0.5rem;
  padding: 1.2rem;
}

.md-typeset .grid.cards > ul > li > hr {
  margin: 0.8em 0;
}

/* ---------- Navigation tabs ---------- */

.md-tabs__item {
  padding: 0 1rem;
}

.md-tabs__link {
  font-size: 0.92rem;
}

/* ---------- Left sidebar: integrated TOC ---------- */

.md-nav--integrated .md-nav__item {
  padding-right: 0.5rem;
}

/* Current page's TOC — "Table of contents" heading */
.md-nav__title[for^="__toc"] {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.75rem 0.75rem 0.25rem;
  color: var(--md-default-fg-color--light);
}

/* Integrated TOC items — active page link prominent */
.md-nav__link--active {
  font-weight: 600;
  color: var(--md-accent-fg-color);
}

/* Left-sidebar scrolling behavior — keep TOC visible */
.md-sidebar--primary .md-sidebar__scrollwrap {
  scrollbar-width: thin;
}

/* ---------- Footer ---------- */

.md-footer-meta {
  padding: 1rem 0;
}

/* ---------- Misc tweaks ---------- */

/* Status badges / short code tags in tables stay on one line */
.md-typeset table:not([class]) td code {
  white-space: nowrap;
}

/* Blockquotes: subtle visual weight */
.md-typeset blockquote {
  padding: 0.5em 1em;
  margin: 1.5em 0;
}

/* =================================================================
   Mermaid diagrams — bigger fonts + click-to-zoom
   ================================================================= */

/* The diagram container */
.md-typeset .mermaid {
  text-align: center;
  margin: 2em 0;
  padding: 1.25rem;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  cursor: zoom-in;
  transition: box-shadow 0.15s, transform 0.15s;
  position: relative;
}

.md-typeset .mermaid:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* Zoom-hint badge in the corner */
.md-typeset .mermaid::after {
  content: "🔍 Click to zoom";
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
  opacity: 0.55;
  pointer-events: none;
  font-family: var(--md-text-font);
  transition: opacity 0.15s;
}

.md-typeset .mermaid:hover::after {
  opacity: 1;
}

/* ---- Diagram font sizes (inline, not zoomed) ---- */

.md-typeset .mermaid svg {
  max-width: 100%;
  height: auto;
  font-size: 17px;       /* drives em-based mermaid text */
}

.md-typeset .mermaid svg text,
.md-typeset .mermaid svg .nodeLabel,
.md-typeset .mermaid svg .edgeLabel,
.md-typeset .mermaid svg .cluster-label,
.md-typeset .mermaid svg .label {
  font-size: 16px !important;
  font-family: var(--md-text-font), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.md-typeset .mermaid svg .cluster-label text,
.md-typeset .mermaid svg .cluster text {
  font-size: 17px !important;
  font-weight: 600;
}

/* Gantt chart specifics */
.md-typeset .mermaid svg .titleText {
  font-size: 20px !important;
  font-weight: 700;
}
.md-typeset .mermaid svg .sectionTitle {
  font-size: 15px !important;
  font-weight: 600;
}
.md-typeset .mermaid svg .taskText,
.md-typeset .mermaid svg .taskTextOutsideLeft,
.md-typeset .mermaid svg .taskTextOutsideRight {
  font-size: 14px !important;
}

/* =================================================================
   Zoom modal
   ================================================================= */

#mermaid-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(18, 20, 24, 0.92);
  display: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px);
}

#mermaid-modal.open {
  display: flex;
}

#mermaid-modal-stage {
  width: calc(100vw - 6rem);
  height: calc(100vh - 6rem);
  background: white;
  border-radius: 0.75rem;
  padding: 1.5rem;
  overflow: hidden;
  position: relative;
}

#mermaid-modal-stage svg {
  width: 100%;
  height: 100%;
  display: block;
}

#mermaid-modal-toolbar {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.5rem;
  z-index: 10000;
}

#mermaid-modal .mm-btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: #222;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.1s, background 0.1s;
}

#mermaid-modal .mm-btn:hover {
  background: #fff;
  transform: scale(1.08);
}

#mermaid-modal-hint {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  font-family: var(--md-text-font), sans-serif;
  background: rgba(0, 0, 0, 0.45);
  padding: 0.4rem 0.9rem;
  border-radius: 0.5rem;
  pointer-events: none;
}

/* Dark mode tweaks */
[data-md-color-scheme="slate"] #mermaid-modal-stage {
  background: #1a1b22;
}

[data-md-color-scheme="slate"] .md-typeset .mermaid {
  background: var(--md-code-bg-color);
}
}