/* VoicerOnePBX documentation — layered on Bootstrap 5.3, theme-aware (light/dark via data-bs-theme). */
:root{
  --v-accent:#2563eb; --v-accent-2:#0ea5e9; --v-ink:#0f172a; --v-muted:#64748b;
  --v-bg:#ffffff; --v-bg-soft:#f8fafc; --v-border:#e2e8f0; --v-side:#f6f8fb;
  --v-code-bg:#f1f5f9; --v-radius:12px;
  --v-grad:linear-gradient(135deg,#2563eb 0%,#0ea5e9 100%);
}
[data-bs-theme="dark"]{
  --v-ink:#e6edf6; --v-muted:#93a4bd; --v-bg:#0b1220; --v-bg-soft:#0f1a2e; --v-border:#1e2a44;
  --v-side:#0c1526; --v-code-bg:#111c33;
}
*{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--v-ink);background:var(--v-bg);}
code,pre,kbd,.mono{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;}
a{color:var(--v-accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Navbar ── */
.doc-navbar{background:var(--v-bg);border-bottom:1px solid var(--v-border);backdrop-filter:saturate(180%) blur(6px);}
.vlogo{font-weight:800;font-size:1.15rem;letter-spacing:-.02em;background:var(--v-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.vlogo strong{font-weight:800}
.vdocs{font-weight:600;color:var(--v-muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;margin-left:.35rem;vertical-align:middle}
.nav-back{color:var(--v-muted);font-size:.9rem;font-weight:500}
.theme-toggle{border:1px solid var(--v-border);background:var(--v-bg-soft);color:var(--v-ink);width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.theme-toggle:hover{border-color:var(--v-accent)}

/* ── Layout ── */
.doc-layout{display:flex;align-items:flex-start;max-width:1500px;margin:0 auto}
.doc-sidebar{width:288px;flex:0 0 288px;background:var(--v-side);border-right:1px solid var(--v-border);
  position:sticky;top:57px;height:calc(100vh - 57px);overflow-y:auto;}
.doc-main{flex:1 1 auto;min-width:0;padding:0 clamp(1rem,4vw,3.5rem) 3rem;}
@media(max-width:991.98px){.doc-sidebar{position:fixed;top:0;height:100%;z-index:1045;width:300px}}

/* ── Sidebar nav ── */
.doc-sidebar-nav{padding:1rem .75rem 3rem}
.doc-sec{margin-bottom:.15rem}
.doc-sec-head{display:flex;align-items:center;gap:.55rem;padding:.5rem .7rem;border-radius:9px;color:var(--v-ink);
  font-weight:600;font-size:.92rem;}
.doc-sec-head:hover{background:var(--v-bg);text-decoration:none}
.doc-sec-head.active{background:var(--v-accent);color:#fff}
.doc-sec-head i{font-size:1rem;opacity:.85}
.doc-sec-list{list-style:none;margin:.1rem 0 .4rem;padding:0 0 0 1.9rem;display:none}
.doc-sec-list.show{display:block}
.doc-sec-list li a{display:block;padding:.32rem .6rem;border-radius:7px;color:var(--v-muted);font-size:.875rem;
  border-left:2px solid transparent;}
.doc-sec-list li a:hover{color:var(--v-ink);background:var(--v-bg);text-decoration:none}
.doc-sec-list li a.active{color:var(--v-accent);font-weight:600;border-left-color:var(--v-accent);background:var(--v-bg)}

/* ── Breadcrumb ── */
.doc-breadcrumb{padding:1.15rem 0 .25rem;font-size:.85rem;margin:0}
.doc-breadcrumb a{color:var(--v-muted)}
.breadcrumb-item.active{color:var(--v-ink)}
.doc-breadcrumb .breadcrumb-item+.breadcrumb-item::before{color:var(--v-muted)}

/* ── Content + TOC ── */
.doc-content-wrap{display:flex;gap:2.5rem;align-items:flex-start}
.doc-article{flex:1 1 auto;min-width:0;max-width:820px;padding-top:.5rem}
.doc-toc{flex:0 0 210px;position:sticky;top:80px;font-size:.85rem;display:none}
@media(min-width:1200px){.doc-toc{display:block}}
.doc-toc-title{text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;color:var(--v-muted);font-weight:700;margin-bottom:.6rem}
.doc-toc ul{list-style:none;padding:0;margin:0;border-left:1px solid var(--v-border)}
.doc-toc li a{display:block;padding:.25rem 0 .25rem 1rem;color:var(--v-muted);margin-left:-1px;border-left:2px solid transparent}
.doc-toc li a:hover,.doc-toc li a.active{color:var(--v-accent);border-left-color:var(--v-accent);text-decoration:none}
.doc-toc .toc-h3 a{padding-left:1.8rem;font-size:.8rem}

/* ── Typography ── */
.doc-article h1,.doc-h1{font-weight:800;letter-spacing:-.025em;font-size:2.2rem;margin:.3rem 0 .4rem;line-height:1.1}
.doc-article h2{font-weight:700;letter-spacing:-.02em;font-size:1.5rem;margin:2.4rem 0 .9rem;padding-top:.4rem}
.doc-article h3{font-weight:650;font-size:1.15rem;margin:1.8rem 0 .6rem}
.doc-article p,.doc-article li{line-height:1.72;color:var(--v-ink)}
.doc-article .lead{font-size:1.18rem;color:var(--v-muted);font-weight:400;line-height:1.6;margin-bottom:1.6rem}
.doc-article ul,.doc-article ol{padding-left:1.35rem}
.doc-article li{margin:.3rem 0}
.doc-article strong{font-weight:650}
.doc-article h2 .anchor,.doc-article h3 .anchor{opacity:0;margin-left:.4rem;font-size:.8em;color:var(--v-muted)}
.doc-article h2:hover .anchor,.doc-article h3:hover .anchor{opacity:1;text-decoration:none}

/* ── Components ── */
.doc-article code:not(pre code){background:var(--v-code-bg);padding:.12em .4em;border-radius:5px;font-size:.86em;color:var(--v-accent)}
pre{background:var(--v-code-bg);border:1px solid var(--v-border);border-radius:var(--v-radius);padding:1rem 1.1rem;overflow:auto;font-size:.85rem;line-height:1.6}
pre code{color:var(--v-ink)}
kbd{background:var(--v-ink);color:var(--v-bg);border-radius:5px;padding:.1em .45em;font-size:.8em;font-weight:600}
.table{--bs-table-bg:transparent;font-size:.92rem}
.table thead th{border-bottom:2px solid var(--v-border);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--v-muted)}
.table td,.table th{border-color:var(--v-border);vertical-align:top}

.callout{border:1px solid var(--v-border);border-left-width:4px;border-radius:var(--v-radius);padding:1rem 1.15rem;margin:1.3rem 0;background:var(--v-bg-soft)}
.callout p:last-child{margin-bottom:0}
.callout .callout-title{font-weight:700;display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem}
.callout.tip{border-left-color:#10b981}.callout.tip .callout-title{color:#10b981}
.callout.note{border-left-color:var(--v-accent)}.callout.note .callout-title{color:var(--v-accent)}
.callout.warn{border-left-color:#f59e0b}.callout.warn .callout-title{color:#f59e0b}
.callout.danger{border-left-color:#ef4444}.callout.danger .callout-title{color:#ef4444}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin:1.4rem 0}
.fcard{border:1px solid var(--v-border);border-radius:var(--v-radius);padding:1.15rem;background:var(--v-bg-soft);transition:.15s}
.fcard:hover{border-color:var(--v-accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,99,235,.08)}
.fcard .fi{font-size:1.6rem;background:var(--v-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fcard h3{font-size:1.02rem;margin:.5rem 0 .3rem}
.fcard p{font-size:.9rem;color:var(--v-muted);margin:0}
.fcard a{font-size:.85rem;font-weight:600}

.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin:1.5rem 0}
.hub-card{display:block;border:1px solid var(--v-border);border-radius:var(--v-radius);padding:1.3rem;background:var(--v-bg-soft);color:var(--v-ink)}
.hub-card:hover{border-color:var(--v-accent);text-decoration:none;box-shadow:0 8px 24px rgba(37,99,235,.09)}
.hub-card i{font-size:1.7rem;color:var(--v-accent)}
.hub-card h3{font-size:1.08rem;margin:.6rem 0 .35rem}
.hub-card p{font-size:.9rem;color:var(--v-muted);margin:0}

/* Persona "Typical scenarios" cards */
.scenario-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:1.1rem;margin:1.5rem 0}
.scenario-card{border:1px solid var(--v-border);border-radius:var(--v-radius);padding:1.3rem;background:var(--v-bg-soft);display:flex;flex-direction:column}
.scenario-card.dev{border-color:var(--v-accent);box-shadow:0 6px 22px rgba(37,99,235,.08)}
.sc-head{display:flex;gap:.85rem;align-items:flex-start;margin-bottom:.55rem}
.sc-head i{font-size:1.85rem;color:var(--v-accent);line-height:1;flex:0 0 auto}
.sc-head h3{margin:0;font-size:1.12rem}
.sc-head span{color:var(--v-muted);font-size:.8rem;display:block;margin-top:.1rem}
.scenario-card>p{font-size:.92rem;color:var(--v-ink);margin:.2rem 0 .6rem}
.sc-links{list-style:none;padding:0;margin:auto 0 0}
.sc-links li{padding:.24rem 0;font-size:.9rem}
.sc-links li a{display:inline-flex;align-items:baseline;gap:.45rem;text-decoration:none}
.sc-links li a:hover{text-decoration:underline}
.sc-links li a::before{content:"→";color:var(--v-accent);font-weight:700}
.sc-links.sc-check li a::before{content:"✓";color:#10b981;font-weight:800}

.doc-hero{background:var(--v-grad);color:#fff;border-radius:16px;padding:2.4rem 2.2rem;margin:.6rem 0 1.6rem}
.doc-hero h1{color:#fff;font-size:2.4rem;margin:0 0 .5rem}
.doc-hero p{color:rgba(255,255,255,.92);font-size:1.15rem;margin:0;max-width:640px}
.doc-hero .badge{background:rgba(255,255,255,.2);font-weight:600}

.pill{display:inline-block;font-size:.72rem;font-weight:600;padding:.18em .6em;border-radius:20px;background:var(--v-code-bg);color:var(--v-muted);margin-left:.4rem;vertical-align:middle}
.pill.live{background:rgba(16,185,129,.15);color:#10b981}
.steps{counter-reset:step;list-style:none;padding-left:0}
.steps>li{counter-increment:step;position:relative;padding-left:2.6rem;margin:.9rem 0}
.steps>li::before{content:counter(step);position:absolute;left:0;top:-.1rem;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--v-grad);color:#fff;font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center}

/* Language tabs for full code examples */
.code-tabs{margin:1rem 0 .6rem}
.code-tabs .nav-tabs{border-bottom:1px solid var(--v-border);gap:.2rem}
.code-tabs .nav-tabs .nav-link{color:var(--v-muted);border:1px solid transparent;border-top-left-radius:8px;border-top-right-radius:8px;font-size:.85rem;font-weight:600;padding:.4rem .95rem}
.code-tabs .nav-tabs .nav-link:hover{color:var(--v-ink);border-color:var(--v-border) var(--v-border) transparent}
.code-tabs .nav-tabs .nav-link.active{color:var(--v-accent);background:var(--v-code-bg);border-color:var(--v-border) var(--v-border) var(--v-code-bg)}
.code-tabs .tab-content pre{margin-top:0;border-top-left-radius:0;max-height:560px}
.ex-meta{margin:.3rem 0 .1rem}
.ex-meta .pill{margin-left:0;margin-right:.5rem}
.ex-dl{font-size:.85rem;color:var(--v-muted);margin:.2rem 0 0}
.ex-dl i{color:var(--v-accent);margin-right:.3rem}

.doc-prevnext{display:flex;justify-content:space-between;gap:1rem;margin:3rem 0 1rem;border-top:1px solid var(--v-border);padding-top:1.4rem}
.pn{display:flex;flex-direction:column;border:1px solid var(--v-border);border-radius:var(--v-radius);padding:.8rem 1.1rem;min-width:0;max-width:48%}
.pn:hover{border-color:var(--v-accent);text-decoration:none}
.pn span{font-size:.78rem;color:var(--v-muted)}
.pn strong{color:var(--v-ink);font-weight:600}
.pn.next{text-align:right;margin-left:auto}
.doc-footer{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--v-border);color:var(--v-muted);font-size:.85rem}

/* Glossary term: dotted underline + plain-English tooltip on hover/tap. */
.gterm{border-bottom:1px dotted var(--v-accent);cursor:help;text-decoration:none;font-weight:500}
.gterm:hover{border-bottom-style:solid}
.tooltip-inner{max-width:280px;text-align:left;font-size:.82rem;line-height:1.45;padding:.5rem .7rem;background:var(--v-ink);color:var(--v-bg)}
.tooltip.show{opacity:1}
.plain{color:var(--v-muted);font-style:italic}
/* Glossary page list */
.glossary-list dt{font-weight:700;margin-top:1.1rem;font-size:1.02rem}
.glossary-list dt .abbr-full{font-weight:400;color:var(--v-muted);font-size:.85rem;margin-left:.5rem}
.glossary-list dd{margin:.2rem 0 0;color:var(--v-ink)}