/* ==========================================================
   ▼ ベーススタイル
   テーブル全体のフォント・余白設定
========================================================== */
.ppl-csv-table { 
  margin-bottom: 1.2em; /* 下部の余白 */
}

.ppl-total-count { 
  margin-bottom:8px; /* 総件数表示とテーブルの間隔 */
  font-weight:bold; /* 総件数を強調表示 */
}

/* ==========================================================
   ▼ 表示件数（ページあたりの行数）選択
   横並びでラベルとセレクトボックスを並べる
========================================================== */
.ppl-rows-toolbar { 
  display:flex; /* 横並び */
  align-items:center; /* 垂直方向中央揃え */
  gap:8px; /* 子要素間のスペース */
  width:auto; 
  min-width:60px; /* 最小幅 */
  max-width:260px; /* 最大幅 */
  margin-bottom:0px; /* 下部余白 */
}
.ppl-rows-per-page { 
  padding:6px; /* 内側余白 */
}

/* ==========================================================
   ▼ 検索ボックス：カスタムクリアボタン付きラッパー
========================================================== */
.ppl-search-wrap { 
  width: 100%;
  position:relative; /* クリアボタンの絶対配置の基準 */
  display: flex;           /* flexを使う */
  align-items: flex-end; /* 縦方向を下寄せ */
}

/* 検索入力フィールド */
.ppl-search {
  width:100%; /* 親幅いっぱい */
  border:1px solid #ccc; /* 薄い枠線 */
  box-sizing:border-box; /* padding込みで幅指定 */
  padding-right: 0; /* 右端の×ボタンまでぴったり */
}

/* 検索ボックスがクリック（フォーカス）されたときの枠線色 */
.ppl-search:focus {
  outline: 2px solid #745b5d; /* 色を変更 */
  outline-offset: -2px;         /* 枠線のオフセット（見やすさ調整） */
}


/* ブラウザ標準の検索×ボタンを非表示にする */
.ppl-search::-webkit-search-cancel-button,
.ppl-search::-webkit-search-decoration { 
  -webkit-appearance:none; 
  appearance:none; 
  width: 16px;
  height: 16px;
  background: #340e12; /* 背景色 */
  mask: url('data:image/svg+xml;base64,...') no-repeat center; /* ×マークをSVGで置き換え */
  -webkit-mask: url('data:image/svg+xml;base64,...') no-repeat center;
  cursor: pointer;
}
.ppl-search::-ms-clear, 
.ppl-search::-ms-reveal { 
  display:none; 
  width:0; 
  height:0; 
}

/* ==========================================================
   ▼ カスタムクリア「×」ボタン
   右端・下寄せで配置、背景色 #340e12
========================================================== */
.ppl-search-clear {
  position:absolute; /* 親に対して絶対配置 */
  right:0px; 
  top: 100%;
  transform: translateY(-100%);
  width:auto; 
  height:auto;
  line-height:auto;
  text-align:center;
  background:#340e12; /* ダークワイン色 */
  color:#f2efe7; /* 白文字 */
  border:1px solid #745b5d; /* 薄い枠線 */
  cursor:pointer; /* ホバー時にカーソル変更 */
  z-index:1; /* テキストや入力より上に表示 */
  display:none; /* 初期状態は非表示（入力がある時だけ表示） */
}

/* キーボード操作時のアウトライン（アクセシビリティ向上） */
.ppl-search-clear:focus-visible { 
  outline:2px solid #fff; 
  outline-offset:2px; 
}

/* ==========================================================
   ▼ 上部スクロールバー（固定ヘッダ用ダミー）
   本体テーブルとスクロール位置を同期させる
========================================================== */
.ppl-table-scroll-top { 
  overflow-x:auto; /* 横スクロール可能 */
  overflow-y:hidden; /* 縦スクロール禁止 */
  height:14px; /* スクロールバー高さ */
  margin-top:4px; /* 検索ボックスとの隙間 */
  margin-bottom:4px; /* テーブルとの隙間 */
  -webkit-overflow-scrolling: touch; /* スマホでスムーズスクロール */
  width: 100%;           /* 横幅を親に合わせる */
}
.ppl-table-scroll-top .ppl-scroll-inner { 
  height:1px; /* 内部ダミー要素、高さは最小でOK */
  width: 100%;           /* 初期値は100%、後でJSでテーブル幅に更新 */
}

