/**
 * サイドバー固定スタイル
 * スクロール時に上部に固定表示
 */

/* サイドバーのコンテナ */
.sidebar-container {
  position: relative;
  height: 100%;
}

/* 固定サイドバーのラッパー */
.sticky-sidebar-wrapper {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 100;
  transition: top 0.3s ease;
}

/* 管理バーが表示されている場合の調整 */
.admin-bar .sticky-sidebar-wrapper {
  top: 32px;
}

/* モバイルで管理バーが表示されている場合 */
@media screen and (max-width: 782px) {
  .admin-bar .sticky-sidebar-wrapper {
    top: 46px;
  }
}

/* フローティングヘッダーがある場合の調整 */
.has-floating-header .sticky-sidebar-wrapper {
  top: 60px; /* フローティングヘッダーの高さ分 */
}

.admin-bar.has-floating-header .sticky-sidebar-wrapper {
  top: 92px; /* 32px (admin bar) + 60px (floating header) */
}

/* サイドバーの内部要素の高さ制限とスクロール設定 */
.sticky-sidebar-inner {
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 20px;
  -webkit-overflow-scrolling: touch; /* iOSでのスムーズスクロール */
}

/* 管理バーがある場合の高さ調整 */
.admin-bar .sticky-sidebar-inner {
  max-height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
  .admin-bar .sticky-sidebar-inner {
    max-height: calc(100vh - 46px);
  }
}

/* フローティングヘッダーがある場合の高さ調整 */
.has-floating-header .sticky-sidebar-inner {
  max-height: calc(100vh - 60px);
}

.admin-bar.has-floating-header .sticky-sidebar-inner {
  max-height: calc(100vh - 92px);
}

/* スクロールバーのスタイリング */
.sticky-sidebar-inner::-webkit-scrollbar {
  width: 8px;
}

.sticky-sidebar-inner::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.sticky-sidebar-inner::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.sticky-sidebar-inner::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* サイドバー内のウィジェット間隔調整 */
.sticky-sidebar-inner .widget {
  margin-bottom: 30px;
}

.sticky-sidebar-inner .widget:last-child {
  margin-bottom: 0;
}

/* レスポンシブ対応 - タブレット以下では固定を解除 */
@media screen and (max-width: 1030px) {
  .sticky-sidebar-wrapper {
    position: static !important;
    top: auto !important;
  }
  
  .sticky-sidebar-inner {
    max-height: none !important;
    overflow-y: visible !important;
  }
}

/* より良いパフォーマンスのため will-change を使用 */
.sticky-sidebar-wrapper {
  will-change: position;
}

/* 固定時の影を追加（オプション） */
.sticky-sidebar-wrapper.is-sticky {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* サイドバーの最小高さを確保 */
#sidebar1 {
  min-height: 300px;
}

/* アニメーション効果 */
.sticky-sidebar-wrapper {
  opacity: 0;
  animation: fadeInSidebar 0.5s ease forwards;
}

@keyframes fadeInSidebar {
  to {
    opacity: 1;
  }
}