/* =========================================================
   race-profit-calendar.css（完全版・日別ページ寄せ / カレンダー本体は不変更）
   - ✅ カレンダー（DOW+GRID+CELL類）は既存のまま（いじらない）
   - ✅ 変更するのは「上部：月操作ヘッダー」「下部：月間まとめ」だけ
   - 日別ページ（brpd）に寄せたミニマル：影なし/境界は#ddd系
========================================================= */

/* =============== root =============== */

.brpc{
  width:100%;
  margin:10px 0 18px;
  background:#fff;

  /* ✅ ヘッダーに線を出さないため、brpc自体の枠線は持たない */
  border:none;
  border-radius:0;

  --cell-h-pc: 96px;
  --cell-h-sp: 74px;
  --pad-pc: 6px;
  --pad-sp: 1px;

  /* 休日カラー */
  --holiday-bg: #f9e3ea;
  --holiday-txt: #d21c3d;

  /* 今日カラー */
  --today-bg: rgba(14,165,233,.18);
  --today-band: rgba(14,165,233,.25);
  --today-txt: #0369a1;

  /* 日付帯（通常） */
  --dateband-bg: #f4f4f4;

  /* ✅ 日付帯高さ（PC/SP） */
  --dateband-h-pc: 20px;
  --dateband-h-sp: 18px;
}

/* =========================================================
   Header（月操作）— ✅日別ページ（brpd__head）寄せ
   ※ここだけ変更。カレンダー本体には触らない。
========================================================= */

.brpc__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;

  /* 日別ページ寄せ */
  margin:0 0 10px;
  padding:0;

  background:transparent;
  border:none;
}

/* 月タイトル（中央） */
.brpc__title{
  flex:1 1 auto;
  text-align:center;
  line-height:1.2;

  font-weight:800;
  font-size:15px;
  letter-spacing:0;
  color:#111;
}

/* ナビ（左右）— brpd__nav 相当 */
.brpc__nav{
  position:static;
  transform:none;

  text-decoration:none;
  font-weight:700;
  padding:6px 10px;
  background:#eee;
  border-radius:6px;
  color:#111;

  width:auto;
  height:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:none;
  font-size:16px;
  line-height:1;
  transition:background .12s;
}

.brpc__nav--prev{ left:auto; }
.brpc__nav--next{ right:auto; }

.brpc__nav:hover{
  background:#e5e5e5;
  color:#111;
}

.brpc__nav:active{
  background:#ddd;
}

.brpc__nav:focus-visible{
  outline:2px solid rgba(37,99,235,.35);
  outline-offset:2px;
}

/* =========================================================
   DOW + GRID（カレンダー本体）— ここから下は「既存そのまま」
========================================================= */

/* 曜日行：外枠（左右＋上＋下） */
.brpc__dow{
  display:grid;
  grid-template-columns:repeat(7,1fr);

  border-left:1px solid #000;
  border-right:1px solid #000;
  border-top:1px solid #000;
  border-bottom:1px solid #000;
}

.brpc__dowcell{
  padding:4px 6px;
  text-align:center;
  font-weight:800;
  font-size:12px;

  border-right:1px solid #000;
  background:#fff;
}
.brpc__dowcell:nth-child(7){
  border-right:none;
}

/* DOWの土日だけピンク */
.brpc__dowcell.is-sun,
.brpc__dowcell.is-sat{
  background: var(--holiday-bg);
  color: var(--holiday-txt);
}

/* グリッド本体：外枠（左右＋下） */
.brpc__grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);

  border-left:1px solid #000;
  border-right:1px solid #000;
  border-bottom:1px solid #000; /* ✅ 最下段セルの下線を消しても外枠は残る */

  /* ✅ 高さ：PC基準で行高を明示（min-height方式） */
  grid-auto-rows: minmax(var(--cell-h-pc), auto);
}

/* =========================================================
   cell
   ✅ 高さ：height固定→min-height
   ✅ 日付帯：absoluteでセルpaddingの影響を受けない
========================================================= */

.brpc__cell{
  position:relative; /* ✅ datewrap absoluteの基準 */

  min-height:var(--cell-h-pc);
  padding:var(--pad-pc);

  display:flex;
  flex-direction:column;

  overflow:visible; /* ✅ 見切れ防止 */

  border-right:1px solid #000;
  border-bottom:1px solid #000;
  background:#fff;
}
.brpc__cell:nth-child(7n){
  border-right:none;
}

/* 外月 */
.brpc__cell.is-out{
  background:#f7f7f7;
}

