/* 共通部品。状態（通常・空・入力中・長文・エラー・保存中・保存失敗・狭い幅）をここで持つ */

/* 枠：上の赤い帯（店名と画面名）、左のメニュー（PC）、本文 */
.cl-band { background: var(--cl-red); color: #fff; padding: var(--cl-s2) var(--cl-s4) var(--cl-s3); display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--cl-s4); row-gap: var(--cl-s1); }
.cl-band__store { font-weight: 900; letter-spacing: .06em; margin-right: auto; }
.cl-band__title { font-weight: 700; order: 3; flex: 1 0 100%; min-width: 0; overflow-wrap: anywhere; }
.cl-band__user { font-size: var(--cl-fs-small); }
@media (min-width: 900px) {
  .cl-band { flex-wrap: nowrap; padding: var(--cl-s3) var(--cl-s5); }
  .cl-band__store { margin-right: 0; }
  .cl-band__title { order: 0; flex: 1 1 auto; }
}
.cl-shell { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; min-height: calc(100vh - 56px); }
.cl-shell > * { min-width: 0; } /* 横長のメニューが本文の幅を押し広げないように（メニューの中だけ横に動かす） */
.cl-nav { background: var(--cl-paper); border-bottom: 1px solid var(--cl-line); }
.cl-nav ul { list-style: none; margin: 0; padding: 0 var(--cl-s2); display: flex; overflow-x: auto; }
.cl-nav a { display: flex; align-items: center; min-height: var(--cl-tap); padding: 0 var(--cl-s3); color: var(--cl-ink); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.cl-nav a[aria-current="page"] { border-bottom-color: var(--cl-navy); font-weight: 700; color: var(--cl-navy); }
.cl-main { padding: var(--cl-s4); max-width: var(--cl-content); width: 100%; }
@media (min-width: 900px) {
  .cl-shell { grid-template-columns: 220px 1fr; grid-template-rows: 1fr; align-items: stretch; }
  .cl-nav { border-bottom: 0; border-right: 1px solid var(--cl-line); }
  .cl-nav ul { flex-direction: column; padding: var(--cl-s3) 0; }
  .cl-nav a { border-bottom: 0; border-left: 4px solid transparent; padding: 0 var(--cl-s4); }
  .cl-nav a[aria-current="page"] { border-left-color: var(--cl-navy); background: var(--cl-navy-soft); }
  .cl-main { padding: var(--cl-s5) var(--cl-s6); }
}

/* 面（区切りのあるまとまり） */
.cl-sheet { background: var(--cl-paper); border: 1px solid var(--cl-line); border-radius: var(--cl-radius-sheet); padding: var(--cl-s4); margin-bottom: var(--cl-s4); }
.cl-sheet > h2 { margin-bottom: var(--cl-s3); }
.cl-lead { color: var(--cl-ink-2); margin-bottom: var(--cl-s4); }

/* ボタン：主操作は1画面に1つ（紺）。処理中は押せない */
.cl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--cl-s2); min-height: var(--cl-tap); min-width: var(--cl-tap); padding: 0 var(--cl-s5);
  font: inherit; font-weight: 700; border-radius: var(--cl-radius-control); border: 2px solid var(--cl-navy); background: var(--cl-paper); color: var(--cl-navy); cursor: pointer; text-decoration: none; }
