/* ==========================================================
   DOCS VIEWER — layout only
   Not part of the Candy UI Kit component system. Renders the
   .md files in this folder using the kit's own typography,
   colors and panel component so the docs look native to the
   product instead of raw plain-text markdown.
========================================================== */

body {
  overflow-y: auto;
  height: auto;
  background: var(--background);
}

.doc-shell {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

/* ----------------------------------
   Sidebar
---------------------------------- */

.doc-sidebar {
  position: sticky;
  top: 0;
  flex: none;
  width: 260px;
  height: 100vh;
  overflow-y: auto;
  padding: 24px 16px;
  box-sizing: border-box;
  border-right: 2px solid var(--border);
  background: var(--surface);
}

.doc-sidebar__home {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-decoration: none;
}

.doc-sidebar__home:hover {
  color: var(--primary);
}

.doc-sidebar__brand {
  margin-bottom: 20px;
  color: var(--text);
  font-size: var(--font-size-lg);
  font-weight: 800;
}

.doc-sidebar__group {
  margin-bottom: 18px;
}

.doc-sidebar__group-title {
  margin: 0 0 6px;
  padding: 0 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.doc-sidebar__link {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.doc-sidebar__link:hover {
  background: var(--surface-soft);
}

.doc-sidebar__link--active {
  background: var(--primary);
  color: #ffffff;
}

/* higher specificity than the plain :hover rule above, so the
   active link keeps its colored background + white text on
   hover instead of falling back to the near-white hover color
   (which made the white text unreadable) */
.doc-sidebar__link.doc-sidebar__link--active:hover {
  background: var(--primary);
  color: #ffffff;
}

/* ----------------------------------
   Main content
---------------------------------- */

.doc-main {
  flex: 1;
  min-width: 0;
  padding: 40px 24px 80px;
  display: flex;
  justify-content: center;
}

.doc-panel {
  width: 100%;
  max-width: 760px;
}

.doc-content {
  padding: 40px 48px;
}

.doc-content h1,
.doc-content h2,
.doc-content h3,
.doc-content h4 {
  color: var(--text);
  margin-top: 1.4em;
  margin-bottom: 0.5em;
}

.doc-content h1 {
  margin-top: 0;
}

.doc-content p,
.doc-content li {
  color: var(--text);
  line-height: 1.7;
}

.doc-content ul,
.doc-content ol {
  padding-left: 1.4em;
  margin-bottom: 1em;
}

.doc-content blockquote {
  margin: 1em 0;
  padding: 10px 18px;
  border-left: 4px solid var(--primary);
  background: var(--surface-soft);
  color: var(--text-muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.doc-content code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--secondary);
  font-size: 0.9em;
}

.doc-content pre {
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--text);
  overflow-x: auto;
  margin: 1em 0;
}

.doc-content pre code {
  background: none;
  color: #f4f1ea;
  padding: 0;
}

.doc-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: var(--font-size-sm);
}

.doc-content th,
.doc-content td {
  padding: 8px 12px;
  border: 2px solid var(--border);
  text-align: left;
}

.doc-content th {
  background: var(--surface-soft);
  font-weight: 800;
}

.doc-content hr {
  border: none;
  border-top: 2px solid var(--border);
  margin: 2em 0;
}

.doc-content a {
  color: var(--primary);
  font-weight: 700;
}

.doc-content img {
  max-width: 100%;
}

/* ----------------------------------
   Responsive
---------------------------------- */

@media (max-width: 780px) {
  .doc-shell {
    flex-direction: column;
  }

  .doc-sidebar {
    position: relative;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 2px solid var(--border);
  }

  .doc-content {
    padding: 28px 22px;
  }
}