/* =========================================================
   s-logi 共通サイドバー  nav.css
   - position:fixed なので各ページのレイアウトに依存しない
   - 折りたたみ式（アイコンレール）対応
   - スマホはドロワー、印刷時は非表示
   - 色は自己完結（各ページの :root token に依存しない）
   ========================================================= */
:root{
  --slogi-side:240px;       /* 通常幅 */
  --slogi-side-rail:68px;   /* 折りたたみ幅 */
  --slogi-accent:#2563eb;   /* blue-600 */
}

/* 本文の左に常にサイドバー分の余白を確保（特異度を上げて各ページの body 指定に勝つ） */
html.slogi-has-nav body{
  padding-left:var(--slogi-side);
  transition:padding-left .2s ease;
}
html.slogi-has-nav.slogi-nav-collapsed body{
  padding-left:var(--slogi-side-rail);
}

/* ===== サイドバー本体 ===== */
#slogi-sidebar{
  position:fixed; left:0; top:0; height:100vh;
  width:var(--slogi-side);
  background:#0f172a; color:#cbd5e1;
  display:flex; flex-direction:column;
  z-index:40;
  transition:width .2s ease, transform .22s ease;
  font-family:'Inter','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
}
html.slogi-nav-collapsed #slogi-sidebar{ width:var(--slogi-side-rail); }

/* ブランド */
.slogi-brand{
  display:flex; align-items:center; gap:10px;
  padding:20px 20px 16px; font-weight:700; font-size:18px; color:#fff;
  white-space:nowrap;
}
.slogi-dot{
  width:9px; height:9px; flex:0 0 9px; border-radius:50%;
  background:var(--slogi-accent); box-shadow:0 0 0 3px rgba(37,99,235,.25);
}
.slogi-brand-txt{ line-height:1.1; }
.slogi-brand-txt small{
  display:block; font-size:11px; font-weight:500; color:#64748b;
  margin-top:2px; letter-spacing:.04em;
}