/* ==========================================================
   ▼ テーブル本体
========================================================== */
.ppl-table-responsive { 
  overflow-x:auto; /* 横スクロール */
  -webkit-overflow-scrolling:touch; /* スマホでスムーズスクロール */
  background:#fff; /* 背景白 */
  border:1px solid #e6e6e6; /* 薄い枠線 */
  border-radius:6px; /* 丸角 */
}
.ppl-data-table { 
  width:100%; /* 親幅いっぱい */
  border-collapse:collapse; /* セルのボーダーを重ねる */
  min-width:600px; /* 最小幅を設定（狭い画面でも横スクロール） */
  table-layout:auto; /* 自動列幅 */
}

/* セル共通設定 */
.ppl-data-table th, .ppl-data-table td {
  padding:8px 10px; /* 内側余白 */
  border-bottom:1px solid #eee; /* 行下境界線 */
  text-align:left; /* 左揃え */
  vertical-align:top; /* 上揃え */
  white-space:nowrap; /* 改行させない */
  overflow:hidden; 
  text-overflow:ellipsis; /* はみ出しは省略表示(...) */
}

/* ヘッダーの背景・文字色・フォント太さ */
.ppl-data-table thead th { 
  background:#340e12; 
  color:#f2efe7; 
  position:relative; /* ソートインジケータ用 */
  font-weight:700; 
}

/* 偶数行・奇数行の背景色分け（ストライプ） */
.ppl-data-table tbody tr:nth-child(odd)  { background:#ffffff; }
.ppl-data-table tbody tr:nth-child(even) { background:#f6f6f6; }

/* ソート可能な列はマウスカーソルを変える */
.ppl-sortable { 
  cursor:pointer; 
  user-select:none; /* 文字選択を防ぐ */
}

/* ソートインジケータ（▲▼） */
.ppl-sort-indicator { 
  font-size:0.8em; 
  margin-left:6px; 
  color:#ddd; 
}

/* ==========================================================
   ▼ ページネーション
========================================================== */
/* ページネーション（ボタン群） */
.ppl-pagination { 
  margin-top:12px; 
}

.ppl-pagination button { 
  font-size: 14px;                /* フォントサイズを14pxに指定 */
  display: inline-flex;           /* フレックスで文字を中央揃え */
  justify-content: center;
  align-items: center;
  width: 38px;                   /* 正方形サイズ（横幅） */
  height: 38px;                  /* 正方形サイズ（高さ） */
  margin-right:12px; 
  margin-bottom:12px; 
  padding:6px 12px; 
  color:#340e12; 
  border:1px solid #340e12; 
  background:#f2efe7; 
  cursor:pointer; 
  box-sizing: border-box;       /* 正方形に */
}

/* 現在ページのボタンは強調表示 */
.ppl-pagination button.active { 
  background:#340e12; /* 背景 */
  color:#f2efe7; 
  border-color:#340e12; 
}

/* ==========================================================
   ▼ 検索語ハイライト
========================================================== */
.ppl-highlight { 
  background: yellow; /* 黄色背景 */
  padding:0 .1em; /* 文字と背景の間隔 */
}

/* ==========================================================
   ▼ レスポンシブ対応（画面幅が狭い場合）
========================================================== */
@media (max-width: 720px) {
  .ppl-data-table { 
    min-width: 900px; /* 狭い画面でも横スクロールできるよう幅を拡張 */
  }
  .ppl-search-wrap { 
    max-width:100%; /* 検索ボックスも親幅いっぱいに */
  }
}