/* =========================================================================
 * mobile.css — スマートフォン (狭幅画面) 向けのレイアウト微調整
 *
 * 設計方針:
 *   - 狭幅 (max-width: 768px) でのみ適用される増分CSS。 PC表示には影響しない
 *   - site.css の Bootstrap + 独自スタイルの上に追加で当てる
 *   - サイドバー・ハンバーガーメニュー・viewport は既存実装を踏襲
 *
 * 主な改善:
 *   - タップターゲットを 44px以上 に拡大 (Apple HIG 推奨)
 *   - テーブルの横スクロール許可 + フォント縮小で情報密度確保
 *   - グリッド (.row .col-md-X) の自動1カラム化は Bootstrap が担うので不要
 *   - 余白を詰めて表示領域を確保
 *   - 長文セル・コードの折り返し
 * ========================================================================= */

/* スマホ向け (~768px、 iPhone Plus サイズ程度まで) */
@media (max-width: 768px) {

    /* ===== 全体: 余白を詰めて表示領域を稼ぐ ===== */
    .app-main {
        padding: 12px !important;
    }
    h3, .h3 { font-size: 1.25rem; }
    h4, .h4 { font-size: 1.1rem; }
    h5, .h5 { font-size: 1.05rem; }

    /* ===== トップバー: ユーザー名は長すぎるので短縮 ===== */
    .app-topbar {
        font-size: 0.9rem;
    }
    /* メールアドレスなどの長いユーザー名は省略表記する。
       「ログアウト」ボタンが画面外に追い出される対策。 */
    .app-topbar .user-name,
    .app-topbar .navbar-text {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: middle;
    }

    /* ===== カード: マージンを詰める ===== */
    .card {
        margin-bottom: 0.75rem !important;
    }
    .card-header {
        padding: 0.5rem 0.75rem;
        font-size: 0.95rem;
    }
    .card-body {
        padding: 0.75rem;
    }

    /* ===== タップターゲット拡大 (44pxの目安) ===== */
    /* Bootstrap デフォは btn ≈ 38px。 モバイルでは指でも誤タップしないように拡大 */
    .btn {
        min-height: 40px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .btn-sm {
        min-height: 36px;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }
    /* 入力欄も同様に大きく */
    .form-control, .form-select {
        min-height: 40px;
        font-size: 16px;  /* iOS Safari で 16px 未満だとフォーカス時に自動ズームされるのを防ぐ */
    }
    /* チェックボックス・ラジオは Bootstrap の .form-check 内では小さいので、 タップ範囲を確保 */
    .form-check-input {
        width: 1.25em;
        height: 1.25em;
        margin-top: 0.2em;
    }

    /* ===== テーブル: 横スクロール許可 =====
       生の <table> が画面外にはみ出る対策。
       table 自体に display:block をかけると width 計算が狂って横にハミ出るケースがあるため、
       「親」を スクロールコンテナにする方式に変更。
       Bootstrap の .table-responsive と同じ振る舞いになる。 */
    .card-body {
        /* テーブルを含むカード本体は横スクロール可能に */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* テーブル自体は通常レイアウトのまま (display: table を維持) */
    .table {
        font-size: 0.85rem;
    }
    .table > :not(caption) > * > * {
        padding: 0.4rem 0.5rem;
    }
    /* セル中の <code> 要素は長い ID が入りがち。 折り返しを許可 */
    .table code,
    .table .font-monospace {
        word-break: break-all;
        white-space: normal;
    }

    /* ===== サイドバー / トップバー の z-index =====
       Bootstrap の Modal は z-index 1055、 Modal Backdrop は 1050 を使用する。
       モーダルが「Bootstrap モーダル」を覆い隠さないように、 サイドバー類は
       それより下の値 (1030 台) に配置する。
       階層順 (上から):
           Bootstrap Modal       (1055, Bootstrapデフォルト)
           Bootstrap Backdrop    (1050)
           app-topbar            (1035)
           app-sidebar           (1030)
           sidebar-overlay       (1025)
       sidebar-open 時はメインコンテンツを relative + z-index 0 で背景に押し込む。 */
    .app-topbar { z-index: 1035 !important; }
    .app-sidebar { z-index: 1030 !important; }
    .sidebar-overlay { z-index: 1025 !important; }
    body.sidebar-open .app-main { position: relative; z-index: 0; }

    /* ===== サイドバーが開いたとき: メイン領域は背後にあるだけなので余白は減らさない ===== */
    /* (overlay でカバーされるためタップ無効。 PC とは挙動が違うので、 ここでは何もしない) */

    /* ===== ホーム画面のサマリーカード (検針取得状況): 3カラムを縦に並べる ===== */
    /* Bootstrap の .col-4 は維持して横3つだが、 数字を大きく見せるためフォント調整 */
    .card-body .row.text-center .fs-3 {
        font-size: 1.5rem !important;
    }

    /* ===== ダッシュボード等のチャート: 高さ制限 ===== */
    /* Chart.js の canvas は親要素のサイズに追従するので、 親に max-height を当てる */
    .chart-container,
    .card-body canvas {
        max-height: 280px !important;
    }

    /* ===== お知らせ画面・テキスト多めの画面: 行間を広げて読みやすく ===== */
    p, li, dd {
        line-height: 1.55;
    }

    /* ===== 進捗バーの数値表示: 大きく見せる ===== */
    .progress {
        height: 1.25rem;
    }

    /* ===== モーダル: 全画面に近づける ===== */
    /* Bootstrap デフォはモバイルで全幅だが、 マージン残しを完全に消す */
    .modal-dialog {
        margin: 0.5rem;
    }
    .modal-body {
        max-height: calc(100vh - 180px);
        overflow-y: auto;
    }

    /* ===== モバイルでは見づらい長い ID 表示の折り返し ===== */
    .font-monospace, code {
        word-break: break-all;
    }

    /* ===== 一括ポーリング・周期ポーリングなどの 2カラム実行制御UIを 1カラム化 ===== */
    /* CSV アップロード + ジョブ制御 + 進捗 が左右並びだったのを縦積みに */
    .col-lg-4, .col-md-4 {
        margin-bottom: 0.5rem;
    }

    /* ===== フォーム ボタン群: ラップ許可 ===== */
    /* 「保存」「キャンセル」「削除」 等の横並びボタンが画面外に押し出されないように */
    .card-footer > .btn,
    .card-body > .btn-toolbar > .btn-group {
        margin-bottom: 0.25rem;
    }

    /* ===== ログ表示 (黒背景の console 風) を狭幅でも横スクロール可能に ===== */
    pre, .log-console {
        font-size: 0.78rem;
        max-height: 240px;
    }
}

/* 極狭幅 (iPhone SE 320~375px 程度) のさらなる詰め */
@media (max-width: 480px) {
    .app-main {
        padding: 8px !important;
    }
    .card-body {
        padding: 0.6rem;
    }
    .table {
        font-size: 0.78rem;
    }
    /* トップバーのユーザー名表示はさらに短く */
    .app-topbar .user-name,
    .app-topbar .navbar-text {
        max-width: 90px;
    }
    /* 「ログアウト」 ボタンは画面右端でアイコン化するのが理想だが、
       表記はそのままにして余白を最小化 */
    .app-topbar .btn {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}