/* メニュー */
.slogi-nav{ padding:8px; display:flex; flex-direction:column; gap:2px; flex:1; }
.slogi-item{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:8px;
  color:#cbd5e1; text-decoration:none;
  font-size:14px; font-weight:500; white-space:nowrap;
  transition:background .12s, color .12s;
}
a.slogi-item:hover{ background:#1e293b; color:#fff; }
a.slogi-item.slogi-active{ background:var(--slogi-accent); color:#fff; }
.slogi-ico{
  width:20px; height:20px; flex:0 0 20px;
  display:inline-flex; align-items:center; justify-content:center; opacity:.9;
}
.slogi-ico svg{ width:20px; height:20px; }
.slogi-soon{ color:#475569; cursor:default; }
.slogi-soon .slogi-ico{ opacity:.55; }
.slogi-badge{
  margin-left:auto; font-size:10px; background:#1e293b; color:#64748b;
  padding:2px 6px; border-radius:6px; white-space:nowrap;
}

/* フッター（折りたたみトグル＋メール＋ログアウト） */
.slogi-foot{ padding:12px; border-top:1px solid #1e293b; display:flex; flex-direction:column; gap:8px; }
.slogi-foot button{
  display:flex; align-items:center; gap:11px;
  width:100%; padding:9px 12px;
  border:1px solid #334155; background:transparent; color:#94a3b8;
  border-radius:8px; font-size:13px; cursor:pointer;
  font-family:inherit; white-space:nowrap;
}
.slogi-foot button:hover{ background:#1e293b; color:#fff; }
.slogi-foot .slogi-ico{ width:18px; height:18px; flex:0 0 18px; }
.slogi-foot .slogi-ico svg{ width:18px; height:18px; }
.slogi-email{
  font-size:12px; color:#94a3b8; padding:0 2px;
  word-break:break-all; line-height:1.4;
}
.slogi-chev{ transition:transform .2s ease; }

/* ===== 折りたたみ（レール）時：PC幅のみ ===== */
html.slogi-nav-collapsed #slogi-sidebar .slogi-label,
html.slogi-nav-collapsed #slogi-sidebar .slogi-badge,
html.slogi-nav-collapsed #slogi-sidebar .slogi-brand-txt,
html.slogi-nav-collapsed #slogi-sidebar .slogi-email{
  display:none;
}
html.slogi-nav-collapsed #slogi-sidebar .slogi-brand{ justify-content:center; padding:20px 0 16px; }
html.slogi-nav-collapsed #slogi-sidebar .slogi-item,
html.slogi-nav-collapsed #slogi-sidebar .slogi-foot button{ justify-content:center; gap:0; padding-left:0; padding-right:0; }
html.slogi-nav-collapsed #slogi-sidebar .slogi-chev{ transform:rotate(180deg); }  /* 矢印を反転＝開く向き */

/* レール時：アイコンにホバーで名前ポップ */
html.slogi-nav-collapsed #slogi-sidebar .slogi-item{ position:relative; }
html.slogi-nav-collapsed #slogi-sidebar .slogi-item:hover::after{
  content:attr(data-label);
  position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
  background:#1e293b; color:#fff; padding:6px 10px; border-radius:8px;
  font-size:12px; white-space:nowrap; z-index:50; pointer-events:none;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
}

/* ===== スマホ：ドロワー（レール無効・常にフル幅） ===== */
#slogi-scrim{ display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:39; }
#slogi-scrim.slogi-show{ display:block; }
#slogi-mobtn{
  display:none; position:fixed; left:12px; top:12px; z-index:38;
  width:42px; height:42px; border-radius:10px;
  border:1px solid #e2e8f0; background:#fff; color:#475569;
  font-size:18px; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.12);
}

@media (max-width:860px){
  html.slogi-has-nav body,
  html.slogi-has-nav.slogi-nav-collapsed body{ padding-left:0; padding-top:58px; }
  #slogi-sidebar,
  html.slogi-nav-collapsed #slogi-sidebar{
    width:var(--slogi-side); transform:translateX(-100%); box-shadow:0 10px 30px rgba(0,0,0,.4);
    /* iOSのアドレスバー等で 100vh が下にはみ出し、ログアウトが隠れるのを防ぐ。
       100dvh（動的ビューポート高）にし、足りない時はサイドバー内をスクロール可能にする。 */
    height:100vh; height:100dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  #slogi-sidebar.slogi-open{ transform:none; }
  #slogi-mobtn{ display:inline-flex; align-items:center; justify-content:center; }
  /* ドロワー時は折りたたみでも必ず文字を出す */
  html.slogi-nav-collapsed #slogi-sidebar .slogi-label,
  html.slogi-nav-collapsed #slogi-sidebar .slogi-badge,
  html.slogi-nav-collapsed #slogi-sidebar .slogi-brand-txt,
  html.slogi-nav-collapsed #slogi-sidebar .slogi-email{ display:block; }
  html.slogi-nav-collapsed #slogi-sidebar .slogi-brand,
  html.slogi-nav-collapsed #slogi-sidebar .slogi-item,
  html.slogi-nav-collapsed #slogi-sidebar .slogi-foot button{ justify-content:flex-start; gap:11px; padding:10px 12px; }
  html.slogi-nav-collapsed #slogi-sidebar .slogi-item:hover::after{ display:none; }
  .slogi-collapse{ display:none !important; }  /* スマホでは折りたたみボタン不要 */
}

/* ===== 印刷時：サイドバーを完全に隠す（ラベル/チェック表PDFに写り込ませない） ===== */
@media print{
  html.slogi-has-nav body,
  html.slogi-has-nav.slogi-nav-collapsed body{ padding-left:0 !important; }
  #slogi-sidebar, #slogi-scrim, #slogi-mobtn{ display:none !important; }
}