/* =========================================================
   WTS Knowledge Base – Generic Article Theme (Dark-first)
   Fully namespaced with `kb-`
   - Scope root variables on .kb
   - Light theme via .kb.theme-light
   - All utility classes renamed to kb-*
   - Element selectors scoped under .kb-article
   ========================================================= */

/* Brand variables scoped to KB container */
.kb {
  /* Brand & base colors (dark theme) */
  /* --bg: #0f1420; */                /* App background */
  --bg-elev-1: #131a2a;        /* Elevated surface */
  --bg-elev-2: #0c1222;         /* Subtle elevated */
  --card: #151c2e;              /* Cards / callouts */
  --border: rgba(255,255,255,0.08);

  --text: #e6e8ef;              /* Primary text */
  --muted: #a5acc1;             /* Secondary text */
  --link: #7db2ff;              /* Link color */
  --link-hover: #a7c8ff;        /* Link hover */

  /* Accent palette */
  --brand: #6ea8fe;             /* Primary brand */
  --accent: #8b5cf6;            /* Secondary accent (purple) */
  --success: #22c55e;           /* Green */
  --warning: #f59e0b;           /* Amber */
  --danger:  #ef4444;           /* Red */

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Sizing & rhythm */
  --max-content: 880px;         /* Max article width */
  --content-pad-x: 24px;        /* Side padding */
  --radius: 14px;               /* Big rounded corners */
  --shadow: 0 6px 24px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.02) inset;

  /* Code */
  --code-bg: #0b1220;
  --code-border: rgba(125, 178, 255, .18);
  --inline-code-bg: rgba(125,178,255,.12);

  /* Table */
  --row-alt: rgba(255,255,255,.03);

  /* TOC */
  --toc-width: 320px;
  --toc-link: #c6cbe0;
  --toc-active: var(--brand);

  /* Smooth scroll for the scoped container */
  scroll-behavior: smooth;

  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(139,92,246,.12), transparent 60%),
    radial-gradient(1000px 500px at 10% -20%, rgba(110,168,254,.10), transparent 55%),
    var(--bg);
  line-height: 1.6;
}

/* Light mode (optional) – add class "theme-light" on the same element as .kb */
.kb.theme-light {
  --bg: #f7f8fc;
  --bg-elev-1: #ffffff;
  --bg-elev-2: #f2f4fb;
  --card: #ffffff;
  --border: rgba(0,0,0,.08);

  --text: #111827;
  --muted: #4b5563;
  --link: #2563eb;
  --link-hover: #1d4ed8;

  --code-bg: #0f172a;
  --code-border: rgba(37, 99, 235, .25);
  --inline-code-bg: rgba(37,99,235,.12);

  --row-alt: rgba(0,0,0,.04);
  --toc-link: #374151;
}

/* Base layout */
.kb .kb-shell {
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--max-content)) var(--toc-width);
  column-gap: 28px;
  padding: 32px var(--content-pad-x);
}

/* Center content column */
.kb .kb-shell::before { content: ""; }

/* Header (optional branding area) */
.kb header.kb-header {
  grid-column: 1 / -1;
  margin: 0 0 12px 0;
  display: flex; align-items: center; gap: 12px;
  color: var(--muted);
  font-size: 14px;
}
.kb .kb-logo {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg,var(--brand),var(--accent));
  box-shadow: var(--shadow);
}
.kb .kb-breadcrumb a { color: var(--muted); text-decoration: none; }
.kb .kb-breadcrumb a:hover { color: var(--text); }

/* Article area */
.kb article.kb-article {
  grid-column: 2;
  /* background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%), var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px; */
}

/* Right-hand TOC */
.kb aside.kb-toc {
  grid-column: 3;
  position: sticky; top: 24px;
  align-self: start;
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%), var(--bg-elev-2);
  box-shadow: var(--shadow);
}
.kb .kb-toc h3 {
  margin: 4px 0 8px; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.kb .kb-toc nav a {
  display: block; padding: 8px 10px; border-radius: 10px;
  color: var(--toc-link); text-decoration: none; font-size: 14px;
  border: 1px solid transparent;
}
.kb .kb-toc nav a:hover { background: rgba(255,255,255,.04); color: var(--text); }
.kb .kb-toc nav a.kb-active {
  color: var(--toc-active);
  background: linear-gradient(180deg, rgba(110,168,254,.12), rgba(139,92,246,.14));
  border-color: rgba(125,178,255,.25);
  box-shadow: 0 0 0 3px rgba(125,178,255,.12);
}
.kb .kb-toc .kb-toc-lvl-2 { padding-left: 10px; }
.kb .kb-toc .kb-toc-lvl-3 { padding-left: 24px; font-size: 13px; }

/* Mobile TOC trigger */
.kb .kb-toc-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  padding: 10px 14px; border-radius: 999px; box-shadow: var(--shadow);
  display: none; cursor: pointer;
}

/* Off-canvas TOC (mobile) */
.kb .kb-toc-drawer {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: rgba(0,0,0,.45);
}
.kb .kb-toc-panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(88vw, 360px);
  background: var(--bg-elev-2); border-left: 1px solid var(--border);
  padding: 18px; overflow: auto;
  box-shadow: var(--shadow);
}

