/* public/assets/components.css — 共通部品（共有凍結物）
 * 経営サマリ帯 / 会社カード＋カラーバー / 見積vs実測 並置バー / バッジ・チップ /
 * モーダル / 要望メモウィジェット / .table-cards（390pxで表→カード縦積み）
 *
 * ビュー側はここのクラスを使う。同じ見た目を各ビューCSSで書き直さない（衝突と揺れの元）。
 */

/* ------------------------------------------------- 経営サマリ帯（ホーム） */

.summary-band {
  background: var(--band);
  color: var(--text-on-dark);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow);
}
.summary-band__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-5);
}
.summary-band__item { min-width: 0; }
.summary-band__label {
  font-size: var(--fs-sm);
  opacity: 0.82;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
/* 【Fix-B ②桁耐性】9桁（¥123,456,789）でも帯が崩れない。
   まず clamp() で縮めて吸収し、それでも入らないときだけ ellipsis（無音クリップにしない。
   全文は title 属性で必ず読める）。 */
.summary-band__value {
  font-size: clamp(20px, 2.4vw, var(--fs-2xl));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  word-break: keep-all;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.summary-band__unit { font-size: var(--fs-md); font-weight: 400; opacity: 0.9; margin-left: 2px; }
.summary-band__sub { font-size: var(--fs-sm); opacity: 0.78; font-variant-numeric: tabular-nums; }
.summary-band__note { margin-top: var(--sp-4); font-size: var(--fs-xs); opacity: 0.72; }
/* 金額の根拠の一文（経営向けの主役画面には必ず出す） */
.summary-band__basis { margin-top: var(--sp-1); font-size: var(--fs-xs); opacity: 0.72; }

/* 【Fix-B ⑬凍結モック復元】裏取り率の進捗バー（0%/50%/100% の目盛つき） */
.summary-band__meter { margin-top: var(--sp-2); display: grid; gap: 2px; }
.summary-band__meter-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, currentColor 26%, transparent);
  overflow: hidden;
}
.summary-band__meter-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent);
  width: 0;
}
.summary-band__meter-scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* 【Fix-B ⑬凍結モック復元】帯の補足チップ（濃紺の上に置くので currentColor で縁取る） */
.summary-band__chip {
  display: inline-flex;
  align-items: center;
  margin-top: var(--sp-2);
  padding: 2px var(--sp-3);
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  font-size: var(--fs-xs);
  line-height: 1.6;
  white-space: normal;
}
.summary-band__chip--solid {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-dark);
  font-weight: 700;
}

/* ------------------------------------------------------------ 会社カード */

.tenant-card {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + var(--bar-w));
  color: inherit;
  overflow: hidden;
}
.tenant-card:hover { text-decoration: none; border-color: var(--border-strong); }
/* 会社ごとの細いカラーバー（色は data 属性ではなく style="--tenant-color" で渡す） */
.tenant-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--bar-w);
  background: var(--tenant-color, var(--accent));
}
.tenant-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.tenant-card__name { font-weight: 700; font-size: var(--fs-md); }
.tenant-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-4);
}
.tenant-card__metrics > * { min-width: 0; }
.tenant-card__metric-label { font-size: var(--fs-xs); color: var(--text-muted); }
/* 【Fix-B ②桁耐性】.tenant-card は overflow:hidden なので、9桁でも無音クリップされないよう
   clamp() で縮め、入り切らないときは ellipsis＋title（全文が読める）にする。 */
.tenant-card__metric-value {
  font-size: clamp(12px, 1.05vw, var(--fs-md));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 【Fix-B ③集計規律】新規創出型は削減型に足し込まず、別枠のサブ表示にする */
.tenant-card__metric-sub {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--newvalue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tenant-card__basis { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-faint); }
.tenant-card__flags { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }

/* 【Fix-B ④担当外】押せない会社カード。リンクではなく div で描き、見た目でも押せないと分かる */
.tenant-card--disabled {
  background: var(--surface-2);
  color: var(--text-faint);
  box-shadow: none;
  cursor: not-allowed;
}
.tenant-card--disabled:hover { border-color: var(--border); }
.tenant-card--disabled .tenant-card__name,
.tenant-card--disabled .tenant-card__metric-value { color: var(--text-faint); }
.tenant-card--disabled .tenant-card__metric-sub { color: var(--text-faint); }
.tenant-card--disabled::before { opacity: 0.35; }

/* --------------------------------------------- 見積 vs 実測 並置バー */

.compare-bar { display: grid; gap: var(--sp-1); }
.compare-bar__row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
}
.compare-bar__legend { font-size: var(--fs-xs); color: var(--text-muted); }
.compare-bar__track {
  position: relative;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--neutral-bg);
  overflow: hidden;
}
/* 【Fix-B ⑪Z1】track / fill は <span> で生成されるため、fill を block にしないと
   width / height が効かず 0×0 になる（バーが描かれない）。ここが根本の直し場所。 */
