/* ===== PC：タイトル行の右にコントロールを同じ列で並べる ===== */
  .title-list-page .table-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom: 8px;  /* -20px をやめて詰め過ぎを防ぐ */
  }
  .title-list-page .table-title{
    margin: 0;
    white-space: nowrap;
    margin-left: 30px;
  }

  .title-list-page .header-controls{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:nowrap;          /* ✅ PCでズレない */
    justify-content:flex-end;
    margin-left:auto;
  }

  .title-list-page .header-controls .search-box{
    flex: 0 1 420px;           /* ✅ タイトル横の空白を減らす */
    min-width: 260px;
  }

  .title-list-page .header-controls .status-filter-box{
    flex: 0 0 auto;
    display:flex;
    align-items:center;
    gap:6px;
  }

  .title-list-page .header-controls .domain-filter-box{
    flex: 0 1 320px;
    display:flex;
    align-items:center;
    gap:6px;
    min-width: 240px;
  }

  .title-list-page .header-controls .entries-box{
    flex: 0 0 auto;
    display:flex;
    align-items:center;
    gap:6px;
  }

  .title-list-page .header-controls label{
    white-space:nowrap;
    font-size:13px;
  }

  .title-list-page .header-controls input[type="text"],
  .title-list-page .header-controls select{
    border:1px solid #ccc;
    border-radius:6px;
    height:32px;
    padding:0px 10px;
  }

  .title-list-page .header-controls input[type="text"]{ width:100%; box-sizing:border-box; }
  .title-list-page .header-controls select{ min-width:0; }

  .title-list-page .title-list { margin-top: 6px; }

  /* ===== SP：上部は「検索・絞り込み」ボタンだけ（1列） ===== */
  .sp-filter-trigger{
    display:none;
  }

  @media (max-width: 768px){
    .title-list-page .table-header{
      display:block;
      margin-bottom: 0px;
    }

    /* ✅ SPではコントロールを表示しない（モーダルに移す） */
    .title-list-page .header-controls{
      display:none;
    }

    /* ✅ SP：トリガーボタンを表示 */
    .sp-filter-trigger{
      display:flex;
      gap:8px;
      align-items:center;
      margin-top: 8px;
    }
    .sp-filter-trigger .open-filter-btn{
      width:100%;
      height:36px;
      border:none;
      border-radius:10px;
      cursor:pointer;
      background: linear-gradient(90deg, #1e3c72, #555);
      color:#fff;
      font-weight:700;
      box-shadow:0 6px 16px rgba(0,0,0,.18);
    }

    /* ✅ SP：日付を3行に（はみ出し防止） */
    .title-list-page .date-3lines{
      display:inline-flex;
      flex-direction:column;
      gap:2px;            /* 空白少なめ */
      line-height:1.1;
      font-size:11px;
      white-space:nowrap;
    }
    .title-list-page .date-3lines span{ display:block; }
  }

  /* ===== SP：フィルターモーダル（中央にかっこよく） ===== */
  .filter-overlay{
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.45);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
  }
  .filter-overlay.open{ display:flex; }

  .filter-modal{
    width:92%;
    max-width:480px;
    background:#fff;
    border-radius:14px;
    box-shadow:0 16px 38px rgba(0,0,0,.28);
    overflow:hidden;
  }
  .filter-modal .filter-head{
    padding:12px 14px;
    background: linear-gradient(90deg, #1e3c72, #555);
    color:#fff;
    font-weight:700;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .filter-modal .filter-close{
    border:none;
    background:transparent;
    color:#fff;
    font-size:20px;
    cursor:pointer;
    line-height:1;
  }
  .filter-modal .filter-body{
    padding:12px 14px 8px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .filter-modal .filter-row{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .filter-modal .filter-row label{
    font-size:12px;
    color:#333;
    font-weight:700;
  }
  .filter-modal input[type="text"],
  .filter-modal select{
    height:36px;
    border:1px solid #ccc;
    border-radius:10px;
    padding:0 10px;
    box-sizing:border-box;
    width:100%;
  }
  .filter-modal .filter-actions{
    padding:10px 14px 14px;
    display:flex;
    justify-content:flex-end;
    gap:8px;
  }
  .filter-modal .filter-actions button{
    height:36px;
    border-radius:10px;
    border:1px solid #ddd;
    background:#f7f7f7;
    cursor:pointer;
    min-width:110px;
  }
  .filter-modal .filter-actions .apply{
    background:#1e3c72;
    border-color:#1e3c72;
    color:#fff;
    font-weight:700;
  }

  /* ===== 削除確認モーダル（そのまま） ===== */
  .confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:9999;}
  .confirm-modal{background:#fff;border-radius:10px;max-width:420px;width:92%;padding:16px 14px;box-shadow:0 12px 32px rgba(0,0,0,.25);}
  .confirm-modal .msg{line-height:1.6;margin-bottom:14px;white-space:pre-line;padding:0;margin-left:0;}
  .confirm-modal .actions{display:flex;justify-content:flex-end;gap:8px}
  .confirm-modal button{min-width:90px;height:34px;border-radius:6px;border:1px solid #ddd;background:#f7f7f7;cursor:pointer}
  .confirm-modal .ok{background:#e53935;color:#fff;border-color:#e53935}

  /* ===== 削除完了トースト（1行表示） ===== */
  .toast-message{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(30,30,30,.92);
    color: #fff;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
    z-index: 10000;
    display: none;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
  }
  .toast-message.show{
    display: inline-block;
  }

  /* ✅ PCでは1行、SPでは3行だけ表示する（重複表示防止） */
.title-list-page .date-pc { display: inline; }
.title-list-page .date-3lines { display: none; }

@media (max-width: 768px){
  .title-list-page .date-pc { display: none; }
  .title-list-page .date-3lines { display: inline-flex; } /* 既存のSP設定を有効化 */
}

/* ===== PCでも「検索・絞り込み」ボタンを表示して右寄せ ===== */
.sp-filter-trigger{
  display:flex;                 /* PCでも表示 */
  justify-content:flex-end;     /* 右寄せ */
  gap:8px;
  align-items:center;
  margin-left:auto;            /* header内で右へ */
}

.sp-filter-trigger .open-filter-btn{
  width:auto;                  /* PCは100%にしない */
  min-width: 120px;
  height:32px;                 /* PCの高さに合わせる */
  padding:0 14px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  background: linear-gradient(90deg, #1e3c72, #555);
  color:#fff;
  font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  white-space:nowrap;
}

/* SPは今まで通り（1列で幅100%） */
@media (max-width: 768px){
  .sp-filter-trigger{
    justify-content:flex-start;
    margin-left:0;
    margin-top:8px;
  }
  .sp-filter-trigger .open-filter-btn{
    width:100%;
    height:36px;
  }

  .title-list-page td.col-delete img{
    width: 13px !important;
    height: auto !important;
  }
}

/* ✅ PCでも「検索・絞り込み」ボタン方式に統一する（既存の検索枠は非表示） */
@media (min-width: 769px){
  .title-list-page .header-controls{
    display: none !important;
  }

  /* ✅ PCでもボタンは表示 */
  .title-list-page .sp-filter-trigger{
    display: flex !important;
    margin-left: auto;
    justify-content: flex-end;
  }

  /* ボタン幅はPCでは自動に */
  .title-list-page .sp-filter-trigger .open-filter-btn{
    width: auto;
    padding: 0 16px;
    height: 36px;
  }
}

/* タイトル + 検索ボタンを同一行に */
.title-list-page .table-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}

.title-list-page .table-title{
  margin:0;
  white-space:nowrap;
}

/* 検索・絞り込みボタンを右側へ */
.title-list-page .sp-filter-trigger{
  display:flex;
  margin-left:auto;        /* ← これが肝 */
  align-items:center;
}

.title-list-page .sp-filter-trigger .open-filter-btn{
  height:36px;
  padding:0 16px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  background: linear-gradient(90deg, #1e3c72, #555);
  color:#fff;
  font-weight:700;
  white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}

/* 既存の検索・絞り込みUIは使わない */
.title-list-page .header-controls{
  display:none !important;
}

/* ================================
   タイトル＋「検索・絞り込み」だけに統一
   ================================ */

/* 既存の検索枠一式は常に非表示（重複防止） */
.title-list-page .header-controls{
  display: none !important;
}

/* タイトル行：左＝タイトル、右＝ボタン（PC/SP共通） */
.title-list-page .table-header{
  display: flex;
  align-items: center;
  justify-content: flex-start; /* ← 左寄せ */
  gap: 12px;
  flex-wrap: nowrap;
  margin: 0 0 8px 0;
}

/* ボタン側を右固定していた設定があれば解除 */
.title-list-page .sp-filter-trigger{
  margin-left: 0 !important;   /* ← 右寄せ解除 */
}

/* タイトルは左寄せ＆はみ出し抑制 */
.title-list-page .table-title{
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  text-align: left;
}

/* ボタンは右側に固定 */
.title-list-page .sp-filter-trigger{
  display: flex !important;
  flex: 0 0 auto;
  margin: 0;
  align-items: center;
}

/* ボタン見た目（ヘッダー系と合わせる） */
.title-list-page .sp-filter-trigger .open-filter-btn{
  height: 30px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(90deg, #1e3c72, #555);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

/* ===== 最終上書き：検索・絞り込みボタンを左へ ===== */
.title-list-page .table-header{
  justify-content: flex-start !important; /* space-between 等を潰す */
}

.title-list-page .table-title{
  flex: 0 0 auto !important;  /* タイトルが伸びてボタンを右に押すのを防ぐ */
}

.title-list-page .sp-filter-trigger{
  margin-left: 12px !important; /* タイトルの右隣へ */
  justify-content: flex-start !important;
}

/* ================================
   スクロール時に table と被らない対策
   （白背景＋sticky化）
   ================================ */
.title-list-page .table-header{
  position: sticky;
  top: var(--site-header-h, 54px);
  background: #fff;
  z-index: 100000;
  padding: 10px 30px;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

/* ✅ stickyヘッダーがテーブル上に重ならないように、テーブル側で逃がす */
.title-list-page .title-list{
  margin-top: 0;
  padding-top: 0px; /* ← table-header の実高さ分（効かなければ数値だけ微調整） */
}

@media (max-width: 768px){
  .title-list-page .title-list{
    padding-top: 0px;
  }
}

/* SPは幅が厳しいのでボタンだけ少し詰める */
@media (max-width: 768px){
  .title-list-page .table-header{
    padding: 8px 10px;
  }
  .title-list-page .sp-filter-trigger .open-filter-btn{
    height: 25px;
    padding: 0px 0 2px 0;
    font-size: 0.7em;
  }

  .sp-filter-trigger .open-filter-btn {
    min-width: 100px;
  }
}

/* ===== 一覧とページネーションの間の空白を詰める ===== */
/* table-wrapper に固定height(calc...)が入っているため、空白が大きく見えているのを解除 */
.title-list-page .table-wrapper.title-list{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ページネーションの余白を詰める（必要最小） */
.title-list-page .pagination{
  margin-top: 10px !important;
  padding-top: 0 !important;
}

/* ================================
   カテゴリー一覧：＋カテゴリー登録ボタン
   ================================ */
.btn-add-category{
  background: #555;
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  height: 30px;
  padding-top: 5px !important;
}

@media (max-width: 768px) { 
  .btn-add-category{
    height: 25px;
    min-width: 110px;
    border-radius: 10px;
    font-size: 0.7em;

    /* ▼ ここがポイント：中央揃えを潰して上寄せにする */
    display: flex;
    justify-content: center;
    align-items: flex-start;

    /* ▼ “少しだけ上”の微調整（必要なら 1〜3px で調整） */
    padding-top: 1px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    line-height: 1.5;
  }
}

@media (max-width: 768px){
  .edit-icon{
    width: 20px !important;
    height: 20px !important;
  }
}

/* ==========================
   ✅ 削除確認モーダル（member_category_list.ejs）
   旧：#modal-delete の style をCSSへ移行
========================== */
#modal-delete.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;              /* 初期は非表示 */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#modal-delete .modal-request-content{
  background: #fff;
  padding: 25px 35px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.3);
}

#modal-delete #modal-delete-message{
  margin: 0 0 16px 0;
  white-space: pre-wrap;      /* \n を効かせる想定 */
}

#modal-delete #modal-delete-ok{
  background: #1e3c72 !important; 
  color: #fff;
  border: none;
  padding: 5px 15px !important; 
  border-radius: 4px;
  cursor: pointer;
}

#modal-delete #modal-delete-ok:active{
  transform: translateY(1px);
}


/* ==========================
   ✅ カテゴリー名変更モーダル（member_category_list.ejs）
   旧：#domainEditModal の style をCSSへ移行
========================== */
#domainEditModal.modal{
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: none;              /* 初期は非表示（JSで flex にする） */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* モーダル内ラッパー */
#domainEditModal .siteform-wrapper{
  padding: 25px 25px 20px 25px;
  border-radius: 10px;
  width: 580px;
  max-width: calc(100% - 24px);
  background: #fff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.25);
  margin: auto;
}

/* 見出し（既存 class を活かす） */
#domainEditModal .domain_change{
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
  text-align: center;
  color: #0d47a1;
}

/* テーブル */
#domainEditModal table{
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}

#domainEditModal thead th{
  width: 50%;
  background: #1e3c72;
  color: #fff;
  padding: 8px;
  font-size: 0.8em;
}

#domainEditModal thead th:first-child{
  border-right: 2px solid #fff;
}

#domainEditModal tbody td{
  padding: 10px;
}

