/* style.css — Shisto 営業書類 PWA
   構成：
   1) 変数・リセット
   2) アプリ本体UI（タブ・フォーム・ボタン・履歴・設定）— モバイルファースト、
      input/textarea/selectは16px以上（iOS自動ズーム防止）
   3) 印刷帳票（.printable 配下）— sales-docs/templates/quote.html・invoice.html の
      デザイン・CSSを移植（見た目を既存テンプレートと同一にするため、クラス名も踏襲）
   4) 印刷用（@media print）
*/

/* ---------- 1) 変数・リセット ---------- */
:root {
  --ink: #1a2330;
  --sub: #57626f;
  --muted: #95a3b8;
  --line: #d7dee6;
  --bg: #f3f6f9;
  --navy: #1b3a5b;
  --navy-dark: #122a42;
  --danger: #a3391f;
  --ok: #1e7a44;
  --warn-bg: #fff6e5;
  --warn-border: #e3b23c;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
}

.hidden {
  display: none !important;
}

/* ---------- 2) アプリ本体UI ---------- */

.app-chrome {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

.appbar {
  background: var(--navy);
  color: #fff;
  padding: calc(env(safe-area-inset-top) + 14px) 16px 14px;
}

.appbar-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tabbar {
  display: flex;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}

.tab-btn {
  flex: 1;
  padding: 12px 4px;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--sub);
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

.tab-btn[aria-selected="true"] {
  color: var(--navy-dark);
  font-weight: 700;
  border-bottom-color: var(--navy);
}

.main-view {
  flex: 1;
  padding: 16px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

.app-footer {
  text-align: center;
  font-size: 12px;
  color: var(--sub);
  padding: 14px 16px calc(env(safe-area-inset-bottom) + 14px);
  border-top: 1px solid var(--line);
  background: #fff;
}

.field-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 14px;
  background: #fff;
}

.field-group legend {
  font-weight: 700;
  font-size: 13px;
  color: var(--navy-dark);
  padding: 0 4px;
}

.field {
  display: block;
  margin-bottom: 12px;
}

.field.small {
  max-width: 140px;
}

.field > span {
  display: block;
  font-size: 13px;
  color: var(--sub);
  margin-bottom: 4px;
}

.field em {
  font-style: normal;
  color: var(--danger);
  font-size: 11px;
  margin-left: 4px;
}

.field-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.field-row .field {
  flex: 1;
  min-width: 120px;
}

input[type="text"],
input[type="date"],
input[type="number"],
input[type="url"],
select,
textarea {
  width: 100%;
  font-size: 16px; /* iOS自動ズーム防止 */
  padding: 10px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
}

input[readonly] {
  background: #f0f2f5;
  color: var(--sub);
}

textarea {
  resize: vertical;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-field input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.hint {
  font-size: 12px;
  color: var(--sub);
  margin: 4px 0 10px;
}

.btn {
  display: inline-block;
  font-size: 15px;
  padding: 11px 18px;
  border-radius: 6px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  min-height: 44px; /* タップしやすいサイズ */
}

.btn.primary {
  background: var(--navy);
  border-color: var(--navy);
}

.btn.ghost {
  background: #fff;
  color: var(--navy-dark);
  border-color: var(--line);
}

.btn.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.btn.danger.ghost {
  background: #fff;
  color: var(--danger);
  border-color: var(--danger);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.form-actions .btn {
  flex: 1;
  min-width: 130px;
}

.banner {
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.6;
}

.banner-warn {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: #6b4a06;
}

.banner-ok {
  background: #e7f6ec;
  border: 1px solid var(--ok);
  color: var(--ok);
  font-weight: 700;
}

.banner-error {
  background: #fdeceb;
  border: 1px solid var(--danger);
  color: var(--danger);
  font-weight: 700;
}

.banner ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.error-box {
  border: 1px solid var(--danger);
  background: #fdeceb;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.error-box-title {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--danger);
}

.error-box ul {
  margin: 0;
  padding-left: 18px;
  color: var(--danger);
  font-size: 13px;
}

.items-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 10px;
}

.item-row {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: #fafbfc;
}

.item-row-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-size: 14px;
}

.doc-total-display {
  text-align: right;
  font-size: 15px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}

.empty-note {
  color: var(--sub);
  font-size: 14px;
  padding: 20px 0;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
}

.history-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--sub);
  margin-bottom: 6px;
}

.badge {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
}

.history-card-title {
  font-weight: 700;
  margin-bottom: 4px;
}

.history-card-total {
  color: var(--navy-dark);
  font-weight: 700;
  margin-bottom: 8px;
}

.history-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.inline-confirm {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--danger);
  border-radius: 6px;
  background: #fdeceb;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.inline-confirm p,
.inline-confirm span {
  margin: 0;
  font-size: 13px;
  color: var(--danger);
  flex-basis: 100%;
}

.settings-summary-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: 14px;
  margin: 0 0 14px;
}

