/*
 * CMS スマホ対応 CSS
 * PC / タブレット横 (768px 以上) には一切影響させないため、
 * .login-box (login.php のインラインスタイル移植) 以外のルールは
 * すべて max-width: 767.98px のメディアクエリ内に閉じる。
 */

/* login.php のインラインスタイル style="margin:100px; max-width:400px" の等価移植
 * (左右マージンは従来から .mx-auto の !important が勝っており実効値は auto) */
.login-box {
  margin-top: 100px;
  margin-bottom: 100px;
  max-width: 400px;
}

@media (max-width: 767.98px) {

  /* ---- 一覧テーブル: 横スクロール化 ----
   * .table-mobile-scroll は bordered でも縦積みしたくないデータテーブル用
   * (user/detail.php の顧客評価テーブル等) */
  #table_list,
  table.table-mobile-scroll {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* セル内の縦折返し（1文字ずつの改行）を防ぎ、列幅を保ったまま横スクロールさせる */
  #table_list th,
  #table_list td,
  table.table-mobile-scroll th,
  table.table-mobile-scroll td {
    white-space: nowrap;
  }

  /* ---- 検索・編集フォームテーブル: 縦積み変換 ----
   * ラベルセル(td.table-active)の下に入力セルが来る形に積み替える */
  table.table-sm.table-bordered:not(.table-mobile-scroll),
  table.table-sm.table-bordered:not(.table-mobile-scroll) > tbody,
  table.table-sm.table-bordered:not(.table-mobile-scroll) > tbody > tr,
  table.table-sm.table-bordered:not(.table-mobile-scroll) > tbody > tr > td {
    display: block;
    width: 100% !important; /* インライン style="width:10%" 等を打ち消す */
  }
  /* 縦積みで二重になる罫線を整理: ラベルセルを区切りとして上に間隔を空ける */
  table.table-sm.table-bordered:not(.table-mobile-scroll) > tbody > tr {
    border: 0;
  }
  table.table-sm.table-bordered:not(.table-mobile-scroll) > tbody > tr > td {
    border: 1px solid #dee2e6;
    border-top: 0;
  }
  table.table-sm.table-bordered:not(.table-mobile-scroll) > tbody > tr > td.table-active {
    border-top: 1px solid #dee2e6;
    margin-top: .5rem;
    font-weight: bold;
  }
  table.table-sm.table-bordered:not(.table-mobile-scroll) > tbody > tr:first-child > td.table-active:first-child {
    margin-top: 0;
  }

  /* ---- 固定幅コンテナの吸収 (style="width:600px" 等 約35箇所) ---- */
  div[style*="width"],
  table[style*="width"] {
    max-width: 100% !important;
  }

  /* ---- 期間・範囲入力: from/to を縦積みに ---- */
  .form-inline > .col-5,
  .form-inline > .input-group.col-5,
  .form-inline > .datetimepicker-input.col-5 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .form-inline > .col-2 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: left !important;
    padding: .25rem 0;
  }

  /* ---- ページネーション: 折返し許可 ---- */
  .pagination {
    flex-wrap: wrap;
  }

  /* ---- navbar ブランド名 ----
   * fixed-top の navbar は高さが変わると本文と被るため、ブランドは折り返さず
   * 1 行で省略記号 (…) 表示にして高さを一定に保つ。
   * flex-basis:0 でトグラーを常に同じ行の右端に固定する */
  .navbar-brand {
    font-size: .9rem;
    flex: 1 1 0;
    min-width: 0;
    margin-right: .5rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---- ログイン画面 ----
   * fixed-top の navbar (高さ約56px) に隠れないよう上マージンを確保する */
  .login-box {
    margin-top: 72px;
    margin-bottom: 32px;
  }
}