/* ============================================================
   月次推移タブ専用スタイル (#t-monthly スコープ)
   summary.css と同じ方針: 共通クラスと衝突しないよう mo- 接頭辞 +
   #t-monthly 配下限定で定義する。
   ============================================================ */

#t-monthly{padding-top:4px}

/* ---- ツールバー (スクロール時に画面上部へ固定) ---- */
/* thead の z-index:10 / sticky-col の 5 より上、モーダル (100) より下 */
#t-monthly .mo-sticky{position:sticky;top:0;z-index:15;background:var(--bg);padding:8px 0 6px;margin:-4px 0 10px;border-bottom:1px solid var(--bdr)}
#t-monthly .mo-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
#t-monthly .mo-spc{flex:1}
#t-monthly .mo-chips{display:inline-flex;border:1px solid var(--bdr2);border-radius:7px;overflow:hidden}
#t-monthly .mo-chips button{padding:6px 11px;font-size:12px;border:none;background:var(--bg3);color:var(--tx3);cursor:pointer;border-right:1px solid var(--bdr2);font-family:inherit}
#t-monthly .mo-chips button:last-child{border-right:none}
#t-monthly .mo-chips button.on{background:var(--acc);color:#fff;font-weight:600}
#t-monthly .mo-range{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--tx3)}
#t-monthly .mo-range input{background:var(--bg3);border:1px solid var(--bdr2);color:var(--tx);border-radius:6px;padding:5px 7px;font-family:var(--mono);font-size:12px;color-scheme:dark}
#t-monthly .mo-btn{padding:7px 13px;border-radius:7px;border:1px solid var(--bdr2);background:var(--bg3);color:var(--tx);cursor:pointer;font-size:12px;font-family:inherit}
#t-monthly .mo-btn.pri{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
#t-monthly .mo-btn:hover{filter:brightness(1.1)}
#t-monthly .mo-note{font-size:11px;color:var(--tx3);margin:0}
#t-monthly .mo-toolbar .mo-note{flex:1;min-width:260px;line-height:1.6}
#t-monthly .mo-banner{background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.45);color:var(--tx);border-radius:8px;padding:10px 14px;font-size:12px;margin-bottom:14px}
#t-monthly .mo-none{color:var(--tx3);font-size:13px;padding:30px;text-align:center}

/* ---- パネル ---- */
#t-monthly .mo-panel{background:var(--bg2);border:1px solid var(--bdr);border-radius:10px;margin-bottom:18px;overflow:hidden}
#t-monthly .mo-phead{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--bdr)}
#t-monthly .mo-ptitle{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
/* [案件]ビーリス [媒体]TikTok 形式のラベルチップ */
#t-monthly .mo-dim{display:inline-flex;align-items:center;gap:6px}
#t-monthly .mo-lbl{font-size:10px;padding:2px 7px;border-radius:4px;font-weight:700;background:var(--bg3);color:var(--tx3);flex:0 0 auto}
#t-monthly .mo-lbl.proj{background:rgba(76,141,255,.18);color:var(--acc2,#7aa8ff)}
#t-monthly .mo-lbl.media{background:rgba(167,139,250,.18);color:var(--purple,#a78bfa)}
#t-monthly .mo-lbl.model{background:rgba(34,197,94,.18);color:var(--green,#22c55e)}
#t-monthly .mo-val{font-size:13.5px;font-weight:700}
#t-monthly .mo-pact{display:flex;gap:4px}
/* パネル別の期間フィルタ行 */
#t-monthly .mo-pperiod{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--bdr)}
#t-monthly .mo-chips.sm button{padding:4px 9px;font-size:11px}
#t-monthly .mo-icon{width:26px;height:26px;border-radius:6px;border:1px solid var(--bdr2);background:var(--bg3);color:var(--tx3);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center}
#t-monthly .mo-icon:hover{color:var(--tx);border-color:var(--acc)}
#t-monthly .mo-err{padding:16px;color:var(--red,#f0565a);font-size:12px}

/* ---- 条件編集フォーム ---- */
#t-monthly .mo-form{padding:12px 14px;border-bottom:1px solid var(--bdr);background:var(--bg)}
#t-monthly .mo-form-row{display:flex;gap:14px;flex-wrap:wrap}
#t-monthly .mo-form label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--tx3)}
#t-monthly .mo-form select{background:var(--bg3);border:1px solid var(--bdr2);color:var(--tx);border-radius:6px;padding:6px 9px;font-size:12px;min-width:170px;font-family:inherit}
#t-monthly .mo-hint{font-size:10px;color:var(--tx3);font-weight:400}
#t-monthly .mo-selhead{display:flex;align-items:center;gap:6px}
#t-monthly .mo-clear{margin-left:auto;background:none;border:none;color:var(--acc2,#7aa8ff);font-size:10px;cursor:pointer;padding:0;text-decoration:underline;font-family:inherit}
#t-monthly .mo-form-act{display:flex;gap:8px;margin-top:10px}
#t-monthly .mo-addwrap .mo-form{border:1px dashed var(--bdr2);border-radius:10px;margin-bottom:14px}

/* ---- テーブル ---- */
#t-monthly .mo-tw{overflow-x:auto}
#t-monthly .mo-tw table{border-collapse:collapse;width:100%;min-width:1240px}
#t-monthly .mo-tw th,#t-monthly .mo-tw td{padding:7px 10px;font-size:12px;white-space:nowrap;border-bottom:1px solid var(--bdr);text-align:left}
#t-monthly .mo-tw th{background:var(--bg3);color:var(--tx2);font-weight:600;font-size:11px}
/* グローバル CSS の thead{position:sticky;top:0} を打ち消す。
   .mo-tw は overflow-x:auto のため sticky thead は縦方向に機能せず、
   top をずらすとヘッダー行がテーブル内で押し下がり 1行目がヘッダーの
   上に見える (2026-08-05 の不具合)。月次はページスクロール設計なので
   ヘッダー行は通常フローに置く */
#t-monthly .mo-tw thead{position:static}
#t-monthly .mo-tw th.r,#t-monthly .mo-tw td.r{text-align:right;font-family:var(--mono)}
#t-monthly .mo-tw td.mcol,#t-monthly .mo-tw th.mcol{position:sticky;left:0;background:var(--bg2);border-right:1px solid var(--bdr2);font-weight:700;min-width:150px}
#t-monthly .mo-tw th.mcol{background:var(--bg3)}
#t-monthly .mo-tw tr:hover td{background:rgba(76,141,255,.05)}
#t-monthly .mo-tw tr:hover td.mcol{background:#1c2130}
#t-monthly .mo-tw .msub{font-size:10px;color:var(--tx3);font-weight:400;margin-left:6px;font-family:var(--mono)}
#t-monthly .mo-tw tr.mo-empty td{color:var(--tx3)}

/* 合計行: 集計期間計 / 今期・前期 / 全期間計 */
#t-monthly .mo-tw tr.trow td{background:var(--bg3);font-weight:700;border-top:2px solid var(--bdr2)}
#t-monthly .mo-tw tr.trow td.mcol{background:var(--bg3)}
#t-monthly .mo-tw tr.trow.all td{background:#232c42;border-top:2px solid var(--acc)}
#t-monthly .mo-tw tr.trow.all td.mcol{background:#232c42;color:var(--acc2,#7aa8ff)}

/* ライトテーマ調整 (html.light) */
html.light #t-monthly .mo-tw tr:hover td.mcol{background:#e8edf7}
html.light #t-monthly .mo-tw tr.trow.all td,html.light #t-monthly .mo-tw tr.trow.all td.mcol{background:#d8e3f7}