/*
 * SPDX-License-Identifier: MIT
 * SPDX-FileCopyrightText: © 2026 MOTOI Kenkichi <https://motoikenkichi.com/>
 * sitemonitor.php が出力するHTMLの表示スタイル。
 * 「窓五行」＝約5行分の固定高さでスクロールする表示窓。
 * 行の高さ(line-height)を変えた場合は --site-monitor-rows の値も
 * それに合わせて調整すること（height は line-height × 行数で決まる）。
 */

.site-monitor {
  --site-monitor-rows: 5;
  --site-monitor-line-height: 1.6em;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fafafa;
  font-size: 0.9em;
  overflow-x: auto; /* 管理モードの3列テーブルがスマホ幅で崩れないよう横スクロール */
}

.site-monitor-list {
  margin: 0;
  padding: 0.4em 0.6em;
  list-style: none;
  overflow-y: auto;
  height: calc(var(--site-monitor-line-height) * var(--site-monitor-rows));
}

.site-monitor-list li {
  line-height: var(--site-monitor-line-height);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-monitor-list .sm-time {
  color: #666;
  font-variant-numeric: tabular-nums;
  margin-right: 0.6em;
}

.site-monitor-list .sm-path {
  color: #222;
  font-family: monospace;
}

.site-monitor-list .sm-label {
  color: #222;
}

.site-monitor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85em;
  table-layout: fixed;
}

.site-monitor-table th,
.site-monitor-table td {
  padding: 0.4em 1.2em;
  text-align: left;
  border-right: 1px solid #e2e2e2;
}

.site-monitor-table th:last-child,
.site-monitor-table td:last-child {
  border-right: none;
}

.site-monitor-table tbody tr:nth-child(odd) {
  background: #f2f2f2;
}

.site-monitor-table tbody tr:hover {
  background: #eaf2fb;
}

/* 時刻列は幅固定。ラベル列は「htmlファイルが更新されました」（最長パターン）が
 * 折り返さずに収まる余裕を持たせている。ファイル名の列に残り幅を全部割り当てる。
 * ウィンドウ幅を変えると .site-monitor が width:100% で追随するので、
 * 一緒に可変する。 */
.site-monitor-table th:nth-child(1),
.site-monitor-table td:nth-child(1) {
  width: 13em;
  white-space: nowrap;
}

.site-monitor-table th:nth-child(2),
.site-monitor-table td:nth-child(2) {
  width: 16em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-monitor-table th:nth-child(3),
.site-monitor-table td:nth-child(3) {
  width: auto;
  white-space: normal;
  word-break: break-all;
}

.site-monitor-table thead th {
  position: sticky;
  top: 0;
  background: #eee;
  border-bottom: 1px solid #ccc;
  text-align: center;
}

.site-monitor-table td.sm-time {
  color: #666;
  font-variant-numeric: tabular-nums;
}

.site-monitor-table td.sm-path {
  font-family: monospace;
}

.site-monitor-table tbody {
  display: block;
  overflow-y: auto;
  max-height: calc(var(--site-monitor-line-height, 1.6em) * 5);
}

.site-monitor-table thead,
.site-monitor-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.site-monitor-empty {
  padding: 0.6em;
  color: #888;
}

.site-monitor-admin-bar {
  padding: 0.3em 0.6em;
  border-top: 1px solid #ddd;
  color: #888;
  font-size: 0.85em;
}

.site-monitor-admin-bar a {
  color: #888;
}

.site-monitor-pagination {
  padding: 0.3em 0.6em;
  border-top: 1px solid #ddd;
  font-size: 0.85em;
  display: flex;
  justify-content: space-between;
}

.site-monitor-pagination a {
  color: #06c;
}

.site-monitor-pagination-disabled {
  color: #bbb;
}

.site-monitor-login {
  max-width: 20em;
  padding: 0.6em;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fafafa;
}

.site-monitor-login-error {
  color: #c00;
  margin: 0 0 0.5em;
}

.site-monitor-notice {
  color: #080;
  margin: 0 0 0.5em;
}