/* Increase width of primary (left) sidebar (desktop only).
   Scoped to the desktop breakpoint so it does NOT override Material's
   off-canvas hamburger drawer on mobile (<= 76.1875em), where the primary
   sidebar must stay translated off-screen until the drawer is toggled. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    width: 14rem;
  }

  /* Hide mobile navigation on larger screens where sidebar is visible */
  .mobile-nav-only {
    display: none;
  }
}

/* Prevent navigation text from wrapping */
.md-nav__link .md-ellipsis {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

/* Ensure navigation links have enough space */
.md-nav__link {
  overflow: visible;
}

/* Hide expand/collapse toggles in navigation (desktop only).
   On mobile the toggles drive Material's collapsible hamburger drawer, so
   they must remain functional below the desktop breakpoint. */
@media screen and (min-width: 76.25em) {
  .md-nav__toggle,
  .md-nav__toggle + label::before,
  label.md-nav__link {
    display: none;
  }
}

/* Expand main content to use full width when TOC is hidden */
.md-content {
  max-width: 100%;
}

/* Remove maximum width constraints from content container */
.md-grid {
  max-width: none;
}

/* Expand the main content area to use all available space */
.md-content__inner {
  max-width: none;
  margin: 0 2rem;
}

/* Make tables responsive and prevent cutting off */
.md-typeset table:not([class]) {
  display: table;
  width: 100%;
  overflow-x: auto;
}

/* Ensure table wrapper doesn't constrain width */
.md-typeset__scrollwrap {
  margin: 0;
}

.md-typeset__table {
  display: block;
  overflow-x: auto;
}

/* Add spacing between main sections in navigation */
.md-nav__item--section {
  margin-top: 1.5rem;
  padding-top: 0.5rem;
}

/* Section headers should be bold and larger */
.md-nav__item--section > .md-nav__link {
  font-weight: 600;
  font-size: 0.9rem;
  text-align: left !important;
  padding-left: 0 !important;
  text-transform: uppercase;
}

/* Highlight current/active navigation item with background.
   Keep the same left indent as inactive links (0.8rem padding + 0.2rem margin,
   per the base .md-nav__link rule) so a top-level page link (e.g. TBD Tracker)
   aligns with siblings instead of bleeding to the sidebar edge. Nested items
   get their level indent from the container, so this matches at every depth. */
.md-sidebar__inner .md-nav--primary .md-nav__item a.md-nav__link--active {
  background-color: rgba(99, 102, 241, 0.1);
  font-weight: 600;
  border-radius: 4px;
  padding: 0.5rem 0.75rem 0.5rem 0.8rem;
  margin: 0.25rem 0.2rem;
}

/* Section headings - uppercase with horizontal line separator */
.md-typeset h2 {
  text-transform: uppercase;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.md-typeset h1 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Dark mode border for section headings */
[data-md-color-scheme="slate"] .md-typeset h2 {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}


/* Product information section with right-aligned image */
.product-info {
  margin-bottom: 2rem;
  overflow: visible;
}

/* Float the image paragraph to the right */
.product-info p:has(img) {
  float: right;
  margin-left: 2rem;
  margin-right: 5rem;
  margin-top: -2rem;
  margin-bottom: 1rem;
  max-width: 300px;
}

/* Keep text paragraphs left-aligned (default) */
.product-info p {
  margin: 0.4rem 0;
  line-height: 1.6;
  text-align: left;
}

.product-info p strong {
  display: inline-block;
  min-width: 120px;
  font-weight: 600;
}

.product-info a {
  color: var(--md-primary-fg-color);
  text-decoration: none;
}

.product-info a:hover {
  text-decoration: underline;
}

.product-info img {
  width: 100%;
  border-radius: 4px;
  display: block;
}

/* Responsive: clear float on smaller screens */
@media screen and (max-width: 76.25em) {
  .product-info p:has(img) {
    float: none;
    margin: 0 auto 1rem;
  }
}

/* Add spacing at bottom of content before footer */
article.md-content__inner {
  padding-bottom: 4rem;
}

/* Style table separator rows (where last 3 cells are empty) */
table tbody tr:has(td:nth-child(2):empty):has(td:nth-child(3):empty):has(td:nth-child(4):empty) {
  background-color: #444;
}

table tbody tr:has(td:nth-child(2):empty):has(td:nth-child(3):empty):has(td:nth-child(4):empty) td {
  text-align: center;
  color: white;
  font-weight: bold;
  padding: 8px;
}

/* External link indicator */
a[href^="http"]:not([href*="localhost"]):not([href*="127.0.0.1"])::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.25em;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: text-top;
  opacity: 0.6;
}

/* Dark mode external link icon */
[data-md-color-scheme="slate"] a[href^="http"]:not([href*="localhost"]):not([href*="127.0.0.1"])::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23aaa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>');
  opacity: 0.7;
}

