/*
 * スマホ・タブレット表示改善の追加分（docs/superpowers/specs/2026-09-08-responsive-design.md）。
 * 公開レイアウト（layouts/public.blade.php）と管理レイアウト（layouts/admin.blade.php）の
 * 両方から読み込む。既存の common_new.css / style.css / Bootstrap は変更しない。
 */

/* ---- §1 タップ対象 44px（ガイドライン記載のスニペットそのまま） ----
   リンク規則は 2026-09-12 改訂の画面統一ガイドライン §8 に合わせて :not(.btn) に限定する
   （操作列がボタンになったため、.btn に line-height:44px が効くと見た目が崩れる）。 */
@media (max-width: 767.98px) {
  .btn, .btn-sm, .page-link { min-height: 44px; padding-top: .5rem; padding-bottom: .5rem; }
  .page-link { display: flex; align-items: center; }
  table .actions a:not(.btn), table td > a:not(.btn) { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 .5rem; }
}

/* 公開サイト独自の固定高ボタン（style.css）は Bootstrap の .btn ではないため上のルールの対象外。
   最大/最小幅は既存の見た目のまま、高さだけ44pxタップ対象に合わせる。 */
@media (max-width: 767.98px) {
  .bk-btn, .or-btn, .wh-btn { min-height: 44px; line-height: 44px; height: auto; }
}

/* Bootstrap の table-sm はスマホでは詰めすぎるので解除する（管理一覧向け。列は table-sm のまま） */
@media (max-width: 767.98px) {
  .table-sm > :not(caption) > * > * { padding: .5rem .5rem; }
}

/* ---- §3 一覧テーブル：横スクロール可 ----
   Bootstrap 未読込の公開サイトにも効くよう自前定義（admin では Bootstrap の同名クラスと重複するが無害）。 */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 先頭列（ID・型式など）を横スクロール中も固定表示する一覧向け */
.table-sticky-col thead th:first-child,
.table-sticky-col tbody th:first-child,
.table-sticky-col tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: #fff;
}

/* ---- §3 ページネーション：中央寄せ・スマホでコンパクトに ----
   Laravel の links() は Bootstrap 5 ビュー（Paginator::useBootstrapFive()）。 */
nav[role="pagination"] ul.pagination { justify-content: center; flex-wrap: wrap; }
@media (max-width: 767.98px) {
  nav[role="pagination"] .page-link { padding: .375rem .6rem; font-size: .8rem; }
}

/* ---- §4 検索フォームの折りたたみ（4条件以上・admin） ---- */
.collapse-toggle::after {
  content: "\25BE";
  display: inline-block;
  margin-left: .35em;
  transition: transform .15s ease;
}
.collapse-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
/* md 以上では常に展開（スマホのみ折りたたむ） */
@media (min-width: 768px) {
  .collapse-md-up:not(.show) { display: block; }
}

/* ---- §5 登録・編集フォーム：下部固定の操作バー ---- */

/* ---- §5 分割入力（郵便番号・電話・FAX 等）の幅。px でなく em で指定する ---- */
.field-w-sm { width: 4em; }
.field-w-md { width: 6em; }

/* ---- §6 詳細画面の項目リストをスマホで1カラムに（製品スペック詳細） ---- */
@media (max-width: 575.98px) {
  #item-view dl dt, #item-view dl dd { width: 100%; }
}

/* ---- §7 公開EC：画像・埋め込みのレスポンシブ対応 ---- */
.img-fluid { max-width: 100%; height: auto; display: block; }

/* TinyMCE 等で管理者が入力したリッチテキスト内の表・画像がスマホではみ出さないための防御的 CSS */
.comment, .article-content, .rich-content { max-width: 100%; }
.comment table, .article-content table, .rich-content table { display: block; overflow-x: auto; }
.comment img, .article-content img, .rich-content img { max-width: 100%; height: auto; }

/* 静的ページに埋め込む地図等の固定サイズ埋め込みをレスポンシブにする */
.map-embed { width: 100%; max-width: 800px; aspect-ratio: 4 / 3; border: 0; }

