/**
 * FRJ LiveTiming Phase1 テーマ（CSS変数）
 * 既存スタイルはそのまま。変数は今後の置き換え用。
 */
:root {
  /* Base（ダーク） */
  --frj-bg: #0E1116;
  --frj-panel: #161B22;
  --frj-panel2: #1B2230;
  --frj-border: #2A3038;
  --frj-text: #E6EAF0;
  --frj-muted: #ffffff;
  /* ブランド（FRJ） */
  --frj-primary: #0B2D5B;
  /* ライブ状態 */
  --frj-live: #E53935;
  --frj-warn: #16db36;
  --frj-best: #B36BFF;
  --frj-ok: #2DD4FF;
  /* Phase2: セクター色（Grey / Orange / Red） */
  --frj-sector-normal: #fffff;
  --frj-sector-pb: #16db36;
  --frj-sector-best: #E53935;
  /* フォント（Helvetica Neue / Arial：MotoGP LiveTiming風） */
  --frj-font: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* ラップ/ギャップ/速度など計時数字：桁揃えで読みやすく（tabular-nums） */
.font-timing,
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Phase1: 更新ハイライト（行・セル） */
.row-updated {
  background-color: rgba(11, 45, 91, 0.35) !important;
  transition: background-color 0.15s ease-out;
}
.cell-updated {
  background-color: rgba(45, 212, 255, 0.2) !important;
  transition: background-color 0.15s ease-out;
}

/* Phase2: ギャップ切替ボタン */
.gap-toggle { display: inline-flex; gap: 2px; }
.gap-toggle .gap-btn {
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  background: var(--frj-panel2, #1B2230);
  color: var(--frj-text, #E6EAF0);
  border: 1px solid var(--frj-border, #2A3038);
  border-radius: 2px;
}
.gap-toggle .gap-btn:hover {
  background: var(--frj-primary, #0B2D5B);
}

/* Phase2: Detail Panel（選択車両）・右端切れ防止のため右に余白・ドラッグで移動可能 */
.detail-panel-backdrop {
  display: none !important; /* メインをグレーアウトしないため常に非表示 */
}
.detail-panel {
  position: fixed;
  top: 0;
  right: 24px;
  width: 539px;
  min-width: 440px;
  max-width: calc(100vw - 48px);
  height: 80vh;
  max-height: 100%;
  background: var(--frj-panel, #161B22);
  border: 1px solid var(--frj-border, #2A3038);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  z-index: 1000;
  display: none;
  flex-direction: column;
}
.detail-panel.is-open { display: flex; }
.detail-panel-header {
  padding: 8px 12px;
  background: var(--frj-panel2, #1B2230);
  border-bottom: 1px solid var(--frj-border, #2A3038);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
}
.detail-panel-title { font-weight: bold; color: var(--frj-text, #E6EAF0); font-size: 14px; }
.detail-panel-close {
  cursor: pointer;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--frj-text, #E6EAF0);
  background: var(--frj-border, #2A3038);
  border: 1px solid var(--frj-muted, #ffffff);
  border-radius: 4px;
}
.detail-panel-close:hover {
  background: var(--frj-primary, #0B2D5B);
  border-color: var(--frj-primary, #0B2D5B);
}
.detail-panel iframe {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: 0;
  min-height: 400px;
}

/* Best / 2nd Best 切替（ClassFilter右・予選モード時のみ表示・FRJテーマ） */
.best-mode-toggle-wrap {
  display: none;
  position: absolute;
  top: 10px;
  left: 680px;
  font-family: var(--frj-font);
  align-items: center;
}
.best-mode-toggle-wrap .best-mode-btn {
  padding: 4px 12px;
  margin: 0 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--frj-text, #E6EAF0);
  background: var(--frj-panel2, #1B2230);
  border: 1px solid var(--frj-border, #2A3038);
  border-radius: 3px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.best-mode-toggle-wrap .best-mode-btn:hover {
  background: var(--frj-primary, #0B2D5B);
  border-color: var(--frj-primary, #0B2D5B);
  color: #fff;
}
.best-mode-toggle-wrap .best-mode-btn.active {
  background: var(--frj-primary, #0B2D5B);
  color: #fff;
  border-color: var(--frj-ok, #2DD4FF);
}
.best-mode-toggle-wrap .best-mode-btn.active:hover {
  background: #0d3a6e;
  border-color: var(--frj-ok, #2DD4FF);
}