/* =========================================
   CSV Table（横スクロールヒント付き完全版）
   -----------------------------------------
   - 折り返しなし（指定列のみ折り返し許可）
   - PC/スマホで横スクロール可能
   - 検索UIは「列選択プルダウン＋検索ボックス＋×」
   - 横幅超過時にヒント「※表を横にスクロールできます」表示
   ========================================= */

/* ==== 下部スクロール許可ラッパ ==== */
.mpct-tablewrap {
  display: block;
  position: relative;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  scrollbar-color: #ccc #f9f9f9;
  scrollbar-width: thin;
}

/* =========================================
   検索UI（全デバイス統一縦配置）
   ========================================= */

.mpct-toolbar {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  margin-bottom: 1em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
}

/* === 検索グループ === */
.mpct-search-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6em;
  font-size: 14px;
}



/* --- スマホ時はやや小さく調整したい場合（任意） --- */
@media (max-width: 767px) {
  .mpct-search-column label,
  .mpct-search-column select,
  .mpct-search-column input {
    font-size: 14px;
  }
}

/* --- PC時は大きめにしたい場合（任意） --- */
@media (min-width: 768px) {
  .mpct-search-column label,
  .mpct-search-column select,
  .mpct-search-column input {
    font-size: 16px;
  }
}


/* === ラベル === */
.mpct-search-column label {
  font-weight: 700;
  white-space: nowrap;
  font-size: 14px; /* ← 親フォントサイズを継承（指定リクエスト対応） */
}

/* === プルダウンと入力欄 === */
.mpct-search-column select,
.mpct-search-column input {
  padding: 0px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  height: 2rem;
}

/* === 行レイアウト === */
.mpct-column-top,
.mpct-column-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-wrap: wrap; /* ← 狭い画面では折り返す */
}

/* === プルダウン／検索ボックス幅（シュリンク防止） === */
.mpct-search-column select,
.mpct-search-column input {
  flex: 0 0 auto;        /* ← ★縮まない・固定幅基準 */
  width: auto;           /* ← 内容に合わせる */
  min-width: 14em;       /* ← 最低幅を確保（お好みで調整） */
  max-width: none;       /* ← 親幅による縮小を無効化 */
  box-sizing: border-box;
}




/* === クリアボタン === */
.mpct-clear-column {
  flex: 0 0 auto;        /* ← シュリンク無効 */
  width: 26px;
  height: 26px;
  border: none;
  background: #745b5d;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  transition: background 0.2s;
}
.mpct-clear-column:hover {
  background: #5b4547;
}






/* === 折り返し許可列 === */
.mpct-table td.mpct-wrap,
.mpct-table th.mpct-wrap {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: break-word;
  text-align: left;
}

/* === ページ情報 === */
.mpct-pageinfo {
  font-size: inherit;
}

