/* layout-v14-context-header  — 端末で本ファイルの鮮度確認に使う目印(古いキャッシュ判定用) */

/* ── 文脈ヘッダ(spec-shell.md §5.6 / guideline-ui.md UI-ADR-008) ──────────
   ロゴ行直下・ナビブロック上に置く現文脈 + ロール + テナント切替器。
   text-truncate を効かせるため body の min-width を 0 にする(flex 子の既定 auto を上書き)。
   展開時は頭アイコンを隠しラベルを主表示、デスクトップ折りたたみ時はラベル群を畳んで
   頭アイコンのみへ縮退する(ロゴ .brand-* の出し分けと同型。UI-ADR-008 §6)。 */
.context-header { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.context-header-body { min-width: 0; }
.context-header-icon { display: none; }
.context-header-toggle { cursor: pointer; }

/* サイドバー背景 */
.navbar-vertical { background-color: #0e2639; }

/* セクション見出し(.nav-header)の左 padding。Tabler 1.4.0 は .nav-header を未定義(素の li)で
   左端に密着する。見出し(1階層目)に nav-link(2階層目)の半分の左 padding を与えることで、
   見出しは左端に密着せず、かつ項目が見出しより深くインデントされる階層表示にする。
   nav-link の左 padding は var(--tblr-page-padding) なので、その半分を見出しに与える。
   折りたたみ時は body.sidebar-collapsed .nav-header { display:none } で非表示のため影響なし。 */
.navbar-vertical .nav-header { padding-left: calc(var(--tblr-page-padding, 1rem) / 2); }

/* ── ロゴの出し分け(spec-shell.md §5.2.3) ───────────────────────
   両画像は DOM 常設、display で出し分け。
   デスクトップ展開時: 横長(.brand-wide)、デスクトップ折りたたみ時: 正方形(.brand-mark)
   モバイル: 常に横長 */
.brand-mark { display: none; }
.brand-wide { display: inline-block; }

/* ── サイドバー開閉(自作)— デスクトップ ────────────────────── */
@media (min-width: 992px) {
  body.sidebar-collapsed .navbar-vertical { width: 3.5rem; }
  body.sidebar-collapsed .nav-link-title { display: none; }
  body.sidebar-collapsed .nav-header { display: none; }

  /* override: Tabler 既定の `.navbar-expand-lg.navbar-vertical ~ .page-wrapper`
     (特異性 0,3,0)に勝つため、`body.sidebar-collapsed` を前置して
     特異性を 0,4,1 に引き上げ、メインコンテンツを縮小幅に追従させる */
  body.sidebar-collapsed .navbar-expand-lg.navbar-vertical ~ .page-wrapper {
    margin-left: 3.5rem;
  }

  /* override: 縮小時のアイコン中央配置(§5.2)。Tabler 既定の
     `.navbar-vertical.navbar-expand-lg .navbar-collapse .navbar-nav .nav-link`
     (特異性 0,5,0)に勝つため、`body.sidebar-collapsed` を前置して
     特異性を 0,6,0 に引き上げる。!important は用いない */
  body.sidebar-collapsed .navbar-vertical.navbar-expand-lg .navbar-collapse .navbar-nav .nav-link {
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
  }
  body.sidebar-collapsed .navbar-vertical.navbar-expand-lg .navbar-collapse .navbar-nav .nav-link-icon {
    margin: 0;
  }

  /* デスクトップ折りたたみ時: 横長ロゴ → 正方形マークへ切替 */
  body.sidebar-collapsed .brand-wide { display: none; }
  body.sidebar-collapsed .brand-mark { display: inline-block; }

  /* デスクトップ折りたたみ時: 文脈ヘッダをラベル群 → 頭アイコンへ縮退(UI-ADR-008 §6)。
     ドロップダウンはアイコン(.context-header-toggle)から従来どおり開ける。 */
  body.sidebar-collapsed .context-header-body { display: none; }
  body.sidebar-collapsed .context-header-icon { display: inline-flex; }
  body.sidebar-collapsed .context-header-toggle { justify-content: center; }
  body.sidebar-collapsed .context-header { padding-left: 0; padding-right: 0; }
}

/* トグルアイコンの ☰/✕ 切替(全画面共通、D1)。
   既定(=折りたたみ/閉、sidebar-collapsed 付与)は ☰ のみ。
   展開時(sidebar-collapsed 無し)は ✕ に切替。デスクトップ/モバイル共通で「現在状態の反転」を表す。
   デスクトップ初期=展開のため初期表示は ✕(=「開いている、押すと畳む」)。 */
.icon-when-open { display: none; }
body:not(.sidebar-collapsed) .icon-when-closed { display: none; }
body:not(.sidebar-collapsed) .icon-when-open { display: inline-block; }

/* ── サイドバー開閉 — モバイル(spec-shell.md §5.2.2) ───────────
   左ドロワーではなく、ヘッダー直下へ全幅で開くインライン collapse 方式。
   状態は body.sidebar-collapsed の1つ(ADR-005、Bootstrap collapse 不使用)。
   注意: Tabler の縦型(column)レイアウトは @media(min-width:992px) 限定で、
   モバイルでは .navbar-vertical が既定の横型ナビ挙動に戻る。そのため本ブロックで
   縦積み・余白ゼロ・全幅を明示的に上書きする(横型由来の中央寄せ/余白が
   ロゴ非表示後にも「上下の空白」として残るのを防ぐ)。 */
@media (max-width: 991.98px) {
  /* トップヘッダーのみ最上部に固定(展開中も ☰ が常に見える)。
     子結合子 `.page-wrapper > .page-header` で _app_shell のトップヘッダー(直下)だけに限定する。
     各画面のページ見出し(management/_base.html 等、同じ .page-header クラスだが .page-body 内にネスト)
     には sticky/z-index を与えない。これを与えると見出しが z-index:1030 でメニュー(1029)より前に
     出てしまい、展開メニューに重なる(F2)。 */
  .page-wrapper > .page-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--tblr-body-bg, #f5f7fb);
    /* Tabler 既定 `.page-wrapper .page-header { margin: var(--tblr-page-padding-y) 0 0 }` の
       上マージンを打ち消し、トップヘッダーを viewport 上端にフラット化する。
       これが無いとスクロール前にヘッダーが余白分下にずれ、サイドバー基準(top:--app-header-h=
       ヘッダー高さ)と実ヘッダー位置がずれる(余白源は当該 margin-top 単独であることを確認済み) */
    margin-top: 0;
  }

  /* (☰/✕ 切替はメディアクエリ外=全画面共通へ移動した。D1) */

  /* aside 全体: ヘッダー直下に全幅で開くドロップダウン。
     セレクタは .navbar-vertical.navbar-expand-lg(特異性 0,2,0)で記述し、Tabler 既定
     (同名セレクタ。<992px では位置指定を持たないが、特異性負けを構造的に防ぐ)を上回る。
     --app-header-h は実ヘッダー高さ(JS で同期、フォールバック 3.5rem)。padding:0 で navbar 既定余白を消す */
  .navbar-vertical.navbar-expand-lg {
    position: fixed;
    top: var(--app-header-h, 3.5rem);
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    max-height: calc(100vh - var(--app-header-h, 3.5rem));
    overflow-y: auto;
    z-index: 1029;  /* sticky ヘッダー(1030)の直下 */
    /* 上 padding でドロップダウン上端(最初の nav-header の上)の余白を、下端(最後の nav-link の
       padding-bottom ≈0.5rem)と揃える。ul の pt-lg-3 はデスクトップ専用でモバイルでは効かないため。
       左右・下は 0(全幅フラット、下端余白は最後の nav-link の padding が担う) */
    padding: 0.5rem 0 0;
    /* 閉時は「自身の高さ + ヘッダー高さ」分だけ上へ退避し、下端を y=0(画面外上)まで上げる。
       translateY(-100%) だけだと下端がヘッダー下端(top 値)止まりで、項目が少ない時に下端が覗く */
    transform: translateY(calc(-100% - var(--app-header-h, 3.5rem)));
    transition: transform .2s ease-out;
  }
  body:not(.sidebar-collapsed) .navbar-vertical.navbar-expand-lg {
    transform: translateY(0);
  }

  /* 内側コンテナも縦積み・余白ゼロにし、横型 flex の中央寄せ/余白を打ち消す */
  .navbar-vertical.navbar-expand-lg > .container-fluid {
    display: block;
    padding: 0;
  }

  /* ロゴ行は完全非表示(スペースも残さない) */
  .navbar-vertical.navbar-expand-lg .navbar-brand {
    display: none;
  }

  /* ナビ本体は全幅・上端から縦に並べる */
  .navbar-vertical.navbar-expand-lg .navbar-collapse {
    display: block;
    flex-basis: auto;
  }
  .navbar-vertical.navbar-expand-lg .navbar-nav {
    flex-direction: column;
    width: 100%;
  }

  /* モバイルでは page-wrapper にサイドバー幅のマージンを与えない */
  .navbar-expand-lg.navbar-vertical ~ .page-wrapper {
    margin-left: 0;
  }
}