html {
  background-color: #0f172b;
}

#topnav .logo {
  --tw-leading: 70px;
  line-height: 70px;
}

.lg\:pb-12 {
  @media (width >= 960px) {
    padding-bottom: calc(var(--spacing) * 12);
  }
}

.pb-12 {
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .md\:pb-16 {
    padding-bottom: 4rem;
  }
}

.ml-5 {
  margin-left: calc(var(--spacing) * 5);
}

#topnav.bg-white {
  background-color: var(--color-white);
}

#topnav.dark\:bg-slate-800 {
  &:where(.dark, .dark *) {
    background-color: var(--color-slate-800);
  }
}

.pr-4 {
  padding-right: calc(var(--spacing) * 4);
}

.hover\:text-indigo-700 {
  &:hover {
    @media (hover: hover) {
      color: var(--color-indigo-700);
    }
  }
}

@media (min-width: 768px) {
  .md\:px-4 {
    padding-left: calc(var(--spacing) * 4);
    padding-right: calc(var(--spacing) * 4);
  }

  .md\:py-2 {
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 2);
  }

  .md\:pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }

  .md\:pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .md\:text-base {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
  }
}

/* Knowledge base article content – headings (Tailwind-like typography) */
.knowledge-article-content h1 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  color: rgb(15 23 42);
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.knowledge-article-content h1:first-child {
  margin-top: 0;
}
.dark .knowledge-article-content h1 {
  color: rgb(248 250 252);
}

.knowledge-article-content h2 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  color: rgb(15 23 42);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
.knowledge-article-content h2:first-child {
  margin-top: 0;
}
.dark .knowledge-article-content h2 {
  color: rgb(248 250 252);
}

.knowledge-article-content h3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: rgb(30 41 59);
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}
.knowledge-article-content h3:first-child {
  margin-top: 0;
}
.dark .knowledge-article-content h3 {
  color: rgb(226 232 240);
}

.knowledge-article-content h4,
.knowledge-article-content h5,
.knowledge-article-content h6 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: rgb(51 65 85);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.knowledge-article-content h4:first-child,
.knowledge-article-content h5:first-child,
.knowledge-article-content h6:first-child {
  margin-top: 0;
}
.dark .knowledge-article-content h4,
.dark .knowledge-article-content h5,
.dark .knowledge-article-content h6 {
  color: rgb(203 213 225);
}

/* Same as text-slate-400 text-base leading-8 for paragraphs */
.knowledge-article-content p {
  color: rgb(148 163 184);
  font-size: 1rem;
  line-height: 2rem;
}

/* Same as ml-5 mb-1 mt-2 list-disc list-inside text-slate-400 text-base for uls */
.knowledge-article-content ul {
  margin-left: 1.25rem;
  margin-bottom: 0.25rem;
  margin-top: 0.5rem;
  list-style-type: disc;
  list-style-position: inside;
  color: rgb(148 163 184);
  font-size: 1rem;
}

.knowledge-article-content ol {
  margin-left: 1.25rem;
  margin-bottom: 0.25rem;
  margin-top: 0.5rem;
  list-style-type: decimal;
  list-style-position: inside;
  color: rgb(148 163 184);
  font-size: 1rem;
}

/* Same as mb-1 for lis */
.knowledge-article-content li {
  margin-bottom: 0.25rem;
}

/* Inline code in article content */
.knowledge-article-content code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875rem;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  background: rgb(243 244 246);
  color: rgb(51 65 85);
}
.dark .knowledge-article-content code {
  background: rgb(30 41 59);
  color: rgb(203 213 225);
}

/* Block code (pre) – same look as inline code, block layout */
.knowledge-article-content pre {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875rem;
  padding: 1rem 1.25rem;
  border-radius: 0.25rem;
  background: rgb(243 244 246);
  color: rgb(51 65 85);
  overflow-x: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.knowledge-article-content pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}
.dark .knowledge-article-content pre {
  background: rgb(30 41 59);
  color: rgb(203 213 225);
}
.dark .knowledge-article-content pre code {
  background: transparent;
  color: inherit;
}

/* Same as text-indigo-600 hover:text-indigo-700 dark:hover:text-indigo-500 for links */
.knowledge-article-content a {
  color: rgb(79 70 229);
}
.knowledge-article-content a:hover {
  color: rgb(67 56 202);
}
.dark .knowledge-article-content a:hover {
  color: rgb(99 102 241);
}

/* Knowledge base article images: default 100% width, responsive; respect inline width if set */
.knowledge-article-content img {
  max-width: 100%;
  height: auto;
  display: block;
}
.knowledge-article-content img:not([style*="width"]) {
  width: 100%;
}
.knowledge-article-content img.kb-img-original {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Admin Knowledge Base list – row and section borders (not dependent on Tailwind build) */
.admin-kb-list__header {
  border-bottom: 1px solid #e5e7eb;
}
.dark .admin-kb-list__header {
  border-bottom-color: #374151;
}
.admin-kb-list__tbody tr + tr {
  border-top: 1px solid #e5e7eb;
}
.dark .admin-kb-list__tbody tr + tr {
  border-top-color: #374151;
}
.admin-kb-list__footer {
  border-top: 1px solid #e5e7eb;
}
.dark .admin-kb-list__footer {
  border-top-color: #374151;
}

/* Release history accordion */
.release-details summary {
  list-style: none;
  cursor: pointer;
}
.release-details summary::-webkit-details-marker {
  display: none;
}
.release-details summary .release-chevron {
  transition: transform 0.2s ease;
}
.release-details[open] summary .release-chevron {
  transform: rotate(180deg);
}
/* Dark mode: ensure expand section summary has visible hover */
.dark .release-details summary:hover {
  background-color: rgb(30 41 59); /* slate-800 */
}
.dark .release-details summary:focus-visible {
  background-color: rgb(30 41 59);
}

/* Features overview filter active state */
.filter-options li.active {
  color: rgb(79 70 229); /* indigo-600 */
  border-color: rgb(79 70 229);
}
.dark .filter-options li.active {
  border-color: rgb(79 70 229);
}

@media (min-width: 991px) {
  .header-nav-right {
    width: 184px;
    text-align: right;
  }
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* File Previews page: mobile layout */
@media (max-width: 767px) {
  .file-preview-doc-iframe {
    max-height: 280px;
    height: 280px !important;
  }
}