/* ==========================================================================
   1. 基本リセットとbodyの設定
   ========================================================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  background-color: #f1f1f1;
  min-height: 100vh;
  position: relative; /* ページ全体のスクロールの基準 */
}

ul {
  list-style: none;
}

/* ==========================================================================
   2. メニューバー（サイドバー本体）の設定
   ========================================================================= */
.sidebar {
  position: absolute; 
  top: 0;
  left: 0;
  height: 100vh;             /* 通常時＆バーを開いただけの時は画面ぴったりに固定 */
  width: 60px;               /* デフォルトはアイコンのみの幅 */
  background-color: #23282d; /* WordPress風のダークグレー */
  z-index: 1000;
  transition: width 0.3s ease;
  overflow: hidden;          /* はみ出たサブメニューや文字を隠す（スクロールなし） */
}

/* ★サイドバー全体にマウスが乗ったら右へ広げる */
.sidebar:hover {
  width: 240px;
}

/* 
  ★最重要：メニューバーにホバーした時ではなく、
  「サブメニューを持っているメニュー項目（.has-submenu）」にマウスが乗った時だけ、
  サイドバーの高さロックと overflow を解除します。
  
  これによって、ただメニューバーを開いただけでは本体スクロールバーは出現せず、
  13項目のサブメニューが右に飛び出した一瞬だけ、bodyごと下までスクロールできるようになります。
*/
.sidebar .menu-item.has-submenu:hover {
  /* 親である.sidebarの制限を、このホバー時だけ内側から打ち破るための設定（後述のsubmenuと連動） */
}

.sidebar:has(.menu-item.has-submenu:hover) {
  overflow: visible !important; /* 右側への飛び出し（サブメニュー）を許可 */
  height: auto;                 /* 100vhの制限を解除して、サブメニューの長さに合わせる */
  min-height: 100vh;
}

/* ロゴエリアの調整 */
.sidebar > div:first-child {
  height: 50px;
  line-height: 50px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  background-color: #1d2125;
  overflow: hidden;
  white-space: nowrap;
}

/* ==========================================================================
   3. 親メニューのスタイル
   ========================================================================= */
.menu-list {
  padding-top: 10px;
  padding-bottom: 120px; /* ログアウトボタン用の安全な余白 */
  overflow: visible !important;
}

.menu-item {
  position: relative; /* 子メニュー（絶対配置）の基準点 */
  width: 100%;
}

/* メニューのリンク領域 */
.menu-item a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  color: #eee;
  height: 50px;
  overflow: hidden;
  white-space: nowrap; /* 開閉中に文字を絶対に改行させない */
}

.menu-item a:hover {
  background-color: #0073aa;
  color: #fff;
}

/* アイコン領域（位置を左端に固定） */
.sidebar .icon {
  display: inline-block;
  min-width: 60px;
  text-align: center;
  font-size: 18px;
}

/* 親メニューのテキスト */
.sidebar .text {
  font-size: 14px;
  flex-grow: 1;
  opacity: 0;
  transition: opacity 0.05s ease 0s;
}

.sidebar:hover .text {
  opacity: 1;
  transition: opacity 0.2s ease 0.1s;
}

/* 矢印アイコン */
.arrow {
  font-size: 10px;
  margin-right: 15px;
  transition: transform 0.3s ease;
}

/* ==========================================================================
   4. 右に開く子メニュー（サブメニュー）のスタイル
   ========================================================================= */
.submenu-list {
  background-color: #32373c;
  
  position: absolute;
  top: 0;                    /* 親メニューのすぐ真横にぴったり配置 */
  left: 240px;               /* サイドバーが開いた時の横幅と同じ */
  width: 180px;              /* 子メニュー自体の横幅 */
  
  max-height: none !important; 
  overflow: visible !important;
  
  /* デフォルト（非表示・透明） */
  visibility: hidden;
  opacity: 0;
  transform: translateX(-10px);
  
  /* 閉じるときの速度 */
  transition: opacity 0.1s ease, transform 0.1s ease, visibility 0.1s;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 2000;
}

/* 子メニュー内のリンク */
.submenu-list a {
  padding-left: 20px;
  height: 40px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
}

/* ★右側に子メニューを表示させる条件 */
.sidebar:hover .menu-item.has-submenu:hover .submenu-list {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.2s ease 0.15s, transform 0.2s ease 0.15s;
}

.sidebar:hover .menu-item.has-submenu:hover .arrow {
  transform: rotate(45deg);
}

/* ==========================================================================
   5. マウス移動時に消えてしまうのを防ぐ（透明な架け橋）
   ========================================================================= */
.submenu-list::before {
  content: "";
  position: absolute;
  top: 0;
  left: -20px;         
  width: 20px;         
  height: 100%;        
  background: transparent;
  z-index: -1;
}

/* ==========================================================================
   6. ログアウトメニュー（POST用ボタン）を一番下に固定する設定
   ========================================================================= */
.logout-item {
  position: absolute !important;
  bottom: 10px;
  left: 0;
  border-top: 1px solid #32373c;
  border-bottom: 1px solid #32373c;
  padding: 5px 0;
  width: 100%;
}

.logout-item form {
  width: 100%;
}

.logout-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  width: 100%;
  height: 50px;
  color: #eee;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  font: inherit;
  overflow: hidden;
  white-space: nowrap;
}

.logout-button:hover {
  background-color: #dc3232;
  color: #fff;
}

/* ==========================================================================
   7. メインコンテンツ領域の余白調整
   ========================================================================= */
.main-content {
  margin-left: 60px;
  padding: 30px;
  height: 100%;
  min-height: 100%;
}


/* ==========================================================================

   ========================================================================= */


.topbar{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;

}


/* ==========================================================================
   ダイアログ
   ========================================================================= */
.dialog-slide-in {
    animation: dialog-slide-in 0.25s ease-out;
}

.dialog-slide-out {
    animation: dialog-slide-out 0.2s ease-in;
}

@keyframes dialog-slide-in {
    from {
        transform: translateY(-40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes dialog-slide-out {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-20px);
        opacity: 0;
    }
}


/* ==========================================================================
   ページネーション
   ========================================================================= */
.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin-top: 20px;
}

.pagination a,
.pagination span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	box-sizing: border-box;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-decoration: none;
}

.pagination a:hover {
	background: #f5f5f5;
}

.pagination .active {
	font-weight: bold;
}

.pagination .disabled {
	opacity: .4;
	cursor: default;
}