/* =========================================================
   左サイドメニュー リデザイン v4 (2026-05)
   - 上部 sb-anchor (CTA + ログイン)
   - sb-section (グループ見出し)
   - 状態管理: idle / hover / active / open
   - アイコン: idle muted brown / active full brand
   ========================================================= */

:root{
  --sb-text:#3d2c1f;
  --sb-text-strong:#2b1f14;
  --sb-text-muted:#5a4737;          /* サブメニュー本文（読みやすく） */
  --sb-text-dim:#a89380;
  --sb-section-label:#a08469;       /* セクション見出しラベル */
  --sb-accent:#a0522d;              /* ブランド saddle brown */
  --sb-accent-deep:#7a3d20;
  --sb-icon-idle:#a0522d;           /* idle時アイコン: ブランド茶 (ボタンと統一) */
  --sb-hover-bg:rgba(160,82,45,.07);
  --sb-active-bg:rgba(160,82,45,.10);
  --sb-divider:rgba(160,82,45,.14);
  --sb-radius:6px;
}

/* サイドバー全体: ivory bg をしっかり指定（モバイル時のオーバーレイで透けないように） */
body.adminbody .main-sidebar.left,
body .main-sidebar.left{
  background:#fffff0 !important;          /* ivory — body と同色だがしっかり塗る */
  border:none !important;
  border-right:1px solid var(--sb-divider) !important;
  padding:0 !important;
}
.sidebar-inner.leftscroll{
  background:#fffff0 !important;
  border:none !important;
  padding:0 !important;
}

/* モバイル/タブレット: サイドバーが上にオーバーレイされた時の影とz-index */
@media (max-width:991.98px){
  body.adminbody .main-sidebar.left,
  body .main-sidebar.left{
    box-shadow:4px 0 18px rgba(0,0,0,.15);  /* オーバーレイ感を出す */
    z-index:1000 !important;
  }
}
#sidebar-menu{
  padding:.85rem .45rem 30px;     /* 上部にヘッダー境界からの余白を確保 */
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Meiryo",sans-serif;
}

/* ============================================================
   1. 上部「重力」: CTA + ログインリンク
   ============================================================ */
.sb-anchor{
  padding:.85rem .45rem 1rem;
  border-bottom:1px solid var(--sb-divider);
  margin:0 0 .35rem;
  display:flex;flex-direction:column;gap:.5rem;
}
.sb-cta{
  display:flex !important;
  align-items:center;justify-content:center;
  gap:.5rem;
  background:var(--sb-accent);
  color:#fff !important;
  font-size:.86rem;
  font-weight:700;
  padding:.7rem .8rem;
  border-radius:8px;
  text-decoration:none !important;
  box-shadow:0 4px 12px rgba(160,82,45,.3);
  transition:background-color .15s,transform .12s,box-shadow .15s;
  letter-spacing:.02em;
  font-family:inherit;
}
.sb-cta:hover{
  background:var(--sb-accent-deep);
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(160,82,45,.45);
  text-decoration:none !important;
}
.sb-cta i{
  color:#fff !important;font-size:.95rem !important;
}
.sb-link-secondary{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  color:var(--sb-text-muted) !important;
  font-size:.78rem;
  font-weight:600;
  padding:.45rem;
  border-radius:5px;
  text-decoration:none !important;
  transition:color .15s,background-color .15s;
}
.sb-link-secondary:hover{
  color:var(--sb-accent-deep) !important;
  background:var(--sb-hover-bg);
}
.sb-link-secondary i{
  font-size:.78rem !important;color:inherit !important;
}

/* ============================================================
   2. メニューリスト (状態を最小限の差で表現)
   ============================================================ */
#sidebar-menu > ul{
  display:flex;flex-direction:column;gap:1px;
  padding:0;margin:0;list-style:none;
}

/* ----- セクション見出し ----- */
.sb-section{
  display:block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--sb-section-label);
  padding:.95rem .7rem .3rem;
  margin:0;
  list-style:none !important;
  pointer-events:none;
  user-select:none;
  font-family:"Hiragino Sans","Yu Gothic Medium",sans-serif;
}
.sb-section--first{
  padding-top:.25rem;
}
/* 最初のセクション項目（ulトップ） */
#sidebar-menu > ul > .sb-section:first-child,
#sidebar-menu > ul > .sb-section:first-of-type{
  padding-top:.4rem;
}

