/* #datatable プラグイン (skin/datatable.js) 用。配色は pukiwiki.css のピンク系に合わせる */
:root {
  --pdt-text: #222;
  --pdt-muted: #6b5566;
  --pdt-accent: #b100a3;
  --pdt-border: #e7b9e4;
  --pdt-panel: #fff;
  --pdt-head: #f5d2f3;
  --pdt-hover: #ffe3f7;
  --pdt-row-odd: #fff;
  --pdt-row-even: #fff3fb;
  --pdt-input: #fff;
  --pdt-shadow: rgba(80, 0, 70, 0.18);
  --pdt-focus: rgba(177, 0, 163, 0.22);
}
@media (prefers-color-scheme: dark) {
  :root {
    --pdt-text: #e0e0e0;
    --pdt-muted: #c3a9bb;
    --pdt-accent: #ff8fdb;
    --pdt-border: #5a3a52;
    --pdt-panel: #241a22;
    --pdt-head: #3a2838;
    --pdt-hover: #4a2e44;
    --pdt-row-odd: #20181e;
    --pdt-row-even: #33222c;
    --pdt-input: #181818;
    --pdt-shadow: rgba(0, 0, 0, 0.5);
    --pdt-focus: rgba(255, 143, 219, 0.3);
  }
}

.pdt { margin: 1em 0; }
.pdt [hidden] { display: none !important; }

/* ツールバーと端をそろえるため横幅いっぱいに広げる。中身が入りきらない表は
   従来どおり div.ie5 (nowrap + overflow-x:auto) の中で横スクロールになる */
.pdt div.ie5 { text-align: left; }
.pdt table.style_table { width: 100%; }

/* ---- ツールバー ---- */
.pdt-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; margin-bottom: 8px;
}
.pdt-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pdt-search {
  flex: 1 1 260px; max-width: 420px; box-sizing: border-box;
  padding: 8px 12px; border-radius: 8px; font-size: 0.95em;
  border: 1px solid var(--pdt-border); background: var(--pdt-input); color: var(--pdt-text);
}
.pdt-search:focus, .pdt-filter-input:focus, .pdt-page-input:focus, .pdt-select:focus {
  outline: none; border-color: var(--pdt-accent); box-shadow: 0 0 0 3px var(--pdt-focus);
}
.pdt-btn, .pdt-select {
  padding: 6px 10px; border-radius: 6px; font-size: 0.9em; cursor: pointer; line-height: 1.2;
  border: 1px solid var(--pdt-border); background: var(--pdt-head); color: var(--pdt-text);
}
.pdt-btn:hover:not(:disabled) { background: var(--pdt-hover); }
.pdt-btn:focus-visible { outline: 2px solid var(--pdt-accent); outline-offset: 1px; }
.pdt-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- 見出し ---- */
.pdt th.pdt-th { cursor: pointer; user-select: none; }
.pdt th.pdt-th:hover { background-color: var(--pdt-hover); }
.pdt th.pdt-th:focus-visible { outline: 2px solid var(--pdt-accent); outline-offset: -2px; }
.pdt .pdt-ind { margin-left: 4px; font-size: 0.8em; opacity: 0.45; font-weight: normal; white-space: nowrap; }
.pdt .pdt-ind-on { opacity: 1; color: var(--pdt-accent); }
.pdt th.pdt-th-active { box-shadow: inset 0 -2px 0 var(--pdt-accent); }
.pdt .pdt-col-hidden { display: none; }

/* 行の縞模様は絞り込み後の表示行に対して付け直す (pukiwiki.css の nth-child を上書き) */
.pdt tbody tr.pdt-odd td { background: var(--pdt-row-odd); }
.pdt tbody tr.pdt-even td { background: var(--pdt-row-even); }
.pdt.pdt-ready tbody tr:hover td { background: var(--pdt-hover); }

/* ---- フッター ---- */
.pdt-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 8px; font-size: 0.9em; color: var(--pdt-muted);
}
.pdt-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pdt-page-input {
  width: 4em; padding: 5px 6px; border-radius: 6px; text-align: center;
  border: 1px solid var(--pdt-border); background: var(--pdt-input); color: var(--pdt-text);
}

/* ---- 列メニュー・列選択 (body直下に出す) ---- */
.pdt-pop {
  position: fixed; z-index: 9999; min-width: 230px; max-width: min(340px, calc(100vw - 8px));
  max-height: 75vh; overflow-y: auto; box-sizing: border-box;
  background: var(--pdt-panel); color: var(--pdt-text);
  border: 1px solid var(--pdt-border); border-radius: 8px; box-shadow: 0 6px 20px var(--pdt-shadow);
  font-size: 0.9em; text-align: left;
}
.pdt-pop-sheet {
  left: 0; right: 0; bottom: 0; max-width: none; border-radius: 14px 14px 0 0;
  font-size: 1em; padding-bottom: env(safe-area-inset-bottom, 0);
}
.pdt-backdrop { position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, 0.4); }
.pdt-pop-title {
  padding: 10px 14px; font-weight: bold; border-bottom: 1px solid var(--pdt-border);
  position: sticky; top: 0; background: var(--pdt-panel); z-index: 1;
}
.pdt-pop-item {
  display: block; width: 100%; box-sizing: border-box; padding: 8px 14px; text-align: left;
  border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; white-space: nowrap;
}
.pdt-pop-sheet .pdt-pop-item { padding: 14px 18px; }
.pdt-pop-item:hover, .pdt-pop-item:focus-visible { background: var(--pdt-hover); outline: none; }
.pdt-pop-current { font-weight: bold; color: var(--pdt-accent); }
.pdt-pop-close { text-align: center; border-top: 1px solid var(--pdt-border); }
.pdt-pop-sep { height: 1px; margin: 2px 0; background: var(--pdt-border); }
.pdt-pop-filter { padding: 10px 14px 6px; }
.pdt-modes { display: flex; gap: 3px; margin-bottom: 6px; }
.pdt-mode {
  flex: 1; padding: 4px 0; border-radius: 6px; font-size: 0.85em; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--pdt-border); background: var(--pdt-input); color: var(--pdt-text);
}
.pdt-mode[aria-pressed="true"] { background: var(--pdt-head); border-color: var(--pdt-accent); font-weight: bold; }
.pdt-pop-sheet .pdt-mode { padding: 10px 0; font-size: 0.95em; }
.pdt-filter-input {
  width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: 6px; font-size: 1em;
  border: 1px solid var(--pdt-border); background: var(--pdt-input); color: var(--pdt-text);
}
.pdt-values { padding: 0 0 4px; }
.pdt-values-head {
  display: flex; align-items: center; gap: 10px; padding: 4px 14px;
  font-size: 0.85em; color: var(--pdt-muted);
}
.pdt-values-head span { flex: 1; }
.pdt-link {
  border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--pdt-accent); text-decoration: underline;
}
.pdt-values-list { max-height: 220px; overflow-y: auto; }
.pdt-value {
  display: flex; align-items: center; gap: 8px; padding: 5px 14px; cursor: pointer;
}
.pdt-pop-sheet .pdt-value { padding: 10px 18px; }
.pdt-value:hover { background: var(--pdt-hover); }
.pdt-value input { margin: 0; width: 16px; height: 16px; flex: none; accent-color: var(--pdt-accent); }
.pdt-value-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdt-value-count { color: var(--pdt-muted); font-size: 0.85em; }
.pdt-value-other .pdt-value-text { color: var(--pdt-muted); font-style: italic; }