/* =========================
   Rankings layout
========================= */
.br-rank-layout{
  display:flex;
  gap:12px;
  align-items:stretch;
}
.br-rank-side{
  flex:0 0 33.3%;
  min-width:220px;
}
.br-rank-main{
  flex:1;
  min-width:0;
}

/* =========================
   表示制御（核）
========================= */

/* PC */
@media (min-width:769px){
  .br-rank-layout .br-rank-side .br-rank-menu-pc{ display:block; }
  .br-rank-layout .br-rank-main .br-rank-menu-pc{ display:none; }
  .br-rank-layout .br-rank-menu-sp{ display:none; }
}

/* SP */
@media (max-width:768px){
  .br-rank-layout{ display:block; }
  .br-rank-side{ display:none; }
  .br-rank-main{ padding:8px 4px; }
  .br-rank-layout .br-rank-main .br-rank-menu-sp{ display:block; }
  .br-rank-layout .br-rank-menu-pc{ display:none; }
}

/* =========================
   PC sidebar（外枠）
========================= */
.br-rank-layout .br-rank-sidebar{
  background:linear-gradient(180deg,#fff,#f3f7fb);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(15,23,42,.10);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.br-rank-layout .br-rank-sidebar-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:18px;
  font-weight:800;
  color:#0f172a;
  margin:0 0 10px;
}
.br-rank-layout .br-rank-sidebar-title::before{
  content:"";
  width:4px;
  height:20px;
  border-radius:999px;
  background:#ef4444;
}

/* =========================================================
   PC: メニュー（フラット）
========================================================= */
@media (min-width:769px){

  /* セクション区切り */
  .br-rank-layout .br-rank-menu-section{
    padding-top:10px;
    border-top:1px solid rgba(15,23,42,.08);
    margin-top:10px;
  }
  .br-rank-layout .br-rank-menu-section:first-of-type{
    border-top:0;
    padding-top:0;
    margin-top:0;
  }

  /* セクション見出し（選手/モーター/場） */
  .br-rank-layout .br-rank-menu-section-title{
    display:inline-block;
    position:relative;
    font-size:16px;
    font-weight:900;
    color:#0f172a;
    padding:4px 0 6px;
    margin:6px 0 10px;
  }
  .br-rank-layout .br-rank-menu-section-title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:2px;
    background:#0ea5e9;
  }

  .br-rank-layout .br-rank-menu-group{
    border-radius:0;
  }

  .br-rank-layout .br-rank-menu-group > summary{
    list-style:none;
    cursor:pointer;
    user-select:none;
    padding:0;
    margin:0;
  }
  .br-rank-layout .br-rank-menu-group > summary::-webkit-details-marker{
    display:none;
  }

  /* summary（水色）と item（グレー）の間に最小限の隙間 */
  .br-rank-layout details.br-rank-menu-group[open] > .br-rank-menu-group-items{
    margin-top:1px;
  }

  /* item 同士に最小限の隙間 */
  .br-rank-layout .br-rank-menu-group-items > .br-rank-menu-button{
    margin-bottom:1px;
  }
  .br-rank-layout .br-rank-menu-group-items > .br-rank-menu-button:last-child{
    margin-bottom:0;
  }

  /* summary内 1行UI */
  .br-rank-layout .br-rank-group-row{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:4px 10px;
    font-size:14px;
    font-weight:900;
    color:#0f172a;
    background:transparent;
    transition:background .12s ease;
  }

  .br-rank-layout .br-rank-menu-group > summary:hover .br-rank-group-row{
    background:rgba(14,165,233,.06);
  }

  .br-rank-layout details.br-rank-menu-group[open] > summary .br-rank-group-row{
    background:rgba(14,165,233,.08);
  }

  .br-rank-layout details.br-rank-menu-group[open] > summary .br-rank-group-row::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:2px;
    background:#0ea5e9;
  }

  /* ▲▼ */
  .br-rank-layout .br-rank-group-chev::before{
    content:"▼";
    font-size:12px;
    opacity:.60;
  }
  .br-rank-layout details.br-rank-menu-group[open] .br-rank-group-chev::before{
    content:"▲";
    opacity:.90;
  }

  /* items：上下の肉を削る */
  .br-rank-layout .br-rank-menu-group-items{
    padding:2px 0 2px 10px;
  }

  /* アイテムリンク */
  .br-rank-layout .br-rank-menu-button{
    display:block;
    width:100%;
    padding:4px 10px;
    border-radius:0 !important;
    font-size:13px;
    font-weight:800;
    color:#0f172a;
    text-align:left;
    text-decoration:none;
    background:transparent;
    position:relative;
    transition:background .12s ease;
  }
  .br-rank-layout .br-rank-menu-button:hover{
    background:rgba(15,23,42,.04);
  }

  .br-rank-layout .br-rank-menu-button::before{
    content:none !important;
    display:none !important;
  }

  .br-rank-layout .br-rank-menu-button.is-active{
    background:rgba(14,165,233,.10) !important;
  }
  .br-rank-layout .br-rank-menu-button.is-active::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:2px;
    background:#0ea5e9;
  }
}

