/* 全ページ共通の左サイドメニュー（管理画面のサイドバーと統一） */
.app-sidenav {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100vh;
  height: 100dvh;
  background: #1f4f5b;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 200;
  /* ホーム画面アプリ(standalone)でステータスバー/ノッチに被らないように */
  padding-top: env(safe-area-inset-top, 0px);
  /* 最下部(設定)が下端のホームバー等に隠れず最後までスクロールできるように */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.app-sidenav-head {
  padding: 16px 18px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.app-sidenav-list {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  flex: 1;
}
.app-sidenav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 14px;
  border-left: 3px solid transparent;
}
.app-sidenav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.app-sidenav-item.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-left-color: #ffc857;
  font-weight: 600;
}
.app-sidenav-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}
.app-sidenav-divider {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  padding: 14px 18px 4px;
  letter-spacing: 1px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 8px;
}

/* ページ本体をサイドバー分だけ右に寄せる */
body.has-sidenav { padding-left: 200px; }

/* モバイル用のハンバーガー + オーバーレイ */
.app-sidenav-toggle {
  display: none;
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: calc(env(safe-area-inset-left, 0px) + 8px);
  z-index: 202;
  background: #1f4f5b;
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 20px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  /* iOS Safariのfixed要素が再描画まで表示されない不具合対策（GPUレイヤーに固定） */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.app-sidenav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 199;
}
.app-sidenav-overlay.visible { display: block; }

@media (max-width: 900px) {
  /* ハンバーガー(☰)＋セーフエリア分だけ本文を下げて重なりを防ぐ */
  body.has-sidenav { padding-left: 0; padding-top: calc(env(safe-area-inset-top, 0px) + 50px); }
  .app-sidenav {
    left: -240px;
    width: 240px;
    transition: left 0.2s ease;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  }
  .app-sidenav.open { left: 0; }
  .app-sidenav-toggle { display: block; }
  /* ドロワーを開いたとき、ブランド名が☰に隠れないよう余白を確保 */
  .app-sidenav-head { padding-left: 56px; }
}

/* ホーム画面アプリ(standalone): セーフエリアが取得できない場合でも
   ☰がステータスバー/Dynamic Islandに隠れないよう最低限の余白を確保（モバイルのみ） */
@media (display-mode: standalone) and (max-width: 900px),
       (display-mode: fullscreen) and (max-width: 900px) {
  .app-sidenav-toggle { top: max(calc(env(safe-area-inset-top, 0px) + 8px), 52px); }
  body.has-sidenav { padding-top: max(calc(env(safe-area-inset-top, 0px) + 50px), 96px); }
  .app-sidenav { padding-top: max(env(safe-area-inset-top, 0px), 44px); }
}

@media print {
  .app-sidenav,
  .app-sidenav-toggle,
  .app-sidenav-overlay { display: none !important; }
  body.has-sidenav { padding-left: 0 !important; padding-top: 0 !important; }
}