/* ================================================================
 * 2026-09-13 オーナー指摘の手直し（公開画面の 3 点）
 * 現行から逐語移植した common_new.css / style.css は編集せず、ここで上書きする。
 * ================================================================ */

/* ---- 指摘1: メッセージ（お見積りカゴに保存しました 等）が箱に見えない ----
   公開レイアウトは Bootstrap 非読込なので alert が効かない。partials/flash_public.blade.php で
   現行と同じ id を出すようにしたので、色・枠・アイコンは common_new.css の
   div#noticeMessage / div#errorMessage / div#authMessage がそのまま効く。
   ここでは配置（本文と同じ幅で中央）と複数件の一覧表示だけ整える。 */
/* 公開レイアウトのヘッダーは position:fixed（style.css）。レイアウト直下に出すメッセージは
   そのままだとヘッダーの裏に隠れて「メッセージが出ない」ように見えるので、ヘッダーの高さぶん下げる。
   高さは画面幅で変わる（実測: ~600px 未満 105px / 600-959px 95px / 960px 以上 130px）。
   ビュー内で @include したページ（お問い合わせ等）はヘッダーの下なので .flash-area は付けない。 */
.flash-area { padding-top: 115px; }
@media (min-width: 600px) { .flash-area { padding-top: 105px; } }
@media (min-width: 960px) { .flash-area { padding-top: 140px; } }

#noticeMessage,
#errorMessage,
#authMessage {
  box-sizing: border-box;
  width: 90%;
  max-width: 1070px; /* .content_inner と同じ */
  margin: 1.5em auto;
  padding-top: .6em;
  padding-bottom: .6em;
  line-height: 1.6;
}
#noticeMessage ul,
#errorMessage ul,
#authMessage ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#noticeMessage ul li,
#errorMessage ul li,
#authMessage ul li { margin: .25em 0; }

/* ---- 指摘2: 「条件をクリア」ボタンの形がおかしい ----
   .wh-btn / .bk-btn は現行では <a>（display:block）に付けていたので親幅いっぱい→max-width まで
   広がっていた。<button> は中身なりに縮むため、文字がはみ出した細長い楕円になっていた。 */
button.wh-btn,
button.bk-btn,
button.or-btn { width: 100%; }

/* 検索フォームでは「検索」と「条件をクリア」を同じ大きさ・中央揃えでそろえる
   （60px の大きな丸ボタンのままだと 36px の検索ボタンと並んで不自然になるため）。 */
.item-search-form .bk-btn,
.item-search-form .wh-btn {
  max-width: 296px;
  margin-left: auto;
  margin-right: auto;
}
.item-search-form .bk-btn { margin-bottom: 1em; }
.item-search-form .wh-btn {
  height: 36px;
  line-height: 36px;
  font-size: 1.5rem;
  border-radius: 18px;
  margin-top: 0;
  margin-bottom: 2em;
}
/* 「条件をクリア」は遷移しないので、.wh-btn の右端の矢印風の線は消す */
.item-search-form .wh-btn::after { content: none; }

/* スマホでは §1 の 44px タップ対象を維持する（上の 36px 指定より詳細度が高い形で再指定） */
@media (max-width: 767.98px) {
  .item-search-form .bk-btn,
  .item-search-form .wh-btn {
    box-sizing: border-box; /* 枠線ぶん「条件をクリア」だけ高くならないように */
    min-height: 44px;
    line-height: 44px;
    height: auto;
  }
}

/* ---- 指摘3: チェックボックス・ラジオが小さすぎる ----
   公開画面（body.public-site）だけを対象にする。管理画面の Bootstrap .form-check-input は触らない。
   このサイトは html { font-size: 62.5% }（1rem = 10px）なので、rem ではなく px で指定する。 */
