/* ================================================================
   webs8 Docs — design system
   ================================================================ */

/* 1. Permanent scrollbar track: forces a visible scrollbar at all times so the
   layout never shifts when navigating between short and long pages.
   overflow-y:scroll wins where scrollbar-gutter:stable is overridden. */
html {
  overflow-y: scroll !important;
}

/* ----------------------------------------------------------------
   2. Layout: seamless white — no grey gaps
   ---------------------------------------------------------------- */

/* On desktop the whole page (sidebar + content) is white.
   The sidebar is already bg-base-100; extend that to the right panel. */
.drawer-content {
  background-color: #ffffff !important;
}

/* Sidebar: sticky viewport-height column — nav scrolls internally.
   DaisyUI's drawer on lg:drawer-open is a grid column that grows with
   page content. Override to make it a fixed-height sticky panel so the
   nav list scrolls independently and never causes a page-level jerk. */
@media (min-width: 1024px) {
  .drawer-side {
    position: sticky !important;
    top: 0 !important;
    height: 100dvh !important;
    width: 18rem !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
  }
  .drawer-side aside {
    width: 18rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* Nav scrolls within the fixed sidebar — not the whole page.
     min-height:0 is required so a flex child can shrink below its content. */
  .drawer-side nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
}

/* ----------------------------------------------------------------
   3. Content area — full height, left-flush, max-width constrained
   ---------------------------------------------------------------- */
main.docs-content {
  background-color: transparent !important; /* inherits white from drawer-content */
  box-shadow: none !important;
  border-radius: 0 !important;
  /* Push the text column to a readable width, anchored left */
  margin: 0 !important;
  padding: 2.5rem 3rem 4rem !important;
  max-width: 52rem !important;
  width: 100% !important;
  min-height: 100vh;
}

/* Mobile: show as a card on the grey page */
@media (max-width: 1023px) {
  .drawer-content {
    background-color: oklch(var(--b2)); /* grey on mobile */
  }
  main.docs-content {
    background-color: #ffffff !important;
    border-radius: 0.625rem !important;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 2px 8px -2px rgb(0 0 0 / 0.08) !important;
    margin: 1rem !important;
    padding: 1.5rem 1.25rem 3rem !important;
    min-height: auto;
  }
}

/* Thin separator between sidebar and content on desktop */
@media (min-width: 1024px) {
  .drawer-side aside {
    border-right: 1px solid oklch(var(--b3));
  }
}

/* ----------------------------------------------------------------
   4. Sidebar — professional navigation
   ---------------------------------------------------------------- */

/* Section labels */
.menu .menu-title {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
  color: oklch(var(--bc) / 0.35);
  padding: 1rem 0.875rem 0.3rem;
  margin-top: 0.25rem;
}

/* Separator before each section group (except the very first) */
.menu .menu-title + li + li + li + li + li + li + li.menu-title,
li.menu-title ~ li.menu-title {
  border-top: 1px solid oklch(var(--b3));
  padding-top: 1rem;
  margin-top: 0.5rem;
}

/* Nav item base */
.menu li > a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  padding: 0.45rem 0.875rem;
  border-radius: 0.375rem;
  color: oklch(var(--bc) / 0.75);
  transition: color 0.12s, background 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.menu li > a:hover {
  background-color: oklch(var(--b2));
  color: oklch(var(--bc));
}

/* Active page: left accent bar */
.menu a[aria-current="page"] {
  background-color: oklch(var(--p) / 0.08) !important;
  color: oklch(var(--p)) !important;
  font-weight: 600;
  border-left: 3px solid oklch(var(--p));
  padding-left: calc(0.875rem - 3px);
}

/* Indented submenu items (Menu section) */
.menu li.pl-2 > a {
  padding-left: 1.75rem;
  font-size: 0.8375rem;
  color: oklch(var(--bc) / 0.65);
}
.menu li.pl-2 > a:hover {
  color: oklch(var(--bc));
}
.menu li.pl-2 > a[aria-current="page"] {
  padding-left: calc(1.75rem - 3px);
}

/* Sub-section label (Menu) */
.menu li.menu-title.pl-2 {
  padding-left: 1.25rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

/* Sidebar logo area */
.docs-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid oklch(var(--b3));
  text-decoration: none;
  transition: opacity 0.15s;
  background: oklch(var(--b1));
}
.docs-sidebar-brand:hover {
  opacity: 0.85;
  text-decoration: none;
}
.docs-brand-name {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: oklch(var(--bc));
}
.docs-brand-pill {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: oklch(var(--p) / 0.1);
  color: oklch(var(--p));
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
}

/* Search wrapper */
.docs-search-wrap {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid oklch(var(--b3));
  position: relative;
}

/* Sidebar footer */
.docs-sidebar-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid oklch(var(--b3));
  font-size: 0.75rem;
  color: oklch(var(--bc) / 0.38);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.docs-sidebar-footer a {
  color: oklch(var(--bc) / 0.5);
  text-decoration: none;
}
.docs-sidebar-footer a:hover {
  color: oklch(var(--p));
  text-decoration: underline;
}

/* ----------------------------------------------------------------
   5. Typography in the content card
   ---------------------------------------------------------------- */
main.docs-content h1 {
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: oklch(var(--bc));
  margin-bottom: 0.5rem;
}

main.docs-content h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid oklch(var(--b3));
  letter-spacing: -0.01em;
  color: oklch(var(--bc));
}

