/* Sidebar collapse */
#sidebar {
  transition: width 0.25s ease;
  width: 16rem; /* 256px = w-64 */
  overflow: hidden;
}
#sidebar.collapsed {
  width: 4rem; /* 64px = w-16 */
  padding-left: 0;
  padding-right: 0;
}
#sidebar .sidebar-label {
  transition: opacity 0.15s ease, width 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
}
#sidebar.collapsed .sidebar-label {
  opacity: 0;
  width: 0;
  display: none;
}
#sidebar .sidebar-logo-text {
  transition: opacity 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
}
#sidebar.collapsed .sidebar-logo-text {
  opacity: 0;
  width: 0;
  display: none;
}
#sidebar.collapsed .sidebar-logo-container {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* Tooltip on hover when collapsed */
#sidebar.collapsed .nav-item {
  position: relative;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 3.2rem;
}
#sidebar.collapsed .nav-item[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #1f2937;
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 999;
  pointer-events: none;
}
#sidebar.collapsed .sidebar-logout {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 3.2rem;
}

/* Toggle button */
#sidebar-toggle {
  transition: all 0.2s ease;
}
#sidebar-toggle svg {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

/* 折りたたんだ時: ボタンを中央寄せ、ラベル非表示、アイコン反転 */
#sidebar.collapsed #sidebar-toggle {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 3.2rem;
  border: none;
  background: transparent;
}
#sidebar.collapsed #sidebar-toggle:hover {
  background: rgba(20, 184, 184, 0.1) !important;
}
#sidebar.collapsed #sidebar-toggle svg {
  transform: rotate(180deg);
}