/*
 * 外部API検索（法人番号・郵便番号）の候補リスト用スタイル。
 *
 * style.css / techdata.css は元システム（htdocs）からの複製なので手を入れず、
 * このプロトタイプで追加したUIのスタイルだけをこのファイルに置く。
 */

.lookup-search-btn {
  margin-left: 6px;
  min-width: 56px;
  height: 22px;
  cursor: pointer;
}

/*
 * 候補一覧を「吹き出し」型のポップオーバーで出す。表示先の <td> 側で
 * position: relative を指定している前提（入力欄の直下、絶対配置）。
 */
.lookup-candidates {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 12px;
  z-index: 20;
  width: max-content;
  max-width: 620px;
  min-width: 260px;
  background-color: #fff;
  border: 1px solid #9bb7d4;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(16, 40, 64, 0.18);
}

/* 吹き出しの三角（外側の縁色＋内側の塗りを重ねて縁取り付きの三角に見せる） */
.lookup-candidates::before,
.lookup-candidates::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 22px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
}

.lookup-candidates::before {
  border-bottom: 9px solid #9bb7d4;
}

.lookup-candidates::after {
  margin-left: 1px;
  border-left-width: 8px;
  border-right-width: 8px;
  border-bottom: 8px solid #fff;
}

.lookup-candidates-head {
  padding: 6px 10px;
  background-color: #eef4fa;
  border-bottom: 1px solid #dbe6ee;
  border-radius: 10px 10px 0 0;
  font-size: 12px;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.lookup-candidates-close {
  border: 1px solid #9bb7d4;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 2px 6px;
}

.lookup-candidates-list {
  margin: 0;
  padding: 4px 0;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
}

.lookup-candidates-list li + li {
  border-top: 1px dotted #e1e9f0;
}

.lookup-candidate-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}

.lookup-candidate-item:hover,
.lookup-candidate-item:focus {
  background-color: #eaf3fb;
}

.lookup-candidate-primary {
  display: block;
  color: #0b3d75;
}

.lookup-candidate-secondary {
  display: block;
  color: #666;
  font-size: 12px;
  margin-top: 2px;
}

/*
 * 外部API連携（検索）のデモ対象項目を目立たせる。
 * このプロトタイプの主眼は検索API連携なので、「検索の入力欄」から「その検索で埋まる項目」までを
 * ひとつの枠で囲む。1つの項目が複数のAPIで埋まる場合があるため、枠は search →
 * (途中の埋まる項目) → (最後に埋まる項目) の一続きの行に対して、
 * api-box-top / api-box-middle / api-box-bottom / api-box-solo で区切って描画する。
 * どのAPIかは api-color-* で枠色を、api-badge-* でバッジ色を揃えて示す。
 */
.api-box-top > th,
.api-box-middle > th,
.api-box-bottom > th,
.api-box-solo > th {
  border-left: 3px solid var(--api-color) !important;
  background-color: var(--api-bg) !important;
}

.api-box-top > td,
.api-box-middle > td,
.api-box-bottom > td,
.api-box-solo > td {
  border-right: 3px solid var(--api-color) !important;
  background-color: var(--api-bg) !important;
}

.api-box-top > th,
.api-box-top > td,
.api-box-solo > th,
.api-box-solo > td {
  border-top: 2px solid var(--api-color) !important;
}

.api-box-bottom > th,
.api-box-bottom > td,
.api-box-solo > th,
.api-box-solo > td {
  border-bottom: 2px solid var(--api-color) !important;
}

.api-color-hojin {
  --api-color: #2b6cb0;
  --api-bg: #eaf2fb;
}

.api-color-zip {
  --api-color: #2f855a;
  --api-bg: #eaf7f0;
}

.api-color-contract {
  --api-color: #6b46c1;
  --api-bg: #f3edfb;
}

.api-demo-badge {
  display: inline-block;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 1px 7px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

.api-badge-hojin {
  background-color: #2b6cb0;
}

.api-badge-zip {
  background-color: #2f855a;
}

.api-badge-contract {
  background-color: #6b46c1;
}

/*
 * 実行状況表示（上司要望: 常時押せるボタン→吹き出しで、あらかじめ決まった処理ステップの
 * 一覧を表示し、完了したステップから順にチェックマークを付ける）。
 */
/* 明細（行）の右端に寄せる。表示先の祖先要素で position: relative が必要。 */
.execution-status {
  position: absolute;
  top: 0;
  right: 6px;
}

.execution-status-btn {
  height: 22px;
  cursor: pointer;
  font-size: 12px;
}

.execution-status-popup {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  z-index: 20;
  width: 380px;
  min-width: 280px;
  max-width: 680px;
  min-height: 180px;
  max-height: 560px;
  padding: 10px 14px;
  background-color: #fff;
  border: 1px solid #9bb7d4;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(16, 40, 64, 0.18);
  /* 顧客要望: もう少し大きく見たいという声があったため、既定サイズを拡大した上で
     右下の隅をドラッグしてさらに拡大できるようにする */
  resize: both;
  overflow: auto;
  /* text-align は継承されるため、中央寄せの祖先要素（<td> 等）の影響を受けないよう明示する */
  text-align: left;
}

.execution-status-popup-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}

.execution-status-clear-btn {
  border: 1px solid #9bb7d4;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 4px 9px;
  color: #555;
}

.execution-status-clear-btn:hover {
  background-color: #eaf3fb;
}

.execution-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}

.execution-status-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: #fff;
  border: 1.5px solid #c7d2da;
  border-radius: 50%;
  color: #2f855a;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
}

.execution-status-row.done .execution-status-check {
  border-color: #2f855a;
}

.execution-status-row.active .execution-status-check {
  border-color: #4a90d9;
  animation: execution-status-pulse 1s ease-in-out infinite;
}

.execution-status-row.failed .execution-status-check {
  border-color: #c0392b;
  color: #c0392b;
}

.execution-status-row.failed .execution-status-label {
  color: #c0392b;
}

@keyframes execution-status-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(74, 144, 217, 0.35);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(74, 144, 217, 0.15);
  }
}

.execution-status-label {
  font-size: 14px;
  color: #888;
}

.execution-status-row.done .execution-status-label {
  color: #333;
}

/* 送受信しているパラメータの表示（上司要望: スクロールしてでも見えるように） */
.execution-status-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #dbe6ee;
}

.execution-status-detail-label {
  font-size: 12.5px;
  color: #888;
  margin-bottom: 2px;
}

.execution-status-detail-content {
  margin: 0;
  max-height: 220px;
  max-width: 100%;
  padding: 6px 8px;
  overflow: auto;
  white-space: pre;
  font-size: 13px;
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 4px;
}