/* Drawer collapsible sidebar styles */
/* DaisyUI 5: is-drawer-close / is-drawer-open modifiers */

/*
 * FOUC防止: data-drawer-state属性でJS実行前の状態を制御
 * checkbox状態が復元される前に、CSSでis-drawer-close相当の表示を適用
 */

/* ===== 閉じた状態（FOUC防止） ===== */
/* checkboxがまだcheckedでもis-drawer-close相当のスタイルを適用 */
html[data-drawer-state="closed"] .drawer .is-drawer-close\:hidden {
  display: none !important;
}

html[data-drawer-state="closed"] .drawer .hidden.is-drawer-close\:flex {
  display: flex !important;
  justify-content: center !important;
}

html[data-drawer-state="closed"] .drawer .hidden.is-drawer-close\:inline {
  display: inline !important;
}

html[data-drawer-state="closed"] .drawer .hidden.is-drawer-close\:inline-flex {
  display: inline-flex !important;
}

html[data-drawer-state="closed"] .drawer .is-drawer-close\:w-14 {
  width: 3.5rem !important;
}

html[data-drawer-state="closed"] .drawer .is-drawer-open\:w-56 {
  width: 3.5rem !important;
}

/* navbar: 閉じた状態でハンバーガーボタンを表示 */
html[data-drawer-state="closed"] .drawer .is-drawer-open\:hidden {
  display: inline-flex !important;
}

/* ===== DaisyUI is-drawer-open / is-drawer-close モディファイアの実装 ===== */
/* checkbox:checked = open, checkbox:not(:checked) = closed */

/* is-drawer-close:hidden - 閉じた時に非表示 */
.drawer:has(.drawer-toggle:not(:checked)) .is-drawer-close\:hidden {
  display: none;
}

/* is-drawer-open:hidden - 開いた時に非表示 */
.drawer:has(.drawer-toggle:checked) .is-drawer-open\:hidden {
  display: none;
}

/* hidden.is-drawer-close:flex - 閉じた時にflex表示（中央配置） */
.drawer:has(.drawer-toggle:not(:checked)) .hidden.is-drawer-close\:flex {
  display: flex;
  justify-content: center;
}

/* hidden.is-drawer-close:inline - 閉じた時にinline表示 */
.drawer:has(.drawer-toggle:not(:checked)) .hidden.is-drawer-close\:inline {
  display: inline;
}

/* hidden.is-drawer-close:inline-flex - 閉じた時にinline-flex表示 */
.drawer:has(.drawer-toggle:not(:checked)) .hidden.is-drawer-close\:inline-flex {
  display: inline-flex;
}

/* is-drawer-close:w-14 - 閉じた時に幅14 */
.drawer:has(.drawer-toggle:not(:checked)) .is-drawer-close\:w-14 {
  width: 3.5rem;
}

/* is-drawer-open:w-56 - 開いた時に幅56 */
.drawer:has(.drawer-toggle:checked) .is-drawer-open\:w-56 {
  width: 14rem;
}

/* drawer-sideのoverflow設定（ツールチップ表示のため） */
.drawer-side.is-drawer-close\:overflow-visible {
  overflow: visible;
}

/* 閉じた状態でツールチップが見えるように */
.drawer:has(.drawer-toggle:not(:checked)) .drawer-side,
html[data-drawer-state="closed"] .drawer .drawer-side {
  overflow: visible;
}

/* Transition for smooth width animation */
.drawer-side > div {
  transition: width 0.2s ease-in-out;
}

/* Summary要素の背景スタイル */
.menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
  @apply bg-base-300;
  margin-top: 0.25rem;
}