/**
 * MC TIMER — Design v2 "BROADCAST" (放送室コンソール)
 * 上書きテーマ: html.theme-v2 が付いている時だけ有効。無ければ完全に旧デザイン。
 * DOM構造・ボタン位置は一切変えない（現場の筋肉記憶を守る）。
 * 正本: C:\dev\mctimer\app\mctimer-theme-v2.css → 本番 /assets/mctimer-theme-v2.css
 */

html.theme-v2 {
  --mtv2-bg: #07090f;
  --mtv2-panel: #0d1420;
  --mtv2-panel2: #111a2a;
  --mtv2-line: #1c2a40;
  --mtv2-cyan: #26d0e8;
  --mtv2-red: #ff3b4d;
  --mtv2-green: #29e08c;
  --mtv2-dim: #5d7290;
  --mtv2-txt: #d7e4f4;
  --mtv2-read: #a9bdd6;
}

/* ============ ベース ============ */
html.theme-v2 body {
  /* [perf] background-attachment:fixed はスクロール毎に全画面再描画で重い→通常スクロールに。見た目ほぼ同じ */
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.013) 0 1px, transparent 1px 3px),
    radial-gradient(1200px 520px at 50% -10%, #0e1d33 0%, var(--mtv2-bg) 62%);
  background-color: var(--mtv2-bg);
  color: var(--mtv2-txt);
}
html.theme-v2 ::-webkit-scrollbar { width: 10px; height: 10px; }
html.theme-v2 ::-webkit-scrollbar-thumb { background: #22344f; border-radius: 5px; }
html.theme-v2 ::-webkit-scrollbar-track { background: #0a0f18; }

/* ============ ヘッダ（コンソール上段） ============ */
html.theme-v2 #mcheader {
  background: linear-gradient(180deg, #131d30, #0c1322);
  border-bottom: 1px solid rgba(38,208,232,.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 34px rgba(0,0,0,.55), 0 1px 18px rgba(38,208,232,.12);
}

/* 時計＝コンソールのメインランプ */
html.theme-v2 .clock {
  background: #0a1120;
  border: 1px solid var(--mtv2-line);
  border-radius: 10px;
  color: #eaf6ff;
  text-shadow: 0 0 14px rgba(38,208,232,.55);
  box-shadow: 0 2px 6px rgba(0,0,0,.5) inset, 0 0 0 1px rgba(38,208,232,.12);
  filter: none;
}
html.theme-v2 .clock-sec { color: var(--mtv2-cyan); }
html.theme-v2 .clock-date { color: var(--mtv2-dim); text-shadow: none; letter-spacing: .18em; }

/* 操作ノブ（速度・タイマー・ベル・テーマ切替） */
html.theme-v2 select#speed,
html.theme-v2 #timer_b,
html.theme-v2 #bell_b,
html.theme-v2 #theme_b {
  background: linear-gradient(180deg, #16233a, #0c1524) !important;
  color: #b6c8de !important;
  border: 1px solid var(--mtv2-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 3px 8px rgba(0,0,0,.5) !important;
}
html.theme-v2 #bell_b.ton,
html.theme-v2 #timer_b .ton,
html.theme-v2 #theme_b {
  color: var(--mtv2-cyan) !important;
  border-color: rgba(38,208,232,.55) !important;
}
html.theme-v2 #theme_b .th-state { color: var(--mtv2-cyan); }

/* ============ 音源キャッシュパネル ============ */
html.theme-v2 #audio-cache-panel {
  background: rgba(10,16,27,.85);
  border-bottom: 1px solid var(--mtv2-line);
  color: var(--mtv2-dim);
  letter-spacing: .05em;
}
html.theme-v2 #audio-cache-panel .cache-bar { background: #16233a; }
html.theme-v2 #audio-cache-panel .cache-bar-fill {
  background: linear-gradient(90deg, var(--mtv2-cyan), var(--mtv2-green));
  box-shadow: 0 0 8px rgba(41,224,140,.55);
}
html.theme-v2 #audio-cache-panel button {
  background: #16233a; border: 1px solid var(--mtv2-line); color: #b6c8de;
  border-radius: 6px; letter-spacing: .08em;
}
html.theme-v2 #audio-cache-panel button:hover { background: #1d2f4c; }

