/* =========================================================
 * 賃貸見積書作成ツール スタイル
 * ========================================================= */

* { box-sizing: border-box; }

[hidden] { display: none !important; }

:root {
  --color-primary: #1a6b54;
  --color-primary-dark: #12513f;
  --color-danger: #b0392f;
  --color-border: #d5d9d6;
  --color-bg: #f2f4f3;
  --color-card: #ffffff;
  --color-text: #22302b;
  --color-muted: #6b7a74;
  --radius: 8px;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

.app-ui {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.app-header h1 {
  font-size: 20px;
  margin: 0;
}
.header-actions { display: flex; gap: 8px; }

/* ---- カード ---- */
.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.card h2 {
  font-size: 15px;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--color-primary);
}

/* ---- ボタン ---- */
.btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 14px;
  cursor: pointer;
  background: #e7ebe9;
  color: var(--color-text);
}
.btn:hover { filter: brightness(0.96); }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); filter: none; }
.btn-secondary { background: #e7ebe9; border-color: var(--color-border); }
.btn-danger { background: #fff; color: var(--color-danger); border-color: var(--color-danger); }
.file-label { position: relative; }

/* ---- フォーム ---- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 16px;
}
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--color-muted);
}
.form-grid label.wide { grid-column: span 2; }
.form-grid input, .form-grid select {
  font-size: 14px;
  color: var(--color-text);
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
}
.inline-input { display: flex; align-items: center; gap: 6px; }
.inline-input input { flex: 1; }
.toggle-label .toggle-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}
.toggle-wrap input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
}
.input-error {
  border-color: var(--color-danger) !important;
  background: #fdf1f0 !important;
}

.freerent-box {
  margin-top: 14px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 10px 14px 6px;
}
.freerent-box legend {
  font-size: 13px;
  font-weight: bold;
  color: var(--color-primary);
  padding: 0 6px;
}
.calc-note {
  margin: 8px 0 4px;
  font-size: 12.5px;
  color: var(--color-primary-dark);
}

/* ---- PDF取り込み ---- */
.drop-zone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.drop-zone p { margin: 4px 0; }
.drop-zone.drag-over {
  border-color: var(--color-primary);
  background: #eef7f3;
}
.hint { font-size: 12px; color: var(--color-muted); }
.pdf-status {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #eef7f3;
  font-size: 13px;
}
.pdf-status.error { background: #fdf1f0; color: var(--color-danger); }

/* 複数ページPDFのページ選択(サムネイル一覧) */
.page-select-panel {
  margin-top: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px;
  background: #fafbfa;
}
.page-select-info { margin: 0 0 8px; font-size: 13px; color: var(--color-muted); }
.page-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-height: 460px;
  overflow-y: auto;
}
.page-thumb {
  width: 152px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  padding: 4px;
  text-align: center;
}
.page-thumb:hover { border-color: var(--color-primary); background: #eef7f3; }
.page-thumb.selected { outline: 2px solid var(--color-primary); border-color: var(--color-primary); }
.page-thumb canvas { display: block; max-width: 100%; margin: 0 auto; background: #fff; }
.thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  color: var(--color-muted);
  font-size: 12px;
  background: #f2f4f3;
}
.thumb-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--color-muted);
}
.thumb-badge {
  border-radius: 3px;
  padding: 0 5px;
  font-size: 10.5px;
  white-space: nowrap;
}
.thumb-badge.badge-text { background: #e2f1ea; color: var(--color-primary-dark); }
.thumb-badge.badge-image { background: #fdeed8; color: #8a5a00; }

/* OCRフォールバック案内 */
.ocr-offer {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px dashed #c9a227;
  border-radius: 6px;
  background: #fff9e6;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
}
.ocr-offer p { margin: 0; color: #7a5c00; }
.ocr-offer button:disabled { opacity: 0.6; cursor: not-allowed; }
.ocr-mode-label { font-size: 13px; color: #7a5c00; display: inline-flex; align-items: center; gap: 6px; }
.ocr-mode-label select { padding: 4px 8px; }

/* OCR実行中のキャンセルボタン */
.ocr-cancel-wrap { margin-top: 10px; }
.ocr-cancel-wrap button:disabled { opacity: 0.6; cursor: not-allowed; }

.candidate-panel {
  margin-top: 12px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 12px;
  background: #f7fbf9;
}
.candidate-panel h3 { margin: 0 0 8px; font-size: 14px; }
.candidate-item {
  display: grid;
  grid-template-columns: 24px 140px 180px 1fr;
  align-items: baseline;
  gap: 8px;
  padding: 5px 4px;
  border-bottom: 1px solid #e3ebe7;
  cursor: pointer;
}
.candidate-item:hover { background: #eef5f1; }
.cand-name { font-weight: bold; }
.cand-value { color: var(--color-primary-dark); font-weight: bold; }
.cand-context {
  font-size: 11.5px;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.candidate-actions { margin-top: 10px; display: flex; gap: 8px; }
/* 反映対象外(参考情報)の候補行 */
.candidate-item.cand-info { opacity: 0.75; cursor: default; }
.candidate-item.cand-info .cand-name { font-weight: normal; }

/* ---- 明細テーブル ---- */
.table-wrap { overflow-x: auto; }
#itemsTable {
  width: 100%;
  min-width: 1020px; /* 列圧縮を防ぎ .table-wrap の横スクロールを発動させる */
  border-collapse: collapse;
  margin-bottom: 10px;
}
#itemsTable th, #itemsTable td {
  border: 1px solid var(--color-border);
  padding: 5px 6px;
  font-size: 13px;
  vertical-align: middle;
}
#itemsTable thead th {
  background: #eef2f0;
  font-weight: bold;
  white-space: nowrap;
}
#itemsTable input, #itemsTable select {
  font-size: 13px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  width: 100%;
}
#itemsTable input:hover, #itemsTable select:hover,
#itemsTable input:focus, #itemsTable select:focus {
  border-color: var(--color-border);
  background: #fff;
  outline: none;
}
/* 並べ替え列(ドラッグハンドル + ↑↓ボタン) */
.col-move { width: 64px; text-align: center; white-space: nowrap; }
td.col-move { padding: 2px 4px; }
.drag-handle {
  display: inline-block;
  cursor: grab;
  color: var(--color-muted);
  font-size: 13px;
  letter-spacing: -2px;
  padding: 2px 3px 2px 1px;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
}
.drag-handle:active { cursor: grabbing; }
.move-btns { display: inline-flex; flex-direction: column; gap: 1px; vertical-align: middle; }
.row-up, .row-down {
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: 3px;
  font-size: 10px;
  line-height: 1.2;
  padding: 0 5px;
  cursor: pointer;
  color: var(--color-muted);
}
.row-up:hover:not(:disabled), .row-down:hover:not(:disabled) {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.row-up:disabled, .row-down:disabled { opacity: 0.3; cursor: default; }
tr.row-dragging td { opacity: 0.45; }
#itemsTable tr.drop-above td { border-top: 2px solid var(--color-primary); }
#itemsTable tr.drop-below td { border-bottom: 2px solid var(--color-primary); }

.col-enabled { width: 36px; text-align: center; }
.col-enabled input { width: 16px; height: 16px; accent-color: var(--color-primary); }
.col-label { min-width: 180px; }
.col-kind { width: 100px; }
.col-factor { width: 190px; white-space: nowrap; }
/* #itemsTable を付けて `#itemsTable input/select { width:100% }`(1-0-1)より詳細度を上げる(1-1-0) */
#itemsTable .row-base { width: 105px; display: inline-block; }
#itemsTable .row-factor { width: 60px; display: inline-block; text-align: right; }
.factor-x { font-size: 12px; color: var(--color-muted); }
.factor-none { color: var(--color-muted); }
.col-amount { width: 130px; }
.row-amount { text-align: right; font-variant-numeric: tabular-nums; }
.row-amount.readonly { color: var(--color-primary-dark); font-weight: bold; }
.btn-auto {
  font-size: 11px;
  padding: 2px 6px;
  margin-top: 2px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  color: var(--color-muted);
  white-space: nowrap;
}
.btn-auto:hover { color: var(--color-primary); border-color: var(--color-primary); }
.col-tax { width: 84px; }
.col-note { min-width: 200px; font-size: 12px; color: var(--color-muted); }
/* 備考セルは編集可能input。未入力時は自動文言をplaceholderで薄く表示 */
.note-cell input { color: var(--color-text); }
.note-cell input::placeholder { color: var(--color-muted); opacity: 1; }

/* ---- 月額費用テーブル ---- */
#monthlyTable {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  margin-bottom: 10px;
}
#monthlyTable th, #monthlyTable td {
  border: 1px solid var(--color-border);
  padding: 5px 6px;
  font-size: 13px;
  vertical-align: middle;
}
#monthlyTable thead th {
  background: #eef2f0;
  font-weight: bold;
  white-space: nowrap;
}
#monthlyTable input {
  font-size: 13px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  width: 100%;
}
#monthlyTable input:hover, #monthlyTable input:focus {
  border-color: var(--color-border);
  background: #fff;
  outline: none;
}
#monthlyTable .col-rate { width: 96px; white-space: nowrap; }
#monthlyTable .mrow-pct { width: 58px; display: inline-block; text-align: right; }
.pct-unit { font-size: 12px; color: var(--color-muted); }
#monthlyTable .col-amount { width: 150px; }
#monthlyTable .mrow-amount { text-align: right; font-variant-numeric: tabular-nums; }
#monthlyTable .mrow-amount.readonly { color: var(--color-primary-dark); font-weight: bold; }
#monthlyTable .col-del { width: 34px; text-align: center; }
#monthlyTable .mrow-del {
  border: none;
  background: transparent;
  color: var(--color-danger);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
