table {
  width: 90%;
}
th, td {
  padding: 5px;
}
.checkbox label, .radio label {
  margin-top: 0;
  /* 後述の`form label { min-width: 80px; margin-bottom: 15px; }`は単独の
     <label for="...">向けだが、CakePHP5のForm->control()がcheckbox/radioを
     <label><input>テキスト</label>という入れ子構造で出力するため、詳細度の
     関係でこのmin-width/margin-bottomがcheckbox内のlabelにも適用され、
     ラベルとチェックボックスが重なって表示されていた
     (garbageフォームの「ごみ種類」でユーザーが実機で報告、2026-07-27)。 */
  min-width: 0;
  margin-bottom: 0;
}
.form-login {
    max-width: 330px;
    padding: 15px;
    margin: 0px auto;
}
.checkbox-inline input[type="checkbox"], .radio input[type="radio"], .radio-inline input[type="radio"] {
  margin-left: 0;
}
/* Bootstrap3標準の.checkboxは<label><input>テキスト</label>という入れ子構造を
   前提に、label{padding-left:20px}・input{position:absolute;margin-left:-20px}
   でinputをlabelのpadding分のスペースに収める。旧CakePHP2はlabel/inputが別要素の
   構造だったため、ここで一律margin-left:0に上書きしても問題なかったが、
   CakePHP5のForm->control()が入れ子構造で出力するようになった結果、
   ネガティブマージンが消えてinputがテキストの位置まで移動し重なって表示されて
   いた(garbageフォームの「ごみ種類」でユーザーが実機で報告、2026-07-27)。
   .checkboxはBootstrap標準のmargin-left:-20pxのままにする。 */
form label {
  min-width: 80px;
  margin-bottom: 15px;
  margin-top: 15px;
}

.btn-block {
  margin-top: 15px;
}

span.dusttype,
span.hpwashplace,
span.checksheetname,
span.carnumber,
span.state {
	border: 1px solid #ccc;
	display: inline-block;
  padding: 0 5px;
  border-radius: 3px;
}

body {
  font-family: 'Lucida Grande',
 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
 Meiryo, メイリオ, sans-serif;
}

tr.altrow {
	background-color: rgba(0, 0, 0, 0.04);
}

.template {
	display: none;
}
/* 品名の候補選択(item_id)の幅は、下の「売上の明細入力表」の項でまとめて指定する */

.submit {
  margin-top: 20px;
}

/* ------------------------------------------------------------------
 * jQuery Mobile構造のAdminテーマ用アダプタ
 *
 * templates/配下の共通テンプレート(Actions/form.php と element/forms/*.php)は
 * Mobileを主用途に書かれており、data-role属性とui-*クラスで構造を表現している。
 * data-roleはjQuery MobileのJSがウィジェットを組み立てるためのフックで、外すと
 * Mobileの折りたたみ・選択肢グループが機能ごと失われるため共通側には残してある。
 *
 * AdminテーマはjQuery MobileのCSS/JSを読み込まないため、これらは未解釈のまま
 * 素のul/li/fieldsetとして描画される。ここでBootstrap相当の見た目へ読み替える。
 * テンプレートは共通のまま変更しない。
 *
 * webapps(CakePHP2)側の同名ファイルからの移植だが、CakePHPのバージョン差で
 * radio/checkboxの出力構造が異なるため、選択肢まわりは書き直してある(後述)。
 * ------------------------------------------------------------------ */

/* listview: ブラウザ既定の箇条書き(・/○)を解除する */
ul[data-role="listview"] {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
ul[data-role="listview"] > li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
ul[data-role="listview"] > li:last-child {
  border-bottom: 0;
}
/* 入れ子のlistview(点検項目の明細)は一段下げて親子関係を示す */
ul[data-role="listview"] ul[data-role="listview"] {
  padding-left: 15px;
}

/* collapsible: AdminではJSが無く常時展開になるため、見出しをパネル風にして区切りを出す */
[data-role="collapsible"] > h2,
[data-role="collapsible"] > h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px;
  padding: 8px 12px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 3px;
}

/* 選択肢グループの見出し(div。labelではないので form label の指定は効かない) */
.ui-controlgroup-label {
  font-weight: 700;
  margin-bottom: 6px;
}

/* controlgroup。上の `form label` が min-width:80px と上下15pxマージンを持つため、
   打ち消さないと選択肢が間延びして折り返す */