.cl-btn--primary { background: var(--cl-navy); color: #fff; }
.cl-btn--wide { width: 100%; }
.cl-btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.cl-btn[aria-busy="true"]::after { content: ''; width: 1em; height: 1em; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cl-spin .8s linear infinite; }
.cl-btn:disabled:not([aria-busy="true"]) { opacity: .45; cursor: not-allowed; }
@keyframes cl-spin { to { transform: rotate(1turn); } }

/* 入力欄：消えない項目名を上に、説明、エラーは欄の近くに */
.cl-field { margin-bottom: var(--cl-s4); }
.cl-field__label { display: block; font-weight: 700; margin-bottom: var(--cl-s1); }
.cl-field__req { font-size: var(--cl-fs-small); color: var(--cl-red-text); font-weight: 700; margin-left: var(--cl-s2); }
.cl-field__hint { display: block; font-size: var(--cl-fs-small); color: var(--cl-ink-2); margin-bottom: var(--cl-s1); }
.cl-input { width: 100%; min-height: var(--cl-tap); padding: var(--cl-s2) var(--cl-s3); font: inherit; font-size: var(--cl-fs-body); color: var(--cl-ink);
  background: var(--cl-paper); border: 2px solid var(--cl-line); border-radius: var(--cl-radius-control); }
.cl-input[aria-invalid="true"] { border-color: var(--cl-red-text); }
.cl-input:disabled { background: var(--cl-wash); border-style: dashed; color: var(--cl-ink-2); cursor: not-allowed; } /* 変えられない欄（文字はコントラストを保つ） */
.cl-field__error { display: block; color: var(--cl-red-text); font-weight: 700; margin-top: var(--cl-s1); }
.cl-field__error:empty { display: none; }
.cl-field__error::before { content: '入力を確認：'; }

/* 選択肢（大きな押しボタン型）。選んだものは紺の枠と「選択中」の文字 */
.cl-choices { display: grid; gap: var(--cl-s2); }
.cl-choice { display: flex; align-items: center; gap: var(--cl-s3); min-height: var(--cl-tap); padding: var(--cl-s2) var(--cl-s3); border: 2px solid var(--cl-line);
  border-radius: var(--cl-radius-control); background: var(--cl-paper); cursor: pointer; }
.cl-choice input { width: 24px; height: 24px; accent-color: var(--cl-navy); flex: none; }
.cl-choice__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cl-choice__sub { display: block; font-size: var(--cl-fs-small); color: var(--cl-ink-2); }
.cl-choice:has(input:checked) { border-color: var(--cl-navy); background: var(--cl-navy-soft); }
.cl-choice:has(input:checked) .cl-choice__state::after { content: '選択中'; font-size: var(--cl-fs-small); font-weight: 700; color: var(--cl-navy); }
.cl-choice:has(input:focus-visible) { box-shadow: var(--cl-focus); }

/* 数の増減（作業時間など） */
.cl-stepper { display: grid; grid-template-columns: minmax(88px, auto) 1fr minmax(88px, auto); align-items: center; gap: var(--cl-s2); }
.cl-stepper .cl-btn { padding: 0 var(--cl-s3); white-space: nowrap; }
.cl-stepper__value { text-align: center; font-size: 26px; font-weight: 900; color: var(--cl-navy); font-variant-numeric: tabular-nums; }
.cl-chips { display: flex; flex-wrap: wrap; gap: var(--cl-s2); margin-top: var(--cl-s2); }
.cl-chips .cl-btn { padding: 0 var(--cl-s4); font-weight: 400; }

/* 状態の表示（色だけにしない：必ず文字） */
.cl-status { display: inline-block; padding: 2px var(--cl-s2); border: 2px solid currentColor; border-radius: var(--cl-radius-control); font-size: var(--cl-fs-small); font-weight: 700; }
.cl-status--wait { color: var(--cl-navy); }
.cl-status--done { color: var(--cl-ok); }
.cl-status--alert { color: var(--cl-red-text); }

/* 一覧（行全体を押せる） */
.cl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cl-line); }
.cl-list li { border-bottom: 1px solid var(--cl-line); }
.cl-list__row { display: flex; gap: var(--cl-s3); align-items: center; min-height: var(--cl-tap); padding: var(--cl-s3) var(--cl-s2); color: inherit; text-decoration: none; }
.cl-list__main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cl-list__sub { display: block; font-size: var(--cl-fs-small); color: var(--cl-ink-2); }
.cl-unread { font-weight: 700; }
.cl-unread .cl-list__main::before { content: '未読'; display: inline-block; margin-right: var(--cl-s2); padding: 0 6px; background: var(--cl-yellow); color: var(--cl-ink); font-size: var(--cl-fs-small); font-weight: 700; }