#monthlyTable .mrow-del:hover { background: #fdf1f0; border-radius: 4px; }
.col-del { width: 34px; text-align: center; }
.row-del {
  border: none;
  background: transparent;
  color: var(--color-danger);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
.row-del:hover { background: #fdf1f0; border-radius: 4px; }

/* 無効行・日割りOFF行のグレーアウト */
tr.row-disabled td, tr.row-prorated-off td { background: #f4f5f4; }
tr.row-disabled input, tr.row-disabled select,
tr.row-prorated-off input, tr.row-prorated-off select {
  color: #a5aeaa;
}
tr.row-prorated-off .row-amount.readonly { color: #a5aeaa; font-weight: normal; }

/* 日割りOFF+非表示設定時の0円日割り行 */
#itemsTable tr.row-hidden { display: none; }

/* ---- 合計 ---- */
.total-area {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 8px;
  padding: 10px 14px;
  background: #eef7f3;
  border-radius: var(--radius);
}
.total-label { font-weight: bold; }
.total-amount {
  font-size: 26px;
  font-weight: bold;
  color: var(--color-primary-dark);
  font-variant-numeric: tabular-nums;
}
.total-months { font-size: 12.5px; color: var(--color-muted); }

/* =========================================================
 * 見積書(画面プレビュー + 印刷)
 *  - 明朝体 / 墨色 + 深緑基調 + ゴールドの抑えたアクセント
 *  - 罫線は極細の水平線中心、余白広めの上品な紙面
 * ========================================================= */
.quote-sheet-wrap {
  max-width: 1080px;
  margin: 0 auto 48px;
  padding: 0 16px;
}
.preview-heading {
  font-size: 15px;
  color: var(--color-muted);
  margin: 8px 0;
}
.quote-sheet {
  /* 見積書専用パレット */
  --q-ink: #1f1f1f;         /* 墨色 */
  --q-ink-soft: #55534d;    /* 補助文字 */
  --q-accent: #1c4437;      /* 深緑(基調1色) */
  --q-gold: #b8963e;        /* ゴールドアクセント */
  --q-hairline: #cdc7ba;    /* 極細罫線 */
  background: #fff;
  border: none;
  box-shadow: 0 1px 3px rgba(30, 30, 25, 0.10), 0 10px 32px rgba(30, 30, 25, 0.12);
  padding: 17mm 19mm 15mm;
  max-width: 210mm;
  margin: 0 auto;
  color: var(--q-ink);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS PMincho", serif;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  line-height: 1.75;
}

/* 表題: 大きめ・字間広め + 下に細いゴールドの二重線
   (「初期費用概算御見積書」10文字が上品に収まるよう字間・サイズを調整) */
.quote-title {
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-indent: 0.32em; /* letter-spacing の末尾余白を補正して光学的中央へ */
  color: var(--q-ink);
  margin: 4px 0 0;
}
.quote-title::after {
  content: "";
  display: block;
  width: 300px;
  height: 3px;
  margin: 12px auto 0;
  border-top: 1px solid var(--q-gold);
  border-bottom: 1px solid var(--q-gold);
}

/* 宛名・発行日 */
.quote-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 30px 0 26px;
}
.quote-addressee {
  font-size: 21px;
  letter-spacing: 0.06em;
  border-bottom: 0.5px solid var(--q-ink-soft);
  padding: 0 28px 6px 4px;
  min-width: 240px;
}
.quote-issue {
  font-size: 11px;
  color: var(--q-ink-soft);
  letter-spacing: 0.05em;
}

/* 物件情報: 水平罫線のみの表組み */
.quote-property {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 26px;
  border-top: 0.5px solid var(--q-hairline);
}
.quote-property th, .quote-property td {
  border: none;
  border-bottom: 0.5px solid var(--q-hairline);
  padding: 8px 6px;
  text-align: left;
  font-size: 12.5px;
}
.quote-property th {
  width: 108px;
  background: none;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--q-accent);
  white-space: nowrap;
}

/* 明細: ヘッダは薄い背景+字間広めの小ラベル、行は極細水平線 */
.quote-items {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
}
.quote-items thead tr {
  background: #f5f3ec;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.quote-items thead th {
  background: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  border: none;
  border-top: 1px solid var(--q-accent);
  border-bottom: 0.5px solid var(--q-hairline);
  padding: 7px 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--q-accent);
  text-align: left;
}
.quote-items thead th.q-amount { text-align: right; }
.quote-items tbody td {
  border: none;
  border-bottom: 0.5px solid var(--q-hairline);
  padding: 7.5px 10px;
  font-size: 12.5px;
}
.quote-items .q-label { width: 34%; }
.quote-items .q-amount {
  width: 20%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.quote-items .q-note { font-size: 10.5px; color: var(--q-ink-soft); }

/* 合計: 囲わず、上下の細線(下はゴールド二重線)+太字・サイズアップ */
.quote-items tfoot .q-total th,
.quote-items tfoot .q-total td {
  border: none;
  border-top: 1px solid var(--q-gold);
  border-bottom: 3px double var(--q-gold);
  background: none;
  padding: 11px 10px 10px;
  font-weight: 700;
}
.quote-items tfoot .q-total th {
  font-size: 13px;
  letter-spacing: 0.5em;
  color: var(--q-accent);
  text-align: left;
}
.quote-items tfoot .q-total td.q-amount { font-size: 17.5px; color: var(--q-ink); }

.quote-notes {
  font-size: 10.5px;
  color: var(--q-ink-soft);
  letter-spacing: 0.02em;
}
.quote-notes p { margin: 3px 0; }

/* 発行元: 右下に小さめの字で整然と */
.quote-issuer {
  margin: 26px 0 0 auto; /* 最下部・右寄せ */
  width: fit-content;
  min-width: 240px;
  font-size: 11px;
  line-height: 1.9;
  color: var(--q-ink-soft);
  border-top: 0.5px solid var(--q-gold);
  padding-top: 8px;
  position: relative; /* 社判の配置基準 */
  text-align: left;
}
/* 社判・ロゴ: 発行元テキストの右横に角印風に配置 */
.quote-issuer:has(.q-issuer-stamp:not([hidden])) { padding-right: 76px; }
.q-issuer-stamp {
  position: absolute;
  right: 0;
  top: 12px;
  width: 64px;
  height: auto;
  max-height: 64px;
  object-fit: contain;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* 発行元フォームの社判アップロード欄 */
.stamp-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.stamp-label { font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.stamp-preview { width: 56px; height: 56px; object-fit: contain; border: 1px solid #ddd; border-radius: 4px; background: #fff; }

.quote-issuer .q-issuer-shop {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--q-ink);
}

/* ---- 月額費用:計算書(見積書下部の別集計セクション) ---- */
.quote-monthly-section {
  margin-top: 26px;
  clear: both;
}
.quote-monthly-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--q-accent);
  border-left: 3px solid var(--q-gold);
  padding-left: 8px;
  margin: 0 0 8px;
}
.quote-monthly { margin-bottom: 0; }
/* 合計行は初期費用合計より控えめに */
.quote-monthly tfoot .q-total th { letter-spacing: 0.2em; font-size: 12px; }
.quote-monthly tfoot .q-total td.q-amount { font-size: 15px; }

/* =========================================================
 * 印刷(A4)
 * ========================================================= */
@media print {
  /* 余白ゼロにするとブラウザのヘッダー/フッター(タイトル・日時・URL・ページ番号)が
     印字されなくなる。紙面の余白は .quote-sheet 側の padding で確保する */
  @page { size: A4 portrait; margin: 0; }
  html, body { background: #fff; }
  .app-ui, .preview-heading { display: none !important; }
  .quote-sheet-wrap { margin: 0; padding: 0; max-width: none; }
  .quote-sheet {
    border: none;
    box-shadow: none;
    padding: 13mm 16mm;
    max-width: none;
    font-size: 12px;
    line-height: 1.6;
  }
  .quote-title { font-size: 27px; margin-top: 0; }
  .quote-title::after { margin-top: 10px; }
  .quote-head { margin: 20px 0 16px; }
  .quote-addressee { font-size: 19px; }
  /* 行の縦リズムをわずかに詰めて標準15行+発行元を1ページに収める(字間・罫線・配色は据え置き) */
  .quote-property { margin-bottom: 18px; }
  .quote-property th, .quote-property td { padding: 6px; }
  .quote-items { margin-bottom: 14px; }
  .quote-items thead th { padding: 5.5px 10px; }
  .quote-items tbody td { padding: 5px 10px; line-height: 1.55; }
  .quote-items tfoot .q-total th,
  .quote-items tfoot .q-total td { padding: 9px 10px 8px; }
  .quote-items tbody tr { break-inside: avoid; }
  .quote-items tfoot { break-inside: avoid; }
  .quote-notes { font-size: 10px; }
  /* 発行元ブロックの改ページ泣き別れ防止 */
  .quote-issuer {
    break-inside: avoid;
    page-break-inside: avoid; /* 旧エンジン向けフォールバック */
    margin-top: 16px;
    line-height: 1.75;
  }
  /* 月額費用:計算書はページを跨いで泣き別れさせない(丸ごと次ページへ送る) */
  .quote-monthly-section {
    break-inside: avoid;
    page-break-inside: avoid; /* 旧エンジン向けフォールバック */
    margin-top: 18px;
  }
}

/* 画面のみ表示 */
@media screen {
  .app-ui-only { display: block; }
}