/* 件数・ページサイズ */
.mpct-statsbar {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  margin: 0.5em 0;
  margin-bottom: 1.5rem;
  font-size: 14px;
  font-weight: bold;
}
.mpct-statsbar select {
  font-size: 14px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* =============================
   表スクロールヒント（オーバーレイ版）
   ============================= */
.mpct-scroll-hint-overlay {
  position: absolute;
  top: 3rem;                /* 表の上から少し下げる */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.95rem;
  padding: 1rem 2rem;
  border-radius: 10px;
  pointer-events: none;     /* クリックなどを透過させる */
  opacity: 0;
  transition: opacity 0.4s ease;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* 表が横スクロール可能なときに表示 */
.mpct-tablewrap.show-hint .mpct-scroll-hint-overlay {
  opacity: 1;
}

/* フェードアウト時 */
.mpct-tablewrap.hide-hint .mpct-scroll-hint-overlay {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* ==== テーブル本体 ==== */
.mpct-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #fff;
}
.mpct-table th,
.mpct-table td {
  padding: 0.45em 0.6em;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  vertical-align: top;
  background-color: #fff;
  line-height: 1.4;
}
.mpct-table thead th {
  background: #340e12;
  font-weight: 600;
  border-bottom: 2px solid #ccc;
  position: sticky;
  top: 0;
  z-index: 3;
}
.mpct-table tbody tr:nth-child(even) td {
  background: #fcfcfc;
}
.mpct-table mark {
  background: #fff59d;
  color: #000;
  padding: 0 2px;
  border-radius: 2px;
}

/* ==== 固定列 ==== */
.mpct-th.mpct-sticky {
  background: #340e12;
}
.mpct-td.mpct-sticky {
  background: #fff;
}
.mpct-th.mpct-sticky,
.mpct-td.mpct-sticky {
  position: sticky;
  left: 0;
  z-index: 4;
  box-shadow: 1px 0 0 #ddd;
}
.mpct-th.mpct-sticky::after,
.mpct-td.mpct-sticky::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  width: 1.5px;
  height: 100%;
  background: #ddd;
  z-index: 11;
  pointer-events: none;
  transition: background-color 0.3s ease;
}
.mpct-tablewrap.mpct-scrolling
  .mpct-th.mpct-sticky::after,
.mpct-tablewrap.mpct-scrolling
  .mpct-td.mpct-sticky::after {
  background: #ddd;
}

/* ==== ページャ ==== */
/* 上部ページャのデザイン調整 */
.mpct-pager-top {
  margin-bottom: 0.6em;
}
.mpct-pager-top .mpct-pager-inner {
  justify-content: center;
}

.mpct-pager {
  display: flex;
  justify-content: center;
  padding: 0.5em 0.25em;
  background: #fff;
}
.mpct-pager-inner {
  display: flex;
  gap: 0.25em;
  flex-wrap: wrap;
}
.mpct-pager button {
  padding: 0.35em 0.6em;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.mpct-pager button:hover:not([disabled]) {
  background: #f3f3f3;
}
.mpct-pager button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==== エラーメッセージ ==== */
.mpct-error {
  color: #b00020;
  font-weight: 600;
  padding: 0.5em;
}

/* ==== ドラッグ操作中カーソル ==== */
.mpct-tablewrap.mpct-dragging {
  cursor: grabbing !important;
  user-select: none;
}

/* =============================
   検索ボックス内にクリアボタンを配置（ボックスと高さを完全一致）
   ============================= */
.mpct-searchbox-wrap {
  position: relative;
  display: inline-block;
  width: 100%;

  margin: auto;
  display: block;
}

/* 検索ボックス本体 */
.mpct-searchbox-wrap input.mpct-search-column-input {
  width: 100%;

  height: 2.4em;                 /* ボタンと同じ高さ */
  padding: 0 0.6em 0 0.6em;      /* 右余白を少し広めに確保 */
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: inherit;
  line-height: 1.4;
}

/* クリアボタン */
.mpct-searchbox-wrap .mpct-clear-column {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;                 /* 入力欄と同じ高さ */
  aspect-ratio: 1 / 1;          /* 幅＝高さで正方形にする */
  border: none;
  border-radius: 0 4px 4px 0;   /* 右端だけ角丸に */
  background: #745b5d;
  color: #fff;
  font-size: 1em;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.mpct-searchbox-wrap .mpct-clear-column:hover {
  background: #5b4547;
}




/* =============================
   検索範囲ラベル＋プルダウンの横幅設定
   ============================= */
.mpct-column-top {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-wrap: nowrap;
  width: 50%;             /* PC時は画面幅の50% */
  box-sizing: border-box;
}

/* スマホ時は100%に */
@media (max-width: 787px) {
  .mpct-column-top {
    width: 100%;
    max-width: none;
  }
}

/* ラベルとプルダウンのバランス調整（任意） */
.mpct-column-top label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.mpct-column-top .mpct-column-select {
  flex: 1 1 auto;
  min-width: 8em;
}



/* =========================================
   検索UIフォントサイズ一括設定
   （ラベル・プルダウン・検索ボックス共通）
   ========================================= */
.mpct-scroll-hint,
.mpct-statsbar,
.mpct-statsbar .mpct-page-size,
.mpct-search-column label,
.mpct-search-column select,
.mpct-searchbox-wrap .mpct-search-column-input,
.mpct-searchbox-wrap .mpct-clear-column {
  font-size: 14px; /* ← ★ここを変えるだけで一括変更できます */
  font-weight: normal;
}
@media (max-width: 767px) {
  .mpct-scroll-hint,
  .mpct-statsbar,
  .mpct-statsbar .mpct-page-size,
  .mpct-toolbar,
  .mpct-search-column label,
  .mpct-search-column select,
  .mpct-searchbox-wrap .mpct-search-column-input,
  .mpct-searchbox-wrap .mpct-clear-column {
  font-size: 16px;
}

}

.mpct-searchbox-wrap .mpct-clear-column {
  font-weight: bold;
}