/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #2e8555;
  --ifm-color-primary-dark: #29784c;
  --ifm-color-primary-darker: #277148;
  --ifm-color-primary-darkest: #205d3b;
  --ifm-color-primary-light: #33925d;
  --ifm-color-primary-lighter: #359962;
  --ifm-color-primary-lightest: #3cad6e;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: #21af90;
  --ifm-color-primary-darker: #1fa588;
  --ifm-color-primary-darkest: #1a8870;
  --ifm-color-primary-light: #29d5b0;
  --ifm-color-primary-lighter: #32d8b4;
  --ifm-color-primary-lightest: #4fddbf;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

/* Tabs Styling */
.tabs-container {
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: var(--ifm-global-radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

.tabs {
  margin-bottom: 1rem;
}

.tabs__item {
  border: none;
  border-bottom: 1px solid var(--ifm-color-emphasis-200);
  margin-right: 0rem;
  padding-bottom: 0.5rem;
  border-radius: 0;
}

.tabs__item:hover {
  background-color: var(--ifm-hover-overlay);
}

.tabs__item--active {
  border-bottom-color: var(--ifm-tabs-color-active);
}

/* GitHub Icon Button */
.header-github-link:hover {
  opacity: 0.6;
}

.header-github-link:before {
  content: "";
  width: 24px;
  height: 24px;
  display: flex;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z'/%3E%3C/svg%3E") no-repeat;
}

[data-theme="dark"] .header-github-link:before {
  content: "";
  width: 24px;
  height: 24px;
  display: flex;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z'/%3E%3C/svg%3E") no-repeat;
}


/* Slim Footer */
.footer {
  padding: 1rem 0 0;
  background-color: var(--ifm-background-color);
  border-top: 1px solid var(--ifm-color-emphasis-200);
}

[data-theme="light"] .footer {
  border-top: 1px solid var(--ifm-color-emphasis-300);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--ifm-navbar-padding-horizontal);
  max-width: var(--ifm-container-width);
  margin: 0 auto;
  font-size: 12px;
}

.footer__copyright {
  color: var(--ifm-toc-link-color);
}

.footer-links {
  display: flex;
  gap: 0.5rem;
  font-size: 13px;
}

.footer-links a {
  color: var(--ifm-toc-link-color);
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer .container {
  padding: 0 1.25rem;
  display: flex;
  justify-content: left;
  align-items: center;
  flex-direction: row;
  max-width: 100%;
}

.footer__title {
  margin-bottom: 0;
}

/* Inline Icons */
.markdown svg,
.markdown img[src*="icon"],
.markdown .icon {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2.5 !important;
  display: inline-block;
  vertical-align: middle;
}

/* Mermaid Diagram Styling - Force proper sizing */
.mermaid {
  text-align: center;
  margin: 2rem 0;
  width: 100% !important;
  min-height: 500px !important;
  display: block !important;
  overflow: visible !important;
}

.mermaid svg {
  width: 100% !important;
  max-width: none !important;
  min-width: 800px !important;
  min-height: 500px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  transform: scale(1) !important;
}

/* Force Mermaid diagram sizing */
.markdown .mermaid {
  width: 100% !important;
  min-height: 500px !important;
  display: block !important;
}

.markdown .mermaid svg {
  width: 100% !important;
  min-width: 800px !important;
  min-height: 500px !important;
  transform: scale(1) !important;
}

/* Target the specific Mermaid container */
div[class*="mermaid"] {
  width: 100% !important;
  min-height: 500px !important;
}

div[class*="mermaid"] svg {
  width: 100% !important;
  min-width: 800px !important;
  min-height: 500px !important;
}

/* Force Mermaid to render at full size */
.mermaid,
.mermaid > *,
.mermaid svg,
.mermaid div,
.mermaid div svg {
  width: 100% !important;
  min-width: 800px !important;
  min-height: 500px !important;
  max-width: none !important;
  display: block !important;
  transform: none !important;
  scale: 1 !important;
}

/* Override any potential scaling issues */
.mermaid svg {
  transform: none !important;
  scale: 1 !important;
  viewBox: unset !important;
}