.settings-summary-list dt {
  color: var(--sub);
}

.settings-summary-list dd {
  margin: 0;
}

.settings-summary-list dd.muted {
  color: var(--muted);
}

.danger-zone {
  border-color: var(--danger);
}

/* ---------- プレビューオーバーレイ（画面表示時） ---------- */

.preview-overlay {
  position: fixed;
  inset: 0;
  background: #e9edf1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 20;
}

.preview-toolbar {
  position: sticky;
  top: 0;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  z-index: 2;
}

.printable {
  padding: 16px 0 60px;
  display: flex;
  justify-content: center;
}

/* ---------- 3) 印刷帳票（.printable 配下）
   sales-docs/templates/quote.html・invoice.html のCSSを移植。 ---------- */

.printable .page {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 16mm 15mm 14mm;
  background: #fff;
  box-shadow: 0 2px 18px rgba(20, 30, 45, 0.12);
  color: var(--ink);
  font-size: 10pt;
  line-height: 1.6;
}

.printable .doc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 3px solid var(--navy);
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.printable .doc-name {
  font-size: 22pt;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--navy);
}

.printable .doc-meta {
  text-align: right;
  font-size: 9pt;
  color: var(--sub);
  line-height: 1.7;
}

.printable .doc-meta div strong {
  color: var(--ink);
}

.printable .doc-meta .due {
  color: var(--danger);
  font-size: 10pt;
}

.printable .meta-row {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.printable .meta-label {
  color: var(--sub);
}

.printable .parties {
  display: flex;
  justify-content: space-between;
  gap: 10mm;
  margin-bottom: 8px;
}

.printable .recipient-block {
  flex: 1.2;
}

.printable .recipient-name {
  font-size: 15pt;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  margin-bottom: 6px;
  min-height: 8mm;
}

.printable .title-line {
  font-size: 9.5pt;
  color: var(--sub);
}

.printable .issuer-block {
  flex: 1;
  font-size: 8.8pt;
  color: var(--sub);
  line-height: 1.65;
  text-align: right;
}

.printable .issuer-block strong {
  color: var(--ink);
  font-size: 10pt;
}

.printable .lead-text {
  font-size: 9.5pt;
  color: var(--sub);
  margin: 6px 0 10px;
}

.printable .amount-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1.5px solid var(--navy);
  border-radius: 4px;
  background: var(--bg);
  padding: 8px 14px;
  margin-bottom: 12px;
}

.printable .amount-callout .label {
  font-size: 10.5pt;
  font-weight: 700;
  color: var(--navy-dark);
}

.printable .amount-callout .value {
  font-size: 19pt;
  font-weight: 900;
  color: var(--navy-dark);
  letter-spacing: 0.02em;
}

.printable table.items-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
}

.printable .items-table thead th {
  background: var(--navy);
  color: #fff;
  font-size: 8.8pt;
  font-weight: 700;
  padding: 5px 6px;
  text-align: center;
  border: 1px solid var(--navy);
}

.printable .items-table tbody td {
  border: 1px solid var(--line);
  padding: 5px 7px;
  font-size: 9.3pt;
  vertical-align: top;
}

.printable .items-table .col-name {
  text-align: left;
  width: auto;
}

.printable .items-table .col-qty {
  text-align: center;
  width: 12mm;
  white-space: nowrap;
}

.printable .items-table .col-unit {
  text-align: center;
  width: 14mm;
  white-space: nowrap;
}

.printable .items-table .col-price {
  text-align: right;
  width: 26mm;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.printable .items-table .col-total {
  text-align: right;
  width: 28mm;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.printable .item-detail {
  font-size: 8.3pt;
  color: var(--sub);
  margin-top: 2px;
}

.printable .item-note {
  font-size: 7.8pt;
  color: #9a5b00;
  margin-top: 2px;
}

.printable table.totals-table {
  width: 76mm;
  margin-left: auto;
  border-collapse: collapse;
  margin-bottom: 10px;
}

.printable .totals-table td {
  border: 1px solid var(--line);
  padding: 5px 8px;
  font-size: 9.5pt;
}

.printable .totals-table td.label {
  background: var(--bg);
  text-align: center;
  width: 34mm;
}

.printable .totals-table td.value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.printable .totals-table tr.grand td {
  font-size: 11.5pt;
  font-weight: 900;
  background: var(--bg);
  color: var(--navy-dark);
}

.printable .notes-block {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 9px 12px;
  margin-bottom: 8px;
  background: #fafbfc;
  font-size: 8.8pt;
  line-height: 1.65;
}

.printable .notes-title {
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--navy-dark);
}

.printable .notes-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.printable .notes-list li {
  padding-left: 3mm;
  text-indent: -3mm;
  margin-bottom: 1mm;
}

.printable .notes-list li::before {
  content: "・";
}

.printable .no-notes {
  color: var(--muted);
}

.printable .payment-terms {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}

.printable .bank-info {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 9px 12px;
  margin-bottom: 8px;
  font-size: 9pt;
  line-height: 1.75;
}

.printable .bank-title {
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--navy-dark);
}

