/* ★★ここは `CLAUDE.md` §5（モックが画面レイアウトの正）の意図的な例外です★★
   （指示書AJ 段階2。D-120 / D-121 と同じ作法で記録してあります）。

   ★ユーザー指示の原文（2026-09-15）★:
     > サイドパネルはメインパネルとスクロールは独立させてください

   ★モックはこうなっている★: `d-watch-mock.jsx:426` が `minHeight: "100vh"`、
     `:429` のサイドバーは `position` 指定なし、`:468` の本文が `overflow: "auto"`。
     ★★モックにも同じ `overflow: "auto"` が、同じ理由で効かないまま置かれています★★ —
     `.shell` が `min-height` だと flex 子の `.main` が内容分まで伸び、
     `scrollHeight === clientHeight` になってスクロールコンテナにならないためです。
     実装はこれまでモックの1:1移植で、★今回が初めて意図的に外れる変更★です。

   ★★この注記を消さないこと★★ — 書いておかないと、次にモックと突き合わせた人が
     「モックと違う」と判断して `min-height` に戻します（そして画面では
     元に戻ったことに気づけません）。★`d-watch-mock.jsx` は1文字も書き換えていません★。

   ★`height: 100vh` を先に、`height: 100dvh` を後に書くこと（2段指定）★ —
     `100dvh` を知らないブラウザは後者を無視して前者が残ります。
     `dvh` はモバイルのURLバーが出入りしても画面外にはみ出さないための指定です。 */
.shell {
  display: flex;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  color: var(--tx);
}

.sidebar {
  width: 220px;
  background: var(--sf);
  border-right: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  /* ★サイドバー自身もスクロールさせる★（指示書AJ §5-4）—
     メニューは現在約591pxで、点検記録を戻すと約628px、総清掃面積の画面を足すと
     約665〜699pxになります。ノートPCのブラウザ内寸は600〜700pxなので、
     ★これが無いと下のメニューに手が届かなくなります★。 */
  overflow-y: auto;
}

/* ★ロゴ（1行目）とボタン2つ（2行目）を行で分ける★（2026-10-01 ユーザー指摘「EN と JP を切り替えると
   言語切替ボタンの位置が変わる」）。
   以前は3つを1つの flex に入れて `flex-wrap: wrap` で折り返していた。サイドバーの内寸（約187px）に
   3つは入らず、★サブタイトルの幅で折り返し位置が変わっていた★ —
   日本語「DFAロボット監視システム」ではテーマ切替が1行目に残って言語ボタンだけ2行目の左端（x=16）、
   英語「DFA Robot Monitoring System」ではテーマ切替も2行目に落ち、`space-between` で言語ボタンが
   右端（x=167）に跳んでいた（実測。ブラウザ、2026-10-01）。
   ★折り返しに任せず、ボタンの行を固定する★ので、言語を切り替えてもボタンは動かない。
   モック（`d-watch-mock.jsx`）は3つを1行に並べているが、同じ幅に入りきらない（はみ出す）ため従っていない。 */
.brand {
  padding: 20px 16px;
  border-bottom: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* ★言語ボタンを先に置く★ — 日本語表示で見えていた位置（左端）を、言語によらず保つため */
.brandActions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.brandLeft {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logoName {
  font-size: 16px;
  font-weight: 700;
  color: var(--pr);
}

.logoSub {
  font-size: 9px;
  /* ★行の高さを固定する★ — 既定の `normal` だと日本語と英語でフォントごとに高さが変わり、
     言語を切り替えるとその下のメニューが1px上下していた（実測 117px ↔ 116px。2026-10-01） */
  line-height: 13px;
  color: var(--tx-m);
  margin-top: 1px;
}

.iconBtn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--bd);
  background: var(--sf-h);
  cursor: pointer;
  font-size: 14px;
  color: var(--tx);
}

.langBtn {
  /* ★幅を固定する★ — 「EN」と「JP」で文字幅が違い、隣のテーマ切替が0.7px横にずれていた（2026-10-01） */
  width: 40px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 0;
  border-radius: 8px;
  border: 1px solid var(--bd);
  cursor: pointer;
  letter-spacing: 0.5px;
}

.nav {
  padding: 12px 8px;
  flex: 1;
}

.section {
  font-size: 10px;
  color: var(--tx-m);
  padding: 16px 12px 8px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.navItem {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
  color: var(--tx-d);
}

.navItem:hover {
  background: color-mix(in srgb, var(--pr) 8%, transparent);
}

.navItemActive {
  background: var(--pr-d);
  color: var(--pr);
}

.footer {
  padding: 12px 16px;
  border-top: 1px solid var(--bd);
  font-size: 11px;
  color: var(--tx-m);
}

.main {
  flex: 1;
  /* `.shell` を `height` にして初めてこれが効きます（それまでは書いてあっても無効でした） */
  overflow: auto;
  padding: 24px 32px;
}

/* ★★印刷の退避（指示書AJ §5-5）★★
   `.shell` を `height: 100vh` に固定すると、ブラウザの「印刷」で★1画面分しか出ません★。
   ★これを入れ忘れると、印刷したときに初めて気づきます — 画面では絶対に分かりません★。 */
@media print {
  .shell {
    height: auto;
  }

  .main {
    overflow: visible;
  }
}