/* ===============================
   🎨 MATERIAL THEME - CUSTOMIZATION
   =============================== */

/* Color customization */
:root {
  --md-primary-fg-color: #2563eb;
  --md-primary-fg-color--light: #3b82f6;
  --md-primary-fg-color--dark: #1d4ed8;
  --md-accent-fg-color: #2563eb;
}

/* Header styling - white in light mode, dark in dark mode */
[data-md-color-scheme="default"] .md-header {
  background-color: white !important;
  color: #1f2937 !important;
  box-shadow: 0 0 0.2rem rgba(0, 0, 0, .1), 0 0.2rem 0.4rem rgba(0, 0, 0, .2);
  height: 3.5rem;
}

.md-header {
  height: 3.5rem;
}

.md-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
}

[data-md-color-scheme="default"] .md-header__button {
  color: #1f2937 !important;
}

[data-md-color-scheme="default"] .md-search__input {
  background-color: #f3f4f6 !important;
}

[data-md-color-scheme="default"] .md-header__title {
  color: #1f2937 !important;
}

/* Divider between logo and title */
.md-header__title {
  position: relative;
  padding-left: 1rem;
  margin-left: 1rem;
}

.md-header__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1.5rem;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.12);
}

/* Dark mode header - use default dark theme colors */
[data-md-color-scheme="slate"] .md-header {
  background-color: var(--md-default-bg-color) !important;
  color: var(--md-default-fg-color) !important;
}

[data-md-color-scheme="slate"] .md-header__button {
  color: var(--md-default-fg-color) !important;
}

[data-md-color-scheme="slate"] .md-header__title {
  color: var(--md-default-fg-color) !important;
}

[data-md-color-scheme="slate"] .md-header__title::before {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Expand grid to full width and remove side margins */
.md-grid {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Add vertical divider between sidebar and content */
.md-sidebar__scrollwrap {
  border-right: 1px solid rgba(0, 0, 0, 0.12);
}

/* Hide site name in left sidebar */
.md-sidebar--primary .md-sidebar__scrollwrap .md-nav--primary > .md-nav__title {
  display: none;
}

/* Dark mode divider */
[data-md-color-scheme="slate"] .md-sidebar__scrollwrap {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

/* Menu item styling with left border indicator */
.md-nav__item .md-nav__link {
  position: relative;
  padding-left: 1rem;
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
}

/* Active menu item - blue color and visible left border */
.md-nav__item .md-nav__link--active {
  border-left-color: #2563eb;
  color: #2563eb;
  font-weight: 500;
}

/* Dark mode active menu item */
[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active {
  border-left-color: #3b82f6;
  color: #3b82f6;
}

/* Content area styling */
.md-content {
  max-width: 50rem;
}

/* Hide footer */
.md-footer {
  display: none;
}

/* Code blocks */
.highlight pre {
  border-radius: 0.5rem;
  background-color: #1e293b !important;
}

/* Inline code */
code {
  background-color: rgba(175, 184, 193, 0.2);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

/* Headers */
h1 {
  font-weight: 700;
  font-size: 2.25rem;
  margin-bottom: 1rem;
}

h2 {
  font-weight: 600;
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  border-bottom: none;
}

h3 {
  font-weight: 600;
  font-size: 1.25rem;
  margin-top: 1.5rem;
}

/* ===============================
   📐 D2 DIAGRAM CENTERING
   =============================== */

/* Center D2 diagrams in their containers */
.d2-light,
.d2-dark {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem auto;
}

/* Center the SVG within the d2 container */
.d2-light svg,
.d2-dark svg {
  display: block;
  margin: 0 auto;
}