/* Site-wide CSS variables for color and font themes */
:root, html[data-bs-theme="light"] {
  --site-font: 'Sora', Arial, sans-serif;
  --navbar-bg: #1a4166; /* Darker blue for light mode */
  --navbar-text: #fff;    /* White text for light mode nav */
  --navbar-active: #ff5c1a; /* Bright orange for active nav items */
  --body-bg: #fff;
  --body-text: #181b34;

  /* Custom Link Colors */
  --link-color-mild: #cf7901;
  --link-color-mild-hover: #ec971f;
  --link-color-bright-active: #ff5c1a;
  --sidebar-border-color: rgba(255, 255, 255, 0.15); /* Adjusted for visibility on dark sidebar in light mode */
  --toc-border-color: rgba(0, 0, 0, 0.1); /* Border for ToC in light mode */

  /* Bootstrap color overrides for badges and backgrounds */
  --bs-primary: #4a90e2;      /* Muted blue */
  --bs-secondary: #575e69;    /* Muted grey */
  --bs-danger: #e57373;       /* Muted red */
  --bs-warning: #f7b955;      /* Muted orange */
  --bs-info: #61c5c9;         /* Muted cyan */
  --bs-success: #3d7a57;      /* Muted green */
}

html[data-bs-theme="dark"] {
  --site-font: 'Sora', Arial, sans-serif;
  --navbar-bg: #23263a;
  --navbar-text: #fff;
  --navbar-active: #ff5c1a;
  --body-bg: #181b34;
  --body-text: #fff;

  /* Custom Link Colors - can be same or adjusted for dark theme if needed */
  --link-color-mild: #f0ad4e;
  --link-color-mild-hover: #ec971f;
  --link-color-bright-active: #ff5c1a;
  --sidebar-border-color: rgba(255, 255, 255, 0.1); /* Subtle border for dark mode */
  --toc-border-color: rgba(255, 255, 255, 0.1); /* Border for ToC in dark mode */

  /* Bootstrap color overrides for badges and backgrounds */
  --bs-primary: #3b6fa5;      /* Muted blue for dark */
  --bs-secondary: #575e69;    /* Muted grey for dark */
  --bs-danger: #e57373;       /* Muted red for dark */
  --bs-warning: #f7b955;      /* Muted orange for dark */
  --bs-info: #7fbfc9;         /* Muted cyan for dark */
  --bs-success: #3d7a57;      /* Muted green for dark */
}

@media (prefers-color-scheme: dark) {
  html[data-bs-theme="auto"] {
    --site-font: 'Sora', Arial, sans-serif;
    --navbar-bg: #23263a;
    --navbar-text: #fff;
    --navbar-active: #ff5c1a;
    --body-bg: #181b34;
    --body-text: #fff;
    --sidebar-border-color: rgba(255, 255, 255, 0.1); /* Subtle border for auto dark mode */
    --toc-border-color: rgba(255, 255, 255, 0.1); /* Border for ToC in auto dark mode */

    /* Bootstrap color overrides for badges and backgrounds */
    --bs-primary: #3b6fa5;
    --bs-secondary: #6c757d;
    --bs-danger: #e57373;
    --bs-warning: #f7b955;
    --bs-info: #7fbfc9;
    --bs-success: #4fa97b;
  }
}

html {
  box-sizing: border-box;
  height: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0; /* ADDED: Remove default browser margin */
  font-family: var(--site-font);
  background: var(--body-bg);
  color: var(--body-text);
  display: flex; /* ADDED */
  flex-direction: column; /* ADDED */
  min-height: 100vh; /* ADDED */
}

body > header { /* ADDED: To ensure navbar doesn't shrink if body is flex */
  flex-shrink: 0;
}

/* General content link styling */
.td-content a,
.td-content a:visited {
  color: var(--link-color-mild);
  text-decoration: none; /* Optional: remove underline if desired */
}
.td-content a:hover {
  color: var(--link-color-mild-hover);
  text-decoration: underline; /* Optional: add underline on hover */
}
.td-content a:active {
  color: var(--link-color-bright-active);
}

.navbar, .td-navbar {
  background: var(--navbar-bg) !important;
  color: var(--navbar-text) !important;
}

.navbar .nav-link, .td-navbar .nav-link {
  color: var(--navbar-text) !important;
}

