/* VKL Shield public docs — plain CSS (no build step), tokens ported 1:1 from
   dashboard/ui/src/styles/globals.css (accent #1f6f5c, neutral cool-gray,
   Geist / Geist Mono). Light only, mobile-first, no horizontal overflow. */
:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;

  --color-canvas: #f4f5f7;
  --color-panel: #ffffff;
  --color-line: #e3e5ea;
  --color-line-strong: #cfd3da;
  --color-ink: #16181d;
  --color-ink-soft: #2b2f37;
  --color-muted: #5e6470;
  --color-faint: #8b919c;

  --color-accent: #1f6f5c;
  --color-accent-hover: #185a4b;
  --color-accent-soft: #e6f2ee;
  --color-danger: #b42318;
  --color-danger-soft: #fdeceb;
  --color-warn: #b54708;
  --color-warn-soft: #fef4e6;
  --color-ok: #1f7a4a;
  --color-ok-soft: #e7f5ec;

  --shadow-panel: 0 1px 2px rgba(22, 24, 29, 0.04), 0 1px 1px rgba(22, 24, 29, 0.03);
}

* { box-sizing: border-box; }
html { color-scheme: light; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-canvas);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); text-decoration: underline; }
code, pre, kbd { font-family: var(--font-mono); font-size: 0.9em; }

/* Grid shell: topbar + left sidenav + center prose + right page-toc.
   Mobile-first: sidenav collapses to a horizontal scroller under the topbar;
   page-toc is hidden below desktop width (prose stays readable, no overflow). */
.layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 220px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "top top top" "nav main toc";
  min-height: 100dvh;
  max-width: 100vw;
}
.layout > * { min-width: 0; }

.topbar {
  grid-area: top;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 1rem 1.5rem;
  background: var(--color-panel);
  border-bottom: 1px solid var(--color-line);
}
.brand { font-weight: 600; color: var(--color-ink); font-size: 1.05rem; }
.brand:hover { color: var(--color-accent); text-decoration: none; }
.topbar-subtitle { color: var(--color-muted); font-size: 0.85rem; }

.sidenav {
  grid-area: nav;
  padding: 1.25rem 1rem;
  border-right: 1px solid var(--color-line);
  background: var(--color-panel);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.nav-link {
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  color: var(--color-ink-soft);
  font-size: 0.92rem;
}
.nav-link:hover { background: var(--color-canvas); text-decoration: none; }
.nav-link-active { background: var(--color-accent-soft); color: var(--color-accent-hover); font-weight: 600; }
.nav-divider { border-top: 1px solid var(--color-line); margin: 0.5rem 0.6rem; }
.nav-section-label { color: var(--color-faint); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem; padding: 0.2rem 0.6rem; }
.nav-group-label { color: var(--color-ink-soft); font-weight: 600; font-size: 0.92rem; padding: 0.45rem 0.6rem 0.1rem; margin: 0; }
.nav-link-sub { padding-left: 1.4rem; font-size: 0.86rem; }

main.prose {
  grid-area: main;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2.5rem 3rem 5rem;
  min-width: 0;
}
/* Pages with no right-hand "Trong trang này" TOC (e.g. the /docs/v1/ index,
   which links out to grouped sections instead of in-page anchors) must not
   leave a dead 220px gutter where the TOC column would have been — collapse
   that grid track to 0 and let prose fill the full width up to the edge.
   Scoped to the desktop width where the 3-column grid (nav/main/toc) is
   actually in effect — the <1200px and <760px media queries below already
   drop the toc column/switch layout entirely and must not be overridden by
   this higher-specificity selector. */
@media (min-width: 1201px) {
  .layout:not(:has(.page-toc)) { grid-template-columns: 240px minmax(0, 1fr) 0; }
  .layout:not(:has(.page-toc)) main.prose { max-width: none; }
}

.page-toc {
  grid-area: toc;
  padding: 2rem 1.25rem;
  border-left: 1px solid var(--color-line);
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100dvh;
  overflow-y: auto;
}
.toc-label { color: var(--color-faint); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; margin: 0 0 0.25rem; }
.toc-link { color: var(--color-muted); padding: 0.15rem 0; }
.toc-link:hover { color: var(--color-accent); text-decoration: none; }
.toc-depth-3 { padding-left: 0.75rem; }

@media (max-width: 1200px) {
  .layout { grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: "top top" "nav main"; }
  .page-toc { display: none; }
}

@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; grid-template-areas: "top" "nav" "main"; }
  .sidenav {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--color-line);
    padding: 0.6rem 0.75rem;
    gap: 0.4rem;
    -webkit-overflow-scrolling: touch;
  }
  .nav-link { white-space: nowrap; }
  main.prose { padding: 1.5rem 1.1rem 3.5rem; }
  .topbar { padding: 0.85rem 1.1rem; }
}

