/* 過ぎた期間の入力を読み取り専用にする部品（js/lib/period-lock.js）。予算設定の過去年と、
   投信の月次入力・純資産の残高入力・棚卸入力が共有する。 */

/* 過去の期間のバー。**警告色にはしない**＝間違いではなく「そういう期間を開いた」
   だけなので、赤くすると毎回やましい気持ちにさせる。 */
.bset-lock {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 9px 12px;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.bset-lock .btn { flex-shrink: 0; }
/* 過ぎた期間を解除して編集中＝ロック中と見分けがつくよう枠だけ主色にする（やはり警告色にはしない） */
.bset-lock--editing { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-text); }

/* ロック中の欄を沈める（`periodApplyLock()` が枠に data-period-locked を付ける）。
   **disabled ではなく readOnly にしてある**＝過去の月を開く用事の大半は「見る」ことで、
   disabled の薄いグレーは数字を証券会社や通帳と見比べるのに読みにくく、選択・コピーも
   できなくなる。代わりに見た目で「打てない」を言う（予算設定の過去年と同じ沈め方）。
   readOnly が効かない要素（セレクト・日付ピッカーのボタン）は disabled なので、
   ブラウザ既定の薄さを打ち消して同じ見た目に揃える。 */
[data-period-locked] input[readonly],
[data-period-locked] textarea[readonly],
[data-period-locked] select:disabled,
[data-period-locked] .fp-trigger:disabled {
  background: var(--color-bg); color: var(--color-text-muted);
  opacity: 1; cursor: default;
}
[data-period-locked] input[readonly]:focus,
[data-period-locked] textarea[readonly]:focus {
  border-color: var(--color-border); box-shadow: none; outline: none;
}
[data-period-locked] .fp-trigger:disabled:hover { border-color: var(--color-border); color: var(--color-text-muted); }
[data-period-locked] .fp-trigger:disabled .fp-chev { visibility: hidden; }