/* 入力 */
#domainEditModal input[type="text"]{
  width: 95%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* ボタンエリア */
#domainEditModal .modal-actions,
#domainEditModal .form-actions{
  text-align: center;
}

#domainEditModal form > div[style*="text-align:center;"]{
  /* 既存HTMLに「text-align:center;」のdivがある前提で中央寄せを担保 */
  text-align: center;
}

/* 送信（変更する） */
#domainEditModal button[type="submit"]{
  background: #1e3c72 !important;
  color: #fff;
  border: none;
  padding: 8px 22px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.0em;
}

/* キャンセル */
#domainEditModal button[type="button"]{
  background: #555;
  color: #fff;
  border: none;
  padding: 8px 22px;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 12px;
  font-size: 1.0em;
}

.modal-actions-center{
  text-align: center;
}

/* SP 微調整 */
@media (max-width: 768px){
  #domainEditModal .siteform-wrapper{
    width: calc(100% - 24px);
    padding: 18px 16px 16px 16px;
  }

  #domainEditModal input[type="text"]{
    width: 100%;
    font-size: 0.5em;
  }

  #modal-delete .modal-request-content{
    width: calc(75% - 24px);
    padding: 18px 16px;
  }

/* 送信（変更する） */
#domainEditModal button[type="submit"]{
  background: #1e3c72 !important;
  color: #fff;
  border: none;
  padding: 8px 22px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.5em !important;
} 