/* =========================================================
   date band（✅ 日付：右10px / 帯の上下中央）
   ✅ セルpaddingの影響を受けない（absolute）
========================================================= */

.brpc__datewrap{
  position:absolute;
  top:0;
  left:0;
  right:0;

  height: var(--dateband-h-pc);

  display:flex;
  align-items:center;         /* ✅ 上下中央 */
  padding:0 0 0 10px;         /* ✅ 右へ10px */

  border-bottom:1px solid #000;
  background: var(--dateband-bg);

  box-sizing:border-box;
  overflow:hidden;
}

.brpc__date{
  display:block;
  font-weight:900;
  font-size:13px;
  line-height:1;
}

/* =========================================================
   nums
   ✅ 日付帯の分だけ下へ押し下げ（absoluteにしたので必要）
========================================================= */

.brpc__nums{
  margin-top: calc(var(--dateband-h-pc) + 3px);
  display:flex;
  flex-direction:column;
  gap:1px;
}
.brpc__row{
  display:flex;
  align-items:center;
}
.brpc__lbl{
  font-size:11px;
  font-weight:800;
}
.brpc__val{
  margin-left:auto;
  text-align:right;
  font-weight:900;
  font-size:12px;
  line-height:14px;
  height:14px;
  white-space:nowrap;
}

/* 収支区切り線だけグレー */
.brpc__sep{
  border-top:1px solid #999;
  margin:2px 0;
}

/* =========================================================
   休日（土日＋祝日）— セル＆日付帯＆日付文字を統一
========================================================= */

.brpc__cell.is-sun,
.brpc__cell.is-sat,
.brpc__cell.is-holiday{
  background: var(--holiday-bg);
}

.brpc__cell.is-sun .brpc__datewrap,
.brpc__cell.is-sat .brpc__datewrap,
.brpc__cell.is-holiday .brpc__datewrap{
  background: var(--holiday-bg);
}

.brpc__cell.is-sun .brpc__date,
.brpc__cell.is-sat .brpc__date,
.brpc__cell.is-holiday .brpc__date{
  color: var(--holiday-txt);
  font-weight:900;
}

/* =========================================================
   今日（is-today）— 最優先＆線なし
========================================================= */

.brpc__cell.is-today{
  background: var(--today-bg) !important;
  outline:none !important;
}

.brpc__cell.is-today .brpc__datewrap{
  background: var(--today-band) !important;
}

.brpc__cell.is-today .brpc__date{
  color: var(--today-txt);
  font-weight:900;
}

/* =========================================================
   最下段の下線：セル側は消す（外枠はgridのborder-bottomが担当）
========================================================= */

.brpc__cell:nth-last-child(-n+7){
  border-bottom:none;
}

/* =========================================================
   SP（余白対策込み）
========================================================= */

@media (max-width:768px){

  .brpc{
    --cell-h-sp: 64px;
  }

  .brpc__grid{
    grid-auto-rows: minmax(var(--cell-h-sp), auto);
  }

  .brpc__cell{
    min-height:var(--cell-h-sp);

    padding:var(--pad-sp);
    padding-bottom:4px;

    overflow:visible;
  }

  .brpc__datewrap{
    height: var(--dateband-h-sp);
    padding:0 0 0 10px;
  }

  .brpc__date{
    font-size:12px;
  }

  .brpc__nums{
    margin-top: calc(var(--dateband-h-sp) + 1px);
    gap:0;
  }

  .brpc__lbl{
    display:none;
  }

  .brpc__val{
    font-size:11px;
    line-height:12px;
    height:12px;
  }

  .brpc__sep{
    margin:1px 0;
  }

  /* ✅ SPヘッダも日別寄せのまま（詰めるだけ） */
  .brpc__head{
    margin:0 0 8px;
    gap:8px;
  }
  .brpc__nav{
    padding:6px 10px;
  }
  .brpc__title{
    font-size:14px;
  }
}

/* =========================================================
   日付帯の“帯色”ルール（既存方針維持）
========================================================= */

/* 通常日は日付帯を透明（=帯なし） */
.brpc__datewrap{
  background: transparent !important;
}

/* 土日祝だけ帯をピンク */
.brpc__cell.is-sun .brpc__datewrap,
.brpc__cell.is-sat .brpc__datewrap,
.brpc__cell.is-holiday .brpc__datewrap{
  background: var(--holiday-bg) !important;
}

/* 今日だけ帯を水色 */
.brpc__cell.is-today .brpc__datewrap{
  background: var(--today-band) !important;
}

