/**
 * customer.css
 *
 * 顧客画面（.customer-app）専用のスタイル上書き。
 * sg-base.css/theme.css/app.cssは管理画面と共通のため、ここで
 * .customer-app配下だけに効くよう影響範囲を絞って上書きする。
 */

/* ─── 文字サイズを全体的に見やすく拡大 ───
   管理画面はデータ密度優先で今の小さめサイズのまま維持し、
   顧客画面のみ読みやすさを優先して拡大する。 */
.customer-app {
  --sg-text-xs:   13px;
  --sg-text-sm:   15px;
  --sg-text-base: 16px;
  --sg-text-lg:   21px;
}

/* ─── 商品選択画面: 左右パネルを独立スクロールにする ───
   以前は左（商品ツリー）・右（商品明細一覧）が1つの長いページとして
   一緒にスクロールしていたため、片方を探している間にもう片方の
   位置が見えなくなっていた。ヘッダー分を差し引いた高さで、
   それぞれ独立してスクロールするようにする。 */
.customer-app .fu-order-layout {
  align-items: flex-start;
}
/* 左（商品ツリー）は画面全体で独立スクロール。
   右（商品明細一覧）は「商品カード部分」と「備考・確認ボタン」を
   分離し、商品カード部分だけをスクロール、備考・確認ボタンは常に
   見える位置に固定する（新設）。以前は右カラム全体を一括で
   max-height+overflow-yにしていたため、商品を増やしていくと備考欄・
   確認ボタンがスクロールしないと見えない位置に押しやられてしまい、
   「商品を増やすと備考の入力が見えなくなる」という不具合になっていた。 */
.customer-app .fu-order-left {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  padding-right: 4px; /* スクロールバーがコンテンツに重ならないように */
}
.customer-app .fu-order-right {
  max-height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
}
.customer-app .fu-order-scroll {
  flex: 1 1 auto;
  min-height: 0; /* flexコンテナがオーバーフローせず正しくスクロールするために必須 */
  overflow-y: auto;
  padding-right: 4px;
}
.customer-app .fu-order-footer {
  flex: 0 0 auto; /* 常に全体表示。縮んだりスクロールで隠れたりしない */
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ─── プリント発注: 商品カード（商品1・商品2…）を横並びグリッドに ───
   以前は縦に1列で積み上がっていく形だったため、商品を追加するたびに
   画面が縦に伸びていくばかりだった。プリント発注では画像枚数もそれほど
   多くないカードが多いため、横に並べて2列・3列と折り返す形にする。
   アルバム発注は画像点数が多く縦に長くなりやすいため、これまで通り
   1列のまま変更しない。 */
.customer-app.order-type-print .fu-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}
.customer-app.order-type-print .fu-item-grid .sg-card {
  margin-bottom: 0; /* グリッドのgapで間隔を取るため、個別のmargin-bottomは無効化 */
}

/* ─── プリント発注: 商品選択をカードグリッド表示に ───
   以前は1行1商品の横長リストだったため無駄が多かった。
   カード形式にして1画面あたりの表示数を増やす。
   アルバム発注は画像枚数が多く縦スペースを要するため、
   従来の横長リストのまま変更しない（.order-type-album側は対象外）。 */
.customer-app.order-type-print .fu-tree-child {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.customer-app.order-type-print .fu-tree-child-node {
  flex-direction: column;
  align-items: stretch !important;
  text-align: center;
  padding: 10px 8px;
  min-height: 76px;
  justify-content: center;
}
.customer-app.order-type-print .fu-tree-child-node > span:first-child {
  flex-direction: column;
  gap: 4px;
}
.customer-app.order-type-print .fu-tree-child-node .fu-tree-icon {
  display: none; /* カード形式では●アイコンは不要 */
}
.customer-app.order-type-print .fu-favorite-star {
  position: absolute;
  top: 2px;
  right: 2px;
}
.customer-app.order-type-print .fu-tree-child-node {
  position: relative;
}
/* 【重要】星マークが商品名に被る不具合の修正。カード形式では
   fu-tree-child-nodeがcolumn方向になり、星ボタンだけabsolute配置に
   なるため、狭いカードだと商品名テキストの折り返しと星マークの
   位置が重なってしまっていた。商品名側に星マーク分の余白を
   確保することで重ならないようにする。 */
.customer-app.order-type-print .fu-tree-child-node > span:first-child {
  padding-right: 22px;
}