@charset "UTF-8";
/*
 * responsive-table.css
 *
 * responsive-table.js 用のスタイル。FooTable v2 (footable.core.css) の置き換え。
 *
 * クラス名について:
 *   footable- で始まるクラス名は FooTable が生成していたものをそのまま踏襲している。
 *   mod/css/<日付>/main.css に FooTable のクラス名を狙った上書きスタイルが
 *   既に存在するため、名前を変えるとそちらの修正も必要になる。
 *
 * アイコンについて:
 *   FooTable は専用のアイコンフォント (footable.eot/woff/ttf/svg) を同梱していたが、
 *   全ページで Font Awesome 6 Free を読み込んでいるためそちらを使う。
 *   これによりフォントファイル 4 種類が不要になった。
 */

/* ------------------------------------------------------------------
 * テーブル本体
 * ------------------------------------------------------------------ */

/*
 * FooTable の `.footable { width: 100% }` を引き継ぐ。
 *
 * 注意: watchpanel/wp_graph.tpl のカレンダーは jquery.calendar.js が
 * tableClass:"footable" を付けて生成しており、JS の初期化対象ではないが
 * この幅指定にだけ依存している。削除するとカレンダーの幅が崩れる。
 */
.footable {
    width: 100%;
}

/* ------------------------------------------------------------------
 * 折りたたみモード
 *
 * 画面幅が閾値を下回ると JS がテーブルへ .breakpoint を付ける。
 * 付いている間だけ、隠す指定のある列が非表示になる。
 * ------------------------------------------------------------------ */

.footable.breakpoint .rt-hidden-col {
    display: none;
}

/* 折りたたみ中は行全体がクリック可能であることを示す */
.footable.breakpoint > tbody > tr:not(.footable-row-detail):hover {
    cursor: pointer;
}

/* ------------------------------------------------------------------
 * 開閉トグル（各行の先頭セルに JS が挿入する span）
 * ------------------------------------------------------------------ */

.footable .footable-toggle {
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* Free 版で solid の字形を出すために必須 */
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    padding-right: 5px;
    font-size: 14px;
    color: #888888;
}

/*
 * 折りたたみモードでないときはトグル自体を出さない。
 * （通常表示では隠れている列が無いので、開くものが無い）
 */
.footable:not(.breakpoint) .footable-toggle {
    display: none;
}

/* 閉じている状態: プラス記号 */
.footable.breakpoint > tbody > tr > td > .footable-toggle:before {
    content: "\f0fe"; /* fa-plus-square */
}

/* 開いている状態: マイナス記号 */
.footable.breakpoint > tbody > tr.footable-detail-show > td > .footable-toggle:before {
    content: "\f146"; /* fa-minus-square */
}

/* 詳細行を開いている行は、下の詳細行と地続きに見せる */
.footable.breakpoint > tbody > tr.footable-detail-show > td {
    border-bottom: none;
}

/* ------------------------------------------------------------------
 * 詳細行（隠れた列の内容を表示する行）
 * ------------------------------------------------------------------ */

.footable > tbody > tr.footable-row-detail > td.footable-row-detail-cell {
    background: #eee;
    border-top: none;
}

/*
 * 以下 4 つは項目名と値を 2 列に揃えるためのもの。
 * table / table-row / table-cell を使うことで、
 * 項目名の幅が内容に応じて自動的に揃う。
 */
.footable-row-detail-inner {
    display: table;
}

.footable-row-detail-row {
    display: table-row;
    line-height: 1.5em;
}

.footable-row-detail-name {
    display: table-cell;
    font-weight: bold;
    padding-right: 0.5em;
    white-space: nowrap;
}

.footable-row-detail-value {
    display: table-cell;
    word-break: break-all;
}

/* ------------------------------------------------------------------
 * ソート
 * ------------------------------------------------------------------ */

/* 見出しのクリックで文字列が選択されてしまうのを防ぐ */
.footable > thead > tr > th {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.footable > thead > tr > th.footable-sortable:hover {
    cursor: pointer;
}

.footable > thead > tr > th > .footable-sort-indicator {
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    padding-left: 5px;
    color: #bbbbbb;
}

/* 未ソート: 上下両方の三角 */
.footable > thead > tr > th > .footable-sort-indicator:before {
    content: "\f0dc"; /* fa-sort */
}

/* 昇順 */
.footable > thead > tr > th.footable-sorted > .footable-sort-indicator {
    color: #666666;
}
.footable > thead > tr > th.footable-sorted > .footable-sort-indicator:before {
    content: "\f0de"; /* fa-sort-up */
}

/* 降順 */
.footable > thead > tr > th.footable-sorted-desc > .footable-sort-indicator {
    color: #666666;
}
.footable > thead > tr > th.footable-sorted-desc > .footable-sort-indicator:before {
    content: "\f0dd"; /* fa-sort-down */
}