:root {
  --sidebar-width: 300px;
}

.sidebar-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: linear-gradient(180deg, #f6f8fb 0%, #eef3f8 100%);
  border-left: 1px solid #d4dce6;
  box-shadow: -4px 0 16px rgba(22, 38, 55, 0.12);
  padding: 12px;
  overflow-y: auto;
  z-index: 1030; /* above main content, below modals */
  transform: translateX(0);
  transition: transform 0.2s ease-in-out;
}

.sidebar-panel.collapsed {
  transform: translateX(100%);
}

/* When a sidebar exists, reserve space so grid remains usable */
body.with-sidebar {
  padding-right: var(--sidebar-width);
}

/* Apply collapsed spacing before sidebar JS initializes to avoid first-paint jump. */
html.sidebar-collapsed-pre body.with-sidebar {
  padding-right: 0;
}

/* When collapsed, remove the reserved space */
body.with-sidebar.sidebar-collapsed {
  padding-right: 0;
}

.sidebar-header {
  position: sticky;
  top: 0;
  background: inherit;
  padding-bottom: 8px;
  border-bottom: 1px solid #dbe3ed;
  margin-bottom: 8px;
}

.sidebar-header h5 {
  font-weight: 700;
  color: #1c3653;
}

.sidebar-body .btn {
  text-align: left;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.14s ease;
}

.sidebar-body .btn:hover {
  transform: translateX(1px);
}