main.docs-content h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 0.375rem;
  color: oklch(var(--bc));
}

main.docs-content p {
  line-height: 1.75;
  margin-bottom: 0.875rem;
  color: oklch(var(--bc) / 0.85);
}

main.docs-content ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1rem;
}
main.docs-content ul li {
  position: relative;
  padding-left: 1.125rem;
  margin-bottom: 0.375rem;
  line-height: 1.7;
  color: oklch(var(--bc) / 0.82);
}
main.docs-content ul li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: oklch(var(--p) / 0.7);
  font-weight: 600;
}

main.docs-content ol {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
  color: oklch(var(--bc) / 0.82);
}
main.docs-content ol li {
  margin-bottom: 0.375rem;
  line-height: 1.7;
}

main.docs-content a:not(.btn):not([class*="card"]) {
  color: oklch(var(--p));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
main.docs-content a:not(.btn):not([class*="card"]):hover {
  text-decoration-thickness: 2px;
}

main.docs-content code {
  font-size: 0.85em;
  background: oklch(var(--b2));
  padding: 0.15em 0.45em;
  border-radius: 0.3rem;
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  border: 1px solid oklch(var(--b3));
  color: oklch(var(--bc));
}

main.docs-content strong {
  font-weight: 600;
  color: oklch(var(--bc));
}

/* Lead paragraph (first <p> after h1) */
main.docs-content > p:first-of-type,
main.docs-content .docs-lead {
  font-size: 1.0625rem;
  color: oklch(var(--bc) / 0.65);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

/* ----------------------------------------------------------------
   6. Callout boxes — better contrast + icon
   ---------------------------------------------------------------- */
main.docs-content .callout {
  position: relative;
  padding: 0.875rem 1.125rem 0.875rem 2.5rem;
  border-left: 3px solid oklch(var(--p));
  background: oklch(var(--p) / 0.06);
  border-radius: 0 0.5rem 0.5rem 0;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
  color: oklch(var(--bc) / 0.85);
  line-height: 1.65;
}
main.docs-content .callout::before {
  content: 'ⓘ';
  position: absolute;
  left: 0.75rem;
  top: 0.9375rem;
  font-size: 0.9rem;
  line-height: 1;
  color: oklch(var(--p));
  font-style: normal;
}
main.docs-content .callout-warning {
  border-color: oklch(var(--wa));
  background: oklch(var(--wa) / 0.07);
}
main.docs-content .callout-warning::before {
  content: '⚠';
  color: oklch(var(--wa));
}

/* ----------------------------------------------------------------
   7. Numbered how-to steps — with connector line
   ---------------------------------------------------------------- */
.docs-steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 2rem;
}
.docs-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 1.125rem;
  margin-bottom: 2rem;
  align-items: start;
  position: relative;
}
/* Connector between steps */
.docs-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(1rem - 1px);
  top: 2.125rem;
  bottom: -1.75rem;
  width: 2px;
  background: oklch(var(--b3));
}
/* Step circle */
.docs-steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: oklch(var(--p));
  color: oklch(var(--pc));
  font-weight: 700;
  font-size: 0.8125rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px oklch(var(--p) / 0.12);
}
.docs-steps li > div p {
  color: oklch(var(--bc) / 0.75);
  font-size: 0.9375rem;
  margin-top: 0.25rem;
}
.docs-steps li > div strong {
  font-size: 0.9375rem;
  color: oklch(var(--bc));
}

/* ----------------------------------------------------------------
   8. Screenshot frame
   ---------------------------------------------------------------- */
.docs-screenshot {
  border: 1px solid oklch(var(--b3));
  border-radius: 0.75rem;
  overflow: hidden;
  background: oklch(var(--b2));
  margin: 1.75rem 0;
  box-shadow: 0 4px 16px -4px rgb(0 0 0 / 0.1);
}
.docs-screenshot img {
  display: block;
  width: 100%;
  height: auto;
}
.docs-screenshot-caption {
  font-size: 0.8125rem;
  color: oklch(var(--bc) / 0.45);
  padding: 0.5rem 1rem;
  border-top: 1px solid oklch(var(--b3));
  text-align: center;
  font-style: italic;
}

/* ----------------------------------------------------------------
   9. Prev / Next navigation — card style
   ---------------------------------------------------------------- */
