/* Custom styling for Autoptic Platform Documentation */

/* Confidential notice - visible on every page (header, in flow so it doesn't obscure content) */
.confidential-header {
  padding: 0.35rem 1rem;
  font-size: 0.75rem;
  text-align: center;
  background: hsla(0, 0%, 92%, 0.8);
  color: hsl(0, 0%, 21%);
}

:root {
  --theme-color: #3b60c6;
  --theme-color1: hsl(18, 80%, 62%);
  --theme-color2: hsl(182, 71%, 47%);
  --theme-color-light: #87b4fc;
  --theme-color-light1: hsl(18, 97%, 85%);
  --theme-color-light2: hsl(182, 60%, 80%);
  --theme-color-dark: #2f4d9e;
  --theme-color-dark1: hsl(18, 97%, 22%);
  --theme-color-dark2: hsl(182, 60%, 22%);
  --text-color: hsl(182, 50%, 5%);
  --text-color-special: hsl(18, 80%, 62%);
  --text-color-light1: hsl(182, 40%, 25%);
  --text-color-light2: hsl(182, 40%, 35%);
  --text-color-neutral: hsla(0, 0%, 50%, 1);
  --text-color-muted: hsla(0, 0%, 50%, 0.7);
  --border-color: hsl(182, 40%, 80%);
  --border-color-soft: hsl(182, 40%, 70%);
  --border-color-img: hsla(0, 0%, 0%, 0.1);
  --bg-color: hsl(182, 40%, 98%);
  --bg-color-soft1: hsla(0, 0%, 90%, 0.1);
  --bg-color-soft2: hsla(0, 0%, 85%, 0.4);
  --sidebar-bg: hsl(182, 40%, 96%);
  --code-text-property: hsl(41, 100%, 45%);
  --code-text-value: hsl(143, 60%, 30%);
  --code-text-function: hsl(279, 80%, 35%);
  --code-text-reference: hsl(193, 80%, 35%);
  --mask-light: rgba(255, 255, 255, 0.40);
  --mask-dark: rgba(0, 0, 0, 0.40);
}