/* Ensure external link icon doesn't appear in navigation */
.md-nav a[href^="http"]::after,
.md-tabs a[href^="http"]::after,
.md-header a[href^="http"]::after {
  display: none;
}

/* ==========================================================================
   PRINT STYLES FOR 3-RING BINDER
   ========================================================================== */

@media print {
  /* Page setup for US Letter with 3-hole punch margins */
  @page {
    size: letter;
    margin: 0.75in 0.5in 0.75in 1in; /* top right bottom left - extra left for holes */
  }

  /* Alternating margins for duplex printing */
  @page :left {
    margin-left: 0.5in;
    margin-right: 1in; /* Binding edge on right for back pages */
  }

  @page :right {
    margin-left: 1in; /* Binding edge on left for front pages */
    margin-right: 0.5in;
  }

  /* Hide navigation, header, footer for print */
  .md-header,
  .md-tabs,
  .md-sidebar,
  .md-footer,
  .md-top,
  .md-search,
  .md-source,
  .print-hide {
    display: none !important;
  }

  /* Make content full width */
  .md-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  .md-content__inner {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  .md-main__inner {
    margin: 0 !important;
    padding: 0 !important;
  }

  .md-grid {
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Typography adjustments for print */
  body {
    font-size: 11pt !important;
    line-height: 1.4 !important;
    color: black !important;
    background: white !important;
  }

  .md-typeset {
    font-size: 11pt !important;
  }

  h1 {
    font-size: 18pt !important;
    page-break-after: avoid;
  }

  h2 {
    font-size: 14pt !important;
    page-break-after: avoid;
    border-bottom-color: #333 !important;
  }

  h3 {
    font-size: 12pt !important;
    page-break-after: avoid;
  }

  /* Prevent orphans and widows */
  p, li {
    orphans: 3;
    widows: 3;
  }

  /* Keep headings with content */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Keep tables together when possible */
  table {
    page-break-inside: avoid;
    break-inside: avoid;
    font-size: 10pt !important;
  }

  /* Table styling for print */
  table, th, td {
    border: 1px solid #333 !important;
  }

  th {
    background-color: #eee !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Code blocks */
  pre, code {
    font-size: 9pt !important;
    border: 1px solid #ccc !important;
    background-color: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  pre {
    page-break-inside: avoid;
    break-inside: avoid;
    padding: 0.5em !important;
    overflow-x: visible !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
  }

  /* Links - show URL for external links */
  a[href^="http"]:not(.md-nav__link)::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #666;
    word-break: break-all;
  }

  /* Don't show URL for internal links */
  a[href^="#"]::after,
  a[href^="/"]::after,
  a[href^="../"]::after,
  a:not([href^="http"])::after {
    content: none !important;
  }

  /* Images */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Product info layout for print */
  .product-info p:has(img) {
    float: none !important;
    margin: 1em auto !important;
    max-width: 250px !important;
  }

  /* Admonitions */
  .admonition {
    page-break-inside: avoid;
    break-inside: avoid;
    border: 1px solid #333 !important;
    background: #f9f9f9 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Checkboxes for checklists */
  .task-list-item input[type="checkbox"] {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Page breaks */
  .page-break {
    page-break-after: always;
    break-after: always;
  }

  .no-page-break {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}