/* =========================
   SP UI（tab + select横並び + ▼自前）
   - 既存機能は維持
========================= */
@media (max-width:768px){

  .br-rank-menu-sp{ margin:0 0 6px; }

  .br-rank-sp-ui{
    display:none;
    background:linear-gradient(180deg,#fff,#f3f7fb);
    border-radius:14px;
    box-shadow:0 4px 14px rgba(15,23,42,.08);
    padding:12px;
  }
  .br-rank-sp-ui.is-ready{ display:block; }

  /* ラベル2つを横並び（維持） */
  .br-rank-sp-select-head{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8px;
    align-items:end;
    margin:2px 0 2px;
  }
  .br-rank-sp-select-head .br-rank-sp-label{
    font-size:12px;
    font-weight:900;
    opacity:.7;
    color:#0f172a;
    margin:0;
  }

  /* select 横並び（維持） */
  .br-rank-sp-select-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8px;
    align-items:stretch;
    margin:0 0 10px;
  }

  /* ▼の基点（PHPで追加したラッパー） */
  .br-rank-sp-select-wrap{
    position:relative;
    min-width:0;
  }

  /* ▼（各selectの右端に固定。ズレない） */
  .br-rank-sp-select-wrap::after{
    content:"▼";
    position:absolute;
    top:50%;
    right:12px;
    transform:translateY(-50%);
    font-size:11px;
    font-weight:900;
    color:#0f172a;
    opacity:.55;
    pointer-events:none;
    line-height:1;
  }

  /* select：文字はみ出し対策（維持） */
  .br-rank-sp-select{
    width:100%;
    min-width:0;
    padding:8px 34px 8px 10px; /* 右の▼分を確保 */
    border-radius:0px;
    border:1px solid rgba(15,23,42,.12);
    font-weight:800;
    background:#fff;
    margin:0;
    min-height:32px;

    font-size:13px;
    line-height:1.1;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    -webkit-appearance:none;
    appearance:none;
    background-image:none;
  }
  .br-rank-sp-select:disabled{ opacity:.6; }

  /* disabledの▼は薄く（維持） */
  .br-rank-sp-select-wrap:has(select:disabled)::after{
    opacity:.35;
  }

  /* それでも長い端末用（維持） */
  @media (max-width:390px){
    .br-rank-sp-select{ font-size:12px; }
  }

  /* 極小幅は縦積み fallback（維持） */
  @media (max-width:360px){
    .br-rank-sp-select-head,
    .br-rank-sp-select-row{
      grid-template-columns: 1fr;
    }
  }
}

/* =====================================================
   Tabs（共通：SP/PC両方に効かせる）
   ※ 実体が2パターンあっても確実に当てる
   - SP/PC共通: .br-rank-sp-switch / .br-rank-sp-tab（あなたの現行PHP）
   - 互換: .br-rank-period-tabs / .br-rank-period-tab（旧/別案）
===================================================== */

/* 外枠 */
.br-rank-sp-switch,
.br-rank-period-tabs{
  display:flex;
  gap:0;
  margin:0 0 6px;
  padding:0;

  border:1px solid rgba(15,23,42,.14);
  border-radius:4px;
  overflow:hidden;
  background:#fff;
}

/* タブ本体（button/a 共通） */
.br-rank-sp-tab,
.br-rank-period-tab{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;

  border:0;
  background:#f8fafc;
  color:#0f172a;

  font-size:13px;
  font-weight:800;
  line-height:1.1;

  padding:9px 6px;
  position:relative;

  opacity:.78;
  cursor:pointer;
  user-select:none;
  text-decoration:none; /* a対策 */
}

