/* InspectKit documentation theme.
   Matches the tenant's *system* theme: the brand accent (primaryColor) and the
   light/dark mode are injected at runtime by the bootstrap in index.html (from the
   in-app localStorage 'ik-theme' and /api/branding). The InspectKit logo is kept on
   the docs regardless of tenant — this is InspectKit's product documentation.
   Industrial aesthetic shared with the marketing site (IBM Plex, ink-black dark mode,
   flame-orange default accent). Overrides the base docsify "vue" theme. No CDN except
   the IBM Plex webfont (same as the landing site). */

/* ---- Design tokens (light, default) ---- */
:root{
  /* Tenant accent — overridden at runtime; falls back to InspectKit flame-orange. */
  --ik-accent:#f97316;
  --ik-accent-ink:#ffffff;          /* text that sits on the accent */

  --doc-bg:#ffffff;
  --doc-card:#f8fafc;
  --doc-ink:#0f172a;
  --doc-text:#334155;
  --doc-muted:#64748b;
  --doc-line:#e5e9f0;

  /* Sidebar is always dark for brand presence in light mode. */
  --sb-bg:#0f1626;
  --sb-bg-2:#0a1120;
  --sb-text:#cdd9ea;
  --sb-text-dim:#8ba2c4;
  --sb-head:#7d93b4;

  --code-bg:#eef2f7;
  --code-ink:#0a3161;
  --pre-bg:#0b1f3a;
  --pre-ink:#dbe6f5;

  --font-mono:'IBM Plex Mono','Consolas',ui-monospace,monospace;
  --font-sans:'IBM Plex Sans',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --theme-color:var(--ik-accent);    /* docsify base var */
}

/* ---- Dark mode: ink-black industrial, matches the app/landing dark theme ---- */
:root[data-theme="dark"]{
  --doc-bg:#0a0a0a;
  --doc-card:#14141c;
  --doc-ink:#f3f4f6;
  --doc-text:#cbd5e1;
  --doc-muted:#94a3b8;
  --doc-line:rgba(255,255,255,.10);

  --sb-bg:#101018;
  --sb-bg-2:#0a0a0f;
  --sb-text:#cbd5e1;
  --sb-text-dim:#7c8aa3;
  --sb-head:#7c8aa3;

  --code-bg:#1c1c26;
  --code-ink:#fcd9b6;
  --pre-bg:#05050a;
  --pre-ink:#dbe6f5;
}

html,body{ background:var(--doc-bg); }
body{ font-family:var(--font-sans); color:var(--doc-text); -webkit-font-smoothing:antialiased; }

