/* アポ入力（apoform 連携）の画面。色は styles.css の変数（--blue / --amber / --green / --red など）を使う。 */

.apo-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }

/* styles.css は input を幅100%・高さ48pxにしているので、チェックボックスとラジオだけ元の大きさに戻す */
.apo-workspace input[type="checkbox"], .apo-workspace input[type="radio"],
.apo-response-dialog input[type="checkbox"], .apo-response-dialog input[type="radio"] {
  flex: 0 0 auto; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; box-shadow: none; accent-color: var(--blue);
}
.apo-workspace input[type="file"], .apo-response-dialog input[type="file"] { height: auto; padding: 10px 12px; }
.apo-step > .button { justify-self: start; }
.apo-lead { margin: 6px 0 0; font-size: 13px; }

/* ---- 入力 ---- */
.apo-entry { margin: 0 0 22px; padding: 22px; display: grid; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; }
.apo-step { display: grid; gap: 10px; }
.apo-step h3 { margin: 0; font-size: 16px; }
.apo-step > .field-help { margin: 0; }
.apo-step select, .apo-step input[type="file"] { max-width: 100%; }
.apo-draft-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; color: #6b4a0f; background: var(--amber-bg); border-radius: 10px; font-size: 13px; }
.apo-draft-notice p { margin: 0; flex: 1 1 260px; }