.navbar .nav-link.active, .td-navbar .nav-link.active {
  color: var(--navbar-active) !important;
  font-weight: bold;
}

.navbar-brand__name {
  font-family: var(--site-font);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--navbar-text); /* Ensure brand text uses navbar text color */
}

/* Fix for sidebar text colors in light mode */
/* Apply base text color to sidebar containers */
.td-sidebar /* Docsy left sidebar */ {
  background: var(--navbar-bg); /* Use theme variable for background */
  color: var(--navbar-text); /* This should make non-link text use the correct theme color */
}

/* Ensure links within left sidebar also use the correct theme color */
.td-sidebar a {
  color: var(--navbar-text) !important; /* Override Bootstrap/Docsy default link colors if necessary */
}

/* Ensure active links in left sidebar use the active color and style */
.td-sidebar a.active {
  color: var(--navbar-active) !important;
  font-weight: bold; /* Consistent with navbar active links */
}

/* Styling for .td-toc (right sidebar/Table of Contents) */
.td-toc {
  background: var(--body-bg) !important; /* Match page background */
  color: var(--body-text) !important;    /* Match page text color */
  border-left: 1px solid var(--toc-border-color); /* Add a border to separate from content */
  padding-left: 1rem; /* Add some padding so text isn't flush with the border */
}