/* Markdown prose typography + tables + blockquotes. Sentence case headers,
   generous line-height, text-wrap pretty to avoid orphans (anti-slop rule). */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5 {
  font-weight: 600;
  color: var(--color-ink);
  text-wrap: pretty;
  scroll-margin-top: 1rem;
}
.prose h1 { font-size: 1.85rem; margin: 0 0 0.75rem; }
.prose h2 { font-size: 1.4rem; margin: 2.25rem 0 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--color-line); }
.prose h2:first-of-type { border-top: none; padding-top: 0; margin-top: 1rem; }
.prose h3 { font-size: 1.15rem; margin: 1.75rem 0 0.6rem; }
.prose h4 { font-size: 0.95rem; margin: 1.4rem 0 0.5rem; color: var(--color-ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }
.prose p { color: var(--color-ink-soft); margin: 0.75rem 0; text-wrap: pretty; overflow-wrap: anywhere; }
.prose td, .schema-table td { overflow-wrap: anywhere; }
.prose ul, .prose ol { color: var(--color-ink-soft); padding-left: 1.4rem; }
.prose li { margin: 0.25rem 0; }

.heading-anchor {
  opacity: 0;
  margin-right: 0.35rem;
  color: var(--color-faint);
  font-weight: 400;
  text-decoration: none;
}
.prose h1:hover .heading-anchor, .prose h2:hover .heading-anchor, .prose h3:hover .heading-anchor { opacity: 1; }

.prose blockquote {
  margin: 1rem 0;
  padding: 0.6rem 1rem;
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-ink-soft);
  border-radius: 0 6px 6px 0;
}
.prose blockquote p { margin: 0.2rem 0; }

.table-scroll {
  margin: 1rem 0;
  border-radius: 8px;
  box-shadow: var(--shadow-panel);
  overflow-x: auto;
  max-width: 100%;
}
.prose table, .schema-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  background: var(--color-panel);
}
.prose table thead, .schema-table thead { background: var(--color-canvas); }
.prose th, .prose td, .schema-table th, .schema-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}
.prose th, .schema-table th { color: var(--color-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; }
.prose tr:last-child td, .schema-table tr:last-child td { border-bottom: none; }
/* Short-value columns (name/field, location, type, required badge) must
   never wrap letter-by-letter — give them nowrap + a min-width so they size
   to content; only the last (description) column wraps, and the table
   scrolls horizontally inside .table-scroll if the row still doesn't fit
   (anti-slop: narrow columns breaking words is worse than a scrollbar). */
.schema-table th:not(:last-child), .schema-table td:not(:last-child) {
  white-space: nowrap;
  overflow-wrap: normal;
  min-width: 6rem;
}
.schema-table th:last-child, .schema-table td:last-child { width: 100%; }

.prose :not(pre) > code {
  background: var(--color-canvas);
  border: 1px solid var(--color-line);
  border-radius: 4px;
  overflow-wrap: anywhere;
  padding: 0.1rem 0.35rem;
  color: var(--color-ink-soft);
}

.schema-required { color: var(--color-danger); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; }
.schema-optional { color: var(--color-faint); font-size: 0.72rem; }
.schema-desc, .schema-field-desc, .schema-note, .schema-scalar-meta { color: var(--color-muted); font-size: 0.85rem; margin: 0.2rem 0; }
.schema-nested { margin-top: 0.4rem; margin-left: 0.5rem; }
.schema-named { margin: 0.5rem 0; }
.schema-name { font-weight: 600; font-family: var(--font-mono); font-size: 0.9rem; margin: 0; }
.schema-union { padding-left: 1.2rem; }
.schema-union-label, .schema-array-label { color: var(--color-muted); font-size: 0.82rem; margin: 0.4rem 0 0.2rem; }

.schema-field-list { list-style: none; padding-left: 0.75rem; border-left: 2px solid var(--color-line); margin: 0.4rem 0; }
.schema-field-list li { margin: 0.5rem 0; font-size: 0.85rem; }
.schema-list-type { color: var(--color-muted); font-family: var(--font-mono); font-size: 0.8rem; }

/* Code blocks (build-time highlighted by shiki, colors via .tok-N classes
   injected at build), copy button, HTTP method badges, endpoint cards. */
.code-block {
  position: relative;
  margin: 1rem 0;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-panel);
}
.code-block::before {
  content: attr(data-lang);
  display: block;
  padding: 0.35rem 0.75rem;
  font-size: 0.72rem;
  color: var(--color-faint);
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-line);
  text-transform: lowercase;
}
.shiki-block {
  margin: 0;
  max-width: 100%;
  padding: 0.9rem 1rem;
  overflow-x: auto;
  background: var(--color-panel);
  line-height: 1.55;
}
.shiki-block code { font-size: 0.85rem; white-space: pre; }
.mermaid-source { margin: 1rem 0; max-width: 100%; padding: 0.9rem 1rem; background: var(--color-ink); color: #d7dbe0; border-radius: 8px; overflow-x: auto; }
.mermaid-source code { white-space: pre; font-size: 0.8rem; }

.copy-btn {
  position: absolute;
  top: 0.3rem;
  right: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--color-muted);
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: 5px;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
}
.copy-btn:hover { background: var(--color-canvas); color: var(--color-ink); }
.copy-btn[data-copied="true"] { color: var(--color-accent); border-color: var(--color-accent); }