main.docs-content .flex.justify-between.border-t {
  display: flex;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid oklch(var(--b3)) !important;
}
/* Override DaisyUI ghost button to look like nav cards */
main.docs-content .flex.justify-between.border-t a.btn {
  background: #fff;
  border: 1px solid oklch(var(--b3)) !important;
  color: oklch(var(--bc)) !important;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.625rem 1rem !important;
  border-radius: 0.5rem !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.4;
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
  text-decoration: none;
  flex: 1;
}
main.docs-content .flex.justify-between.border-t a.btn:hover {
  border-color: oklch(var(--p)) !important;
  box-shadow: 0 0 0 3px oklch(var(--p) / 0.1);
  color: oklch(var(--p)) !important;
  text-decoration: none;
}
/* Keep the empty span placeholder invisible */
main.docs-content .flex.justify-between.border-t span:empty {
  display: none;
}

/* ----------------------------------------------------------------
   10. Search results dropdown
   ---------------------------------------------------------------- */
#search-results a {
  display: block;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid oklch(var(--b3));
  font-size: 0.875rem;
  text-decoration: none;
  transition: background 0.1s;
}
#search-results a:last-child {
  border-bottom: none;
}
#search-results a:hover,
#search-results a.focused {
  background: oklch(var(--b2));
  text-decoration: none;
}
#search-results .result-title {
  font-weight: 600;
  color: oklch(var(--bc));
  font-size: 0.875rem;
}
#search-results .result-desc {
  color: oklch(var(--bc) / 0.5);
  font-size: 0.75rem;
  margin-top: 0.125rem;
}

/* ----------------------------------------------------------------
   11. Feature cards (hub page)
   ---------------------------------------------------------------- */
main.docs-content .card.bg-base-100 {
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
main.docs-content a.card.bg-base-100:hover {
  border-color: oklch(var(--p));
  box-shadow: 0 4px 16px -4px oklch(var(--p) / 0.2);
  transform: translateY(-1px);
  text-decoration: none;
}

/* ----------------------------------------------------------------
   12. Breadcrumb — clear hierarchy, muted trail, bold current
   ---------------------------------------------------------------- */
main.docs-content nav[aria-label="Breadcrumb"] {
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid oklch(var(--b3));
}
main.docs-content .breadcrumbs {
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}
main.docs-content .breadcrumbs ul {
  padding-left: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.125rem;
}
main.docs-content .breadcrumbs ul li {
  padding-left: 0;
  display: flex;
  align-items: center;
}
/* Reset our ul bullet for breadcrumbs */
main.docs-content .breadcrumbs ul li::before {
  content: none !important;
  display: none !important;
}
/* Ancestor links — muted */
main.docs-content .breadcrumbs ul li a {
  color: oklch(var(--bc) / 0.45);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.12s;
  padding: 0.15rem 0.25rem;
  border-radius: 0.25rem;
}
main.docs-content .breadcrumbs ul li a:hover {
  color: oklch(var(--p));
  background: oklch(var(--p) / 0.07);
  text-decoration: none;
}
/* Current page — readable, not a link */
main.docs-content .breadcrumbs ul li[aria-current="page"] {
  color: oklch(var(--bc) / 0.8);
  font-weight: 600;
}
/* DaisyUI inserts › between items via ::before on li — keep that */

/* ----------------------------------------------------------------
   13. DaisyUI table inside content
   ---------------------------------------------------------------- */
main.docs-content .table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: oklch(var(--bc) / 0.45);
  font-weight: 600;
}
main.docs-content .table td {
  font-size: 0.875rem;
  color: oklch(var(--bc) / 0.82);
  vertical-align: top;
}
/* Fix bullet override inside tables */
main.docs-content .table td::before,
main.docs-content .table th::before {
  content: none !important;
}
main.docs-content .table tr td:first-child,
main.docs-content .table tr th:first-child {
  padding-left: 0;
}

/* ----------------------------------------------------------------
   14. DaisyUI collapse/accordion in troubleshooting + FAQ
   ---------------------------------------------------------------- */
main.docs-content .collapse {
  border: 1px solid oklch(var(--b3));
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
  background: #fff;
}
main.docs-content .collapse-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: oklch(var(--bc));
  padding: 1rem 1.25rem;
}
main.docs-content .collapse-content {
  font-size: 0.9375rem;
  color: oklch(var(--bc) / 0.78);
  line-height: 1.7;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
/* Reset bullet inside collapse content */
main.docs-content .collapse-content li::before {
  content: '–';
}

/* ----------------------------------------------------------------
   15. Mobile top bar override — cleaner
   ---------------------------------------------------------------- */
.lg\:hidden.sticky.top-0 {
  background: oklch(var(--b1));
  border-bottom: 1px solid oklch(var(--b3));
  box-shadow: 0 1px 4px -1px rgb(0 0 0 / 0.06);
}

/* ----------------------------------------------------------------
   16. DaisyUI badge in steps
   ---------------------------------------------------------------- */
main.docs-content .badge-error.badge-xs {
  font-size: 0.6rem;
}