.td-toc .nav-link { /* More specific selector for ToC links if they are Bootstrap nav-links */
  color: var(--link-color-mild) !important; /* Use general link color */
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.td-toc .nav-link:hover {
  color: var(--link-color-mild-hover) !important; /* Use general link hover color */
}

.td-toc .nav-link.active,
.td-toc .nav-link.active:hover { /* Ensure active overrides hover */
  color: var(--link-color-bright-active) !important; /* Use general active link color */
  font-weight: bold;
  border-left: 2px solid var(--link-color-bright-active); /* Highlight active link */
  padding-left: calc(1rem - 2px); /* Adjust padding to keep text aligned */
}

/* Remove default Docsy TOC link styling that might interfere */
.td-toc a,
.td-toc ul li a {
    color: var(--link-color-mild) !important;
    font-weight: normal; /* Reset font weight unless it's active */
}
.td-toc a:hover,
.td-toc ul li a:hover {
    color: var(--link-color-mild-hover) !important;
}

.td-toc ul li.active > a { /* Docsy uses li.active for the active item */
    color: var(--link-color-bright-active) !important;
    font-weight: bold !important;
}

/* Sidebar navigation text wrapping and icon alignment using CSS Grid - CORRECTED SELECTOR */
/* Targets the actual <a> link elements in the sidebar */
.td-sidebar-link {
  display: grid !important;
  grid-template-columns: auto 1fr !important; /* Icon column, Text column */
  align-items: center !important; /* Vertically center icon and text */
  gap: 0.5em !important; /* Space between icon and text, adjust as needed. */
  padding-top: 0.5em; /* Added for vertical spacing */
  padding-bottom: 0.5em; /* Added for vertical spacing and below border */
  border-bottom: 1px solid var(--sidebar-border-color); /* Subtle line between items */
  /* position: relative; /* REMOVED - Chevron is relative to label, not link */
  /* border: 1px solid limegreen !important; */ /* TEMPORARY FOR DEBUGGING - REMOVED */
}

/* Reset margin for icons if using grid-gap for spacing */
.td-sidebar-link > i {
  margin-right: 0 !important; /* Keep !important if me-1 utility is still present and needs override */
}

/* Optional: Further styling for the icon itself if needed... */

/* Align chevron with icon/text in collapsible sidebar sections */
/* Targets the label within a collapsible section */
.td-sidebar-nav__section.with-child > label {
  display: flex !important; /* Use flexbox to align items within the label */
  align-items: center !important; /* Vertically center the <a> tag (flex item) */
  /* position: relative; is typically already on this label from Docsy's base styles,
     which is necessary for the absolutely positioned ::before chevron. */
}

/* Ensure the <a> tag (now a flex item) behaves correctly */
.td-sidebar-nav__section.with-child > label > a.td-sidebar-link {
  flex-grow: 1; /* Allow the link to take up available horizontal space */
  margin: 0 !important; /* Remove any default margins on the link that might interfere */
}

/* Hide the default/inline Docsy search bar in the navbar if only modal is desired */
.td-navbar .td-search,
.td-navbar .td-search--offline {
  display: none !important;
}

/* Style for sidebar expander icon in light mode */
html[data-bs-theme="light"] .td-sidebar-nav__section.with-child > label::before {
  color: var(--navbar-text) !important; /* For text/font-icon based chevrons */
  border-left-color: var(--navbar-text) !important; /* For border-based chevrons */
  /* If it's an SVG background, this won't work directly */
}

.td-footer__links-item {
  font-size: 0.8rem !important;
  text-decoration: none !important;
}

.td-footer {
  min-height: 0 !important;
  padding: 0 !important;
}

.td-footer__links-item {
  margin-top: 10px !important;
}

/* Fix for footer being pushed down by td-main's min-height */
/* Make td-outer a flex container to control its children's layout */
.td-outer {
  display: flex !important;
  flex-direction: column !important;
  /* td-outer should fill the viewport height minus the navbar's height.
     A fallback for --td-navbar-height is provided, adjust if necessary. */
  flex-grow: 1 !important; /* ADDED: Make td-outer take remaining space in body's flex context */
  overflow-y: auto; /* ADDED: Allow td-outer to scroll if its content (main+footer) is too tall */
}

/* Reset the theme's min-height on td-main and let it be a flex item */
.td-main {
  min-height: unset !important; /* Override the theme's calculated min-height */
  flex: 1 0 auto !important; /* Allow td-main to grow and shrink as needed, but not shrink below its content size */
}

/* Ensure the footer does not shrink when td-main grows */
.td-footer {
  flex-shrink: 0 !important;
}

/* Additional attempt to find culprit pushing td-main's height */
/* Reset min-height on common Bootstrap/Docsy containers within td-main */
.td-main .container,
.td-main .container-fluid,
.td-main .row,
.td-main .col, /* General col class */
.td-main [class*="col-"], /* Catches col-xs, col-sm, col-md, col-lg, col-xl */
.td-main main, /* The HTML5 <main> element, if used directly under .td-main or nested */
.td-content { /* Docsy's typical content wrapper */
  min-height: unset !important;
}

/* Override Bootstrap background utility classes */
.bg-primary    { background-color: var(--bs-primary) !important; color: #fff !important; }
.bg-secondary  { background-color: var(--bs-secondary) !important; color: #181b34 !important; }
.bg-danger     { background-color: var(--bs-danger) !important; color: #fff !important; }
.bg-warning    { background-color: var(--bs-warning) !important; color: #181b34 !important; }
.bg-info       { background-color: var(--bs-info) !important; color: #181b34 !important; }
.bg-success    { background-color: var(--bs-success) !important; color: #181b34 !important; }

/* Optional: ensure .badge uses correct text color for contrast */
.badge.bg-primary, .badge.bg-danger { color: #fff !important; }

/* Only force dark text if text-light is NOT present */
.bg-success:not(.text-light)    { color: #181b34 !important; }
.bg-secondary:not(.text-light)  { color: #181b34 !important; }
.bg-warning:not(.text-light)    { color: #181b34 !important; }
.bg-info:not(.text-light)       { color: #181b34 !important; }

/* If text-light is present, let Bootstrap or your own .text-light class handle the color (usually #fff) */
/* Remove previous .badge.bg-success, .badge.bg-secondary, etc. color overrides to avoid conflicts */
.badge.bg-secondary, .badge.bg-warning, .badge.bg-info, .badge.bg-success { color: #181b34 !important; }

/* Fix: Ensure .text-light and .text-dark always win for badges and bg utilities */
.badge.text-light, .bg-primary.text-light, .bg-secondary.text-light, .bg-success.text-light, .bg-danger.text-light, .bg-warning.text-light, .bg-info.text-light {
  color: #fff !important;
}
.badge.text-dark, .bg-primary.text-dark, .bg-secondary.text-dark, .bg-success.text-dark, .bg-danger.text-dark, .bg-warning.text-dark, .bg-info.text-dark {
  color: #181b34 !important;
}

#TableOfContents {
  font-size: 0.8rem !important; /* Adjust font size for ToC */
  font-weight: 100 !important; /* Light font weight for ToC */
}