/* OrderPreview - Figma 発注書プレビュー仕様準拠 */

/* 発注書は仕入先へ送る書類なので、閲覧環境の既定フォントに字形を任せない。pdfgen のコンテナには
   日本語フォントが入っていないため、指定しないと PDF が豆腐や代替フォントになる。実体は
   Webfont で読む（レイアウトの Google Fonts の link）。 */
@theme {
  --font-noto-sans-jp: "Noto Sans JP", sans-serif;
}

/* 幅は A4 縦の実寸（210mm）で固定する。実際の印刷結果と同じ縮尺で組み、画面では
   利用側（確認画面の zoom）が縮小して収める。印刷時は @media print で全幅へ上書きする。 */
.ui-order-preview {
  @apply font-noto-sans-jp flex flex-col gap-4 rounded-md border border-gray-200 bg-white px-6 py-8 text-gray-900;
  /* A4 縦の実寸幅。標準ユーティリティに無い値なので生の CSS で指定する。 */
  width: 210mm;
}

/* ヘッダー */
.ui-order-preview__header {
  @apply flex w-full items-end justify-between whitespace-nowrap;
}

.ui-order-preview__title {
  @apply text-2xl font-bold leading-8;
}

.ui-order-preview__header-meta {
  @apply flex items-start gap-4 text-sm font-normal leading-5;
}

.ui-order-preview__divider {
  @apply h-0.5 w-full bg-gray-100;
}

/* 宛名（仕入先）/ 自社情報 */
.ui-order-preview__parties {
  @apply flex w-full items-start justify-between gap-4;
}

.ui-order-preview__recipient {
  @apply flex w-90 flex-col gap-2;
}

.ui-order-preview__recipient-name {
  @apply flex gap-1 whitespace-nowrap text-xl font-bold leading-7;
}

.ui-order-preview__statement {
  @apply text-sm font-normal leading-5 text-gray-600;
}

.ui-order-preview__total {
  @apply flex w-full flex-col gap-1;
}

.ui-order-preview__total-row {
  @apply flex w-full items-end justify-between whitespace-nowrap;
}

.ui-order-preview__total-label {
  @apply text-base font-normal leading-6;
}

.ui-order-preview__total-amount {
  @apply flex items-end gap-1;
}

.ui-order-preview__total-value {
  @apply text-2xl font-bold leading-8;
}

.ui-order-preview__total-unit {
  @apply text-base font-normal leading-6;
}

.ui-order-preview__total-underline {
  @apply h-px w-full bg-gray-900;
}

.ui-order-preview__issuer {
  @apply flex w-74 flex-col gap-2;
}

.ui-order-preview__issuer-name {
  @apply text-base font-bold leading-6;
}

.ui-order-preview__contacts {
  @apply flex w-full flex-col gap-1 text-sm font-normal leading-5 text-gray-600;
}

.ui-order-preview__contact {
  @apply flex items-center gap-1;
}

.ui-order-preview__contact--address {
  @apply items-start;
}

.ui-order-preview__contact-text {
  @apply min-w-0 flex-1;
}

/* 件名 */
.ui-order-preview__subject {
  @apply w-full text-base font-bold leading-6;
}

/* 明細テーブル。列幅は thead の th で一元管理し、ヘッダーと本体を必ず揃える */
.ui-order-preview__table {
  @apply w-full table-fixed border-collapse;
}

.ui-order-preview__th {
  @apply border-b border-gray-200 py-2 text-left align-bottom text-xs font-bold leading-4;
}

.ui-order-preview__td {
  @apply border-b border-gray-200 py-3 align-middle text-xs font-normal leading-4;
}

/* 品名列。幅指定が無いため table-fixed で残り幅を占める。明細詳細を縦に積むため中身は flex-col */
.ui-order-preview__col-name {
  @apply pr-2;
}

.ui-order-preview__cell-name {
  @apply flex flex-col gap-1;
}

.ui-order-preview__col-date {
  @apply w-26 px-2;
}

.ui-order-preview__col-num {
  @apply w-23 px-2 text-right;
}

.ui-order-preview__col-amount {
  @apply w-23 pl-2 text-right;
}

/* 明細詳細（ID・型番・カラー…）。ラベルは内容幅で右寄せ、値は残り幅で長い場合に折り返す。
   minmax(0,1fr) で値列が親幅を超えず確実に折り返し、左の 2px 罫線で詳細ブロックを仕切る。 */
.ui-order-preview__detail {
  @apply grid gap-x-2 gap-y-1 border-l-2 border-gray-200 pl-2;
  grid-template-columns: auto minmax(0, 1fr);
}

.ui-order-preview__detail-label {
  @apply whitespace-nowrap text-right text-gray-600;
}

.ui-order-preview__detail-value {
  @apply min-w-0 break-words whitespace-pre-wrap;
}

/* フッター（納品先・補足 / 金額サマリー） */
.ui-order-preview__footer {
  @apply flex w-full items-start justify-between gap-4;
}

.ui-order-preview__footer-left {
  @apply flex flex-1 flex-col gap-4;
}

.ui-order-preview__destination {
  @apply flex w-full flex-col gap-1 text-sm font-normal leading-5 text-gray-600;
}

.ui-order-preview__destination-name {
  @apply flex gap-2 whitespace-nowrap text-sm font-bold leading-5 text-gray-900;
}

.ui-order-preview__notes {
  @apply flex w-full flex-col gap-1 text-sm font-normal leading-5;
}

.ui-order-preview__notes-label {
  @apply font-bold;
}

.ui-order-preview__notes-body {
  @apply break-words whitespace-pre-wrap;
}

.ui-order-preview__calc {
  @apply w-60;
}

/* PDF / 印刷。画面用のカード装飾（枠線・角丸）を外してページ全幅で出し、
   背景や罫線の色がそのまま印刷されるよう color-adjust を有効にする。
   セクション・明細行はページ境界で分割しない。 */
@media print {
  @page {
    margin: 14mm;
  }

  .ui-order-preview {
    width: 100%;
    border: 0;
    border-radius: 0;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .ui-order-preview__parties,
  .ui-order-preview__footer,
  .ui-order-preview__table tr {
    break-inside: avoid;
  }
}