/* ── ОБЩИЙ сайдбар «Ока» ───────────────────────────────────────────────────
   ЕДИНЫЙ левый сайдбар для ОБЕИХ оболочек: тёмного шелла base_oko (Пульт/Лиды/
   Тикеты/Клиенты) И unfold-страниц (Задачи/Отчёты·AI/Документы/Почта/админка).
   Разметка — templates/holding/_oko_sidebar.html (подключается в обе). Файл
   САМОДОСТАТОЧЕН: свои токены на .side (на unfold-страницах oko.css не грузится),
   .side заполняет свой контейнер (в base_oko — flex-колонку .app, в unfold —
   #nav-sidebar). Так меню буквально одно и то же, не «два похожих».
   ────────────────────────────────────────────────────────────────────────── */
.side {
  /* Токены (дубль значений oko.css :root — нужны на unfold-страницах). */
  --ink:       #0b0d11;
  --ink-2:     #0e1117;
  --surface:   #12151c;
  --line:      #232936;
  --line-soft: #1b2029;
  --text:      #e9ecf2;
  --text-2:    #9aa3b5;
  --text-3:    #5d6879;
  --iris:      #f2b84b;
  --iris-soft: rgba(242, 184, 75, .12);
  --iris-line: rgba(242, 184, 75, .35);
  --r-10: 10px;
  --font-ui:   "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  width: 100%; height: 100vh;
  background: var(--ink-2);
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  padding: 18px 12px 14px;
  box-sizing: border-box;
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: var(--text);
}
.side * { box-sizing: border-box; }

/* Шапка = большой глаз-лого (без текста), ссылка на Пульт. */
.side__brand { display: flex; align-items: center; justify-content: center; padding: 8px 8px 20px; text-decoration: none; }
.side__brand .eye--brand { flex: 0 0 auto; width: 108px; height: 108px; transition: transform .16s ease, filter .16s ease; }
.side__brand:hover .eye--brand { transform: scale(1.05); filter: drop-shadow(0 0 10px var(--iris-soft)); }
.side__brand:focus-visible { outline: none; }
.side__brand:focus-visible .eye--brand { filter: drop-shadow(0 0 0 2px var(--iris-line)); }

.side .nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; min-height: 0; }
.side .nav__cap {
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); padding: 14px 10px 6px;
}
.side .nav__item {
  display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 10px; border-radius: var(--r-10);
  color: var(--text-2); font-size: 13px; font-weight: 500;
  cursor: pointer; border: 1px solid transparent;
  transition: background .12s, color .12s;
  user-select: none; text-decoration: none;
}
.side .nav__item svg { width: 17px; height: 17px; stroke: currentColor; fill: none; flex: 0 0 auto; opacity: .8; }
.side .nav__item:hover { background: var(--surface); color: var(--text); }
.side .nav__item.is-active {
  background: var(--iris-soft); color: var(--iris);
  border-color: rgba(242, 184, 75, .16);
}
.side .nav__item.is-active svg { opacity: 1; }
.side .nav__count {
  margin-left: auto; font-family: var(--font-data); font-size: 10.5px;
  color: var(--ink); background: var(--iris); border-radius: 99px;
  min-width: 20px; height: 17px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; font-weight: 700;
}

.side__owner {
  border-top: 1px solid var(--line-soft); margin-top: auto; padding: 12px 8px 0;
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
}
.side__ava {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, #2a3040, #1a1f2a);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--iris);
}
.side__who { line-height: 1.25; min-width: 0; }
.side__who b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side__who span { font-size: 10.5px; color: var(--text-3); }
.side__logout { margin-left: auto; }
.side__logout button {
  border: 0; background: none; padding: 4px 2px; cursor: pointer;
  font-family: var(--font-ui); font-size: 10.5px; color: var(--text-3);
  transition: color .12s;
}
.side__logout button:hover { color: var(--iris); }

/* Глаз (лого): зрачок = донат источников лидов; моргает. Базовый размер — только
   для НЕ-брендового глаза (иначе .side .eye перебивал бы .eye--brand по порядку). */
.side .eye:not(.eye--brand) { position: relative; width: 40px; height: 40px; }
.side__brand .eye--brand { position: relative; }
.side .eye svg { display: block; width: 100%; height: 100%; }
.side .eye__lid { transform-origin: 20px 20px; }
@keyframes oko-eye-blink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.06); } }
@media (prefers-reduced-motion: no-preference) {
  .side .eye__lid { animation: oko-eye-blink 9s ease-in-out infinite; }
}

/* ── Интеграция в unfold-страницы (Задачи/Документы/Отчёты/…) ───────────────
   Проблема: unfold ставит ширину сайдбара инлайн из Alpine `sidebarWidth`
   (шире 218) на ДВУХ узлах — обёртке (.z-60 > .fixed, резервирует место под
   контент) и визуальном #nav-sidebar. Форсим оба на 218px (как base_oko),
   !important перебивает инлайн-стиль Alpine. .side тянем на всю высоту
   (flex в колонке #nav-sidebar) — иначе блок владельца не у низа («дырка»).
   Ресайз-ручку прячем (у «Ока» ширина фиксирована). */
html.dark .z-60 > .fixed,
html.dark #nav-sidebar { width: 218px !important; min-width: 218px !important; max-width: 218px !important; }
html.dark #nav-sidebar { display: flex !important; flex-direction: column; padding: 0 !important; }
html.dark #nav-sidebar > .side { flex: 1 1 auto; min-height: 100vh; height: auto; width: 100%; }
html.dark #nav-sidebar .cursor-col-resize { display: none !important; }