/* ============================================================
   貸与品_STAFF.css
   プロフィール画面「貸与制服・貸与品／車出し／本人確認」専用の追加スタイル（第6試作）
   ・色は theme_STAFF.css の変数だけを使う
   ・styles_STAFF.css・マニュアル_STAFF.css は変更しない
   ============================================================ */

/* ---------- 小見出し（件数つき） ---------- */

.貸与見出し{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:13px;
  color:var(--色-強調);
  margin:10px 0 6px;
  padding-left:8px;
  border-left:3px solid var(--色-アクセント);
}
.貸与見出し:first-child{ margin-top:0; }
.貸与件数{ font-size:12px; color:var(--色-文字薄); }

/* ---------- 貸与品の一覧 ---------- */

.貸与一覧{ list-style:none; margin:0; padding:0; }
.貸与品{
  border:1px solid var(--色-罫線);
  border-radius:8px;
  padding:9px 11px;
  margin:0 0 8px;
  background:var(--色-面);
}
.貸与品-上{ display:flex; align-items:center; gap:8px; }
.貸与品-名{ flex:1; font-size:14px; }
.貸与品-数{ font-size:14px; color:var(--色-強調); white-space:nowrap; }
.貸与品-下{
  display:flex; gap:12px; flex-wrap:wrap;
  font-size:12px; color:var(--色-文字薄);
  margin-top:3px;
}

.状態バッジ{
  font-size:11px;
  border-radius:999px;
  padding:2px 9px;
  white-space:nowrap;
}
.状態バッジ-貸与中{ background:var(--色-見出し帯); color:var(--色-見出し帯文字); }
.状態バッジ-返却済み{ background:var(--色-アクセント面); color:var(--色-文字薄); border:1px solid var(--色-罫線); }

/* 返却履歴は折りたたみ（押すと開く） */
.返却履歴{ margin:6px 0 0; }
.返却履歴 summary{
  cursor:pointer;
  font-size:13px;
  color:var(--色-入口文字);
  padding:8px 10px;
  border:1px solid var(--色-入口枠);
  border-radius:8px;
  background:var(--色-入口面);
  list-style:none;
}
.返却履歴 summary::-webkit-details-marker{ display:none; }
.返却履歴 summary::before{ content:"▸ "; }
.返却履歴[open] summary::before{ content:"▾ "; }
.返却履歴[open] summary{ margin-bottom:8px; }

/* ---------- 車出し ---------- */

.車出し枠[data-表示="false"]{ display:none; }

/* 貸与品・本人確認：本人に該当がなければ表示しない（地域ではなく本人の状態で決める） */
.表示切替枠[data-表示="false"]{ display:none; }

.ETC注意{
  background:var(--色-アクセント面);
  border:1px solid var(--色-入口枠);
  border-radius:8px;
  padding:9px 12px;
  margin:8px 0 0;
  font-size:13px;
}
.ETC注意 b{ color:var(--色-強調); }

/* ---------- 本人確認 ---------- */

.確認一覧{ list-style:none; margin:0; padding:0; }
.確認項目{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 11px;
  border:1px solid var(--色-罫線);
  border-radius:8px;
  margin:0 0 8px;
  font-size:14px;
  background:var(--色-面);
}
.確認項目 input[type="checkbox"]{
  width:22px; height:22px; margin:1px 0 0;
  accent-color:var(--色-強調);
  flex:none;
}