/* ============ 次アナウンスバー（微調整のみ・元々この世界観） ============ */
html.theme-v2 #next-announce-bar {
  border-bottom-color: rgba(38,208,232,.22);
}

/* ============ タブ（トラック番号帯） ============ */
html.theme-v2 .tab_label {
  background: var(--mtv2-panel);
  border: 1px solid var(--mtv2-line) !important;
  border-radius: 10px !important;
  color: var(--mtv2-dim);
  font-family: "Consolas", "SF Mono", "Menlo", monospace;
  letter-spacing: .14em;
  margin: 0 6px 8px 0;
}
html.theme-v2 .tab_label:hover {
  color: var(--mtv2-cyan);
  border-color: rgba(38,208,232,.45) !important;
}
html.theme-v2 .tab_label.is-active {
  background: linear-gradient(180deg, #55e2f5, #1db5cc) !important;
  color: #04121c !important;
  font-weight: 900;
  border-color: transparent !important;
  box-shadow: 0 0 20px rgba(38,208,232,.35);
}
html.theme-v2 .cp_tab .cp_tabpanel { border-top: 1px solid var(--mtv2-line); }
html.theme-v2 .cp_tabpanel h2 { color: var(--mtv2-txt); }

/* ============ タイムライン軸・アイコン ============ */
/* 先頭の被りは app.js の [FIX#10]（.cp_tab への動的オフセット）で解消 */
html.theme-v2 .cbp_tmtimeline:before {
  width: 2px;
  background: linear-gradient(180deg, rgba(38,208,232,.35), rgba(28,42,64,.8));
  /* 旧線(幅10px,-10px)の中心 = left13% - 5px に合わせる: -6px + 1px = -5px */
  margin-left: -6px;
}
html.theme-v2 .cbp_tmtimeline > li .cbp_tmicon {
  background: var(--mtv2-panel2);
  color: var(--mtv2-cyan);
  box-shadow: 0 0 0 4px rgba(38,208,232,.16), 0 0 14px rgba(38,208,232,.25);
  border: 1px solid rgba(38,208,232,.4);
}
html.theme-v2 .cbp_tmtimeline > li .cbp_tmtime span { color: var(--mtv2-dim); }

/* ============ トラックカード ============ */
html.theme-v2 .cbp_tmtimeline > li .cbp_tmlabel {
  background: linear-gradient(180deg, var(--mtv2-panel2), var(--mtv2-panel));
  border: 1px solid var(--mtv2-line);
  border-radius: 12px;
  color: var(--mtv2-read);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 26px rgba(0,0,0,.35);
}
html.theme-v2 .cbp_tmlabel h2.title {
  color: #fff;
  text-shadow: 0 0 12px rgba(38,208,232,.25);
}
html.theme-v2 .cbp_tmlabel .p-ca { color: var(--mtv2-read); }
html.theme-v2 .cbp_tmlabel a { color: var(--mtv2-cyan); }

/* 開閉ラベル（＋） */
html.theme-v2 .accbox_l {
  background: #16233a !important;
  border: 1px solid var(--mtv2-line) !important;
  border-radius: 8px !important;
  color: var(--mtv2-cyan) !important;
}
html.theme-v2 .accbox_l:hover { border-color: rgba(38,208,232,.5) !important; }
html.theme-v2 .accshow {
  background: rgba(7,11,19,.5);
  border: 1px solid var(--mtv2-line);
  border-radius: 10px;
}

/* ============ 再生ボタン（主役） ============ */
html.theme-v2 .btn-play_m {
  background: radial-gradient(circle at 30% 25%, #1d3350, #0b1523) !important;
  border: 2px solid rgba(38,208,232,.55) !important;
  border-radius: 50% !important;
  color: var(--mtv2-cyan) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 0 4px rgba(38,208,232,.08);
  text-shadow: 0 0 10px rgba(38,208,232,.5);
}
html.theme-v2 .btn-play_m.m-on {
  border-color: var(--mtv2-red) !important;
  color: var(--mtv2-red) !important;
  /* [perf] box-shadowの無限アニメ(毎フレーム再描画)を廃止し、静的な赤グローで"点灯"を表現 */
  box-shadow: 0 0 18px rgba(255,59,77,.45), 0 4px 14px rgba(0,0,0,.5);
  text-shadow: 0 0 10px rgba(255,59,77,.6);
}
html.theme-v2 .btn_play {
  background: linear-gradient(180deg, #16233a, #0c1524) !important;
  border: 1px solid var(--mtv2-line) !important;
  border-radius: 10px !important;
  color: #b6c8de !important;
}
html.theme-v2 .btn_play.m-on { color: var(--mtv2-red) !important; border-color: rgba(255,59,77,.5) !important; }

/* ============ 進捗バー ============ */
html.theme-v2 #barBd {
  background: #16233a !important;
  border-radius: 3px;
  overflow: hidden;
}
html.theme-v2 #bar {
  /* [perf] 伸縮する進捗バーにグロー影を付けると毎フレーム再描画で重い→影なし(色は維持) */
  background: linear-gradient(90deg, var(--mtv2-red), #ff7d6e) !important;
}
html.theme-v2 .seektime {
  color: var(--mtv2-dim);
  font-family: "Consolas", "SF Mono", "Menlo", monospace;
  font-variant-numeric: tabular-nums;
}

/* ============ タイマー・アラーム部 ============ */
/* 初版(入れ子ボックスの階層デザイン)の線種を点線→実線にしたもの（2026-07-18 豊さん指定） */
html.theme-v2 .appVwArea {
  background: rgba(13,20,32,.6);
  border: 1px solid rgba(38,208,232,.28);
  border-radius: 10px;
  color: var(--mtv2-read);
}
html.theme-v2 .appVwTm {
  /* [perf] 0.05秒毎に更新されるカウントダウンにtext-shadow(ぼかし)は毎回再描画で重い→影なし */
  color: #eaf6ff !important;
  font-variant-numeric: tabular-nums;
}
html.theme-v2 .app select,
html.theme-v2 .appVwArea select {
  background: #0a1120;
  color: var(--mtv2-txt);
  border: 1px solid var(--mtv2-line);
  border-radius: 6px;
}
html.theme-v2 .btnStrtStp {
  background: linear-gradient(180deg, #55e2f5, #1db5cc) !important;
  color: #04121c !important;
  font-weight: 900 !important;
  border: none !important;
  border-radius: 8px !important;
  letter-spacing: .1em;
  box-shadow: 0 3px 10px rgba(38,208,232,.3);
}
html.theme-v2 .btnDel {
  background: #16233a !important;
  color: #b6c8de !important;
  border: 1px solid var(--mtv2-line) !important;
  border-radius: 8px !important;
}
html.theme-v2 .btnAddAlrm2, html.theme-v2 .btnAddTmr2 {
  background: #16233a !important;
  color: var(--mtv2-cyan) !important;
  border: 1px solid rgba(38,208,232,.4) !important;
  border-radius: 8px !important;
}
html.theme-v2 .date-sel-wrap { color: var(--mtv2-read); }

/* ============ サイドバー・フローティングボタン ============ */
html.theme-v2 #show-sidebar, html.theme-v2 #show-sidebar2, html.theme-v2 #show-m-panel {
  background: linear-gradient(180deg, #16233a, #0c1524) !important;
  border: 1px solid rgba(38,208,232,.4) !important;
  color: var(--mtv2-cyan) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.5), 0 0 12px rgba(38,208,232,.15) !important;
}
html.theme-v2 .sidebar-wrapper {
  background: rgba(9,14,23,.97) !important;
  border-right: 1px solid var(--mtv2-line);
}
html.theme-v2 .sidebar-wrapper .sidebar-menu a { color: var(--mtv2-read); }
html.theme-v2 .sidebar-wrapper .header-menu span { color: var(--mtv2-cyan); letter-spacing: .2em; }

/* 音楽プレーヤーパネル */
html.theme-v2 .m-panel, html.theme-v2 #player {
  background: var(--mtv2-panel) !important;
  border: 1px solid var(--mtv2-line);
  color: var(--mtv2-txt);
}
html.theme-v2 #player button { background: #16233a; color: var(--mtv2-cyan); border: 1px solid var(--mtv2-line); border-radius: 8px; }
html.theme-v2 #player #volume_val, html.theme-v2 #currentTime, html.theme-v2 #maxTime {
  color: var(--mtv2-dim); font-variant-numeric: tabular-nums;
}

/* 復元ダイアログ・チェックボックス周りは既存ダークで馴染むため据え置き */