/* SoftK owner documentation: keep the full guide readable in every browser theme. */
html,
body,
.docs-wrapper,
.docs-content,
.docs-article,
.docs-article .docs-section {
  background: #ffffff !important;
  color: #4b5563 !important;
}

body.docs-page::before,
body.docs-page::after,
.docs-page .modal-backdrop,
.docs-page .offcanvas-backdrop {
  display: none !important;
}

.docs-page .docs-wrapper,
.docs-page .docs-content,
.docs-page .docs-content .container {
  position: relative !important;
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body,
.docs-article p,
.docs-article li,
.docs-article td,
.docs-article th {
  color: #4b5563 !important;
}

body.docs-page {
  display: block !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
}

.docs-content .container,
.docs-header,
.docs-intro {
  background: #ffffff !important;
}

.docs-article h1,
.docs-article h2,
.docs-article h3,
.docs-article h4,
.docs-article h5,
.docs-article h6,
.docs-article .section-heading,
.docs-article strong {
  color: #1f2937 !important;
}

.docs-sidebar,
.header,
.footer {
  background: #ffffff !important;
}

body[data-bs-theme="dark"],
html[data-bs-theme="dark"] body {
  background: #ffffff !important;
  color: #4b5563 !important;
}

.docs-content {
  min-height: calc(100vh - 69px);
}

/* The supplied SoftK artwork is a square 4000px logo; constrain it in the header
   so its dark canvas cannot cover the documentation page. */
.docs-logo-wrapper .logo-icon {
  display: block !important;
  width: 150px !important;
  height: 48px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.docs-top-utilities {
  position: absolute !important;
  top: 14px !important;
  right: 24px !important;
  z-index: 20 !important;
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

html[dir="rtl"] .docs-top-utilities {
	right: 24px !important;
	left: auto !important;
}

html[dir="rtl"] .docs-sidebar.sidebar-visible {
  left: auto !important;
  right: 0 !important;
  transform: translateX(0) !important;
}

html[dir="rtl"] .docs-sidebar.sidebar-hidden {
  left: auto !important;
  right: 0 !important;
  transform: translateX(300px) !important;
}