/* ひな形・様式の編集画面で共通の見た目（2026-10-27）。
   使う画面: 計画 → 様式（Pages/Admin/CarePlanTemplatePage）、保育設定 → 記録ひな形（Pages/Admin/CareRecordTemplatePage）。
   欄のカード・1 行目の並び・錠の印・小さなボタン・選択肢の行・畳む「詳細」をここにまとめ、2 つの画面の見た目がずれないようにする。
   画面ごとの違い（一覧・プレビュー・設定の欄など）は各画面の .razor.css に置く。
   index.html では bulma の後に読む（同じ強さの指定ではこちらが勝つ）。 */

/* ---- 欄のカード ---- */
.tpl-field {
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  padding: 0.5em 0.75em;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.tpl-field.has-error {
  border-color: #F87171;
  background: #FFFBFB;
}

.tpl-field-head,
.tpl-field-row,
.tpl-sub-row,
.tpl-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 0.6em;
}

.tpl-field-no {
  font-weight: bold;
  color: #4B5563;
  min-width: 1.5em;
}

/* 錠の印（消せない・固定の欄）。理由は title か詳細に書く */
.tpl-lock {
  font-size: 0.8em;
  color: #92400E;
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: 4px;
  padding: 0 6px;
}

.tpl-spacer {
  flex: 1;
}

/* ---- 小さなボタン（上下・削除） ---- */
.tpl-icon {
  border: 1px solid #D1D5DB;
  background: #FFFFFF;
  border-radius: 4px;
  padding: 1px 8px;
  cursor: pointer;
}

.tpl-icon:disabled {
  opacity: 0.4;
  cursor: default;
}

.tpl-danger {
  color: #B91C1C;
}

/* ---- 入力 ---- */
.tpl-input {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.9em;
}

.tpl-wide {
  flex: 1 1 14em;
}

.tpl-wide input {
  width: 100%;
  box-sizing: border-box;
}

.tpl-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-end;
}

/* ---- 選択肢・表の行列などの下位の一覧 ---- */
.tpl-sub {
  flex: 1 1 14em;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  background: #F9FAFB;
  border-radius: 6px;
  padding: 0.4em 0.6em;
}

.tpl-sub-title {
  font-size: 0.85em;
  color: #4B5563;
}

.tpl-sub-row input {
  flex: 1 1 8em;
  min-width: 0;
}

.tpl-add {
  align-self: flex-start;
  border: 1px dashed #9CA3AF;
  background: #FFFFFF;
  border-radius: 4px;
  padding: 2px 10px;
  cursor: pointer;
}

.tpl-add:disabled {
  opacity: 0.4;
  cursor: default;
}

.tpl-field-error {
  color: #B91C1C;
  font-size: 0.85em;
}

/* ---- 畳む「詳細」（開くボタンと中身）・既定と違う値の小さな印 ---- */
.tpl-toggle {
  border: 1px solid transparent;
  background: transparent;
  color: #4B5563;
  border-radius: 4px;
  padding: 1px 6px;
  cursor: pointer;
  font-size: 0.85em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.tpl-toggle:hover {
  background: #F3F4F6;
}

.tpl-toggle::before {
  content: "▸";
}

.tpl-toggle[aria-expanded="true"]::before {
  content: "▾";
}

.tpl-detail {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.4em 0.9em;
  font-size: 0.9em;
  background: #F9FAFB;
  border-radius: 6px;
  padding: 0.4em 0.6em;
}

.tpl-detail[hidden] {
  display: none;
}

.tpl-mark {
  font-size: 0.75em;
  color: #1E40AF;
  background: #DBEAFE;
  border-radius: 4px;
  padding: 0 6px;
  white-space: nowrap;
}

.tpl-detail-note {
  flex-basis: 100%;
  font-size: 0.9em;
  color: #6B7280;
}