/* ページ専用トークン */
body.list{
  --list-label-fz: 1.3rem;     /* フィルタラベル */
  --list-count-fz: 1.15rem;    /* 件数表示 */
  --slider-track: #e9ecef;
  --slider-accent: #0d6efd;
  --cell-hover: #f8f9fa;
}

.list-title {
    text-align: center;
    margin: 40px 0;
}

@media screen and (max-width: 768px) {
    .list-title {
        font-size: 20px; /* スマホでは小さめ */
        margin: 40px 0;  /* 余白も少し調整したいなら */
    }
}

/* --- Filters --- */
body.list .filter-row { row-gap: 12px; }
body.list #filter-form .form-label { margin-bottom: .25rem; font-size: var(--list-label-fz); color:#0c0c0c; }
body.list #filter-form .form-select,
body.list #filter-form .form-control { min-width: 160px; }
body.list #sort-select { min-width: 140px; }
body.list #result-count { font-size: var(--list-count-fz); color:#0c0c0c; }

/* フィルタ行の上マージン & ボタン幅 */
body.list #filter-form .row > .col-12 > .d-flex { margin-top: .25rem; }
body.list #filter-form .btn { min-width: 120px; }

/* --- Table (responsive & layout) --- */
/* テーブルの罫線/パディングを詰めたい場合は table に .table-borderless を付与 */
body.list .table-borderless th,
body.list .table-borderless td { border: none; padding: 0; }

/* 768px以上：横スクロール解除して親幅いっぱい */
@media (min-width: 768px) {
  body.list .table-responsive .table {
    width: 100% !important;
    min-width: unset;
    table-layout: auto;
  }
}

/* 767px以下：横スクロール維持 */
@media (max-width: 767px) {
  body.list .table-responsive { overflow-x: auto; }
  body.list .table-responsive .table {
    width: auto !important;
    min-width: 600px;   /* 必要に応じ調整 */
    table-layout: fixed;
  }
}

/* セルの省略表示（折り返し防止） */
body.list .table-responsive th,
body.list .table-responsive td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.list #result-table thead th{
  text-align: center;
}

/* 数値列は中央（価格/距離/年式/排気量） */
body.list #result-table th,
body.list #result-table td { vertical-align: middle; }
body.list #result-table th { white-space: nowrap; }
body.list #result-table td:nth-child(2),
body.list #result-table td:nth-child(3),
body.list #result-table td:nth-child(4),
body.list #result-table td:nth-child(5) {
  text-align: center;
  white-space: nowrap;
}

/* 車名：内部はフル保持、表示は省略（約15文字） */
body.list #result-table td .car-name {
  display: inline-block;
  max-width: 15em;          /* “約15文字” */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 576px){
  body.list #result-table td .car-name { max-width: 12em; }
}

/* 行ホバー */
body.list .clickable-row:hover { background-color: var(--cell-hover); cursor: pointer; }

/* ページネーションの上下マージン */
body.list #pagination-top,
body.list #pagination-bottom { margin: 12px 0; }

/* ================================
   List controls（上部：並び替え/件数/ページネーション）
   既存の row/col 構造そのままでPC=右寄せ、SP=縦並びにする
   ================================ */
body.list .list-controls > .col-12{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem 1rem;
  justify-content:flex-start !important;
  width:100%;
}

/* 左側ブロック（並び替え+件数）を可変幅に */
body.list .list-controls > .col-12 > .d-flex.align-items-center{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem 1rem;
  flex:1 1 auto;          /* 右のULを押し出すため */
  min-width:240px;        /* きつい折返し防止（調整可） */
}

/* ラベルの縦崩れ防止 */
body.list .list-controls label{ margin:0; white-space:nowrap; }

/* PC：上部ページネーションを右端へ（#pagination-top を狙い撃ち） */
body.list .list-controls > .col-12 > #pagination-top{
  margin-left:auto !important; /* 右端へ */
}

/* 下部ページネーションは常に右寄せ（親が d-flex を想定） */
body.list #pagination-bottom{ margin-left:auto; }

/* SP時：下部ページネーションを中央寄せに上書き */
@media (max-width: 576px){
  body.list #pagination-bottom{
    margin-left: 0 !important;
    justify-content: center;
    width: 100%;
  }
  /* 中身(UL.pagination)を中央寄せ */
  body.list #pagination-bottom .pagination{
    justify-content: center;
  }
}

/* ================================
   SP（≤576px）：縦並び「並び替え → 件数 → ページネーション」
   ================================ */
@media (max-width:576px){
  body.list .list-controls > .col-12{
    flex-direction:column;
    align-items:stretch;
    gap:.5rem;
  }
  body.list .list-controls > .col-12 > .d-flex.align-items-center{
    flex-direction:column;   /* 左ブロックも縦積み */
    align-items:stretch;
    gap:.5rem;
    width:100%;
  }

  /* インライン style="width:auto" を強制上書き */
  body.list #sort-select{ width:100% !important; }

  /* 並び順：件数(2) → ページネーション(3) */
  body.list #result-count{ order:2; }
  body.list .list-controls > .col-12 > #pagination-top{
    order:3;
    width:100%;
    margin-left:0 !important;
    justify-content:center;  /* 右寄せ希望なら flex-end に */
  }
}

/* ================================
   Slider (noUiSlider の見た目)
   ================================ */
body.list .all-slider.noUi-target{
  width:100% !important;
  height:.5rem;
  background:var(--slider-track);
  border-radius:.25rem;
  position:relative;
}
body.list .all-slider .noUi-connect{ background:var(--slider-accent); border-radius:.25rem; }
body.list .all-slider .noUi-handle{
  width:1rem; height:1rem; top:-.25rem;
  background:#fff; border:2px solid var(--slider-accent); border-radius:50%;
  box-shadow:0 0 2px rgba(0,0,0,.2); cursor:grab;
}
body.list .all-slider .noUi-tooltip{
  background:var(--slider-accent); color:#fff; border-radius:.25rem;
  padding:.2rem .4rem; font-size:.75rem; white-space:nowrap;
}

/* スライダー行 */
body.list .slider-grid{
  display:grid;
  grid-template-columns:auto 1fr auto;
  column-gap: 12px; 
  align-items:center;
  width:100%;
  margin-top:.5rem;
}
body.list .slider-grid span{ white-space:nowrap; }
body.list .slider-label{ 
  width:80px;
  text-align:center;
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
}

body.list .all-slider .noUi-target{
  margin-inline: 12px;
}

/* ★ ラベル側にも“片側だけ”少し逃げをつけて視覚上の“■”を安定 */
#mileage-min-display,
#year-min-display,
#total-min-display {  /* 左側ラベルは右に少しだけ余白を足す */
  margin-right: 0px;
}
#mileage-max-display,
#year-max-display,
#total-max-display {  /* 右側ラベルは左に少しだけ余白を足す */
  margin-left: 15px;
}

.all-slider{ min-width: 0; }

/* Bootstrap gutter を広げたい場合（任意） */
body.list .row-cols-md-2.g-5{
  --bs-gutter-x:3rem;
  --bs-gutter-y:3rem;
}

/* スマホ時：下側の検索ボタンを中央寄せ（任意） */
@media (max-width:767px){
  body.list #filter-form .d-flex.justify-content-end{ justify-content:center; }
}

#filter-form button[type="submit"],
#filter-form input[type="submit"],
#filter-form .btn-action {          /* ボタンが .btn-action の場合もカバー */
  margin-top: 1.7rem;              /* PC/共通 */
}