/* TableOperator.css */
/* TableOperator_class.jsが生成するテーブル向けの汎用スタイル。 */
/* TableOperator_class.jsとセットでどのページに組み込んでも使える。 */

/* TableOperator_class.jsが自身のtable要素に付与するクラス */
.table-operator {
  --table-operator-thead-bg: #4a76a8; /* .table-operator-theadと.table-operator-scroll .table-operator-thead thで共有 */
  --table-operator-thead-fg: #fff;
  border-collapse: collapse;
  width: 100%;
}

.table-operator th,
.table-operator td {
  border: 1px solid #999;
  padding: 4px 8px;
}

.table-operator td {
  background-color: #fff;
}

/* TableOperator_class.jsがtheadに付与するクラス(ヘッダー行の色付け) */
.table-operator-thead {
  background-color: var(--table-operator-thead-bg);
  color: var(--table-operator-thead-fg);
}

.table-operator tbody tr:hover td {
  background-color: #eef4fb;
}

/* sortable:true な列見出し(th)に付与される */
.table-operator-sortable {
  cursor: pointer;
}

/* options.height指定時にTableOperator_class.jsが<table>を包むラッパー<div>に付与するクラス。
   overflow-yとヘッダーのsticky追従はここで一括して定義する(個々のtableへのインラインstyleでは
   インスタンスごとに異なる高さ(max-height)だけを設定する) */
.table-operator-scroll {
  overflow-y: auto;
}

/* sticky化したthはthead(行グループ)自体の背景色を引き継がずスクロール中のtbody行と重なって見えるため、
   th自身にも同じ背景色/文字色(.table-operator-theadと共有するCSS変数)を明示する */
.table-operator-scroll .table-operator-thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--table-operator-thead-bg);
  color: var(--table-operator-thead-fg);
}

/* TableOperator_class.jsがtfootに描画するページネーション操作行 */
.table-operator-pagination {
  text-align: center;
  padding: 6px 8px;
  background-color: #f2f2f2;
}

.table-operator-pagination button {
  margin: 0 4px;
  padding: 2px 8px;
  cursor: pointer;
}

.table-operator-pagination button:disabled {
  cursor: default;
  opacity: 0.4;
}

.table-operator-pagination-info {
  margin: 0 8px;
}