/* 今日セルはpadding含めて全面塗る（既存維持） */
.brpc__cell.is-today{
  background: var(--today-bg) !important;
}

/* datewrapは透明にする（セル背景に任せる） */
.brpc__cell.is-today .brpc__datewrap{
  background: transparent !important;
}

/* =========================================================
   ✅ 月間まとめ（カレンダー下）— 日別ページの集計（brpd__summarySimple）寄せ
   ※HTMLはいじらず「brpc__monthly 内」をCSSで寄せる
========================================================= */

/* 月間ブロック全体：余計な線は消す（中の箱で囲う） */
.brpc__monthly{
  margin:10px 0 0 !important;
  padding-top:0 !important;
  border-top:none !important;
}

/* タイトル：日別の brpd__titleMain に寄せて小さめ */
.brpc__monthly > div:first-child{
  font-weight:800 !important;
  font-size:15px !important;
  color:#111 !important;
  margin:0 0 8px !important;
}

/* 中の白箱（あなたのinline div）を日別の summary と同等に */
.brpc__monthly > div:nth-child(2){
  border:1px solid #ddd !important;
  border-radius:8px !important;
  background:#fff !important;
  overflow:hidden !important;
}

/* 行：brpd__sumItem 寄せ（線は #eee、文字は濃淡統一） */
.brpc__monthly > div:nth-child(2) > div{
  padding:6px 10px !important;
  border-bottom:1px solid #eee !important;
  line-height:1.2 !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:10px !important;
}

/* 最終行だけ下線なし */
.brpc__monthly > div:nth-child(2) > div:last-child{
  border-bottom:none !important;
}

/* 左ラベル */
.brpc__monthly > div:nth-child(2) > div > div:first-child{
  font-size:13px !important;
  font-weight:800 !important;
  color:#444 !important;
  margin:0 !important;
}

/* 右値 */
.brpc__monthly > div:nth-child(2) > div > div:last-child{
  font-size:13px !important;
  font-weight:900 !important;
  color:#111 !important;
  margin:0 !important;
  white-space:nowrap !important;
  text-align:right !important;
}

/* SP：月間ブロックの余白だけ少し詰める */
@media (max-width:768px){
  .brpc__monthly{
    margin:8px 0 0 !important;
  }
  .brpc__monthly > div:nth-child(2) > div{
    padding:6px 10px !important;
  }
}

/* =========================
   FIX: 月タイトル（2025-01）が小さすぎる → 大きく
   ※カレンダー本体は触らない
========================= */
.brpc__title{
  font-size:18px !important;   /* ←ここで上げる（18〜20で好み調整） */
  font-weight:900 !important;
}

/* SPは少しだけ抑える */
@media (max-width:768px){
  .brpc__title{
    font-size:16px !important;
  }
}


/* =========================
   FIX: 月間まとめの文字が小さすぎる → 日別に寄せつつ少し大きく
========================= */

/* 「YYYY-MM 月間収支」見出し */
.brpc__monthly > div:first-child{
  font-size:16px !important;   /* 15→16 */
  font-weight:900 !important;
}

/* 行のラベル/値 */
.brpc__monthly > div:nth-child(2) > div > div:first-child{
  font-size:14px !important;   /* 13→14 */
}

.brpc__monthly > div:nth-child(2) > div > div:last-child{
  font-size:14px !important;   /* 13→14 */
  font-weight:900 !important;
}

/* SPも読みやすく（小さくしすぎない） */
@media (max-width:768px){
  .brpc__monthly > div:first-child{
    font-size:15px !important;
  }
  .brpc__monthly > div:nth-child(2) > div > div:first-child,
  .brpc__monthly > div:nth-child(2) > div > div:last-child{
    font-size:14px !important;
  }
}

/* =========================
   FIX: 月送りボタンを大きく（文字も大きく）
========================= */

.brpc__nav{
  padding:8px 14px !important;   /* クリック領域拡大 */
  font-size:18px !important;     /* ← フォント大きく */
  font-weight:900 !important;
  border-radius:8px !important;
  min-width:44px !important;     /* タップしやすいサイズ */
  text-align:center;
}

/* PCはさらに少し大きめでもOK */
@media (min-width:769px){
  .brpc__nav{
    font-size:20px !important;
    padding:10px 18px !important;
  }
}

/* SPは押しやすさ重視 */
@media (max-width:768px){
  .brpc__nav{
    font-size:18px !important;
    padding:8px 14px !important;
  }
}