/* Knowledge ERP documentation — self-contained styling (no build step). */
:root {
	--doc-bg: #ffffff;
	--doc-fg: #1f2933;
	--doc-muted: #647084;
	--doc-border: #e4e7ec;
	--doc-surface: #f8fafc;
	--doc-accent: #2563eb;
	--doc-accent-soft: #eff4ff;
	--doc-code-bg: #f3f4f6;
	--doc-radius: 8px;
	--doc-sidebar-w: 17rem;
	--doc-toc-w: 15rem;
}
@media (prefers-color-scheme: dark) {
	:root {
		--doc-bg: #0f1419;
		--doc-fg: #e5e9f0;
		--doc-muted: #9aa5b8;
		--doc-border: #232a36;
		--doc-surface: #161c24;
		--doc-accent: #6ea8fe;
		--doc-accent-soft: #18233a;
		--doc-code-bg: #1b222c;
	}
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--doc-bg);
	color: var(--doc-fg);
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--doc-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.doc-skip {
	position: absolute; left: -999px; top: 0;
	background: var(--doc-accent); color: #fff; padding: .5rem .75rem; border-radius: 0 0 var(--doc-radius) 0; z-index: 50;
}
.doc-skip:focus { left: 0; }

/* Header */
.doc-header {
	position: sticky; top: 0; z-index: 20;
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; padding: .85rem 1.5rem;
	background: color-mix(in srgb, var(--doc-bg) 92%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--doc-border);
}
.doc-brand { font-weight: 700; font-size: 1.05rem; color: var(--doc-fg); }
.doc-brand span { color: var(--doc-accent); }
.doc-header-right { display: flex; align-items: center; gap: 1.25rem; }

/* Search */
.doc-search-wrap { position: relative; }
.doc-search-input {
	font: inherit; font-size: .9rem; width: 14rem; max-width: 40vw;
	padding: .4rem .7rem; border-radius: var(--doc-radius);
	border: 1px solid var(--doc-border); background: var(--doc-surface); color: var(--doc-fg);
}
.doc-search-input:focus { outline: 2px solid var(--doc-accent); outline-offset: 1px; }
.doc-search-results {
	position: absolute; top: calc(100% + .4rem); right: 0; width: 24rem; max-width: 90vw;
	max-height: 70vh; overflow-y: auto; z-index: 30;
	background: var(--doc-bg); border: 1px solid var(--doc-border);
	border-radius: var(--doc-radius); box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.doc-search-hit { display: block; padding: .6rem .8rem; border-bottom: 1px solid var(--doc-border); }
.doc-search-hit:last-child { border-bottom: 0; }
.doc-search-hit:hover { background: var(--doc-surface); text-decoration: none; }
.doc-search-mod {
	display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .03em;
	color: var(--doc-accent); background: var(--doc-accent-soft); padding: .1rem .45rem;
	border-radius: 999px; margin-bottom: .25rem;
}
.doc-search-title { display: block; font-weight: 600; color: var(--doc-fg); font-size: .95rem; }
.doc-search-snip { display: block; color: var(--doc-muted); font-size: .82rem; line-height: 1.45; margin-top: .15rem; }
.doc-search-empty { padding: .8rem; color: var(--doc-muted); font-size: .88rem; }
@media (max-width: 720px) { .doc-search-input { width: 9rem; } }
.doc-api-link { font-size: .9rem; font-weight: 600; color: var(--doc-fg); }
.doc-api-link:hover { color: var(--doc-accent); text-decoration: none; }
.doc-version { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--doc-muted); }
.doc-version select {
	font: inherit; padding: .3rem 1.8rem .3rem .6rem; border-radius: var(--doc-radius);
	border: 1px solid var(--doc-border); background: var(--doc-surface); color: var(--doc-fg); cursor: pointer;
}

/* Layout shell: sidebar | content | toc */
.doc-shell {
	display: grid;
	grid-template-columns: var(--doc-sidebar-w) minmax(0, 1fr) var(--doc-toc-w);
	gap: 2.5rem;
	max-width: 84rem; margin: 0 auto; padding: 2rem 1.5rem 5rem;
}
@media (max-width: 1024px) { .doc-shell { grid-template-columns: var(--doc-sidebar-w) minmax(0, 1fr); } .doc-toc { display: none; } }
@media (max-width: 720px) { .doc-shell { grid-template-columns: 1fr; } .doc-sidebar { position: static; height: auto; } }