body.public-site input[type="checkbox"],
body.public-site input[type="radio"] {
  font-size: 1.6rem; /* 16px。既定の 13px のままだと em 指定が効かない */
  width: 1.25em;     /* = 20px。固定 px を増やさないよう em で持つ */
  height: 1.25em;
  margin: 0 .5em 0 0;
  vertical-align: -.3em;
  accent-color: #c73e14; /* サイトの警告色・アクセント色に合わせる */
  cursor: pointer;
}
body.public-site input[type="checkbox"] + label,
body.public-site input[type="radio"] + label,
body.public-site label > input[type="checkbox"],
body.public-site label > input[type="radio"] { cursor: pointer; }
body.public-site .check-box > div,
body.public-site .contact-form dd.input_radio label {
  display: inline-flex;
  align-items: center;
  margin-right: 1.2em;
  line-height: 1.8;
}

/* 会員登録フォームのチェックボックスは style.css で 40px + 画像（../images/checkbox@2x.png）指定だが、
   その画像は現行から移設されておらず 404 になるため、他の公開画面と同じ見た目にそろえる。 */
body.public-site #UserRegisterForm dl dd input[type="checkbox"],
body.public-site #CustomerRegisterForm dl dd input[type="checkbox"] {
  width: 1.5em;  /* = 24px */
  height: 1.5em;
  background: none;
  vertical-align: middle;
}

/* お問い合わせ・サプライヤー募集の #contact フォームは
   style.css の「#contact .contact-form dl dd input { width:100% }」を打ち消すために
   ビュー側で width:auto/height:auto を当てている。そちらより詳細度を上げて拡大する。 */
body.public-site #contact .contact-form dl dd.input_radio input[type="radio"],
body.public-site #contact .contact-form dl dd.input_radio input[type="checkbox"],
body.public-site #contact .contact-form dl dd input[type="checkbox"] {
  width: 1.25em;  /* = 20px */
  height: 1.25em;
}
@media (max-width: 767.98px) {
  body.public-site #contact .contact-form dl dd.input_radio input[type="radio"],
  body.public-site #contact .contact-form dl dd.input_radio input[type="checkbox"],
  body.public-site #contact .contact-form dl dd input[type="checkbox"] {
    width: 1.5em;  /* = 24px */
    height: 1.5em;
  }
}

/* スマホでは 44px のタップ領域を確保する（見た目の四角は 20px のまま、余白で稼ぐ） */
@media (max-width: 767.98px) {
  body.public-site input[type="checkbox"],
  body.public-site input[type="radio"] {
    width: 1.5em;  /* = 24px */
    height: 1.5em;
    margin: .5em .5em .5em 0;
  }
  body.public-site .check-box > div,
  body.public-site .contact-form dd.input_radio label { min-height: 44px; }
}

/* ---- チェックボックス・ラジオの文字を大きく（オーナー指摘 2026-09-13） ----
   このサイトは html { font-size: 62.5% }（1rem = 10px）。1.8rem = 18px 相当。
   四角の大きさは input 側が自前の font-size（1.6rem）を持っているので変わらない。 */
body.public-site .check-box label,
body.public-site .check-box > div,
body.public-site #contact .contact-form dl dd.input_radio label,
body.public-site #UserRegisterForm dl dd label,
body.public-site #CustomerRegisterForm dl dd label,
#wrapper .check-box label,
#wrapper .check-box > div {
  font-size: 1.8rem;
}

/* ---- 操作列のボタンを現行と同じ見た目にする（オーナー指摘 2026-09-13） ----
   現行は td.actions の中がリンク（a）で、style.css の
   「#login-list table td.actions a { background:#000; color:#fff }」が効いて黒いボタンに見えていた。
   移行版は CSRF 対策のため form + button にしたので、同じ見た目を button にも当てる。 */
#login-list table td.actions button,
#login-list table td.actions .link-button,
#item-detail-list-all td.actions button {
  display: inline-block;
  background-color: #000;
  color: #fff;
  border: 0;
  padding: 0.5em 1em;
  font: inherit;
  cursor: pointer;
}
#login-list table td.actions button:hover,
#item-detail-list-all td.actions button:hover { opacity: .85; }
#login-list table td.actions form { display: inline; margin-right: .4em; }

/* 入力エラーの赤い帯（「必須項目です」など）: 文字が帯の左端に貼り付いていたので内側に余白（オーナー指摘 2026-09-26） */
div.error-message {
  padding: 0.4em 0.8em;
}