/* 空の一覧：次の操作を示す */
.cl-empty { padding: var(--cl-s5) var(--cl-s4); text-align: left; color: var(--cl-ink-2); }
.cl-empty .cl-btn { margin-top: var(--cl-s3); }

/* 結果のお知らせ（読み上げにも伝える） */
.cl-notice { padding: var(--cl-s3) var(--cl-s4); border-left: 6px solid var(--cl-navy); background: var(--cl-navy-soft); margin-bottom: var(--cl-s4); }
.cl-notice--error { border-left-color: var(--cl-red-text); background: #fdecee; }
.cl-notice--ok { border-left-color: var(--cl-ok); background: #e9f5ee; }
.cl-notice:empty { display: none; }

/* 確認（金額や履歴を確定する操作だけ） */
.cl-dialog { border: 0; border-radius: var(--cl-radius-sheet); padding: 0; max-width: min(520px, calc(100vw - 32px)); }
.cl-dialog::backdrop { background: rgba(26, 26, 26, .5); }
.cl-dialog__body { padding: var(--cl-s5); }
.cl-dialog__actions { display: flex; gap: var(--cl-s3); justify-content: flex-end; padding: 0 var(--cl-s5) var(--cl-s5); flex-wrap: wrap; }

/* 経営の数字の帯（ボードの「車両価格｜諸費用」の並びのように縦線で区切る） */
.cl-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--cl-paper); border: 1px solid var(--cl-line); border-top: 6px solid var(--cl-red); margin-bottom: var(--cl-s4); }
.cl-figure { padding: var(--cl-s3) var(--cl-s4); border-right: 1px solid var(--cl-line); border-bottom: 1px solid var(--cl-line); }
.cl-figure__label { font-size: var(--cl-fs-small); font-weight: 700; color: var(--cl-ink-2); }
.cl-figure__value { display: block; font-size: var(--cl-fs-figure); font-weight: 900; color: var(--cl-navy); line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cl-figure__value--text { font-size: var(--cl-fs-h2); font-weight: 700; padding-top: 6px; }
.cl-figure__note { display: block; font-size: var(--cl-fs-small); color: var(--cl-ink-2); }
.cl-alert-text { color: var(--cl-red-text); font-weight: 700; }

/* 表 */
.cl-table-wrap { overflow-x: auto; }
.cl-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; margin-bottom: var(--cl-s4); }
.cl-table th, .cl-table td { border-bottom: 1px solid var(--cl-line); padding: var(--cl-s2); text-align: left; }
.cl-table td.cl-num, .cl-table th.cl-num { text-align: right; }