/* 区切り線 */
.br-rank-sp-tab + .br-rank-sp-tab,
.br-rank-period-tab + .br-rank-period-tab{
  border-left:1px solid rgba(15,23,42,.14);
}

/* アクティブ */
.br-rank-sp-tab.is-active,
.br-rank-period-tab.is-active{
  opacity:1;
  background:#fff;
}

/* 下線（タブ幅100%） */
.br-rank-sp-tab.is-active::after,
.br-rank-period-tab.is-active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:#0ea5e9;
}

/* 押した感（モバイル） */
.br-rank-sp-tab:active,
.br-rank-period-tab:active{
  transform:translateY(0.5px);
}

/* hover（PC） */
@media (hover:hover){
  .br-rank-sp-tab:hover,
  .br-rank-period-tab:hover{
    opacity:1;
    background:#eef2f7;
  }
}

/* =====================================================
   Tabs 微調整
===================================================== */

/* SP: 期間タブは横が詰まるので少し小さく */
@media (max-width:768px){
  .br-rank-sp-period .br-rank-sp-tab{
    font-size:13px;
    padding:8px 4px;
  }
}

/* PC: サイドバー内の期間タブ（ここが “必ず効く” ように修正）
   現行PHP: <div class="br-rank-period-pc br-rank-sp-switch"> ... <a class="br-rank-sp-tab ...">
*/
@media (min-width:769px){
  .br-rank-period-pc.br-rank-sp-switch{
    margin:0 0 10px;
  }
  .br-rank-period-pc.br-rank-sp-switch .br-rank-sp-tab{
    font-size:13px;
    padding:8px 6px;
  }
}