/* ----- トップレベル項目 ----- */
#sidebar-menu > ul > li.submenu > a,
#sidebar-menu > ul > li:not(.sb-section) > a{
  display:flex !important;
  align-items:center;
  gap:.6rem;
  background:transparent;
  color:var(--sb-text) !important;
  font-size:.875rem !important;       /* 14px */
  font-weight:600 !important;
  padding:.46rem .65rem !important;
  border:none !important;
  border-radius:var(--sb-radius);
  position:relative;
  transition:background-color .14s ease,color .14s ease;
  letter-spacing:-.005em;
  line-height:1.3;
  isolation:isolate;
}
#sidebar-menu > ul > li > a:hover{
  background:var(--sb-hover-bg) !important;
  color:var(--sb-accent-deep) !important;
  text-decoration:none;
  border:none !important;
}

/* open状態 (subdrop) */
#sidebar-menu > ul > li > a.subdrop,
#sidebar-menu .subdrop{
  background:var(--sb-active-bg) !important;
  color:var(--sb-accent-deep) !important;
  font-weight:700 !important;
  border:none !important;
}
#sidebar-menu > ul > li > a.subdrop::before,
#sidebar-menu .subdrop::before{
  content:"";
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:1.05rem;
  background:var(--sb-accent);
  border-radius:0 2px 2px 0;
}

/* ----- アイコン ----- */
#sidebar-menu ul li a i{
  font-size:.95rem !important;
  line-height:1 !important;
  color:var(--sb-icon-idle) !important;       /* idle: muted brown */
  margin:0 !important;
  width:18px !important;
  height:auto !important;
  background:transparent !important;
  border-radius:0 !important;
  display:inline-flex !important;
  align-items:center;justify-content:center;
  flex-shrink:0;
  transition:color .14s ease;
}
#sidebar-menu > ul > li > a:hover i,
#sidebar-menu > ul > li > a.subdrop i,
#sidebar-menu .subdrop i{
  color:var(--sb-accent) !important;       /* hover/active: full brand */
}

/* ラベル */
#sidebar-menu > ul > li > a > span:not(.menu-arrow){
  flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 矢印 */
#sidebar-menu ul li .menu-arrow{
  position:static !important;
  margin-left:auto;
  font-size:.78rem !important;
  color:var(--sb-accent-deep) !important;     /* こげ茶でくっきり */
  opacity:.95;
  transition:transform .2s ease,color .14s;
}
#sidebar-menu > ul > li > a:hover .menu-arrow,
#sidebar-menu .subdrop .menu-arrow{
  color:var(--sb-accent) !important;
  opacity:1;
}

/* ============================================================
   3. サブメニュー (2階層目)
   ============================================================ */
#sidebar-menu ul ul{
  background:transparent !important;
  margin:.2rem 0 .4rem 1rem;
  padding:.1rem 0 .15rem .9rem;
  border-left:1px solid var(--sb-divider);
  list-style:none;
}
#sidebar-menu ul ul a{
  color:var(--sb-text-strong) !important;     /* ★ 濃く読みやすく */
  font-size:.83rem !important;
  font-weight:600 !important;
  padding:.4rem .55rem !important;
  border-radius:5px;
  transition:background-color .14s,color .14s;
  display:block !important;
  letter-spacing:-.005em;
}
#sidebar-menu ul ul a:hover{
  background:var(--sb-hover-bg) !important;
  color:var(--sb-accent-deep) !important;
  text-decoration:none;
}
#sidebar-menu ul ul li.active a{
  color:var(--sb-accent-deep) !important;
  background:var(--sb-active-bg) !important;
  font-weight:700;
}

/* ----- スクロールバー ----- */
.sidebar-inner::-webkit-scrollbar{ width:5px; }
.sidebar-inner::-webkit-scrollbar-thumb{
  background:rgba(160,82,45,.22);
  border-radius:3px;
}
.sidebar-inner::-webkit-scrollbar-thumb:hover{ background:rgba(160,82,45,.4); }
.sidebar-inner::-webkit-scrollbar-track{ background:transparent; }

/* ----- フォーカス ----- */
#sidebar-menu a:focus-visible,
.sb-cta:focus-visible,
.sb-link-secondary:focus-visible{
  outline:2px solid var(--sb-accent);
  outline-offset:2px;
}

/* ============================================================
   ガクン対策（CLS防止）
   ログイン状態で出現する .p_area は、d-none 状態でも
   領域だけ確保しておく。JSがd-noneを外すと自然に見える化される。
   キャッシュ済みHTMLを変更せずに済む CSSのみ解。
   ============================================================ */
#sidebar-menu > ul > li.p_area.d-none{
  display:list-item !important;   /* Bootstrap の d-none(display:none) を上書き */
  visibility:hidden;              /* 見えないが領域は保持 */
}