/* ============================================================
   ArchCRM API Docs — design system
   Clean Mintlify-style docs layout in ArchCRM navy / teal.
   ============================================================ */

:root {
  --navy:#16314A; --navy-deep:#0e2236; --teal:#15897B; --teal-d:#0f6f63;
  --bg:#ffffff; --bg-alt:#f7f9f9; --panel:#ffffff; --ink:#1c2b33; --ink-soft:#41525c;
  --muted:#6b7c85; --line:#e7edee; --line-strong:#d4dee0; --code-bg:#f1f5f5;
  --brand:#16314A; --accent:#15897B; --accent-soft:#e7f4f1;
  --shadow:0 1px 2px rgba(22,49,74,.06),0 8px 24px rgba(22,49,74,.05);
  --shadow-lg:0 12px 40px rgba(14,34,54,.18);
  --get:#1a7f4b; --get-bg:#e9f7ef; --post:#2257c0; --post-bg:#e8f0fc;
  --warnc:#b42318; --warn-bg:#fdecea; --okc:#1a7f4b; --ok-bg:#e9f7ef;
  --infoc:#1e5fae; --info-bg:#eaf2fc; --provc:#9a6112; --prov-bg:#fff7e8;
  --radius:12px; --radius-sm:8px; --maxw:880px;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --topbar-h:72px; --sidebar-w:280px;
}
body.dark {
  --navy:#9fd4cb; --bg:#0d141a; --bg-alt:#111b22; --panel:#15202a; --ink:#e5edf0;
  --ink-soft:#c3d0d6; --muted:#8597a0; --line:#233039; --line-strong:#31424c;
  --code-bg:#16242e; --brand:#9fd4cb; --accent:#3db8a5; --accent-soft:#16302c;
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 16px 50px rgba(0,0,0,.55);
  --get-bg:#10301f; --post-bg:#0f2647; --warn-bg:#3a1f1f; --ok-bg:#16301f;
  --info-bg:#102740; --prov-bg:#332708; --provc:#e7b463; --infoc:#7db4ee;
  --okc:#6cd397; --warnc:#f0a0a0; --get:#6cd397; --post:#7db4ee;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--sans); font-size:15px; line-height:1.65;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; transition:background .2s,color .2s;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.muted { color:var(--muted); }
.mono { font-family:var(--mono); font-size:.85em; }
kbd {
  font-family:var(--mono); font-size:11px; background:var(--code-bg);
  border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:5px;
  padding:1px 6px; color:var(--ink-soft); line-height:1.4;
}
.skip {
  position:absolute; left:-999px; top:0; background:var(--accent); color:#fff;
  padding:8px 14px; border-radius:0 0 8px 0; z-index:200;
}
.skip:focus { left:0; }

/* ---------------- Top bar ---------------- */
.topbar {
  position:sticky; top:0; z-index:100; height:var(--topbar-h);
  display:flex; align-items:center; gap:18px; padding:0 24px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-brand { display:flex; align-items:center; gap:9px; flex:none; }
.topbar-brand:hover { text-decoration:none; }
.brand-logo { height:46px; width:auto; display:block; }
.brand-dark { display:none; }
body.dark .brand-light { display:none; }
body.dark .brand-dark { display:block; }
.brand-tag {
  font-weight:600; font-size:13px; color:var(--muted);
  border-left:1px solid var(--line-strong); padding-left:9px; letter-spacing:.02em;
}
.searchbtn {
  display:flex; align-items:center; gap:9px; margin:0 auto; min-width:260px; max-width:440px;
  flex:1; background:var(--bg-alt); border:1px solid var(--line-strong); color:var(--muted);
  border-radius:10px; padding:8px 12px; font:inherit; font-size:13.5px; cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
}
.searchbtn:hover { border-color:var(--accent); }
.searchbtn span { flex:1; text-align:left; }
.searchbtn kbd { flex:none; }
.topnav { display:flex; align-items:center; gap:4px; flex:none; }
.topnav a {
  color:var(--ink-soft); font-size:14px; font-weight:500; padding:7px 11px;
  border-radius:8px; position:relative;
}
.topnav a:hover { background:var(--bg-alt); text-decoration:none; color:var(--ink); }
.topnav a.active { color:var(--accent); }
.topnav a.active::after {
  content:''; position:absolute; left:11px; right:11px; bottom:-1px; height:2px;
  background:var(--accent); border-radius:2px;
}
.themebtn {
  display:flex; align-items:center; justify-content:center; width:36px; height:36px;
  margin-left:4px; border:1px solid var(--line-strong); background:var(--bg-alt);
  color:var(--ink-soft); border-radius:9px; cursor:pointer;
}
.themebtn:hover { border-color:var(--accent); color:var(--accent); }
.ic-moon { display:none; }
body.dark .ic-sun { display:none; }
body.dark .ic-moon { display:block; }

/* ---------------- Buttons / chips / badges ---------------- */
.btn {
  display:inline-flex; align-items:center; gap:8px; font:inherit; font-weight:600;
  font-size:14px; padding:10px 18px; border-radius:10px; cursor:pointer; border:1px solid transparent;
}
.btn:hover { text-decoration:none; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--teal-d); }
.btn-ghost { background:transparent; border-color:var(--line-strong); color:var(--ink); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
.chip {
  display:inline-block; font-family:var(--mono); font-size:11.5px; background:var(--code-bg);
  border:1px solid var(--line); border-radius:6px; padding:1px 8px; color:var(--ink-soft);
}
.status-badge {
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:2px 9px; border-radius:20px; border:1px solid transparent;
}
.st-stable     { color:var(--okc);   background:var(--ok-bg);   border-color:color-mix(in srgb,var(--okc) 30%,transparent); }
.st-beta       { color:var(--infoc); background:var(--info-bg); border-color:color-mix(in srgb,var(--infoc) 30%,transparent); }
.st-draft      { color:var(--provc); background:var(--prov-bg); border-color:color-mix(in srgb,var(--provc) 30%,transparent); }
.st-deprecated { color:var(--warnc); background:var(--warn-bg); border-color:color-mix(in srgb,var(--warnc) 30%,transparent); }

/* HTTP method badges */
.method {
  font-family:var(--mono); font-weight:600; font-size:10.5px; letter-spacing:.03em;
  padding:2px 6px; border-radius:5px; flex:none; text-transform:uppercase;
}
.m-get    { color:var(--get);  background:var(--get-bg);  }
.m-post   { color:var(--post); background:var(--post-bg); }
.m-put    { color:var(--provc);background:var(--prov-bg); }
.m-delete { color:var(--warnc);background:var(--warn-bg); }

/* ============================================================
   Landing page
   ============================================================ */
.landing { max-width:1080px; margin:0 auto; padding:0 24px 80px; }
.hero { padding:72px 0 40px; text-align:center; }
.hero-inner { max-width:720px; margin:0 auto; }
.hero-eyebrow {
  text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:600;
  color:var(--accent); margin:0 0 14px;
}
.hero h1 { font-size:clamp(34px,5vw,52px); line-height:1.08; margin:0 0 16px; color:var(--brand); letter-spacing:-.02em; }
.hero-lead { font-size:18px; color:var(--ink-soft); margin:0 auto 28px; max-width:600px; }
.hero-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.catalog { padding:32px 0; }
.catalog-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px; border-bottom:1px solid var(--line); padding-bottom:12px; }
.catalog-head h2 { font-size:24px; margin:0; color:var(--brand); }
.catalog-count { color:var(--muted); font-size:13px; }
.catalog-group { font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:28px 0 12px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.api-card {
  display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow); transition:border-color .15s,transform .15s,box-shadow .15s; color:inherit;
}
.api-card:hover { text-decoration:none; border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.api-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.api-card-title { font-size:17px; font-weight:700; color:var(--brand); }
.api-card-summary { font-size:14px; color:var(--ink-soft); margin:0 0 14px; }
.api-card-meta { display:flex; align-items:center; gap:10px; font-size:12.5px; }

.help { padding:40px 0 0; }
.help-card {
  background:linear-gradient(135deg,var(--navy-deep),var(--navy)); color:#eef4f3;
  border-radius:var(--radius); padding:36px; text-align:center;
}
body.dark .help-card { background:linear-gradient(135deg,#0b1820,#13303a); }
.help-card h2 { margin:0 0 8px; font-size:22px; color:#fff; }
.help-card p { margin:0 auto 20px; max-width:520px; color:#cfe0dd; }
.help-card .btn-primary { background:#fff; color:var(--navy-deep); }
.help-card .btn-primary:hover { background:#e9f4f2; }

/* ============================================================
   Doc shell (sidebar + content)
   ============================================================ */
.doc-shell { display:flex; align-items:flex-start; max-width:1320px; margin:0 auto; }
.sidebar {
  position:sticky; top:var(--topbar-h); align-self:flex-start; flex:none; width:var(--sidebar-w);
  height:calc(100vh - var(--topbar-h)); overflow-y:auto; padding:24px 16px 60px;
  border-right:1px solid var(--line);
}
.sidebar-head { padding:0 8px 14px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.sidebar-back { font-size:12.5px; color:var(--muted); }
.sidebar-title { font-size:16px; font-weight:700; color:var(--brand); margin:8px 0 8px; }
.sidebar-sub { display:flex; align-items:center; gap:8px; }
.sidebar-group {
  font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
  font-weight:600; margin:18px 8px 6px;
}
.sidebar-nav a {
  display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:7px;
  color:var(--ink-soft); font-size:13.5px; line-height:1.35; border-left:2px solid transparent;
}
.sidebar-nav a:hover { background:var(--bg-alt); text-decoration:none; color:var(--ink); }
.sidebar-nav a.active { background:var(--accent-soft); color:var(--accent); font-weight:600; border-left-color:var(--accent); }
.sidebar-nav .navlabel { min-width:0; }

.sidebar-toggle {
  display:none; position:fixed; left:16px; bottom:16px; z-index:90;
  background:var(--accent); color:#fff; border:none; border-radius:24px; padding:11px 18px;
  font:inherit; font-weight:600; font-size:13px; box-shadow:var(--shadow-lg); cursor:pointer;
}

/* ---------------- Doc content ---------------- */
.doc-main { flex:1; min-width:0; padding:36px 56px 90px; }
.doc-header { padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:10px; }
.doc-eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:600; color:var(--accent); margin:0 0 8px; }
.doc-header h1 { font-size:34px; margin:0 0 12px; color:var(--brand); letter-spacing:-.02em; }
.doc-lead { font-size:18px; color:var(--ink-soft); margin:0 0 16px; max-width:var(--maxw); }
.doc-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--muted); }

.doc-section { scroll-margin-top:calc(var(--topbar-h) + 14px); max-width:var(--maxw); }
.doc-section h2 {
  font-size:26px; color:var(--brand); margin:52px 0 14px; padding-top:8px; letter-spacing:-.01em;
}
.doc-section h3 { font-size:19px; color:var(--ink); margin:32px 0 8px; }
.doc-section h4 { font-size:15px; color:var(--ink); margin:22px 0 6px; font-weight:700; }
.doc-section p, .doc-section li { color:var(--ink-soft); }
.doc-section ul, .doc-section ol { padding-left:22px; }
.doc-section li { margin:5px 0; }
.doc-section strong { color:var(--ink); }
.lead { font-size:17px; color:var(--ink-soft); }
.small { font-size:12.5px; color:var(--muted); }
hr { border:none; border-top:1px solid var(--line); margin:30px 0; }

code {
  font-family:var(--mono); font-size:.85em; background:var(--code-bg);
  border:1px solid var(--line); border-radius:5px; padding:1px 5px; color:var(--ink);
}
pre {
  background:var(--navy-deep); color:#e7eef6; border-radius:var(--radius-sm);
  padding:16px 18px; overflow-x:auto; font-size:13px; line-height:1.6; margin:14px 0;
  border:1px solid #0b1722;
}
body.dark pre { background:#0a121a; border-color:#1c2a34; }
pre code { background:none; border:none; color:inherit; padding:0; font-size:13px; }

/* tables */
.table-scroll {
  max-width:100%; overflow-x:auto; margin:14px 0 20px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel);
}
.doc-section table {
  width:100%; border-collapse:collapse; font-size:13.5px; background:var(--panel);
}
/* tables not wrapped (e.g. before JS runs) still look fine */
.doc-section > table, .doc-section .callout table { border:1px solid var(--line); border-radius:var(--radius-sm); }
.doc-section th, .doc-section td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.doc-section th {
  background:var(--bg-alt); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); font-weight:600;
}
.doc-section tbody tr:last-child td { border-bottom:none; }
.doc-section td code { white-space:normal; overflow-wrap:anywhere; }
table.kv th { width:190px; white-space:nowrap; color:var(--ink); background:var(--bg-alt); }

/* callouts */
.callout { border-radius:var(--radius-sm); padding:12px 16px; margin:16px 0; border-left:4px solid; font-size:14px; }
.callout p:first-child { margin-top:0; } .callout p:last-child { margin-bottom:0; }
.callout .lbl { font-weight:700; text-transform:uppercase; font-size:11px; letter-spacing:.06em; margin-right:6px; }
.callout.info { background:var(--info-bg); border-color:var(--infoc); color:var(--ink-soft); }
.callout.ok   { background:var(--ok-bg);   border-color:var(--okc);   color:var(--ink-soft); }
.callout.warn { background:var(--warn-bg); border-color:var(--warnc); color:var(--ink-soft); }
.callout.prov { background:var(--prov-bg); border-color:var(--provc); color:var(--ink-soft); }
.callout.ok .lbl   { color:var(--okc); }
.callout.warn .lbl { color:var(--warnc); }
.callout.info .lbl { color:var(--infoc); }
.callout.prov .lbl { color:var(--provc); }

/* requirement flags + pills */
.req-yes { color:var(--warnc); font-weight:600; }
.req-no { color:var(--muted); }
.req-cond { color:var(--provc); font-weight:600; }
.pill { display:inline-block; border-radius:20px; padding:1px 9px; font-size:11px; font-weight:600; white-space:nowrap; }
.p-ok { background:var(--ok-bg); color:var(--okc); } .p-warn { background:var(--prov-bg); color:var(--provc); } .p-err { background:var(--warn-bg); color:var(--warnc); }

/* interactive filter controls (code catalog / field reference) */
.filterbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:14px 0 6px; }
.filter-search {
  flex:1; min-width:220px; display:flex; align-items:center; gap:8px; background:var(--panel);
  border:1px solid var(--line-strong); border-radius:9px; padding:8px 12px;
}
.filter-search input { border:none; outline:none; background:transparent; color:var(--ink); font:inherit; font-size:14px; width:100%; }
.fchip {
  background:var(--panel); border:1px solid var(--line-strong); border-radius:18px;
  padding:5px 13px; font-size:12.5px; cursor:pointer; user-select:none; color:var(--ink-soft);
}
.fchip:hover { border-color:var(--accent); }
.fchip.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.fcount { font-size:12px; color:var(--muted); margin-left:auto; }
tr.hide { display:none; }
.noresult { display:none; padding:14px; color:var(--muted); font-size:13px; }
tr.flash { animation:flash 1.6s ease; }
@keyframes flash { 0%,55% { background:var(--prov-bg); } 100% { background:transparent; } }
.codelink { cursor:pointer; text-decoration:underline dotted; text-underline-offset:2px; }

.doc-pagefoot { max-width:var(--maxw); margin-top:60px; padding-top:18px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted); }

/* ============================================================
   Search overlay
   ============================================================ */
.search-overlay {
  position:fixed; inset:0; z-index:300; display:none;
  background:rgba(12,22,30,.5); backdrop-filter:blur(3px); padding:12vh 16px 16px;
}
.search-overlay.open { display:block; }
.search-panel {
  max-width:620px; margin:0 auto; background:var(--panel); border:1px solid var(--line-strong);
  border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden; display:flex; flex-direction:column;
  max-height:70vh;
}
.search-field { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); color:var(--muted); }
.search-field input { flex:1; border:none; outline:none; background:transparent; color:var(--ink); font:inherit; font-size:16px; }
.search-results { overflow-y:auto; padding:6px; }
.search-empty { padding:24px 16px; text-align:center; color:var(--muted); font-size:14px; }
.search-grouplabel { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); padding:10px 12px 4px; font-weight:600; }
.search-hit { display:block; padding:10px 12px; border-radius:9px; color:inherit; }
.search-hit:hover, .search-hit.active { background:var(--accent-soft); text-decoration:none; }
.search-hit-top { display:flex; align-items:center; gap:8px; }
.search-hit-title { font-weight:600; font-size:14px; color:var(--ink); }
.search-hit-crumb { font-size:12px; color:var(--muted); margin-top:2px; }
.search-hit-snippet { font-size:12.5px; color:var(--ink-soft); margin-top:3px; line-height:1.5; }
.search-hit mark { background:color-mix(in srgb,var(--accent) 30%,transparent); color:inherit; border-radius:3px; padding:0 1px; }
.search-foot { display:flex; gap:16px; padding:10px 16px; border-top:1px solid var(--line); font-size:11.5px; color:var(--muted); }
.search-foot kbd { margin-right:3px; }

/* ---------------- Footer / to-top ---------------- */
.sitefoot { border-top:1px solid var(--line); margin-top:40px; }
.sitefoot-inner {
  max-width:1080px; margin:0 auto; padding:24px; display:flex; justify-content:space-between;
  gap:14px; flex-wrap:wrap; font-size:13px; color:var(--muted);
}
.totop {
  position:fixed; bottom:22px; right:22px; width:44px; height:44px; border-radius:50%;
  background:var(--accent); color:#fff; border:none; font-size:20px; cursor:pointer;
  display:none; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); z-index:80;
}
.totop.show { display:flex; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px) {
  .doc-main { padding:28px 24px 80px; }
}
@media (max-width:860px) {
  .topbar { gap:10px; padding:0 14px; }
  .searchbtn { min-width:0; }
  .searchbtn span, .searchbtn kbd { display:none; }
  .topnav a:not(.active) { display:none; }
  .brand-tag { display:none; }
  .sidebar {
    position:fixed; top:var(--topbar-h); left:0; bottom:0; width:84%; max-width:320px; z-index:95;
    background:var(--bg); transform:translateX(-105%); transition:transform .25s; box-shadow:var(--shadow-lg);
  }
  .sidebar.open { transform:translateX(0); }
  .sidebar-toggle { display:block; }
  .doc-main { padding:24px 16px 90px; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }