/* ============================================================================
    static/css/sidebar.css
    ========================================================================== */
/* ============================================================================
   SIDEBAR.CSS
   Inverted sidebar, nav items, stable hover spacing, collapsed behavior.
   ========================================================================== */

.sidebar-wrap {
  height: 100%;
  min-height: 0;
  padding: 8px;
  position: relative;
}

.sidebar {
  --sidebar-link-gap: clamp(6px, 1.1vh, 10px);
  --sidebar-link-min-h: clamp(34px, 4.6vh, 44px);
  --sidebar-link-pad-y: clamp(6px, 1.1vh, 10px);

  background: var(--color-primary);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--shadow-1);
  border-radius: var(--radius-xl);
  transition: width var(--transition-slow), min-width var(--transition-slow);
  position: relative; overflow: hidden;
  height: 100%;
  min-height: 0;
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  color: #fff;
}

.sidebar.collapsed { width: var(--sidebar-w-collapsed); min-width: var(--sidebar-w-collapsed); }

.sidebar-inner {
  height: 100%;
  min-height: 0;
  background: transparent;
  border-radius: calc(var(--radius-xl) - 2px);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: var(--sidebar-link-gap);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Stable vertical spacing between links (no jitter on hover) */
.nav {
  margin-top: clamp(2px, 0.8vh, 8px);
  min-height: 0;
  overflow-y: visible;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--sidebar-link-gap);
  padding-right: 2px;
}
.nav-group { margin-top: -2px; }
.nav-label {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,0.65); padding: 10px 12px;
}

.nav-link {
  display:flex; align-items:center; gap:10px; padding: var(--sidebar-link-pad-y) 12px;
  border-radius: 12px; color: rgba(255,255,255,0.95);
  text-decoration: none; font-weight: 600;

  /* Key: keep a constant border footprint → prevents “collapse” on hover */
  border: 1px solid rgba(255,255,255,0.14);
  min-height: var(--sidebar-link-min-h); overflow: hidden;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  background: transparent; will-change: background, box-shadow;
}
.nav-link:hover  { background: rgba(255,255,255,0.10); box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset; }
.nav-link.active { background: rgba(255,255,255,0.16); box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset; }

.nav-link .icon { flex: 0 0 auto; width: 20px; height: 20px; color: #fff; }
.nav-link .text { white-space: nowrap; color: #fff; }

/* Collapsed rail: icons centered, labels hidden */
.sidebar.collapsed .nav-link { justify-content: center; padding: var(--sidebar-link-pad-y); }
.sidebar.collapsed .text,
.sidebar.collapsed .nav-label { display: none; }

@media (max-height: 860px) {
  .sidebar-wrap { padding: 6px; }
  .sidebar {
    --sidebar-link-gap: 7px;
    --sidebar-link-min-h: 38px;
    --sidebar-link-pad-y: 7px;
  }
  .sidebar-inner { padding: 6px; }
}

@media (max-height: 760px) {
  .sidebar {
    --sidebar-link-gap: 6px;
    --sidebar-link-min-h: 34px;
    --sidebar-link-pad-y: 6px;
  }
}