/* キャンセル */
#domainEditModal button[type="button"]{
  background: #555;
  color: #fff;
  border: none;
  padding: 8px 22px;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 12px;
  font-size: 0.5em;
} 

.modal-actions-center{
  text-align: center;
} 
}

/* ==========================
   ✅ カテゴリー一覧テーブル（member_category_list.ejs）
   旧：table / thead tr / th width / td align / button inline-style をCSSへ移行
========================== */

/* ラッパーは既存の .table-wrapper.title-list をそのまま利用 */
.table-wrapper.title-list table{
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

/* ヘッダー行（trのstyle置き換え） */
.table-wrapper.title-list thead tr{
  background: #0d47a1;
  color: #fff;
}

/* 列幅（thのstyle置き換え） */
.table-wrapper.title-list th.col-id{ width: 5%; }
.table-wrapper.title-list th.col-site{ width: 60%; }
.table-wrapper.title-list th.col-url{ width: 25%; }
.table-wrapper.title-list th.col-edit{ width: 5%; }
.table-wrapper.title-list th.col-delete{ width: 5%; }

/* body側：左寄せ（tdのstyle置き換え） */
.table-wrapper.title-list td.col-site,
.table-wrapper.title-list td.col-url{
  text-align: left;
}

/* edit/delete列は中央（明示） */
.table-wrapper.title-list td.col-edit,
.table-wrapper.title-list td.col-delete{
  text-align: center;
}

/* 編集ボタン（buttonのstyle置き換え） */
.table-wrapper.title-list .btn-edit{
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* 削除ボタン（buttonのstyle置き換え） */
.table-wrapper.title-list .btn-delete{
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
}

/* 編集アイコン（imgのstyle置き換え） */
.table-wrapper.title-list .edit-icon{
  width: 27px;
  height: 27px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* SPのときだけ編集アイコンを小さく（あなたの要件） */
@media (max-width: 768px){
  .table-wrapper.title-list .edit-icon{
    width: 20px !important;
    height: 20px !important;
    top: 0; /* 小さくした時にズレが出るのでリセット */
  }

.table-wrapper.title-list td.col-delete img {
    top: -2px;
  }
}

/* 削除アイコン（imgのstyle置き換え） */
.table-wrapper.title-list td.col-delete img{
  width: 20px;
  height: 23px;
  vertical-align: middle;
  position: relative;
}

/* ==========================
   ✅ カテゴリー追加モーダル（#domainAddModal）
   旧：domainAddModal / siteform-wrapper / domain_change / table / th/td/input / buttons の style をCSSへ移行
========================== */

#domainAddModal{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: none;                 /* 初期非表示（JSでflex） */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#domainAddModal .siteform-wrapper{
  padding: 25px;
  border-radius: 10px;
  width: 390px;
  max-width: calc(100% - 24px);
  background: #fff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.25);
  margin: auto;
}

/* 見出し */
#domainAddModal .domain_change{
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
  text-align: center;
  color: #0d47a1;
}

/* モーダル内テーブル */
#domainAddModal table{
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  font-size: 0.8em;
}