.endpoint {
  margin: 1.75rem 0;
  padding: 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-panel);
  box-shadow: var(--shadow-panel);
}
.endpoint h3 { display: flex; align-items: center; gap: 0.6rem; margin-top: 0; }
.endpoint-summary { font-weight: 500; color: var(--color-ink-soft); }
.endpoint-desc { color: var(--color-muted); }

.http-method {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  letter-spacing: 0.03em;
}
.method-get { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.method-post { background: var(--color-ok-soft); color: var(--color-ok); }
.method-put, .method-patch { background: var(--color-warn-soft); color: var(--color-warn); }
.method-delete { background: var(--color-danger-soft); color: var(--color-danger); }

.status-code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}
.status-ok { background: var(--color-ok-soft); color: var(--color-ok); }
.status-client-error { background: var(--color-warn-soft); color: var(--color-warn); }
.status-server-error { background: var(--color-danger-soft); color: var(--color-danger); }
.response-case { margin: 0.75rem 0; padding-bottom: 0.5rem; border-bottom: 1px dashed var(--color-line); }
.response-case:last-child { border-bottom: none; }

.hosts-table td code { font-size: 0.82rem; }

/* "Xem bản Markdown" link bar (top of every page), the "Dành cho AI agent"
   nav/overview blocks, and the OpenAPI download/copy-url action buttons on
   the API reference page header. Plain CSS, no new runtime script — reuses
   the single vendored copy-button script already on every page. */
.markdown-link-bar {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
}
.markdown-link-bar a { display: inline-flex; align-items: center; gap: 0.3rem; }

.ai-agent-block {
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-panel);
  box-shadow: var(--shadow-panel);
}
.ai-agent-block h2, .ai-agent-block h3 { margin-top: 0; }
.ai-agent-resource {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--color-line);
}
.ai-agent-resource:last-child { border-bottom: none; }
.ai-agent-resource-label { color: var(--color-ink-soft); font-size: 0.88rem; }
.ai-agent-resource-url { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-muted); overflow-wrap: anywhere; }

.copy-url-btn {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--color-muted);
  background: var(--color-canvas);
  border: 1px solid var(--color-line);
  border-radius: 5px;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
}
.copy-url-btn:hover { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.copy-url-btn[data-copied="true"] { color: var(--color-accent); border-color: var(--color-accent); }

.openapi-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0 0.5rem;
}
.openapi-btn {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--color-accent);
  color: var(--color-accent-hover);
  background: var(--color-accent-soft);
}
.openapi-btn:hover { background: var(--color-accent); color: #fff; text-decoration: none; }
.openapi-hint { color: var(--color-muted); font-size: 0.82rem; margin: 0.25rem 0 1rem; }

.shiki-block .tok-0{color:#6A737D;}
.shiki-block .tok-1{color:#24292E;}
.shiki-block .tok-2{color:#22863A;}
.shiki-block .tok-3{color:#6F42C1;}
.shiki-block .tok-4{color:#032F62;}
.shiki-block .tok-5{color:#D73A49;}
.shiki-block .tok-6{color:#E36209;}
.shiki-block .tok-7{color:#005CC5;}