/* =====================================================================
   Wspólny panel boczny przeglądarek dokumentacji (includes/docs-sidebar.php).

   Używają go integrator-ksef-symfonia/docs/ i integrator-vdesk/docs/ —
   wygląd panelu, wyszukiwarki, grup, ikon konturowych i pozycji aktywnej
   jest więc w jednym miejscu. Kolory z tokenów bazy (baza.css); wartości
   zapasowe na wypadek, gdyby któryś token w danym serwisie nie istniał.
   ===================================================================== */

.docs-sidebar {
  --ds-akcent: var(--cyan-2, var(--brand-2, #38b6f0));
  --ds-akcent-jasny: var(--cyan, var(--cyan-2, var(--brand-2, #6fd3ff)));
  width: 270px; flex-shrink: 0; overflow-y: auto;
  padding: 18px 0 20px; display: flex; flex-direction: column;
  background: var(--ink-2, #0f1f38); border-right: 1px solid var(--ink-line, rgba(255, 255, 255, .08));
}
.docs-label {
  padding: 12px 20px 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted, #8b94a6);
}
.docs-search { padding: 0 20px 12px; }
.docs-search-input {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--ink-line-2, rgba(255, 255, 255, .14));
  color: #fff; font-family: var(--sans); font-size: 13.5px;
}
.docs-search-input::placeholder { color: var(--ink-muted, #8b94a6); }
.docs-search-input:focus { outline: none; border-color: var(--ds-akcent); background: rgba(255, 255, 255, .08); }
.docs-search-clear { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-muted, #8b94a6); text-decoration: none; }
.docs-search-clear:hover { color: #fff; }

.docs-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 20px;
  border-left: 3px solid transparent;
  color: var(--ink-muted, #8b94a6); font-size: 14px; font-weight: 600; line-height: 1.35; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.docs-nav-item:hover { background: rgba(255, 255, 255, .05); color: #fff; text-decoration: none; }
.docs-nav-item.active { background: rgba(255, 255, 255, .08); color: #fff; border-left-color: var(--ds-akcent); }
.docs-nav-ico { width: 18px; flex-shrink: 0; display: inline-flex; justify-content: center; }

/* Ikony konturowe (docs_ikona): kreska w kolorze akcentu, jaśniejsza przy pozycji aktywnej. */
.docs-svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; }
.docs-nav-ico .docs-svg { width: 17px; height: 17px; color: var(--ds-akcent); }
.docs-nav-item.active .docs-nav-ico .docs-svg { color: var(--ds-akcent-jasny); }

@media (max-width: 900px) {
  .docs-sidebar { width: auto; border-right: 0; border-bottom: 1px solid var(--ink-line, rgba(255, 255, 255, .08)); padding: 12px 0; }
  .docs-sidebar .docs-nav-item { padding: 8px 20px; }
}