/* 入力の最後の確認と主操作。画面に固定せず、入力欄を隠さない（SPEC-38） */
.cl-actionbar { border-top: 1px solid var(--cl-line); padding-top: var(--cl-s3); margin-top: var(--cl-s4); }
.cl-band__logout { min-height: 44px; padding: 0 var(--cl-s3); background: transparent; color: #fff; border-color: #fff; }

/* ホーム（オーナー）の一覧の並び */
.cl-home-grid { display: grid; grid-template-columns: 1fr; gap: 0 var(--cl-s4); }
@media (min-width: 900px) { .cl-home-grid { grid-template-columns: 1fr 1fr; } }

/* グラフ：同じ単位の棒を並べ、凡例は文字でも示す */
.cl-chart { width: 100%; height: auto; display: block; }
.cl-chart__sales { fill: var(--cl-navy); }
.cl-chart__gross { fill: var(--cl-red); }
.cl-chart__label { font-size: 13px; text-anchor: middle; fill: var(--cl-ink-2); }
.cl-chart__legend { display: flex; flex-wrap: wrap; gap: var(--cl-s4); font-size: var(--cl-fs-small); }
.cl-key::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.cl-key--sales::before { background: var(--cl-navy); }
.cl-key--gross::before { background: var(--cl-red); }
details summary { min-height: var(--cl-tap); display: flex; align-items: center; cursor: pointer; color: var(--cl-navy); font-weight: 700; }

/* 保存の状態 */
.cl-save { font-size: var(--cl-fs-small); font-weight: 700; min-height: 1.6em; }
.cl-save[data-state="saving"] { color: var(--cl-ink-2); }
.cl-save[data-state="saved"] { color: var(--cl-ok); }
.cl-save[data-state="failed"] { color: var(--cl-red-text); }

/* 手順の現在位置 */
.cl-steps { list-style: none; margin: 0 0 var(--cl-s4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--cl-s2); }
.cl-steps li { padding: var(--cl-s1) var(--cl-s3); border: 2px solid var(--cl-line); border-radius: var(--cl-radius-control); background: var(--cl-paper); font-size: var(--cl-fs-small); font-weight: 700; color: var(--cl-ink-2); }
.cl-steps li[aria-current="step"] { border-color: var(--cl-navy); color: #fff; background: var(--cl-navy); }
.cl-steps .cl-steps--done { color: var(--cl-ok); border-color: var(--cl-ok); }

/* 横並びの入力（PCでは2列、スマホでは1列） */
.cl-grid2 { display: grid; grid-template-columns: 1fr; gap: 0 var(--cl-s4); }
@media (min-width: 700px) { .cl-grid2 { grid-template-columns: 1fr 1fr; } }

/* 写真 */
.cl-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--cl-s2); margin-bottom: var(--cl-s3); }
.cl-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--cl-wash); border: 1px solid var(--cl-line); }

/* 金額の内訳（見積） */
.cl-amounts th { font-weight: 400; color: var(--cl-ink-2); }
.cl-amounts tr.cl-amounts__total th, .cl-amounts tr.cl-amounts__total td { font-weight: 900; color: var(--cl-navy); font-size: var(--cl-fs-h2); border-top: 2px solid var(--cl-navy); }
.cl-line-row { display: grid; grid-template-columns: 1fr; gap: var(--cl-s2); align-items: end; padding: var(--cl-s3) 0; border-bottom: 1px solid var(--cl-line); }
@media (min-width: 700px) { .cl-line-row { grid-template-columns: 1fr 96px 160px 140px 96px; } .cl-line-row > .cl-num { align-self: center; text-align: right; } }
.cl-line-row .cl-field { margin-bottom: 0; }
.cl-line-row__name { font-weight: 700; overflow-wrap: anywhere; }
.cl-line-row__name small { display: block; font-weight: 400; color: var(--cl-ink-2); font-size: var(--cl-fs-small); }
.cl-row-actions { display: flex; flex-wrap: wrap; gap: var(--cl-s3); margin-top: var(--cl-s3); }

/* 検索 */
.cl-search { display: flex; gap: var(--cl-s2); }
.cl-search .cl-input { flex: 1; min-width: 0; }
.cl-detail-title { font-size: var(--cl-fs-h1); margin-bottom: var(--cl-s1); overflow-wrap: anywhere; }

/* 欄の中の小見出し・区切り */
.cl-subhead { font-size: var(--cl-fs-body); font-weight: 700; margin: var(--cl-s4) 0 var(--cl-s2); }
.cl-subsection { border-top: 1px solid var(--cl-line); margin-top: var(--cl-s4); padding-top: var(--cl-s2); }
.cl-price { font-size: var(--cl-fs-h1); font-weight: 900; color: var(--cl-navy); font-variant-numeric: tabular-nums; }
.cl-photos > .cl-empty { grid-column: 1 / -1; padding: var(--cl-s2) 0; }
.cl-input--code { font-size: 24px; letter-spacing: .3em; font-variant-numeric: tabular-nums; max-width: 12em; }