.compare-bar__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  width: 0;
}
.compare-bar__fill--est { background: var(--neutral-border); }
.compare-bar__fill--actual { background: var(--accent); }
.compare-bar__fill--newvalue { background: var(--newvalue); }
.compare-bar__fill--variance { background: var(--warn-border); }
.compare-bar__value { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 実測が無い施策はバーを描かない（0時間の棒に見せない・design §6.5） */
.compare-bar__none { font-size: var(--fs-sm); color: var(--text-faint); }

/* ------------------------------------------------------ バッジ・チップ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px var(--sp-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--neutral-border);
  background: var(--neutral-bg);
  color: var(--neutral);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* 未入力＝赤（凍結） */
.badge--unentered { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
/* 乖離＝黄色（凍結） */
.badge--variance { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.badge--ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok); }
.badge--steady { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); }
/* 顧客申告（未確認）＝紫。新規創出チップと同じ紫だが、バッジ側は「人の確認待ち」を表す */
.badge--client { background: var(--newvalue-bg); border-color: var(--newvalue-border); color: var(--newvalue); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--neutral-border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
/* 新規創出＝紫（凍結） */
.chip--newvalue { background: var(--newvalue-bg); border-color: var(--newvalue-border); color: var(--newvalue); font-weight: 700; }
.chip--saving { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); font-weight: 700; }
/* 選択できるチップ（区分の必須選択など）はタップ44px以上 */
.chip--selectable { min-height: var(--tap-min); padding: 0 var(--sp-4); cursor: pointer; }
.chip--selectable[aria-pressed="true"] { border-width: 2px; }

/* 許諾/機密＝鍵アイコン（凍結）。絵文字ではなく inline SVG を使う */
.lock-icon { width: 12px; height: 12px; flex: none; }

/* 【Fix-B ⑩】アイコン＋ラベルは共通クラスで inline-flex にする（素の span に SVG を置かない）。
   親の実装に依存せず単体で整列するので、片方だけ直って片方が崩れる事故が起きない。 */
.icon-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex: none;
}

/* 閲覧専用の案内バナー（入力できない画面で「壊れている」と誤解させない） */
.readonly-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--neutral-border);
  background: var(--neutral-bg);
  color: var(--neutral);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
}

/* データ品質 A/B/C */
.dq { font-weight: 700; font-variant-numeric: tabular-nums; }
.dq--A, .dq--B { color: var(--ok); }
.dq--C { color: var(--text-faint); }

/* ---------------------------------------------------------------- 表 */

.table-wrap { width: 100%; overflow-x: auto; }  /* 列の多い表は「この箱だけ」横に動かす */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}
.data-table th,
.data-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.data-table th {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-2);
  white-space: nowrap;
}
.data-table td.num,
.data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table tr[data-variance="1"] { background: var(--warn-bg); }

/* ------------------------------- .table-cards（390pxで表→カード縦積み） */
/* 使い方: <table class="data-table table-cards"> ＋ 各 td に data-label="見出し" を付ける */

@media (max-width: 640px) {
  .table-cards thead { display: none; }
  .table-cards,
  .table-cards tbody,
  .table-cards tr,
  .table-cards td { display: block; width: 100%; }
  .table-cards tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    margin-bottom: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
  }
  .table-cards td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    border-bottom: 1px dashed var(--border);
    padding: var(--sp-2) 0;
    text-align: left;
  }
  .table-cards td:last-child { border-bottom: none; }
  .table-cards td.num { text-align: right; }
  .table-cards td::before {
    content: attr(data-label);
    flex: none;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-muted);
  }
  .table-cards td[data-label=""]::before { content: none; }
}

/* ------------------------------------------------------------ モーダル */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 38, 63, 0.44);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  z-index: var(--z-modal);
}
.modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  width: min(560px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.modal__body { padding: var(--sp-4); overflow-y: auto; }
.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.modal__close {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-md);
  cursor: pointer;
}

/* --------------------------------------------- 要望メモ（K1標準部品） */
/* 全10ビューに常駐する。押下時に現在のビュー名を自動付与する。 */

.memo-widget {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: calc(var(--z-modal) - 1);
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0 var(--sp-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.memo-widget:hover { background: var(--accent-weak); }

@media (max-width: 640px) {
  .memo-widget { right: var(--sp-3); bottom: var(--sp-3); }
}