/* ==========================================================================
   モバイル最適化スタイル (SNS管理ツール ユーザー画面)
   Bootstrap 5.0.2 をベースに、スマホでの操作性を補強する。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. iOS のフォーム自動ズーム防止
   input/select/textarea のフォントを 16px 未満にするとフォーカス時に
   iOS Safari が自動ズームしてしまうため 16px を担保する。
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .form-control,
    .form-select,
    .input-group-text,
    textarea,
    select,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="url"],
    input[type="tel"],
    input[type="search"] {
        font-size: 16px !important;
    }
}

/* --------------------------------------------------------------------------
   2. タッチターゲットの確保
   ボタン・ナビ項目・ドロップダウン項目を指で押しやすいサイズにする。
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* 幅が詰まった際に文字が1文字ずつ縦に折り返されるのを防ぐ */
        white-space: nowrap;
    }

    /* アイコンのみ・極小ボタンは最小サイズ指定を緩める */
    .btn.btn-sm {
        min-height: 38px;
    }

    .list-group-item-action,
    .dropdown-item,
    .nav-link {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }
}

/* --------------------------------------------------------------------------
   3. オフキャンバスのサイドメニュー
   スマホではハンバーガーから引き出すメニューとして使用する。
   -------------------------------------------------------------------------- */
#sidebarOffcanvas {
    max-width: 82vw;
    width: 280px;
}

#sidebarOffcanvas .list-group-item {
    border-radius: 0;
}

/* --------------------------------------------------------------------------
   3-2. ナビバー右上のアカウントメニュー
   スマホ幅では Bootstrap が dropdown-menu を static 配置にするため、
   ナビバーが縦に伸びないよう右上からのフロート表示に戻す。
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .navbar .nav-item.dropdown {
        position: relative;
    }

    .navbar .navbar-nav .dropdown-menu {
        position: absolute;
        right: 0;
        left: auto;
    }
}

/* --------------------------------------------------------------------------
   4. テーブルの横スクロール（.table-responsive の保険）
   個別に .table-responsive を付け忘れても崩れにくいよう、狭い画面では
   カード内テーブルに横スクロールの余地を持たせる。
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .table {
        font-size: 0.875rem;
    }

    /* 折り返しで潰れやすいセルの最低幅を確保しつつ、はみ出しはスクロールで吸収 */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    /* 列が圧縮されて文字が1文字ずつ縦に折り返されるのを防ぎ、横スクロールに逃がす */
    .table-responsive .table {
        min-width: 640px;
    }

    .table-responsive .table th {
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------------------
   5. ページ見出し・操作ボタン列の折り返し
   「見出し + 右側にボタン群」のヘッダーがスマホで重ならないようにする。
   h1/h2 見出しを含む justify-content-between ヘッダーへ自動適用し、
   :has() 非対応ブラウザ向けに .page-header-actions でも同じ挙動にできる。
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .page-header-actions,
    .d-flex.justify-content-between:has(h1, h2, .h1, .h2) {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    /* 2列目以降（ボタン群）を横並び・折り返し可能に */
    .page-header-actions > div:not(:first-child),
    .page-header-actions > .btn-group,
    .d-flex.justify-content-between:has(h1, h2, .h1, .h2) > div:not(:first-child),
    .d-flex.justify-content-between:has(h1, h2, .h1, .h2) > .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* ボタンを幅いっぱいに均等配置 */
    .page-header-actions .btn,
    .d-flex.justify-content-between:has(h1, h2, .h1, .h2) .btn {
        flex: 1 1 auto;
    }

    /* btn-group 内の form（削除ボタン等）も同じ幅で並べる */
    .page-header-actions .btn-group form,
    .d-flex.justify-content-between:has(h1, h2, .h1, .h2) .btn-group form {
        display: flex;
        flex: 1 1 auto;
    }

    .page-header-actions .btn-group form .btn,
    .d-flex.justify-content-between:has(h1, h2, .h1, .h2) .btn-group form .btn {
        width: 100%;
    }

    /* btn-group を解体して並べるため角丸を復元 */
    .page-header-actions .btn-group .btn,
    .d-flex.justify-content-between:has(h1, h2, .h1, .h2) .btn-group .btn {
        border-radius: 0.25rem;
    }

    /* カードヘッダー（見出し + ボタン）は見出しを潰さず折り返す */
    .card-header.d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* カード本文の「説明文 + ボタン」も同様に折り返す */
    .card-body.d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    /* 見出しのフォントを少し抑える */
    h1,
    .h1 {
        font-size: 1.5rem;
    }

    h1.h3 {
        font-size: 1.35rem;
    }
}

/* --------------------------------------------------------------------------
   6. カード・余白の詰め（スマホで縦の情報密度を上げる）
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    main.container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .card-body {
        padding: 1rem;
    }

    /* Bootstrap の .row.g-3 内カラムがスマホで詰まりすぎないよう最低余白 */
    .my-4 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
}

/* --------------------------------------------------------------------------
   7. ボタングループ（BtnGroup）の折り返し許可
   一覧の行内アクションなどが画面幅を超えないように。
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .btn-group.flex-wrap-sp {
        flex-wrap: wrap;
    }
}