.apo-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.apo-plan-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--base); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.apo-plan-card:has(input:checked) { border-color: var(--blue); background: #eef3fd; }
.apo-plan-card input { margin-top: 3px; }
.apo-plan-body { display: grid; gap: 3px; }
.apo-plan-body strong { font-size: 14px; }
.apo-plan-body small { color: var(--muted); font-size: 12px; }
.apo-plan-reward { color: var(--green) !important; font-weight: 700; }
.apo-badge--lead { justify-self: start; color: #0f766e; background: #e3f5f2; }
.apo-pricing-kind { width: auto; min-width: 7.5em; height: 36px; padding: 0 8px; font-size: 13px; }

.apo-audio-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.apo-audio-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; background: var(--base); border-radius: 10px; font-size: 13px; }
.apo-audio-name { flex: 1 1 180px; font-weight: 700; overflow-wrap: anywhere; }
.apo-audio-size, .apo-audio-status { color: var(--muted); font-size: 12px; }
.apo-audio-item--done .apo-audio-status { color: var(--green); }
.apo-audio-item--error .apo-audio-status { color: var(--red); }
.apo-audio-item--transcribing .apo-audio-status { color: var(--blue); }

.apo-fieldset { margin: 0 0 14px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.apo-fieldset legend { display: flex; align-items: center; gap: 10px; padding: 0 6px; font-weight: 800; font-size: 14px; }
.apo-approval-progress { padding: 2px 10px; color: #9a6811; background: #fff2cf; border-radius: 999px; font-size: 11px; font-weight: 700; }
.apo-approval-progress.is-complete { color: var(--green); background: var(--green-bg); }
.apo-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.apo-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.apo-field--wide { grid-column: 1 / -1; }
.apo-field input[type="text"], .apo-field input[type="email"], .apo-field input[type="tel"], .apo-field input[type="date"],
.apo-field select, .apo-field textarea, .apo-response-note textarea {
  width: 100%; min-height: 42px; padding: 9px 12px; color: var(--ink); background: #fff; border: 1px solid #ccd7e2; border-radius: 9px; font: inherit; font-size: 14px;
}
.apo-field textarea, .apo-response-note textarea { min-height: 84px; resize: vertical; }
.apo-field.has-error input, .apo-field.has-error select, .apo-field.has-error textarea { border-color: var(--red); }
.apo-field-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; white-space: pre-line; }
.apo-required { padding: 1px 6px; color: var(--red); background: var(--red-bg); border-radius: 5px; font-size: 10px; }
.apo-ai-tag { padding: 1px 6px; color: var(--blue); background: #e9f0fd; border-radius: 5px; font-size: 10px; }
.apo-field-error { margin: 0; color: var(--red); font-size: 12px; }
.apo-field-error:empty { display: none; }
.apo-field .field-help { margin: 0; white-space: pre-line; }
.apo-choice-group { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.apo-choice, .apo-switch { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.apo-switch-box, .apo-company-box { display: grid; gap: 8px; }
.apo-override { width: 100%; min-height: 38px; padding: 8px 12px; background: #fffaf0; border: 1px dashed #d9b46a; border-radius: 9px; font: inherit; font-size: 13px; }
.apo-corp-label { margin-top: 4px; font-weight: 600; }

.apo-submit-bar { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
.apo-submit-bar .button--small { margin-right: auto; }
.apo-confirm-notes { display: grid; gap: 8px; }
.apo-confirm-notes:empty { display: none; }

/* ---- 状況一覧 ---- */
.apo-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.apo-toolbar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.apo-org-filter { width: auto; max-width: 260px; height: 38px; padding: 0 10px; border: 1px solid #ccd7e2; border-radius: 9px; background: #fff; font: inherit; font-size: 13px; }
.apo-status-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.apo-status-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; color: #36516d; background: #fff; border: 1px solid #ccd7e2; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; }
.apo-status-tab strong { font: 800 13px Manrope, sans-serif; }
.apo-status-tab.is-active { color: #fff; background: var(--ink); border-color: var(--ink); }
.apo-status-tab.is-alert:not(.is-active) { color: var(--amber); border-color: #e5c27a; background: var(--amber-bg); }

.apo-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.apo-item {
  display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1.3fr);
  gap: 10px 16px; align-items: center; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.apo-list--reward .apo-item { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.3fr); }
.apo-item--alert { border-left: 4px solid var(--amber); }
.apo-item-main, .apo-item-meta, .apo-item-status { display: grid; gap: 3px; min-width: 0; }
.apo-item-main strong { font-size: 15px; overflow-wrap: anywhere; }
.apo-item-main small, .apo-item-meta small, .apo-item-status small { color: var(--muted); font-size: 12px; }
.apo-item-org { color: var(--blue) !important; font-weight: 700; }
.apo-item-reward { font: 800 15px Manrope, sans-serif; }
.apo-item-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.apo-item-details { grid-column: 1 / -1; margin: 0; padding: 10px 12px; display: grid; gap: 6px; background: var(--base); border-radius: 9px; }
.apo-item-details div { display: grid; grid-template-columns: 170px 1fr; gap: 10px; font-size: 12px; }
.apo-item-details dt { color: var(--muted); }
.apo-item-details dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

.apo-badge { display: inline-flex; align-items: center; justify-self: start; min-height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.apo-badge--pending { color: var(--blue); background: #e9f0fd; }
.apo-badge--action_required { color: var(--amber); background: var(--amber-bg); }
.apo-badge--approved { color: var(--green); background: var(--green-bg); }
.apo-badge--rejected { color: var(--red); background: var(--red-bg); }
.apo-badge--unlinked { color: #6949c6; background: #efeafc; }
.apo-type { justify-self: start; padding: 1px 8px; color: #617184; background: #edf1f5; border-radius: 6px; font-size: 11px; font-weight: 700; }
.apo-type--kari_yoyaku { color: #8a5a00; background: #fff4df; }
.apo-muted-note { color: var(--muted); font-size: 12px; }

/* ---- 管理者の設定 ---- */
.apo-admin-panel { margin: 0 0 16px; }
.apo-admin-settings { padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--base); }
.apo-admin-settings > summary { cursor: pointer; font-weight: 800; font-size: 13px; }
.apo-toggle-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.apo-toggle-row label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

/* 申請カード（app.js）の「パートナー入力」バッジ */
.status-badge--partner-entry { color: #6949c6; background: #efeafc; }

/* ---- 要対応への回答 ---- */
.apo-response-dialog { width: min(760px, calc(100% - 32px)); }
.apo-response-reasons .dialog-summary div { grid-template-columns: 170px 1fr; }
.apo-response-reasons .dialog-summary dd { white-space: pre-line; }
.apo-response-reasons:empty { display: none; }
.apo-response-note { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.apo-response-audio { display: grid; gap: 8px; font-size: 13px; font-weight: 700; }
.apo-response-fields { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.apo-response-fields > summary { cursor: pointer; font-weight: 800; font-size: 13px; }
.apo-response-fields[open] > summary { margin-bottom: 12px; }

/* ---- 利用規約（アポイント獲得業務に関する特約） ---- */
.apo-terms { margin: 0 0 18px; }
.apo-terms-card { display: grid; gap: 12px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; }
.apo-terms-card h3 { margin: 0; font-size: 18px; }
.apo-terms-card .eyebrow { margin: 0; }
.apo-terms-card--notice { background: var(--amber-bg); border-color: #ecd3a0; }
.apo-terms-card > .button { justify-self: start; }
.apo-terms-card--notice p { margin: 0; }
.apo-terms-body { max-height: 320px; overflow: auto; margin: 0; padding: 14px 16px; white-space: pre-wrap; background: var(--base); border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 13px; line-height: 1.8; }
.apo-terms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.apo-terms-field { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.apo-terms-authority { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.apo-terms-badge { margin-left: 8px; padding: 1px 8px; color: var(--amber); background: var(--amber-bg); border-radius: 999px; font-size: 11px; font-weight: 700; }
.apo-terms-badge.is-accepted { color: var(--green); background: var(--green-bg); }

/* アポ申請承認: アポの獲得申請の一覧（docs/plans/finished/apo-contracts-and-review-tabs.md） */
.apo-review-panel { display: grid; gap: 12px; margin: 4px 0 20px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.apo-review-panel h3 { margin: 0 0 4px; font-size: 17px; }
.apo-review-panel .count-badge { white-space: nowrap; flex-shrink: 0; }
.apo-admin-note { margin: 0 0 12px; }

/* アポ単価・契約: 企業ごとの契約 */
.apo-contract-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.apo-contract-row { display: grid; gap: 8px; padding: 12px 14px; background: var(--base); border-radius: 10px; }
.apo-contract-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.apo-contract-name { font-size: 15px; }
.apo-contract-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; cursor: pointer; }
.apo-contract-toggle input { width: 18px; height: 18px; margin: 0; }
.apo-contract-status { margin-left: auto; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--amber); background: var(--amber-bg); }
.apo-contract-status--ok { color: var(--green); background: var(--green-bg); }
.apo-contract-status--disabled { color: var(--muted); background: var(--surface); border: 1px solid var(--line); }
.apo-contract-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.apo-contract-facts .apo-terms-badge { margin-left: 0; }
.apo-contract-count { color: var(--muted); }
.apo-contract-overrides { display: grid; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
.apo-toggle-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

/* 申請カード（app.js）: クライアント承認・却下の自動反映 */
.claim-source-note { color: #6949c6; font-size: 11px; font-weight: 700; }

/* ---- アポ単価（管理者） ---- */
.apo-pricing-list, .apo-pricing-overrides { display: grid; gap: 14px; }
.apo-pricing-toolbar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; padding: 10px 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.apo-pricing-filter { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: 13px; cursor: pointer; }
.apo-pricing-product { display: grid; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.apo-pricing-product h3 { margin: 0; font-size: 16px; }
.apo-pricing-product-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.apo-pricing-product-header small { color: var(--muted); font-size: 12px; }
details.apo-pricing-product > summary { cursor: pointer; list-style: none; }
details.apo-pricing-product > summary::-webkit-details-marker { display: none; }
details.apo-pricing-product > summary::before { content: '▸'; color: var(--muted); font-size: 13px; }
details.apo-pricing-product[open] > summary::before { content: '▾'; }
.apo-pricing-product-body { display: grid; gap: 8px; margin-top: 4px; }
.apo-assign-product { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.apo-assign-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; cursor: pointer; font-size: 14px; }
.apo-assign-summary small { color: var(--muted); }
.apo-assign-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* 上書き単価の行（--override）より後から効かせる */
.apo-pricing-row.apo-pricing-row--assign { grid-template-columns: auto minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; }
.apo-assign-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; cursor: pointer; }
.apo-assign-check input { width: 18px; height: 18px; margin: 0; }
.apo-pricing-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.apo-pricing-row { display: grid; grid-template-columns: 80px minmax(0, 2.4fr) minmax(0, 1fr) auto minmax(0, 1.2fr) minmax(0, .8fr); gap: 8px 14px; align-items: center; padding: 10px 12px; background: var(--base); border-radius: 10px; }
.apo-pricing-row--override { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; }
.apo-pricing-row.is-dirty { box-shadow: inset 3px 0 0 var(--blue); background: #eef3fd; }
.apo-pricing-row.is-missing { opacity: .8; }
.apo-pricing-listed { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; cursor: pointer; }
.apo-pricing-plan, .apo-pricing-company, .apo-pricing-price-box { display: grid; gap: 3px; min-width: 0; }
.apo-pricing-plan strong { font-size: 13px; overflow-wrap: anywhere; }
.apo-pricing-plan small, .apo-pricing-company small, .apo-pricing-overrides-count { color: var(--muted); font-size: 11px; }
.apo-pricing-company span { font: 700 13px Manrope, sans-serif; }
.apo-workspace input.apo-pricing-price { width: 100%; max-width: 180px; height: 38px; padding: 0 10px; font-size: 13px; }

@media (max-width: 720px) {
  .apo-entry { padding: 16px; }
  .apo-field-grid { grid-template-columns: 1fr; }
  .apo-item, .apo-list--reward .apo-item { grid-template-columns: 1fr; }
  .apo-item-actions { justify-content: flex-start; }
  .apo-item-details div, .apo-response-reasons .dialog-summary div { grid-template-columns: 1fr; gap: 2px; }
  .apo-submit-bar .button--small { margin-right: 0; }
  .apo-terms-grid, .apo-pricing-row, .apo-pricing-row--override, .apo-pricing-row.apo-pricing-row--assign { grid-template-columns: 1fr; }
  .apo-pricing-bulk { margin-left: 0; }
}