/* ══════════════════════════════════════════════════════════════════════
   sidebar.css — Стили сайдбара (единый источник для всех страниц)
   Подключается в base.html и автономных SPA-шаблонах.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Основной контейнер сайдбара ──────────────────────────────────── */
.sidebar {
  position:fixed; top:0; left:0; width:260px; height:100vh;
  background:var(--nav-bg); border-right:1px solid var(--nav-border);
  display:flex; flex-direction:column; z-index:100; transition:transform 0.3s ease;
  font-size:14px; font-family:var(--font);
}
.sidebar.collapsed { transform:translateX(-100%); }

/* ── Шапка с логотипом ────────────────────────────────────────────── */
.sidebar-header { padding:20px; border-bottom:1px solid var(--nav-border); }
.sidebar-logo {
  display:flex; align-items:center; gap:12px;
  font-size:18px; font-weight:700; color:#fff; text-decoration:none;
}
.sidebar-logo-icon {
  width:36px; height:36px; background:var(--accent-gradient, var(--accent)); border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  box-shadow:0 2px 8px rgba(37,99,235,0.3);
}

/* ── Зона навигации (прокручиваемая) ──────────────────────────────── */
.sidebar-nav {
  flex:1; padding:16px 12px; overflow-y:auto; scrollbar-gutter:stable;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.15) transparent;
}
.sidebar-nav::-webkit-scrollbar { width:6px; }
.sidebar-nav::-webkit-scrollbar-track { background:transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:3px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.3); }

/* ── Секции и заголовки ───────────────────────────────────────────── */
.nav-section { margin-bottom:24px; padding-top:12px; border-top:1px solid var(--nav-border); }
.nav-section:first-child { border-top:none; padding-top:0; }
.nav-section-title {
  font-size:11px; font-weight:600; color:var(--nav-text);
  text-transform:uppercase; letter-spacing:.08em; padding:0 12px; margin-bottom:8px;
  opacity:0.7;
}

