/* =========================================================
   レイアウト

   方針（NFR-U-01）:
     PC   (>=1024px) … サイドバー固定 + 本文カラム
     中間 (600-1023) … サイドバーはドロワー、本文は広め
     スマホ(<600px)  … ドロワー + 1カラム、入力欄は画面下に固定

   ブレークポイントは 600px / 1024px の 2 つだけに絞る。
   増やすほど検証すべき組み合わせが増えるため。
   ========================================================= */

/* --- アプリ全体の骨格 --- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100dvh;
}

/* --- ヘッダ --- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  grid-column: 1 / -1;
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.app-header__inner {
  height: 100%;
  padding: 0 var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.logo {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  /* 幅が足りないときは右側の操作より先にロゴが縮む。
     min-width を 0 にしないと flex の自動最小サイズ（min-content）が効いて
     縮まず、ログアウトなどのボタンを画面外へ押し出してしまう。 */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spacer { flex: 1 1 auto; min-width: 0; }

/* --- サイドバー --- */
.sidebar {
  grid-row: 2;
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: var(--sp-4) var(--sp-3);
  overflow-y: auto;
  position: sticky;
  top: var(--header-h);
  height: calc(100dvh - var(--header-h));
}

.sidebar__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  text-transform: uppercase;
  padding: 0 var(--sp-3) var(--sp-2);
  margin: 0;
}

.board-nav {
  display: grid;
  gap: 2px;
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
}

.board-nav__link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 0.9375rem;
  min-height: 40px;
  word-break: break-word;
}

.board-nav__link:hover { background: var(--surface-2); }

.board-nav__link[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.board-nav__lock {
  font-size: 0.75rem;
  color: var(--text-faint);
  flex: none;
}

/* --- 本文カラム --- */
.main {
  grid-row: 2;
  min-width: 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-7);
}

.main__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* 中央寄せの単独カード（ログイン・参加画面） */
.centered {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--sp-6) var(--sp-4);
}

/* --- ドロワーの土台（スマホ・タブレット） ---
   .btn（components.css）も display を指定するため、詳細度で勝つよう
   親セレクタを添える。ここが同点だと後勝ちで .btn が効いてしまう。 */
.app-header__inner .drawer-toggle {
  display: none;
}

.scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 25;
  background: rgb(0 0 0 / 45%);
}

/* =========================================================
   タブレット以下（1023px 以下）: サイドバーをドロワーにする
   ========================================================= */
@media (max-width: 1023px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-header__inner .drawer-toggle {
    display: inline-flex;
  }

  .sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    z-index: 26;
    width: min(var(--sidebar-w), 82vw);
    height: calc(100dvh - var(--header-h));
    transform: translateX(-100%);
    transition: transform 0.18s ease-out;
    box-shadow: var(--shadow-2);
  }

  .app[data-drawer="open"] .sidebar {
    transform: translateX(0);
  }

  .app[data-drawer="open"] .scrim {
    display: block;
  }

  .main {
    padding: var(--sp-4) var(--sp-4) var(--sp-6);
  }
}

/* =========================================================
   スマホ（599px 以下）
   ========================================================= */
@media (max-width: 599px) {
  .main {
    padding: var(--sp-3) var(--sp-3) var(--sp-6);
  }

  /* ヘッダに並ぶものを 375px に収める（横スクロールを起こさない）。
     内訳: ☰40 + ロゴ + 🔔40 + ⚙40 + 🛠40 + ログアウト78 + 余白。
     gap を詰めないとロゴが潰れるため、ここだけ 1 段狭くする。
     アイコンの当たり判定 40px は変えない（指で押せる大きさを保つ）。 */
  .app-header__inner {
    padding: 0 var(--sp-2);
    gap: var(--sp-1);
  }

  /* 幅が足りないので、**別の場所で確認・操作できるものだけ**隠す。
       ・表示名とロール → 設定画面に出ている
       ・配色の切り替え → 端末（OS）のダークモード設定に自動で従う
     送信・ログアウトなど、ここでしか押せないものは隠さない。 */
  .app-header__inner .header-optional {
    display: none;
  }

  .centered {
    padding: var(--sp-4) var(--sp-3);
    align-items: stretch;
  }
}

/* =========================================================
   スレッド画面: 入力欄を画面下に固定する
   本文の下端に入力欄の高さぶんの余白を空け、最後の投稿が隠れないようにする
   ========================================================= */
.thread-view {
  padding-bottom: calc(var(--composer-h) + var(--sp-5));
}

.composer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3);
  box-shadow: var(--shadow-1);
}

@media (max-width: 1023px) {
  .composer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + var(--safe-bottom));
    box-shadow: 0 -2px 12px rgb(0 0 0 / 10%);
  }
}