.printable .bank-row {
  display: inline-block;
  margin-right: 14px;
}

.printable .bank-label {
  color: var(--sub);
  margin-right: 4px;
}

.printable .bank-note {
  margin-top: 5px;
  font-size: 8pt;
  color: var(--sub);
}

.printable .doc-footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 7.8pt;
  color: var(--sub);
  line-height: 1.6;
}

/* ---------- 自己テスト表示（?selftest=1） ---------- */

.selftest-view {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}

.selftest-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
}

.selftest-list li {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
}

.selftest-list li.pass {
  color: var(--ok);
}

.selftest-list li.fail {
  color: var(--danger);
  font-weight: 700;
}

/* ---------- 3.5) ブロンコスタブ（セグメント切替＋白黒帳票） ---------- */

/* タブが5個になっても崩れないように */
.tab-btn {
  font-size: 13px;
  padding: 12px 2px;
}

.segment {
  display: flex;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}

.segment-btn {
  flex: 1;
  padding: 12px 8px;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--sub);
  cursor: pointer;
}

.segment-btn[aria-selected="true"] {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
}

/* 帳票（先方Excel様式の再現・白黒罫線） */
.printable .b-page {
  color: #000;
  font-size: 10pt;
  line-height: 1.5;
}

.printable .b-title {
  font-size: 16pt;
  font-weight: 700;
  letter-spacing: 0.3em;
}

.printable .b-spaced {
  text-align: center;
  margin: 2mm 0 4mm;
}

.printable .b-right {
  text-align: right;
  font-size: 9.5pt;
}

.printable .b-head-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 1.5mm 0;
  font-size: 9.5pt;
}

.printable .b-underline {
  display: inline-block;
  min-width: 40mm;
  border-bottom: 1px solid #000;
}

.printable table.b-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2mm;
}

.printable .b-table th,
.printable .b-table td {
  border: 1px solid #000;
  padding: 1.5mm 2mm;
  font-size: 8.5pt;
  vertical-align: top;
}

.printable .b-table th {
  background: #f0f0f0;
  font-weight: 700;
  text-align: center;
}

.printable .b-table td.c {
  text-align: center;
}

.printable .b-table td.r {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.printable .b-table td.pt {
  font-size: 7.5pt;
  color: #333;
}

.printable .b-table td.method {
  font-size: 7.5pt;
  white-space: nowrap;
}

.printable .b-table th.w-no { width: 9mm; }
.printable .b-table th.w-date { width: 13mm; }
.printable .b-table th.w-purpose { width: 26mm; }
.printable .b-table th.w-km { width: 15mm; }
.printable .b-table th.w-pt { width: 30mm; }
.printable .b-table th.w-method { width: 27mm; }
.printable .b-table th.w-amount { width: 18mm; }
.printable .b-table th.w-qty { width: 14mm; }
.printable .b-table th.w-price { width: 20mm; }

.printable .b-total-row td {
  font-weight: 700;
  background: #fafafa;
}

.printable .b-note-cell {
  font-size: 7pt;
}

.printable .b-parties {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10mm;
  margin: 3mm 0 2mm;
}

.printable .b-client {
  font-size: 13pt;
  font-weight: 700;
  border-bottom: 1px solid #000;
  padding: 0 4mm 1mm 0;
  align-self: flex-start;
}

.printable .b-issuer {
  text-align: right;
  font-size: 9pt;
  line-height: 1.7;
}

.printable .b-issuer-name {
  font-size: 11pt;
  font-weight: 700;
  margin-top: 1mm;
}

.printable .b-amount-line {
  display: flex;
  gap: 4mm;
  align-items: baseline;
  border-bottom: 2px double #000;
  width: 100mm;
  padding: 2mm 1mm;
  margin: 4mm 0 5mm;
  font-size: 11pt;
}

.printable .b-amount-line strong {
  font-size: 16pt;
}

.printable .b-invoice-table td {
  height: 6.5mm;
}

.printable .b-terms {
  margin-top: 5mm;
  font-size: 9.5pt;
  line-height: 2;
}

.printable .b-bank2 {
  padding-left: 30mm;
}

.printable .b-fee-note {
  font-size: 8.5pt;
  margin-top: 1mm;
}

/* ---------- 4) 印刷用 ---------- */

@page {
  size: A4;
  margin: 0;
}

@media print {
  .app-chrome,
  .no-print,
  #selftest-view {
    display: none !important;
  }
  html,
  body {
    background: #fff;
  }
  .preview-overlay {
    position: static !important;
    overflow: visible !important;
    background: none !important;
  }
  .printable {
    padding: 0;
  }
  .printable .page {
    margin: 0;
    padding: 15mm 14mm 12mm;
    box-shadow: none;
  }
}