/* Typography */
.kb .kb-article h1,
.kb .kb-article h2,
.kb .kb-article h3,
.kb .kb-article h4,
.kb .kb-article h5,
.kb .kb-article h6 {
  line-height: 1.25; margin: 1.2em 0 .6em; font-weight: 700;
}
.kb .kb-article h1 { font-size: clamp(30px, 3.4vw, 38px); letter-spacing: -.02em; }
.kb .kb-article h2 { font-size: clamp(22px, 2.4vw, 28px); }
.kb .kb-article h3 { font-size: clamp(18px, 2vw, 22px); }
.kb .kb-article h4 { font-size: 18px; }
.kb .kb-article h5 { font-size: 16px; color: var(--muted); }
.kb .kb-article h6 { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.kb .kb-article p { margin: .65em 0 1em; }
.kb .kb-article .kb-lead { /* replaces .lead */
  font-size: 1.06em;
  color: var(--muted);
}
.kb .kb-article a { color: var(--link); text-decoration: none; }
.kb .kb-article a:hover { color: var(--link-hover); text-decoration: underline; }

.kb .kb-hr { height: 1px; background: var(--border); border: 0; margin: 28px 0; }

/* Lists */
.kb .kb-article ul { padding-left: 1.2rem; }
.kb .kb-article ol { padding-left: 1.4rem; }
.kb .kb-article li { margin: .3em 0; }

/* Blockquote */
.kb .kb-article blockquote {
  margin: 1.2em 0; padding: 14px 16px;
  border-left: 4px solid var(--brand);
  background: rgba(110,168,254,.08);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text);
}

/* Code */
.kb .kb-article code {
  font-family: var(--font-mono); font-size: .92em;
  background: var(--inline-code-bg); padding: 2px 6px; border-radius: 8px;
}
.kb .kb-article pre {
  background: var(--code-bg); border: 1px solid var(--code-border);
  border-radius: var(--radius); overflow: auto; padding: 16px; box-shadow: var(--shadow);
}
.kb .kb-article pre code {
  background: transparent; padding: 0; font-size: .95em; color: #dbe7ff; display: block;
}

/* Wrapper für Code + Button */
.kb .kb-article .code-block {
  position: relative;
}

/* Button oben rechts */
.kb .kb-article .copy-btn {
  position: absolute; top: 8px; right: 8px;
  background: var(--brand); color: #fff;
  border: none; border-radius: 6px;
  font-size: .85em; padding: 4px 8px;
  cursor: pointer; box-shadow: var(--shadow);
  transition: background .2s;
}
.kb .kb-article .copy-btn:hover {
  background: var(--brand-hover);
}


/* Tables */
.kb .kb-article table {
  width: 100%; border-collapse: collapse; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.kb .kb-article thead th {
  text-align: left;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%), var(--bg-elev-2);
  color: var(--muted); font-weight: 600; font-size: 14px;
}
.kb .kb-article th, .kb .kb-article td {
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.kb .kb-article tbody tr:nth-child(even) { background: var(--row-alt); }
.kb .kb-article tbody tr:hover { background: rgba(125,178,255,.08); }

/* Callouts / Alerts */
.kb .kb-callout {
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--radius); padding: 14px 16px;
  background: var(--card); box-shadow: var(--shadow);
}
.kb .kb-callout + .kb-callout { margin-top: 12px; }
.kb .kb-callout.kb-info { border-left-color: var(--brand); }
.kb .kb-callout.kb-success { border-left-color: var(--success); }
.kb .kb-callout.kb-warning { border-left-color: var(--warning); }
.kb .kb-callout.kb-danger { border-left-color: var(--danger); }
.kb .kb-callout .kb-title { font-weight: 700; margin-bottom: 4px; }

/* Badges & Buttons */
.kb .kb-badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid var(--border);
  font-size: 12px; color: var(--muted);
}
.kb .kb-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); cursor: pointer; text-decoration: none;
  box-shadow: var(--shadow);
}
.kb .kb-btn:hover { outline: 2px solid rgba(125,178,255,.25); }
.kb .kb-btn.kb-primary {
  background: linear-gradient(180deg, rgba(110,168,254,.18), rgba(139,92,246,.18));
  border-color: rgba(125,178,255,.25);
}

/* Media */
.kb .kb-article figure { margin: 16px 0; }
.kb .kb-article figure img {
  width: 100%; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.kb .kb-article figcaption {
  text-align: center; color: var(--muted); font-size: 13px; margin-top: 6px;
}

/* Keyboard */
.kb .kb-article kbd {
  background: rgba(255,255,255,.08); border: 1px solid var(--border);
  border-bottom-width: 2px; border-radius: 6px; padding: 2px 6px;
  font-family: var(--font-mono); font-size: .86em;
}

/* Footer note */
.kb .kb-footnote { color: var(--muted); font-size: 13px; margin-top: 24px; }

/* RESPONSIVE */
@media (max-width: 1180px) {
  .kb .kb-shell { grid-template-columns: 1fr minmax(0, var(--max-content)); }
  .kb aside.kb-toc { display: none; }
  .kb .kb-toc-toggle { display: inline-flex; align-items: center; gap: 8px; }
}
@media (max-width: 720px) {
  .kb .kb-shell { padding: 18px var(--content-pad-x); }
  .kb article.kb-article { padding: 22px; }
}