/* static/css/side-nav.css */

:root{
  --sn-bg: rgba(8, 10, 16, .70);
  --sn-brd: rgba(148, 163, 184, .22);
  --sn-ink: rgba(255,255,255,.92);
  --sn-muted: rgba(255,255,255,.76);
  --sn-blue: rgba(0,163,255,.72);

  --sn-radius: 14px;
  --sn-radius-btn: 12px;

  --sn-dur-in: 520ms;
  --sn-dur-out: 420ms;

  --sn-ease-in: cubic-bezier(.16, 1, .24, 1);
  --sn-ease-out: cubic-bezier(.22, 1, .28, 1);

  --sn-shadow:
    0 26px 70px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 34px rgba(0,163,255,.18);
}

/* Контейнер */
.side-nav{
  position: fixed;
  left: 0;
  top: 120px;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  /* чтобы “воздух” вокруг не блокировал сайт */
  pointer-events: none;
}

/* включаем клики только на реальных интерактивных частях */
.side-nav__toggle,
.side-nav__menu{ pointer-events: auto; }

/* ===== Toggle ===== */
.side-nav__toggle{
  width: 40px;
  height: 40px;
  border-radius: 0 var(--sn-radius-btn) var(--sn-radius-btn) 0;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(8, 10, 16, .72);

  color: var(--sn-ink);
  display: grid;
  place-items: center;
  cursor: pointer;

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  box-shadow:
    0 14px 34px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 24px rgba(0,163,255,.18);

  transform: translateZ(0);
  transition:
    transform 180ms var(--sn-ease-in),
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.side-nav__toggle:hover{
  background: rgba(10, 14, 24, .82);
  box-shadow:
    0 16px 38px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 30px rgba(0,163,255,.26);
}

.side-nav__toggle:active{
  transform: translateY(1px);
}

/* лёгкий “энергичный” эффект, когда меню открыто */
.side-nav.is-open .side-nav__toggle{
  box-shadow:
    0 16px 40px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 40px rgba(0,163,255,.30);
}

/* ===== Panel ===== */
.side-nav__menu{
  margin-top: 10px;
  width: 228px;
  border-radius: 0 var(--sn-radius) var(--sn-radius) 0;
  overflow: hidden;

  background:
    radial-gradient(120% 120% at 20% 0%, rgba(0,163,255,.16) 0%, rgba(0,0,0,0) 45%),
    radial-gradient(120% 140% at 70% 30%, rgba(148,0,173,.14) 0%, rgba(0,0,0,0) 55%),
    var(--sn-bg);

  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);

  box-shadow: var(--sn-shadow);

  /* Закрытое состояние */
  opacity: 0;
  transform: translate3d(-16px, 0, 0) scale(.985);
  filter: blur(10px);
  visibility: hidden;
  pointer-events: none;

  /* Важно: transitions вместо keyframes — меньше глюков */
  transition:
    opacity var(--sn-dur-in) var(--sn-ease-in),
    transform var(--sn-dur-in) var(--sn-ease-in),
    filter var(--sn-dur-in) var(--sn-ease-in),
    visibility 0s linear var(--sn-dur-in);
}

/* Открыто */
.side-nav.is-open .side-nav__menu{
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity var(--sn-dur-in) var(--sn-ease-in),
    transform var(--sn-dur-in) var(--sn-ease-in),
    filter var(--sn-dur-in) var(--sn-ease-in),
    visibility 0s;
}

/* Закрытие — чуть быстрее и “мягче” */
.side-nav.is-closing .side-nav__menu{
  transition:
    opacity var(--sn-dur-out) var(--sn-ease-out),
    transform var(--sn-dur-out) var(--sn-ease-out),
    filter var(--sn-dur-out) var(--sn-ease-out),
    visibility 0s linear var(--sn-dur-out);
}

/* Заголовок */
.side-nav__title{
  padding: 10px 12px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .25px;
  color: rgba(255,255,255,.88);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Список */
.side-nav__list{
  padding: 10px;
  overflow-y: auto;     /* ✅ только вертикаль */
  overflow-x: hidden;   /* ✅ запрет горизонтали */
  max-height: 360px;
}

/* скроллбар */
.side-nav__list::-webkit-scrollbar{ width: 10px; }
.side-nav__list::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 999px;
}
.side-nav__list::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(0,163,255,.75));
  border-radius: 999px;
  border: 2px solid rgba(8,10,16,.55);
  box-shadow: 0 0 10px rgba(0,163,255,.28);
}

/* ===== Items ===== */
.side-nav__item{
  position: relative;
  width: 100%;
  text-align: left;

  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0, 163, 255, .20);

  background:
    radial-gradient(120px 60px at 12% 18%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.08));
  color: var(--sn-ink);

  cursor: pointer;
  font-weight: 780;
  font-size: 13px;
  margin-bottom: 8px;

  box-shadow:
    0 10px 22px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.04) inset;

  /* старт “разобранности” */
  opacity: 0;
  transform: translate3d(-14px, 8px, 0) scale(.985);
  filter: blur(8px);

  /* transitions */
  transition:
    opacity 420ms var(--sn-ease-in),
    transform 420ms var(--sn-ease-in),
    filter 420ms var(--sn-ease-in),
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
  transition-delay: calc(var(--delay, 0) * 1ms);

  will-change: transform, opacity, filter;
}

/* Состояние “видимы” при открытии */
.side-nav.is-open .side-nav__item{
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
}

/* Закрытие: чуть быстрее */
.side-nav.is-closing .side-nav__item{
  transition-duration: 340ms;
  transition-timing-function: var(--sn-ease-out);
}

/* Hover — без !important и без ломания анимации */
.side-nav__item::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 12px;
  pointer-events:none;
  opacity: 0;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.10) 18%,
      rgba(0,163,255,.14) 50%,
      rgba(255,255,255,.08) 72%,
      transparent 100%);
  transform: translateX(-22%);
  transition: opacity 180ms ease, transform 420ms var(--sn-ease-in);
}

.side-nav__item:hover{
  border-color: rgba(0, 163, 255, .55);
  background:
    radial-gradient(140px 70px at 12% 18%, rgba(255,255,255,.12), transparent 58%),
    linear-gradient(180deg, rgba(0,163,255,.10), rgba(0,0,0,.10));
  box-shadow:
    0 14px 30px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 18px rgba(0,163,255,.18);
}

.side-nav__item:hover::after{
  opacity: 1;
  transform: translateX(22%);
}

.side-nav__item:active{
  transform: translate3d(0,1px,0) scale(.995);
}

/* ===== Адаптив ===== */
@media (max-width: 768px){
  .side-nav{ top: 90px; }

  .side-nav__menu{
    position: fixed;
    left: 0;
    top: 140px;
    overflow-x: hidden;
    overflow-y: hidden; 
    width: min(84vw, 248px);
    max-height: min(72vh, 560px);
    border-radius: 0 var(--sn-radius) var(--sn-radius) 0;
  }

  .side-nav__list{
    max-height: calc(min(72vh, 560px) - 54px);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .side-nav__menu,
  .side-nav__item,
  .side-nav__toggle{
    transition: none !important;
    filter: none !important;
  }
  .side-nav__menu{
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .side-nav__item{
    opacity: 1 !important;
    transform: none !important;
  }
}