/* DetailRow */
.order-detail-lines__content {
  display: none;
}

.order-detail-lines__grid {
  grid-template-columns: 119px 465px 120px 120px 100px 136px 136px 32px 32px 32px 0px 0px 0px;
  min-width: max-content;
  padding-right: 8px;
  width: max-content;
}

.order-detail-lines__optional {
  display: none;
}

.order-detail-lines__copy-header,
.order-detail-lines__copy-cell {
  grid-column: 9;
}

.order-detail-lines__delete-header,
.order-detail-lines__delete-cell {
  grid-column: 10;
}

/* CSV インポート中のローディング行。明細行と同じ全幅・行高で、中央にスピナーを出す。 */
.order-detail-lines__loading {
  display: none;
  grid-column: 1 / -1;
}

.order-detail-lines__loading .icon {
  @apply animate-spin;
}

/*
 * csv-importer の loading value が true の間だけ表示する。空フォーム（行 0 件）でも
 * 出せるよう、empty-state で display: none になる content を強制表示し emptyState を隠す。
 */
[data-tenant--orders--csv-importer-loading-value="true"] .order-detail-lines__content {
  display: block;
}

[data-tenant--orders--csv-importer-loading-value="true"]
  [data-tenant--orders--line--adder-target="emptyState"] {
  display: none;
}

[data-tenant--orders--csv-importer-loading-value="true"] .order-detail-lines__loading {
  @apply flex min-h-8 items-center justify-center;
}

/*
 * CSV インポートは全明細行置換のため、インポート中は置換対象の既存行を隠し、ローディング行
 * だけを見せる。既存行は最初の chunk (turbo_stream.update) で丸ごと置換されるため成功時は
 * そのまま消え、失敗時は loading value が false に戻ると再表示されて行が復帰する。
 */
[data-tenant--orders--csv-importer-loading-value="true"] [data-csv-import-replacing] {
  display: none;
}

.order-detail-lines__detail-icon-closed {
  display: inline-flex;
}

.order-detail-lines__detail-icon-open {
  display: none;
}

.order-detail-lines:has([data-tenant--orders--line--adder-target="rows"] > *)
  [data-tenant--orders--line--adder-target="emptyState"] {
  display: none;
}

.order-detail-lines:has([data-tenant--orders--line--adder-target="rows"] > *)
  .order-detail-lines__content {
  display: block;
}

.order-detail-lines:has([data-tenant--orders--line--adder-target="rows"] > *)
  .bulk-edit-trigger--placeholder {
  display: none;
}

.order-detail-lines:not(:has([data-tenant--orders--line--adder-target="rows"] > *))
  .bulk-edit-trigger--menu {
  display: none;
}

/*
 * 明細行が 0 件のときは「確認画面へ進む」を押せない見た目にする。フッターは明細セクションの
 * 兄弟ではない（コンポーネントのラッパーで階層が変わる）ため、明細を含むフォームを基点に、
 * 行コンテナ（rows target）の子要素の有無で判定する。
 */
form:has(.order-detail-lines):not(:has([data-tenant--orders--line--adder-target="rows"] > *))
.ui-footer__primary-button {
  @apply pointer-events-none cursor-not-allowed bg-gray-200 text-white;
}

.order-detail-lines[data-tenant--orders--line--detail-toggle-open-value="true"]
  .order-detail-lines__grid {
  grid-template-columns: 119px 465px 120px 120px 100px 136px 136px 32px 140px 132px 132px 32px 32px;
}

.order-detail-lines[data-tenant--orders--line--detail-toggle-open-value="true"]
  .order-detail-lines__optional {
  display: block;
}

.order-detail-lines[data-tenant--orders--line--detail-toggle-open-value="true"]
  .order-detail-lines__copy-header,
.order-detail-lines[data-tenant--orders--line--detail-toggle-open-value="true"]
  .order-detail-lines__copy-cell {
  grid-column: 12;
}

.order-detail-lines[data-tenant--orders--line--detail-toggle-open-value="true"]
  .order-detail-lines__delete-header,
.order-detail-lines[data-tenant--orders--line--detail-toggle-open-value="true"]
  .order-detail-lines__delete-cell {
  grid-column: 13;
}

.order-detail-lines[data-tenant--orders--line--detail-toggle-open-value="true"]
  .order-detail-lines__detail-icon-closed {
  display: none;
}

.order-detail-lines[data-tenant--orders--line--detail-toggle-open-value="true"]
  .order-detail-lines__detail-icon-open {
  display: inline-flex;
}