#domainAddModal thead th{
  width: 50%;
  background: #1e3c72;
  color: #fff;
  padding: 8px;
}

#domainAddModal thead th:first-child{
  border-right: 2px solid #fff;
}

#domainAddModal tbody td{
  padding: 10px;
}

/* 入力 */
#domainAddModal input[type="text"]{
  width: 95%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* ボタン行（中央寄せ） */
#domainAddModal form > div[style*="text-align:center;"]{
  text-align: center;
}

/* 送信（登録する） */
#domainAddModal button[type="submit"]{
  background: #1e3c72;
  color: #fff;
  border: none;
  padding: 8px 22px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.0em;
}

/* キャンセル */
#domainAddModal button[type="button"]{
  margin-left: 12px;
  background: #555;
  color: #fff;
  border: none;
  padding: 8px 22px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.0em;
}

/* SP微調整 */
@media (max-width: 768px){
  #domainAddModal .siteform-wrapper{
    width: calc(100% - 24px);
    padding: 18px 16px;
  }
  #domainAddModal input[type="text"]{
    width: 100%;
    font-size: 0.8em;
  }

/* 送信（登録する） */
#domainAddModal button[type="submit"]{
  background: #1e3c72;
  color: #fff;
  border: none;
  padding: 8px 22px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.5em;
}

/* キャンセル */
#domainAddModal button[type="button"]{
  margin-left: 12px;
  background: #555;
  color: #fff;
  border: none;
  padding: 8px 22px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.5em;
}
}

/* ==========================
   ✅ 完了モーダル（#modal-success）
   ========================== */
.modal-success-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: none;                  /* JSで display:flex にする想定 */
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.modal-success-inner{
  padding: 25px 25px 20px 25px;
  border-radius: 10px;
  width: 580px;
  background: #fff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.25);
  margin: auto;
  text-align: center;
}

.modal-success-message{
  margin: 0 0 18px 0;
  white-space: pre-wrap;
}

.modal-success-actions{
  text-align: center;
}

.modal-success-ok{
  background: #1976d2;
  color: #fff;
  border: none;
  padding: 8px 22px;
  border-radius: 5px;
  cursor: pointer;
}

.domain-add-actions{
  text-align: center;
}

/* SP調整（必要なら） */
@media (max-width: 768px){
  .modal-success-inner{
    width: 70%;
    max-width: 420px;
    font-size: 0.8em;    
  }

.modal-success-ok {
    background: #1e3c72;
    color: #fff;
    border: none;
    padding: 8px 22px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.5em;
}  
}