fieldset[data-role="controlgroup"] {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

/* --- radio ---
   CakePHP5のForm->control()は <label><input type="radio">テキスト</label> と
   labelがinputを内包する形で出力する(webapps/CakePHP2はinputとlabelが兄弟だった
   ため、あちらではinputをfloatさせて行頭を作っている。ここではその必要がない)。
   点検票は 'radioContainer' => '{{content}}' でコンテナを外しているので、
   labelがfieldsetの直下に並ぶ。縦積みはlabelをブロックにするだけでよい */
fieldset[data-role="controlgroup"] > label {
  display: inline-block;
  min-width: 0;
  margin: 0 18px 4px 0;
  font-weight: normal;
  /* bodyのfont-familyは'Lucida Grande'が先頭にあり、このフォントは「○」(U+25CB)の
     グリフを0.58em相当の小さな記号として持っている。そのため和文フォントへ
     フォールバックせず小さく描画されるので、選択肢ラベルだけ和文を優先する
     (和文フォントでは○が1.00em)。なお点検票の「×」はU+00D7(乗算記号)で
     和文フォントでもラテン文字幅(約0.66em)のため○より小さめに出るが、
     一覧・帳票側(HtmHelper::checkpoint())の表示および保存値と揃えるためこの文字を使う */
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}
/* data-type未指定(jQM既定=縦)とverticalは1行1選択肢にする */
fieldset[data-role="controlgroup"]:not([data-type="horizontal"]) > label {
  display: block;
}
fieldset[data-role="controlgroup"] > label input[type="radio"] {
  margin: 0 4px 0 0;
  vertical-align: middle;
}

/* --- checkbox('multiple' => 'checkbox') ---
   選択肢ごとにBootstrapの.checkboxで包まれ、中身も<label><input>テキスト</label>と
   Bootstrapが前提とする入れ子構造になっている。位置決めはBootstrapに任せられるので
   (上の2026-07-27の対応でmargin-left:-20pxを活かしてある)、ここでは並びだけ整える。
   既定では1選択肢1行になるが、ごみ種類のように短い選択肢が8個並ぶと縦に長すぎるため
   折り返しありの横並びにする */
fieldset[data-role="controlgroup"] .checkbox,
fieldset[data-role="controlgroup"] .radio {
  display: inline-block;
  margin: 0 20px 8px 0;
  vertical-align: top;
}

/* 入力欄1つ分のまとまり(jQMのui-field-containに相当) */
.ui-field-contain {
  margin-bottom: 12px;
}

/* 点検票の備考欄(.note)にある候補選択(field_note01)
   選ぶと直下のテキスト欄(field_note02)へ値がコピーされる入力補助で、選んだ文言は
   テキスト欄側に出る。form-controlのwidth:100%のままだと同じ文字列が2行続けて
   見え、どちらが入力値か紛らわしい。矢印だけが見える幅に縮めてボタン扱いにする
   (jQMでは data-inline="true" + data-mini="true" が同じ役割を担っている) */
.note select {
  display: inline-block;
  width: 2.5em;
  padding-left: 4px;
  padding-right: 0;
  margin-bottom: 4px;
}

/* 売上の明細入力表(#sales / #slips)
   form-controlは display:block; width:100% のため、1セルに複数の入力欄が入る行
   (品名+候補選択、単価+数量+金額)で各欄が別々の行へ落ちてしまう。行内に並べ直す。
   対象を#sales/#slipsに絞っているのは、入金表(#receipts)は1セルに
   10%対象/8%対象/非課税対象の3欄を「縦に積む」意図で並べており、
   そちらまで横並びにすると2つ目で折り返して桁が揃わなくなるため */
#sales .form-control,
#slips .form-control {
  display: inline-block;
  width: auto;
  max-width: 100%;
  vertical-align: middle;
}
/* 品名(item_name)と、その右に置く候補選択(item_id)。
   選択肢は「01010 グリストラップ管理費」のようにコード+品名で、上の width:auto の
   ままだと最長の選択肢に合わせて広がり、品名欄と並びきらず改行してしまう。
   選択に使うのは先頭のコード部なので、コードと矢印が見える幅に固定して横に並べる */
#sales select.item_id,
#slips select.item_id {
  width: 7em;
  margin-left: 6px;
}
#sales input.item_name,
#slips input.item_name {
  width: calc(100% - 8em);
}
/* number入力はブラウザのスピナーが幅を食う。数量セルは td 側が width:3em のため、
   そのままではスピナーだけが見える状態になるので最低幅を確保する
   (tdのwidthは指定値でなく最小指定として働くのでセル側は自動的に広がる) */
#sales input[type="number"].form-control,
#slips input[type="number"].form-control {
  min-width: 5em;
}

/* jQM用のボタン記法のうち、Bootstrapのbtnが併記されていないものだけ最低限整える
   (ui-btn-icon-notextはjQM上ではアイコンのみ表示だが、Adminでは文字が出るのでそのまま活かす) */
a.ui-btn:not(.btn) {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  color: #333;
  text-decoration: none;
}