/* ===== CODE BLOCK STYLING ===== */
.md-typeset pre {
  font-size: 0.9em;
  line-height: 1.5;
  border-radius: 4px;
}

/* Increase code font size for better readability */
.md-typeset code {
  font-size: 0.9em;
}

/* Add a subtle background to inline code */
:root {
  --md-code-bg-color: rgba(175, 184, 193, 0.2);
  --md-primary-fg-color: #0080d9;
  --md-primary-fg-color--light: #02abf0;
  --md-primary-fg-color--dark: #0066b3;
  --md-accent-fg-color: #03bdfa;
  --md-accent-fg-color--transparent: rgba(3, 189, 250, 0.1);
}

[data-md-color-scheme="slate"] {
  --md-code-bg-color: rgba(101, 109, 118, 0.2);
  --md-primary-fg-color: #02abf0;
  --md-primary-fg-color--light: #03bdfa;
  --md-primary-fg-color--dark: #0080d9;
  --md-accent-fg-color: #03bdfa;
  --md-accent-fg-color--transparent: rgba(3, 189, 250, 0.1);
}

/* Improve code block padding */
.md-typeset pre > code {
  padding: 1em;
}

/* Add a subtle border to code blocks */
.md-typeset pre {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-md-color-scheme="slate"] .md-typeset pre {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Improve line number styling */
.linenums ol {
  margin-left: 0;
  padding-left: 0.5em;
}

.linenums li {
  padding-left: 0.5em;
}

/* Highlight the current line when hovering */
.md-typeset .highlight:hover .hll {
  background-color: rgba(255, 255, 0, 0.1);
}

/* Improve code block title styling */
.md-typeset .highlight .filename {
  font-family: var(--md-text-font-family);
  font-weight: 600;
  padding: 0.5em 1em;
  background-color: rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

[data-md-color-scheme="slate"] .md-typeset .highlight .filename {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Syntax highlighting colors - light theme */
:root {
  --md-code-hl-number-color: #005cc5;
  --md-code-hl-special-color: #6f42c1;
  --md-code-hl-function-color: #6f42c1;
  --md-code-hl-constant-color: #005cc5;
  --md-code-hl-keyword-color: #d73a49;
  --md-code-hl-string-color: #032f62;
  --md-code-hl-name-color: #22863a;
  --md-code-hl-operator-color: #d73a49;
  --md-code-hl-punctuation-color: #24292e;
  --md-code-hl-comment-color: #6a737d;
  --md-code-hl-generic-color: #6a737d;
  --md-code-hl-variable-color: #e36209;
}

/* Syntax highlighting colors - dark theme */
[data-md-color-scheme="slate"] {
  --md-code-hl-number-color: #79b8ff;
  --md-code-hl-special-color: #b392f0;
  --md-code-hl-function-color: #b392f0;
  --md-code-hl-constant-color: #79b8ff;
  --md-code-hl-keyword-color: #f97583;
  --md-code-hl-string-color: #9ecbff;
  --md-code-hl-name-color: #85e89d;
  --md-code-hl-operator-color: #f97583;
  --md-code-hl-punctuation-color: #e1e4e8;
  --md-code-hl-comment-color: #959da5;
  --md-code-hl-generic-color: #959da5;
  --md-code-hl-variable-color: #ffab70;
}

/* Copy button styling */
.md-clipboard {
  color: rgba(0, 0, 0, 0.5);
}

.md-clipboard:hover {
  color: var(--md-accent-fg-color);
}

[data-md-color-scheme="slate"] .md-clipboard {
  color: rgba(255, 255, 255, 0.5);
}

/* Improve table styling for code blocks with line numbers */
.highlighttable {
  display: table;
  width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
  margin: 0;
  border-spacing: 0;
}

.highlighttable tbody {
  display: table-row-group;
}

.highlighttable tr {
  display: table-row;
}

.highlighttable td.linenos {
  display: table-cell;
  padding: 0 0.75em 0 0.5em;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  text-align: right;
  color: rgba(0, 0, 0, 0.4);
  width: 1%;
  white-space: nowrap;
  vertical-align: top;
  user-select: none;
  font-family: var(--md-code-font-family);
  font-size: 0.85em;
  line-height: 1.5;
}

[data-md-color-scheme="slate"] .highlighttable td.linenos {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
}

.highlighttable td.code {
  display: table-cell;
  padding: 0 0 0 0.75em;
  width: 99%;
  vertical-align: top;
}

/* Ensure line numbers and code have consistent line height */
.highlighttable td.linenos .linenodiv pre,
.highlighttable td.code .highlight pre {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-size: 0.85em;
}

/* Fix line number list styling */
.highlighttable .linenodiv {
  padding: 0;
  margin: 0;
}

.highlighttable .linenodiv pre {
  padding: 1em 0;
  margin: 0;
  background: transparent;
  border: none;
}

/* Ensure code content aligns properly */
.highlighttable .highlight {
  margin: 0;
  background: transparent;
}

.highlighttable .highlight pre {
  padding: 1em 0;
  margin: 0;
  background: transparent;
  border: none;
}

/* ===== SIDEBAR NAVIGATION STYLING ===== */

/* Simple, modern sidebar styling */

/* Main navigation items */
.md-nav__item {
  margin: 0.25em 0;
}

/* Top-level navigation items (System Guide, How-To Guides, etc.) */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  font-weight: 600;
  font-size: 0.9rem;
  color: #333;
  padding: 0.4em 0;
  margin-top: 0.8em;
  border-bottom: 1px solid #eee;
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  color: #e0e0e0;
  border-bottom: 1px solid #333;
}

/* Second-level items (Architecture, Business Rules, etc.) */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav > .md-nav__list > .md-nav__item > .md-nav__link {
  font-weight: 500;
  font-size: 0.85rem;
  color: #444;
  padding: 0.3em 0;
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav > .md-nav__list > .md-nav__item > .md-nav__link {
  color: #ccc;
}

/* Third-level items (Overview, Requisition, etc.) */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav > .md-nav__list > .md-nav__item > .md-nav > .md-nav__list > .md-nav__item > .md-nav__link {
  font-weight: 400;
  font-size: 0.8rem;
  color: #555;
  padding: 0.2em 0;
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav > .md-nav__list > .md-nav__item > .md-nav > .md-nav__list > .md-nav__item > .md-nav__link {
  color: #bbb;
}

/* Active item styling */
.md-nav__link--active {
  font-weight: 500;
  color: var(--md-primary-fg-color) !important;
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] .md-nav__link--active {
  color: var(--md-primary-fg-color) !important;
}

/* Add visual separation between sections */
.md-nav__list .md-nav__list {
  margin-left: 1em;
  padding-left: 0.5em;
  border-left: 1px solid #eee;
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] .md-nav__list .md-nav__list {
  border-left: 1px solid #333;
}

/* Improve spacing in the sidebar */
.md-nav__title {
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
  border-bottom: 1px solid #eee;
  font-weight: 600;
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] .md-nav__title {
  border-bottom: 1px solid #333;
}

/* Improve sidebar scrollbar */
.md-sidebar__scrollwrap::-webkit-scrollbar {
  width: 4px;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

/* ===== SMALL STICKY FOOTER STYLING ===== */

/* Set up the page layout for sticky footer */
html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Make the main content area flex to fill available space */
.md-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: none !important;
}

.md-main {
  flex: 1;
  max-width: none !important;
}

/* Full width layout */
.md-main__inner {
  max-width: none !important;
}

.md-content {
  max-width: none !important;
}

.md-content__inner {
  max-width: none !important;
}

.md-header {
  max-width: none !important;
}

.md-header__inner {
  max-width: none !important;
}

.md-tabs {
  max-width: none !important;
}

.md-tabs__inner {
  max-width: none !important;
}

/* Make the footer small and fixed at the bottom */
.md-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin-top: auto !important;
  z-index: 1000 !important;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1) !important;
  border-top: 1px solid var(--md-default-fg-color--lightest) !important;
  min-height: auto !important;
  background-color: var(--md-primary-fg-color) !important;
  height: 40px !important;
}

/* Small footer content styling */
.md-footer-meta {
  padding: 4px 16px !important;
  min-height: auto !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Small footer text styling */
.md-footer-copyright {
  font-size: 0.6rem !important;
  text-align: center !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  color: white !important;
}

/* Hide navigation footer elements */
.md-footer__inner {
  display: none !important;
}

/* Add bottom padding to main content to account for fixed footer */
.md-main {
  padding-bottom: 60px !important;
}

/* Dark mode footer adjustments */
[data-md-color-scheme="slate"] .md-footer {
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.2) !important;
  border-top: 1px solid var(--md-default-fg-color--lightest) !important;
}

/* Responsive adjustments for mobile */
@media screen and (max-width: 76.1875em) {
  .md-footer-meta {
    padding: 6px 16px !important;
  }

  .md-footer-copyright {
    font-size: 0.65rem !important;
  }
}

/* Improve footer scrollbar visibility on hover */
.md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
  background: var(--md-primary-fg-color);
}

/* ===== MAIN CONTENT PADDING ===== */

/* Add more left/right padding to main content */
.md-main__inner {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

/* Additional spacing for content */
.md-content {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Responsive padding adjustments */
@media screen and (max-width: 76.1875em) {
  .md-main__inner {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .md-content {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

@media screen and (max-width: 44.9375em) {
  .md-main__inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .md-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ===== SIMPLE SIDEBAR FIX ===== */

/* Make sidebar sticky and appear above footer */
.md-sidebar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1001 !important;
  height: calc(100vh - 30px) !important; /* Account for small footer */
  overflow: hidden !important;
}

.md-sidebar--primary {
  z-index: 1001 !important;
}

.md-sidebar--secondary {
  z-index: 1001 !important;
}

/* Make sidebar content scrollable */
.md-sidebar__scrollwrap {
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 1001 !important;
  padding-bottom: 20px !important;
}

/* Ensure header stays on top */
.md-header {
  z-index: 1002 !important;
  background-color: var(--md-primary-fg-color) !important;
}

/* Ensure search and other header elements stay on top */
.md-search {
  z-index: 1003 !important;
}

.md-search__overlay {
  z-index: 1003 !important;
}

.md-search__form {
  z-index: 1003 !important;
}

/* ===== NAVIGATION STYLING ===== */
.md-tabs {
  background-color: var(--md-primary-fg-color) !important;
}

/* Align tabs to the left like header */
.md-tabs__inner {
  justify-content: flex-start !important;
  padding-left: 3rem !important;
}

.md-tabs__link--active {
  color: white !important;
  background-color: var(--md-accent-fg-color) !important;
}

.md-tabs__link {
  color: rgba(255, 255, 255, 0.9) !important;
}

.md-tabs__link:hover {
  color: white !important;
  background-color: transparent !important;
  text-decoration: underline !important;
}

/* Responsive alignment adjustments */
@media screen and (max-width: 76.1875em) {
  .md-tabs__inner {
    padding-left: 1.5rem !important;
  }
}

@media screen and (max-width: 44.9375em) {
  .md-tabs__inner {
    padding-left: 1rem !important;
  }
}