/* Sidebar */
.doc-sidebar { position: sticky; top: 4.5rem; align-self: start; height: calc(100vh - 6rem); overflow-y: auto; padding-right: .5rem; }
.doc-nav-group { margin-bottom: 1.4rem; }
.doc-nav-module {
	margin: 0 0 .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--doc-muted);
}
a.doc-nav-module-link { display: block; text-decoration: none; }
a.doc-nav-module-link:hover { color: var(--doc-fg); }
a.doc-nav-module-link.is-active { color: var(--doc-accent); }
.doc-sidebar ul { list-style: none; margin: 0; padding: 0; }
.doc-sidebar li { margin: 0; }
.doc-sidebar a {
	display: block; padding: .32rem .6rem; border-radius: 6px; color: var(--doc-fg);
	font-size: .92rem; border-left: 2px solid transparent;
}
.doc-sidebar a:hover { background: var(--doc-surface); text-decoration: none; }
.doc-sidebar a.is-active {
	color: var(--doc-accent); background: var(--doc-accent-soft);
	border-left-color: var(--doc-accent); font-weight: 600;
}
.doc-nav-children {
	margin: .1rem 0 .4rem 1.1rem; padding-left: .85rem;
	border-left: 2px solid var(--doc-border);
}
.doc-nav-children a { font-size: .86rem; color: var(--doc-muted); }
.doc-nav-children a::before { content: "\203A"; margin-right: .45rem; opacity: .55; }
.doc-nav-children a:hover { color: var(--doc-fg); }
.doc-nav-children a.is-active { color: var(--doc-accent); }
.doc-nav-children a.is-active::before { opacity: 1; }

/* Article */
.doc-main { min-width: 0; }
.doc-article { max-width: 46rem; }
.doc-badge {
	display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .03em;
	color: var(--doc-accent); background: var(--doc-accent-soft);
	padding: .2rem .6rem; border-radius: 999px; margin-bottom: .75rem;
}
.doc-article h1 { font-size: 2.1rem; line-height: 1.15; margin: 0 0 .5rem; }
.doc-summary { font-size: 1.1rem; color: var(--doc-muted); margin: 0 0 2rem; }
.doc-version-note {
	margin: -1.4rem 0 2rem; font-size: .82rem; color: var(--doc-muted);
	border: 1px dashed var(--doc-border); border-radius: var(--doc-radius);
	padding: .45rem .7rem; display: inline-block;
}

/* Rendered markdown */
.doc-prose { font-size: 1rem; }
.doc-prose h2 { font-size: 1.5rem; margin: 2.4rem 0 .8rem; padding-top: .4rem; border-top: 1px solid var(--doc-border); }
.doc-prose h3 { font-size: 1.2rem; margin: 1.8rem 0 .6rem; }
.doc-prose h2:first-child, .doc-prose h3:first-child { margin-top: 0; border-top: 0; }
.doc-prose p, .doc-prose ul, .doc-prose ol { margin: 0 0 1.1rem; }
.doc-prose ul, .doc-prose ol { padding-left: 1.4rem; }
.doc-prose li { margin: .3rem 0; }
.doc-prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em;
	background: var(--doc-code-bg); padding: .15rem .4rem; border-radius: 5px;
}
.doc-prose pre {
	background: var(--doc-code-bg); padding: 1rem 1.1rem; border-radius: var(--doc-radius);
	overflow-x: auto; border: 1px solid var(--doc-border);
}
.doc-prose pre code { background: none; padding: 0; }
.doc-prose blockquote {
	margin: 0 0 1.1rem; padding: .4rem 1rem; border-left: 3px solid var(--doc-accent);
	background: var(--doc-surface); color: var(--doc-muted); border-radius: 0 var(--doc-radius) var(--doc-radius) 0;
}
.doc-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; font-size: .92rem; }
.doc-prose th, .doc-prose td { border: 1px solid var(--doc-border); padding: .5rem .7rem; text-align: left; }
.doc-prose th { background: var(--doc-surface); }
.doc-prose a.doc-anchor { color: var(--doc-muted); opacity: 0; margin-left: .35rem; font-weight: 400; text-decoration: none; }
.doc-prose h2:hover .doc-anchor, .doc-prose h3:hover .doc-anchor { opacity: 1; }
.doc-prose img { max-width: 100%; border-radius: var(--doc-radius); }

/* "Do this via the API" callout */
.doc-api-callout {
	margin: 2.5rem 0 0; padding: 1rem 1.2rem; border: 1px solid var(--doc-border);
	border-left: 3px solid var(--doc-accent); border-radius: 0 var(--doc-radius) var(--doc-radius) 0;
	background: var(--doc-surface);
}
.doc-api-callout-title { margin: 0 0 .3rem; font-weight: 700; font-size: .95rem; }
.doc-api-callout p { margin: 0 0 .5rem; color: var(--doc-muted); }
.doc-api-callout a { font-weight: 600; }

/* On-this-page TOC */
.doc-toc { position: sticky; top: 4.5rem; align-self: start; font-size: .85rem; }
.doc-toc-title { margin: 0 0 .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--doc-muted); }
.doc-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--doc-border); }
.doc-toc a { display: block; padding: .25rem 0 .25rem .8rem; color: var(--doc-muted); }
.doc-toc a:hover { color: var(--doc-accent); text-decoration: none; }
.doc-toc-l3 a { padding-left: 1.6rem; font-size: .82rem; }

/* Legal footer — the published policy documents (see components/legal-links). */
.doc-footer {
	border-top: 1px solid var(--doc-border);
	margin-top: 3rem;
	padding: 1.5rem;
	text-align: center;
}

.doc-footer .legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
	justify-content: center;
}

.doc-footer .legal-links a {
	color: var(--doc-muted);
	font-size: 0.8125rem;
	text-decoration: none;
}

.doc-footer .legal-links a:hover {
	color: var(--doc-accent);
	text-decoration: underline;
}