/* ==============================================================
   Mobile Safe Area Support (2026-04-27 追加, T-007 Step A)

   iOS Safari / PWA フルスクリーン起動時に、ステータスバー
   (env(safe-area-inset-top)) がヘッダーに被る問題を解消する。

   全 MEIS アプリで <link rel="stylesheet" href="/css/mobile-safe.css">
   として読み込むこと。
   ============================================================== */

/* iOS PWA / Safari セーフエリア対応:
   ヘッダーの上部にステータスバー分のパディングを追加し、
   高さもその分だけ拡張する。

   全アプリのヘッダーは Cardis 標準の .app-header クラスに統一済 (Phase 5-2.5)。
   旧 hub-header クラス / クラスなし header は撤去。

   !important を付けている理由: 各アプリの <style> ブロックが
   <link rel="stylesheet" href="/css/mobile-safe.css"> の後に記述されるため、
   同一 specificity だとカスケード・オーダーで各アプリのスタイルが
   mobile-safe.css を上書きしてしまう。セーフエリア対応は
   フレームワークレベルの制約なので、!important で明示的に
   勝たせる。 */
.app-header,
body > header {
  padding-top: env(safe-area-inset-top, 0) !important;
  height: calc(52px + env(safe-area-inset-top, 0)) !important;
}

/* sticky なタブバーが正しく追従するように、top オフセットを補正。
   各アプリで .tabs / .app-nav / .tab-bar が sticky top: 52px の場合、
   このルールで自動的にステータスバー分が加算される。 */
.tabs,
.app-nav,
.tab-bar {
  top: calc(52px + env(safe-area-inset-top, 0)) !important;
}

/* feedback-bar (画面最下部固定) も、ホームバー領域 (iPhone X 以降) に
   被らないように下部 safe-area を考慮する。 */
.feedback-bar {
  padding-bottom: calc(7px + env(safe-area-inset-bottom, 0));
}

/* body の padding-bottom も同様に、フィードバックバーの実高さに合わせて調整。
   元のアプリで `padding-bottom: 52px` としているのを、env() ぶんだけ加算。 */
body {
  padding-bottom: calc(52px + env(safe-area-inset-bottom, 0));
}

/* 左右の safe-area (横向き iPhone X 等) は、padding ではなく
   各アプリの container がはみ出さないように max-width で対処されている前提。
   ここでは何もしない。 */

/* PWA フルスクリーン起動時の追加調整:
   apple-mobile-web-app-status-bar-style: black-translucent では
   コンテンツがステータスバーの下を通るため、上記の safe-area-inset-top
   が機能する。ブラウザ通常起動時は 0 が返されるため影響なし。 */

/* ==============================================================
   PWA フルスクリーン起動時の強制 padding (2026-04-29 追加, Phase 5-2.1)

   iOS Safari の PWA では apple-mobile-web-app-status-bar-style の
   値に関わらず、safe-area-inset-top が 0 を返すケースがあり、
   ヘッダーがステータスバー領域に被る。

   各 HTML の <head> 直後の小さな JS で PWA 起動を検知し
   <html class="is-pwa-fullscreen"> を付ける。
   このクラスが付いたときだけ固定値 47px の padding を入れる。
   通常の Safari ブラウザ起動には影響しない。

   47px は iPhone (X 以降) の標準ステータスバー高さ。
   iPhone SE 第 2 世代以前は 20px だが、47px でも違和感はないため
   一律で 47px を使用する。
   ============================================================== */

html.is-pwa-fullscreen body {
  padding-top: 47px;
}

/* sticky ヘッダーの top 基準も 47px ずらす。
   既存の `.app-header { position: sticky; top: 0; }` と組み合わさり、
   body 内 47px 下から sticky 開始 = ステータスバーの下にぴったり。 */
html.is-pwa-fullscreen .app-header,
html.is-pwa-fullscreen body > header {
  /* mobile-safe.css の env() 強制を打ち消し、固定値ベースに切り替え */
  padding-top: 0 !important;
  height: 52px !important;
}

/* sticky タブバーの top 補正も同様。47px (body padding) + 52px (header) = 99px */
html.is-pwa-fullscreen .tabs,
html.is-pwa-fullscreen .app-nav,
html.is-pwa-fullscreen .tab-bar {
  top: 52px !important;  /* body の padding-top: 47px が既に効いているので、ヘッダー高さ 52px だけ */
}

/* ==============================================================
   Phase 5-2.3 — CSS ネイティブの PWA 検知フォールバック (2026-04-29)

   Phase 5-2.1 の JS ベース検知 (is-pwa-fullscreen クラス) が
   iOS Safari の PWA で効かないケースへの保険。
   CSS 標準の @media (display-mode: standalone) で PWA 状態を
   ブラウザがネイティブに検知し、JS タイミングに依らず
   確実にルールを適用する。

   Phase 5-2.5 で全アプリのヘッダーを .app-header に統一したため、
   旧 hub-header 専用ルールは撤去 (HUB も .app-header クラスに移行済)。
   ============================================================== */
@media (display-mode: standalone) {
  body {
    padding-top: 47px !important;
  }
}
