/* 納品一覧のスクロール固定まわり。
   固定は 2 段: 列見出し（品名・入荷予定コード等）はテナントヘッダの下に、
   日付グループヘッダーはさらに列見出しの下に張り付く。
   --tenant-header-height は tenant/layouts/application.css で定義している。 */
.deliveries-list {
  /* 列見出しの高さ: th py-2 (16px) + text-xs の行高 (16px) + 下線 (1px)。 */
  --deliveries-column-header-height: 33px;
}

/* フィルターエリア。セレクトのドロップダウン（.ui-select__menu は z-10）が列見出しに隠れないよう、
   フィルター全体を列見出しより 1 段上に置く。z-index が同値だと DOM 順で後ろの列見出しが前に出る。
   テナントヘッダ（sticky z-40）より下のままにして、スクロール時にヘッダを覆わないようにする。 */
.deliveries-filter {
  @apply relative z-20;
}

/* 発注日の期間選択。Figma では他の絞り込みと同じ可変幅なので、コンポーネント既定の固定幅
   （.ui-datepicker--sm.ui-datepicker--range の w-60）を打ち消して親の flex-1 に従わせる。
   呼び出し側に class を渡す形にしないのは、component の css が Tailwind の layer 外にあり、
   ルート要素に足した w-full ユーティリティでは既定の固定幅を上書きできないため。 */
.deliveries-filter .ui-datepicker {
  @apply w-full;
}

/* 列見出し。Figma の Header Row（node 1759:9789）が持つ下線を、明細テーブルではなくここに置く。
   他の一覧では明細 1 行目の border-top（.ui-table tbody tr）が同じ線になるが、納品一覧は
   列見出しだけを別テーブルに切り出していて明細行を持たないため、線が出ない。 */
.deliveries-column-header {
  @apply sticky z-10 border-b border-gray-200;
  top: var(--tenant-header-height);
}

/* 日付グループヘッダー。グループごとのラッパー div が containing block になるため、
   自分のグループをスクロールしている間だけ張り付き、次のグループが来たら押し出される。 */
.deliveries-group-header {
  @apply sticky;
  top: calc(var(--tenant-header-height) + var(--deliveries-column-header-height));
}