/* 互換: 旧/別案の period-tabs を使っててもOK */
@media (min-width:769px){
  .br-rank-layout .br-rank-period-tabs{
    margin:0 0 10px;
  }
  .br-rank-layout .br-rank-period-tab{
    font-size:13px;
    padding:8px 6px;
  }
}
/* =========================
   PC main（外枠）※sidebarと同じカード
========================= */
.br-rank-layout .br-rank-main-card{
  background:linear-gradient(180deg,#fff,#f3f7fb);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(15,23,42,.10);
  padding:18px;
  display:block;
}

/* タイトルの余計なズレを潰す（テーマ側のmargin対策） */
.br-rank-layout .br-rank-main-card .br-pickup-head{
  margin:0 0 10px;
}
.br-rank-layout .br-rank-main-card .br-rank-view__header{
  margin:0;
}


/* 早見：場名＋Rバッジ */
.br-hayami{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.br-hayami-row{
  display:flex;
  align-items:center;
  gap:4px;
  line-height:1.2;
}

.br-hayami-place{
  font-size:13px;
  white-space:nowrap;
}

.br-hayami-badges{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}

/* Rバッジ（■） */
/* Rバッジ（■） 2桁(12R)基準で固定 */
.br-hayami-r{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:30px;     /* ← 2桁(12R)でも余裕ある固定幅。必要なら 32〜36で調整 */
  height:20px;    /* ← 高さも固定 */
  padding:0;      /* ← 中央揃えを崩す要因になるので0 */

  font-size:12px;
  font-weight:400;
  line-height:1;  /* ← 文字の上下ブレ防止 */
  letter-spacing:0;

  box-sizing:border-box;
}

/* 枠番カラー（競艇の定番） */
.br-waku-1{ background:#ffffff; color:#111827; border:1px solid #111827; } /* 白は黒文字＋枠 */
.br-waku-2{ background:black; color:#ffffff; }                            /* 黒 */
.br-waku-3{ background:red; color:#ffffff; }                            /* 赤 */
.br-waku-4{ background:blue; color:#ffffff; }                            /* 青 */
.br-waku-5{ background:yellow; color:#111827;  border:1px solid #111827} /* 黄は黒文字 */
.br-waku-6{ background:green; color:#ffffff; }                            /* 緑 */

@media (max-width: 768px) {
  .br-rank-table td {
    padding-top: 6px;
    padding-bottom: 6px;
      font-size:14px;
  }
}
/* =========================
   Rankings table header
========================= */
.br-rank-table thead th{
  background:#f1f5f9;      /* 薄めグレイ */
  color:#334155;           /* 文字は濃すぎないグレー */
  font-weight:600;         /* SWELLの太字を殺す */
  box-shadow:none !important;
  border-radius:0 !important;
  border-bottom:1px solid #e2e8f0;
}
/* =========================
   Sticky header
========================= */
.br-rank-table{
  border-collapse:separate; /* stickyで必須 */
  border-spacing:0;
}

.br-rank-table thead th{
  position:sticky;
  top:0;
  z-index:5;               /* tdより上 */
}
@media (max-width: 768px) {
  .br-rank-table thead th{
    padding:6px 6px;
    font-size:13px;
  }
}
.br-rank-table thead th{
    text-align:center !important;
}
.br-rank-table th,
.br-rank-table td{
   font-weight:600;  
   font-size:13px;
  line-height:1.35;    /* 行間を締める */
}

.br-rank-view__meta {
  text-align: right;
  font-size: 13px;
  line-height: 1.2;
}
@media (max-width: 768px) {
  .br-rank-layout .br-rank-main-card {
    padding: 6px;
  }
}


/* course/period tabs: 文字を小さく、折り返し禁止 */
.br-rank-course-tab,
.br-rank-period-tab{
  white-space: nowrap;
  font-size: 13px;
  padding: 8px 2px;
  line-height: 1.1;
   min-height:32px;
}

/* =========================
   PCメニュー用メタラベル
========================= */
.br-rank-pc-meta-label{
  font-size: 12px;
  font-weight: 700;
  color: #334155;           /* 既存UIに近い濃いグレー */

  line-height: 1.3;
}

/* PCのみ表示（保険） */
@media (max-width: 768px){
  .br-rank-pc-meta-label{
    display: none;
  }
}
.br-rank-sp-period-tab.is-disabled{
  opacity:.45;
  pointer-events:none;
  filter: grayscale(1);
}

/* ✅追加：course（同じ見た目にする） */
.br-rank-course-tab.is-disabled{
  opacity:.45;
  pointer-events:none;
  filter: grayscale(1);
}

.br-rank-view.is-empty .br-pickup-head{
  display:none !important;
}
.br-rank-view.is-empty .br-rank-view__meta{
  display:none !important;
}


/* 率：数字 */
.br-rate-num{
  font-size: 13px;
  font-weight: 600;
}

/* 率：% */
.br-rate-unit{
  font-size: 10px;
  margin-left: 1px;
  opacity: .7;
}

@media (max-width: 768px){
  .br-rate-num{ font-size: 13px; }
  .br-rate-unit{ font-size: 9px; }
}

/* 主項目/副項目が「59.」「0%」みたいに割れるのを防ぐ */
.br-rank-table td{
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;   /* anywhere を殺す */
}

/* 率の span も念押しで */
.br-rate-num,
.br-rate-unit{
  display: inline !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
@media (min-width: 769px){
  .br-rank-table th:nth-child(3),
  .br-rank-table td:nth-child(3),
  .br-rank-table th:nth-child(4),
  .br-rank-table td:nth-child(4){
    width: 75px !important; /* 56〜64で調整 */
  }
}







/* =========================
   SP: 数値列を絶対1行（体裁崩れ防止）
========================= */
@media (max-width: 768px){

  /* 率列・副項目列（3列目=1着率, 4列目=1着/出走） */
  .br-rank-table td:nth-child(3),
  .br-rank-table td:nth-child(4){
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: 1.1 !important; /* 2行化の見た目を抑止 */
  }

  /* span分割してる率も絶対に1行 */
  .br-rate-num,
  .br-rate-unit{
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /* セル内で万が一はみ出すときは省略（体裁優先） */
  .br-rank-table td:nth-child(3),
  .br-rank-table td:nth-child(4){
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}


/* 早見を1行固定 */
.br-hayami-badges{
  flex-wrap: nowrap;     /* ← 折り返し禁止 */
  white-space: nowrap;  /* ← 念押し */
}


/* ヘッダを絶対1行にする */
.br-rank-table thead th{
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

@media (max-width:768px){
  .br-rank-table th,
  .br-rank-table td{
    padding-left:4px;
    padding-right:4px;
  }
}

@media (max-width:768px){

  /* ヘッダ(th)だけ小さく */
  .br-rank-table thead th{
    font-size:11px;      /* ← 今より一段小さく */

  }

}
@media (min-width: 1025px){
  .br-rank-menu-section.is-collapsed .br-rank-menu-group{
    display: none;
  }
  .br-rank-menu-section-title{
    user-select: none;
  }
}