/* ── Пункт меню ───────────────────────────────────────────────────── */
.nav-item {
  display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:8px;
  color:var(--nav-text); text-decoration:none; font-size:14px; font-weight:500;
  transition:all 0.15s ease; margin-bottom:2px; border-left:3px solid transparent;
}
.nav-item:hover { background:var(--nav-hover-bg); color:var(--nav-text2); }
.nav-item.active {
  background:var(--nav-active-bg); color:var(--nav-active-color);
  border-left:3px solid var(--accent);
  border-image:var(--accent-gradient, linear-gradient(#2563eb,#7c3aed)) 1;
}

/* ── Иконки пунктов ───────────────────────────────────────────────── */
.nav-item i { min-width:20px; width:20px; flex-shrink:0; text-align:center; font-size:15px; opacity:0.8; transition:all 0.15s; }
.nav-item.active i { opacity:1; color:var(--accent, #60a5fa); filter:drop-shadow(0 0 4px rgba(96,165,250,0.4)); }

/* ── Пункт-заголовок секции ───────────────────────────────────────── */
.nav-section-btn { font-size:13px; font-weight:600; color:var(--nav-text); }
.nav-section-btn:hover { background:var(--nav-hover-bg); color:var(--nav-text2); }
.nav-section-btn.active {
  background:var(--nav-active-bg); color:var(--nav-active-color);
  border-left:3px solid var(--accent);
  border-image:var(--accent-gradient, linear-gradient(#2563eb,#7c3aed)) 1;
}

/* ── Кнопка-заглушка (не-админ, «Управление проектами») ─────────── */
.nav-btn-disabled {
  width:100%; text-align:left; background:none; cursor:pointer;
  opacity:0.5;
}

/* ── Toast-уведомление сайдбара ────────────────────────────────── */
.sidebar-toast {
  position:fixed; z-index:500;
  background:#1e293b; color:#e2e8f0; padding:8px 14px; border-radius:6px;
  font-size:13px; font-family:var(--font); box-shadow:0 4px 12px rgba(0,0,0,0.3);
  opacity:0; transition:opacity 0.2s; pointer-events:none; white-space:nowrap;
}
.sidebar-toast.show { opacity:1; transform:translateY(0); }

/* ── Вложенный пункт (подраздел) ──────────────────────────────────── */
.nav-subitem { padding-left:28px; font-size:13px; }

/* ── Дропдауны ────────────────────────────────────────────────────── */
.nav-dropdown { margin-bottom:4px; }
.nav-dropdown-toggle {
  width:100%; background:none; border:none; border-left:3px solid transparent;
  cursor:pointer; font-family:var(--font); justify-content:flex-start;
}
.nav-chevron { margin-left:auto !important; width:auto !important; min-width:auto !important; font-size:11px !important; transition:transform 0.2s; }
.nav-dropdown-toggle.open .nav-chevron { transform:rotate(180deg); }
.nav-dropdown-menu { max-height:0; overflow:hidden; transition:max-height 0.3s ease; }
.nav-dropdown-menu.open { max-height:300px; }

/* ── Подвал сайдбара (карточка пользователя) ──────────────────────── */
.sidebar-footer { padding:16px; border-top:1px solid var(--nav-border); }
.user-card {
  display:flex; align-items:center; gap:12px; padding:12px;
  background:rgba(255,255,255,0.06); border-radius:10px;
}
.user-avatar {
  width:40px; height:40px; background:var(--accent-gradient, var(--accent)); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:16px; flex-shrink:0; color:#fff;
  box-shadow:0 2px 8px rgba(37,99,235,0.25);
}
.user-info { flex:1; min-width:0; }
.user-name { font-weight:600; font-size:14px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { font-size:12px; color:var(--nav-text); }
.logout-btn {
  width:36px; height:36px; border:none; background:transparent;
  color:var(--nav-text); border-radius:8px; cursor:pointer; transition:all 0.15s;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
}
.logout-btn:hover { background:rgba(239,68,68,0.15); color:#f87171; }

/* ── Кнопка сворачивания/разворачивания ───────────────────────────── */
.sidebar-toggle {
  width:36px; height:36px; border:none; background:rgba(255,255,255,0.08);
  color:var(--nav-text2); border-radius:8px; cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center; transition:background 0.15s;
}
.sidebar-toggle:hover { background:rgba(255,255,255,0.14); color:#fff; }

/* ── Оверлей за сайдбаром (мобильные) ─────────────────────────────── */
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:99; }

/* ══════════════════════════════════════════════════════════════════════
   Логотип ManageSystems.ru — Микрочип
   ══════════════════════════════════════════════════════════════════════ */
.ms-logo { display:flex; align-items:center; gap:12px; }
.ms-logo-lg { flex-direction:column; gap:16px; }
.ms-chip { position:relative; display:inline-block; }
.ms-chip-body {
  display:grid; grid-template-columns:repeat(3,1fr); gap:3px;
  padding:6px; background:rgba(127,119,221,0.08); border-radius:6px;
  border:1.5px solid rgba(127,119,221,0.25); position:relative; z-index:1;
}
.ms-cell {
  display:flex; align-items:center; justify-content:center;
  border-radius:3px; font-family:Consolas,'Courier New',monospace;
  font-weight:700; color:rgba(255,255,255,0.85);
}
.ms-cell.lg-p { background:#7f77dd; } .ms-cell.lg-g { background:#5dcaa5; } .ms-cell.lg-o { background:#ef9f27; }
.ms-cell.o7 { opacity:.7; } .ms-cell.o95 { opacity:.95; } .ms-cell.o6 { opacity:.6; }
.ms-cell.o5 { opacity:.5; } .ms-cell.o75 { opacity:.75; }

/* Ножки чипа */
.ms-pins-t, .ms-pins-b { display:flex; justify-content:space-around; }
.ms-pins-l, .ms-pins-r { position:absolute; display:flex; flex-direction:column; justify-content:space-around; top:0; }
.ms-pins-l { left:-8px; } .ms-pins-r { right:-8px; }
.ms-pins-t span, .ms-pins-b span { width:2px; border-radius:1px; opacity:.5; background:#7f77dd; }
.ms-pins-l span, .ms-pins-r span { height:2px; border-radius:1px; opacity:.5; background:#7f77dd; }
.ms-pins-l span:nth-child(2), .ms-pins-r span:nth-child(2) { background:#5dcaa5; }
.ms-pins-l span:nth-child(3), .ms-pins-r span:nth-child(3) { background:#ef9f27; }
.ms-pins-t span:nth-child(2), .ms-pins-b span:nth-child(2) { background:#5dcaa5; }
.ms-pins-t span:nth-child(3), .ms-pins-b span:nth-child(3) { background:#ef9f27; }

/* Текст бренда */
.ms-brand-text { line-height:1.2; }
.ms-brand-title { font-weight:600; letter-spacing:2px; color:#e8e6dd; }
.ms-ru { color:#5dcaa5; font-weight:700; }
.ms-brand-sub { font-size:7px; color:#666; letter-spacing:3px; margin-top:2px; }

/* Размер: маленький (сайдбар) */
.ms-logo-sm .ms-chip-body { gap:2px; padding:4px; }
.ms-logo-sm .ms-cell { width:18px; height:18px; font-size:7px; border-radius:2px; }
.ms-logo-sm .ms-pins-l, .ms-logo-sm .ms-pins-r { height:62px; padding:8px 0; }
.ms-logo-sm .ms-pins-l span, .ms-logo-sm .ms-pins-r span { width:8px; height:2px; }
.ms-logo-sm .ms-brand-title { font-size:11px; letter-spacing:1.5px; }
.ms-logo-sm .ms-brand-sub { display:none; }

/* Размер: средний */
.ms-logo-md .ms-chip-body { gap:3px; padding:6px; }
.ms-logo-md .ms-cell { width:24px; height:24px; font-size:8px; }
.ms-logo-md .ms-pins-t, .ms-logo-md .ms-pins-b { width:84px; padding:0 14px; }
.ms-logo-md .ms-pins-t span, .ms-logo-md .ms-pins-b span { height:8px; }
.ms-logo-md .ms-pins-l, .ms-logo-md .ms-pins-r { height:84px; padding:14px 0; }
.ms-logo-md .ms-pins-l span, .ms-logo-md .ms-pins-r span { width:8px; }
.ms-logo-md .ms-brand-title { font-size:16px; }
.ms-logo-md .ms-brand-sub { font-size:7px; }

/* Размер: большой (страница логина) */
.ms-logo-lg .ms-chip-body { gap:6px; padding:12px; }
.ms-logo-lg .ms-cell { width:52px; height:52px; font-size:15px; border-radius:6px; }
.ms-logo-lg .ms-pins-t, .ms-logo-lg .ms-pins-b { width:180px; padding:0 28px; }
.ms-logo-lg .ms-pins-t span, .ms-logo-lg .ms-pins-b span { height:14px; width:3px; }
.ms-logo-lg .ms-pins-l, .ms-logo-lg .ms-pins-r { height:180px; padding:28px 0; }
.ms-logo-lg .ms-pins-l span, .ms-logo-lg .ms-pins-r span { width:14px; height:3px; }
.ms-logo-lg .ms-chip-body { border-width:2px; }
.ms-logo-lg .ms-brand-title { font-size:30px; letter-spacing:4px; }
.ms-logo-lg .ms-brand-sub { font-size:10px; letter-spacing:5px; margin-top:6px; }
.ms-logo-lg .ms-brand-text { text-align:center; }