* { font-family: 'Roboto'; }
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * { font-family: 'Montserrat'; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { text-decoration: none !important; border:none; }

/* Lucide Icons Styling */
.lucide {
  width: 1.2em;
  height: 1.2em;
  vertical-align: text-bottom;
  margin-right: 0.5rem;
  stroke-width: 1.5px;
  color: var(--text-color-special);
  transition: all 0.3s ease;
  position: relative;
  top: -0.1em;
}

.lucide:hover {
  color: var(--theme-color-dark1);
}

/* Icon variants */
.lucide.primary { color: var(--theme-color1); }
.lucide.secondary { color: var(--text-color-light1); }
.lucide.success { color: #10b981; }
.lucide.warning { color: #f59e0b; }
.lucide.error { color: #ef4444; }
.lucide.white { color: white; }

/* Sidebar icon styling */
.sidebar-nav .lucide {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.75rem;
  vertical-align: middle;
  top: 0;
  display: inline-block;
  flex-shrink: 0;
}

/* Ensure sidebar links are properly aligned with icons */
.sidebar-nav li {
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  margin: 0.25rem 0;
  line-height: 1.2em;
}

/* Only target actual navigation links, not section headers */
.sidebar-nav li a {
  display: flex;
  align-items: center;
  color: var(--text-color-light1);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  text-decoration: none;
  flex: 1;
}

aside.sidebar {
  padding: 0.4rem;
  width:17rem;
}

h1.app-name * { font-weight: 400; }

aside.sidebar h1 > * { color: var(--text-color); }

/* Ensure section headers (h2, h3, etc.) are not clickable */
.sidebar-nav h2,
.sidebar-nav h3,
.sidebar-nav h4,
.sidebar-nav h5,
.sidebar-nav h6 {
  padding: 0.5rem 1rem;
  cursor: default;
  user-select: none;
  pointer-events: none;
  line-height: 1.5em;
  margin-top: 0.6em !important;
  margin-bottom: 0 !important;
}

.sidebar-nav h2 > a > span { color: var(--text-color-special); }

.sidebar-nav h3 > a > span,
.sidebar-nav h4 > a > span,
.sidebar-nav h5 > a > span,
.sidebar-nav h6 > a > span {
  color: var(--theme-color-light2);
}

/* Remove any hover effects from section headers */
.sidebar-nav h2:hover,
.sidebar-nav h3:hover,
.sidebar-nav h4:hover,
.sidebar-nav h5:hover,
.sidebar-nav h6:hover {
  background: none;
  color: var(--text-color);
}

/* Submenu icon styling - for indented items */
.sidebar-nav ul ul .lucide {
  width: 1em;
  height: 1em;
  margin-right: 0.5rem;
  vertical-align: middle;
  top: 0;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

/* Ensure proper alignment for nested list items */
.sidebar-nav ul ul li {
  display: flex;
  align-items: center;
}

.sidebar-nav ul ul li a {
  display: flex;
  align-items: center;
  flex: 1;
}

/* Target deeper nested items (second level and beyond) */
.sidebar-nav ul ul ul .lucide {
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.4rem;
  vertical-align: middle;
  top: 0;
  position: relative;
}

/* Ensure all nested levels use flexbox */
.sidebar-nav ul ul ul li {
  display: flex;
  align-items: center;
}

.sidebar-nav ul ul ul li a {
  display: flex;
  align-items: center;
  flex: 1;
}

/* General rule for all nested sidebar items */
.sidebar-nav ul ul li,
.sidebar-nav ul ul ul li,
.sidebar-nav ul ul ul ul li {
  display: flex;
  align-items: center;
}

.sidebar-nav ul ul li a,
.sidebar-nav ul ul ul li a,
.sidebar-nav ul ul ul ul li a {
  display: flex;
  align-items: center;
  flex: 1;
}

/* Ensure proper nesting and indentation */
.sidebar-nav ul ul {
  margin-left: 1rem;
  padding-left: 0;
}

.sidebar-nav ul ul ul {
  margin-left: 1rem;
  padding-left: 0;
}

/* Fix submenu display */
.sidebar-nav ul ul li {
  margin: 0.125rem 0;
  padding: 0.25rem 0;
}

.sidebar-nav ul ul li a {
  padding: 0.25rem 0.75rem;
  font-size: 0.9em;
}

/* Inline icon styling */
.markdown-section .lucide {
  width: 1em;
  height: 1em;
  margin-right: 0.25rem;
  vertical-align: middle;
  top: 0;
}

/* Content area icon styling - for any icons in the main content */
.markdown-section h1 .lucide,
.markdown-section h2 .lucide,
.markdown-section h3 .lucide,
.markdown-section h4 .lucide,
.markdown-section h5 .lucide,
.markdown-section h6 .lucide {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5rem;
  vertical-align: middle;
  top: 0;
  position: relative;
}

/* List item icon styling */
.markdown-section ul .lucide,
.markdown-section ol .lucide {
  width: 1em;
  height: 1em;
  margin-right: 0.5rem;
  vertical-align: baseline;
  top: 0;
  position: relative;
}

/* More specific UL icon styling */
.markdown-section ul li .lucide {
  width: 1em;
  height: 1em;
  margin-right: 0.5rem;
  vertical-align: baseline;
  top: 0;
  position: relative;
  display: inline-block;
}

/* Nested bullets */
.markdown-section li>ul { margin: 0; }

/* Ensure list items with icons align properly 
.markdown-section ul li:has(.lucide),
.markdown-section ol li:has(.lucide) {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

/* Fallback for browsers that don't support :has() 
.markdown-section ul li,
.markdown-section ol li {
  align-items: baseline;
  gap: 0.5rem;
  padding-bottom:0.5em;
}

/* Paragraph icon styling */
.markdown-section p .lucide {
  width: 1em;
  height: 1em;
  margin-right: 0.25rem;
  vertical-align: middle;
  top: 0;
  position: relative;
}

/* Improved typography */
.markdown-section
 {
  line-height: 1.7;
  color: var(--text-color);
}

.markdown-section strong { color: var(--text-color-special) }

.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section h6 {
  color: var(--text-color);
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.markdown-section h1 *,
.markdown-section h2 *,
.markdown-section h3 *,
.markdown-section h4 *,
.markdown-section h5 *,
.markdown-section h6 * {
  font-weight: 600;
}

.markdown-section h1 *,
.markdown-section h2 *,
.markdown-section h5 *,
.markdown-section h6 * { color: var(--text-color); }

.markdown-section h3 * { color: var(--text-color-light2); font-size:0.95em; }
.markdown-section h4 * { color: var(--text-color-light1); font-size:0.9em; }



.markdown-section h1 {
  font-size: 2.5rem;
  border-bottom: 3px solid var(--theme-color1);
  padding-bottom: 0.5rem;
}

.markdown-section h2 {
  font-size: 1.5rem;
  border-bottom: 2px solid var(--theme-color-light1);
  padding-bottom: 0.25rem;
}

/* Enhanced code blocks */
.markdown-section pre {
  box-shadow: 0 2px 2px var(--mask-dark);
  border: 1px solid var(--border-color);
  border-left: 2px solid var(--border-color-soft);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.markdown-section pre,
.markdown-section pre>code {
  background: var(--bg-color-soft1);
  border-radius: 6px;
}

.markdown-section pre>code * { font-family: 'Inconsolata' }

.markdown-section pre>code span, 
.markdown-section pre>code {
  color: var(--text-color-neutral) !important;
  background: none !important;
}

.markdown-section pre>code span.property,
.markdown-section pre>code span.variable {
  color: var(--code-text-property) !important;
}
.markdown-section pre>code span.string,
.markdown-section pre>code span.number,
.markdown-section pre>code span.time,
.markdown-section pre>code span.boolean {
  color: var(--code-text-value) !important;
}

.markdown-section pre>code span.function-name,
.markdown-section pre>code span.function,
.markdown-section pre>code span.hyperlink {
  color: var(--code-text-function) !important;
}

.markdown-section pre>code span.reference,
.markdown-section pre>code a { 
  color: var(--code-text-reference) !important; 
}

.markdown-section span.jsonplusfield,
.markdown-section pre>code a { 
  font-family: 'Inconsolata';
  color: var(--code-text-reference);
  text-decoration:underline;
  font-weight:600; 
}
.markdown-section pre>code span.comment { color: var(--text-color-muted) !important; }

.markdown-section pre button {
  border-radius:4px;
  font-size:0.9em;
  background-color:var(--theme-color2);
}

.markdown-section code {
  background: var(--theme-color-light2);
  color: var(--theme-color-dark2);
  border-radius: 4px;
  padding: 0.125rem 0.25rem;
}

/* Make jsonplus blocks size to content instead of full width (used for reference and navigation; not true JSON) */
.markdown-section pre[data-lang="jsonplus"] {
  box-shadow: none;
  display: inline-block;
  width: auto;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  border: 1px solid var(--bg-color-soft2);
}

/* Disable copy button for jsonplus blocks only (used for reference and navigation; not true JSON) */
.markdown-section pre[data-lang="jsonplus"] button.docsify-copy-code-button {
  display: none !important;
}

/* Polished source table */

.markdown-section table {
  border-radius: 8px;
  width:fit-content;
  
}

.markdown-section table thead,
.markdown-section table tbody {
  border-collapse: separate !important;
  border-radius: 8px;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}

.markdown-section table thead th {
  background: var(--theme-color1);
  color: var(--text-color);
  font-weight: 600;
  font-size: 1.2em;
  text-align: left;
}

.markdown-section table th,
.markdown-section table td {
  border: none;
  padding-right: 40px;
}

.markdown-section table tr {
  padding: 10px 12px;
  border: 1px solid var(--theme-color-light1);
}

.markdown-section table tbody tr:nth-child(odd) {
  background-color: var(--bg-color-soft1)
}

.markdown-section p.tip, 
.markdown-section table tbody tr:nth-child(2n) {
  background-color: var(--bg-color-soft2)
}

/* Improved sidebar */
.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border-color);
}

.sidebar-nav li { padding:0.25rem 0.25rem 0.25rem 0.5rem; }

/* Only apply hover effects to actual navigation links */
.sidebar-nav li:hover {
  background: var(--theme-color-light1);
  border-radius: 6px;
  transform: scale(1.05);
}

.sidebar-nav li:hover > * {
  color: var(--theme-color-dark1);
  text-decoration: none;
}


/* Only apply active styles to actual navigation links */
.sidebar-nav li.active {
  background: var(--theme-color1);
  border-radius: 6px;
  transform: scale(1);
}

.sidebar-nav li.active > * {
  color: white !important;
  font-weight: 600;
}

/* Unified image formatting */

.markdown-section img {
  max-width: 70%;
  height: auto;
  border-radius: 10px;
  border: 2px solid var(--border-color-img);
  background-color: var(--bg-color-soft2);
  align-content: center;
}

.markdown-section img.maxwidth-60 { max-width: 60%; }
.markdown-section img.maxwidth-50 { max-width: 50%; }
.markdown-section img.maxwidth-40 { max-width: 40%; }
.markdown-section img.maxwidth-30 { max-width: 30%; }

/* Exception for specific image */
.markdown-section img.full-width-diagram {
  max-width: 100%;
  border-radius: 0px;
  border:none;
  background:none;
}

/* Enhanced buttons and links */
.markdown-section a {
  color: var(--text-color-light2);
  border: none;
  transition: border-color 0.3s ease;
  text-decoration: none;
}

.markdown-section blockquote {
  border-left: 4px solid var(--theme-color-light1) !important;
}

.markdown-section blockquote * {
  color: var(--text-color-special);
}

/* Custom callout boxes */
.callout {
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 8px;
  border-left: 4px solid var(--theme-color1);
  background: rgba(37, 99, 235, 0.05);
}

.callout.info {
  border-left-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

.callout.warning {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.05);
}

.callout.error {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}

/* Improved search */
.search {
  border: 1px solid var(--border-color) !important;
  padding: 0 !important;
  border-radius: 8px;
  box-shadow: 0 0.5px 1px var(--border-color-soft);
}

.search input {
  border: none;
  background: transparent;
  color: var(--text-color);
}

.search input::placeholder {
  color: var(--text-color-muted);
}

/* Enhanced pagination */
.pagination-item {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.3s ease;
  padding: 0.25rem 0.5rem 0 0.5rem;
  background-color:var(--bg-color-soft1);
}

.pagination-item:hover {
  border: none;
  background: var(--theme-color-light1);
}

a:hover .pagination-item-title,
a:hover .pagination-item-label,
a:hover .pagination-item-subtitle,
a.pagination-item:hover {
  text-decoration: none !important;
  color: var(--theme-color-dark1);
}

/* Sidebar logo placed to the left of the search box */

.sidebar-logo {
  position: absolute;
  top: 0.55rem;
  left: 0.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
}

.sidebar-logo img {
  width: 32px;
  height: 32px;
}

aside.sidebar {
  position: relative;
}

aside.sidebar .search {
  margin-left: 3rem;
}

/* Dynamic Table of Contents */
.inline-toc {
  margin: 16px 0 24px;
  padding-left: 16px;
  border-left: 3px solid var(--border-color, #e5e7eb);
  font-size: 0.9em;
}

.inline-toc li {
  list-style: none;
  margin: 6px 0;
}

.inline-toc .toc-h3 {
  margin-left: 14px;
}

.inline-toc a {
  text-decoration: none;
  color: var(--text-color, #374151);
}

.inline-toc a:hover {
  text-decoration: underline;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .markdown-section {
    padding: 1rem;
  }
  
  .markdown-section h1 {
    font-size: 2rem;
  }
  
  .markdown-section h2 {
    font-size: 1.5rem;
  }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  :root {
    --theme-color: #3b60c6;
    --theme-color1: hsl(18, 80%, 62%);
    --theme-color2: hsl(182, 71%, 47%);
    --theme-color-light: #87b4fc;
    --theme-color-light1: hsl(18, 97%, 85%);
    --theme-color-light2: hsl(182, 60%, 80%);
    --theme-color-dark: #2f4d9e;
    --theme-color-dark1: hsl(18, 97%, 22%);
    --theme-color-dark2: hsl(182, 60%, 22%);
    --text-color: hsl(182, 40%, 96%);
    --text-color-special: hsl(18, 80%, 62%);
    --text-color-light1: hsl(182, 50%, 80%);
    --text-color-light2: hsl(182, 50%, 70%);
    --text-color-neutral: hsla(0, 0%, 80%, 1);
    --text-color-muted: hsla(0, 0%, 80%, 0.7);
    --border-color: hsl(182, 60%, 60%);
    --border-color-soft: hsl(182, 60%, 45%);
    --border-color-img: hsla(0, 0%, 85%, 0.2);
    --bg-color: hsl(182, 50%, 8%);
    --bg-color-soft1: hsla(0, 0%, 90%, 0.1);
    --bg-color-soft2: hsla(0, 0%, 85%, 0.2);
    --sidebar-bg: hsl(182, 50%, 7%);
    --code-text-property: hsl(41, 100%, 60%);
    --code-text-value: hsl(143, 50%, 70%);
    --code-text-function: hsl(279, 80%, 65%);
    --code-text-reference: hsl(193, 80%, 55%);
    --mask-light: rgba(255, 255, 255, 0.40);
    --mask-dark: rgba(0, 0, 0, 0.40);
  }
  
  body {
    background: var(--bg-color);
  }
}