/* ---- Sidebar ---- */
.sidebar{ background:linear-gradient(180deg,var(--sb-bg),var(--sb-bg-2)); border-right:none; padding:0; }
.sidebar > h1{ margin:0; padding:20px 22px 12px; border-bottom:1px solid rgba(255,255,255,.07); }
.sidebar > h1 a{ display:flex; flex-direction:column; gap:6px; }
.sidebar > h1 a:hover{ text-decoration:none; }
.sidebar > h1 .ik-doc-logo{ display:block; height:30px; width:auto; max-width:170px; border:none; box-shadow:none; border-radius:0; }
.sidebar > h1 small{ color:var(--sb-text-dim); font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
.sidebar .search{ margin:0; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.07); }
.sidebar .search input{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:8px; color:#fff; padding:9px 12px; font-size:13px; font-family:var(--font-sans); }
.sidebar .search input::placeholder{ color:var(--sb-text-dim); }
.sidebar .search input:focus{ border-color:var(--ik-accent); outline:none; }
.sidebar .search .clear{ color:var(--sb-text-dim); }
.sidebar .search .matching-post{ border-bottom:1px solid rgba(255,255,255,.06); }
.sidebar-nav{ padding:14px 12px 48px; }
.sidebar-nav li>a,.sidebar ul li a{ color:var(--sb-text); font-size:13.5px; padding:7px 12px; border-radius:7px; transition:background .15s,color .15s,box-shadow .15s; }
.sidebar-nav li>a:hover,.sidebar ul li a:hover{ color:#fff; background:rgba(255,255,255,.06); text-decoration:none; }
.sidebar-nav li.active>a,.sidebar ul li.active>a{ color:var(--ik-accent-ink); background:var(--ik-accent); font-weight:600; border-right:none; box-shadow:0 4px 14px -4px var(--ik-accent); }
.sidebar-nav strong{ display:block; color:var(--sb-head); font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; font-weight:600; padding:18px 12px 5px; margin-top:6px; }
.sidebar-nav ul ul{ margin-left:8px; border-left:1px solid rgba(255,255,255,.06); padding-left:4px; }
.app-name-link img{ max-width:170px; }

/* ---- Content ---- */
.content{ left:300px; background:var(--doc-bg); }
.markdown-section{ max-width:820px; padding:34px 36px 90px; color:var(--doc-text); }
.markdown-section h1{ color:var(--doc-ink); font-weight:700; font-size:31px; letter-spacing:-.02em; margin-top:0; }
.markdown-section h1::after{ content:""; display:block; width:56px; height:3px; margin-top:14px; border-radius:2px; background:var(--ik-accent); }
.markdown-section h2{ color:var(--doc-ink); font-weight:700; font-size:21px; letter-spacing:-.01em; border-bottom:1px solid var(--doc-line); padding-bottom:7px; margin-top:40px; }
.markdown-section h3{ color:var(--doc-ink); font-weight:600; font-size:16.5px; }
.markdown-section a{ color:var(--ik-accent); text-decoration:none; font-weight:500; }
.markdown-section a:hover{ text-decoration:underline; }
.markdown-section strong{ color:var(--doc-ink); }
.markdown-section p,.markdown-section li{ line-height:1.72; color:var(--doc-text); }
.markdown-section blockquote{ border-left:3px solid var(--ik-accent); background:var(--doc-card); color:var(--doc-muted); border-radius:0 8px 8px 0; padding:10px 18px; }
.markdown-section blockquote p{ color:var(--doc-muted); }
.markdown-section code{ background:var(--code-bg); color:var(--code-ink); border-radius:5px; padding:2px 6px; font-size:.86em; font-family:var(--font-mono); }
.markdown-section pre{ background:var(--pre-bg); border-radius:11px; }
.markdown-section pre>code{ background:transparent; color:var(--pre-ink); font-family:var(--font-mono); }
.markdown-section table{ border-collapse:collapse; display:table; width:100%; }
.markdown-section th{ background:var(--doc-card); color:var(--doc-ink); border:1px solid var(--doc-line); padding:10px 12px; text-align:left; font-family:var(--font-mono); font-size:.82em; text-transform:uppercase; letter-spacing:.04em; }
.markdown-section td{ border:1px solid var(--doc-line); padding:10px 12px; color:var(--doc-text); }
.markdown-section tr:nth-child(2n) td{ background:var(--doc-card); }
.markdown-section img{ border-radius:12px; border:1px solid var(--doc-line); box-shadow:0 6px 24px -8px rgba(2,6,23,.28); max-width:100%; }
.markdown-section ul li::marker{ color:var(--ik-accent); }
.markdown-section hr{ border:none; border-top:1px solid var(--doc-line); margin:36px 0; }

/* Captioned screenshots */
.markdown-section figure.shot{ margin:26px 0; }
.markdown-section figure.shot img{ display:block; }
.markdown-section figure.shot figcaption{ margin-top:9px; font-size:.84rem; color:var(--doc-muted); text-align:center; font-style:italic; }

/* Pill / accent helpers usable in markdown (e.g. <span class="ik-new">NEW</span>) */
.ik-new{ display:inline-block; background:var(--ik-accent); color:var(--ik-accent-ink); font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.08em; padding:2px 7px; border-radius:999px; vertical-align:middle; margin-left:6px; }

/* docsify pagination polish (respects the theme) */
.docsify-pagination-container{ border-top:1px solid var(--doc-line); color:var(--doc-muted); }
.pagination-item-title{ color:var(--doc-text); }

/* ---- Sidebar collapse toggle ----
   docsify pins a translucent grey bar (.sidebar-toggle, hsla(0,0%,100%,.8), 284px wide,
   z-index 30) to the sidebar's bottom-left. On our always-dark sidebar it reads as a grey
   overlay that clips the last nav item ("Getting Help"). On desktop the sidebar is always
   open so the collapse toggle is dead weight — hide it and give the nav bottom clearance so
   nothing hides behind a scrolled-up toggle. The toggle is restored on mobile (≤768px),
   where it's the only way to open the sidebar. */
@media (min-width:769px){ .sidebar-toggle{ display:none; } }
.sidebar-nav{ padding-bottom:64px; }

@media (max-width:768px){ .content{ left:0; } .markdown-section{ padding:24px 18px 64px; } }