/* ===================================================
   ライブ送出モニター - スタイルシート
   =================================================== */

/* ===== Reset & Base ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Hiragino Sans', 'Meiryo', 'Yu Gothic', sans-serif;
  font-size: 12px;
  background: #1a1a2e;
  color: #e0e0e0;
  min-height: 100vh;
}

/* ===== Header ===== */
.header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: #0f0f1a;
  border-bottom: 1px solid #333;
  height: 40px;
  flex-wrap: wrap;
}

.header-time {
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
}

.header-spacer {
  flex: 1;
}

.aws-label {
  color: #ff9900;
  font-size: 11px;
  font-weight: bold;
}

/* ===== Badge ===== */
.badge-error {
  background: #e53935;
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
}

.badge-ok {
  background: #43a047;
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
}

/* ===== Tabs ===== */
.tab-group {
  display: flex;
  gap: 4px;
}

.tab-btn {
  padding: 4px 12px;
  border: 1px solid #555;
  border-radius: 3px;
  background: #2a2a3e;
  color: #ccc;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.2s;
}

.tab-btn:hover {
  background: #3a3a5e;
}

.tab-btn.active {
  background: #1565c0;
  color: #fff;
  border-color: #1e88e5;
}

.tab-btn.tab-today {
  background: #00838f;
  color: #fff;
  border-color: #00acc1;
}

/* タブ内のカテゴリ件数バッジ */
.tab-count {
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  font-size: 10px;
  line-height: 1.5;
  min-width: 16px;
  text-align: center;
}

.tab-btn.active .tab-count {
  background: rgba(255, 255, 255, 0.3);
}

/* ===== Connection Status Bar ===== */
.conn-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 3px 10px;
  background: #0a0a1a;
  border-bottom: 1px solid #1e1e3e;
  font-size: 10px;
  flex-wrap: wrap;
}

.conn-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.conn-connected    { background: #43a047; }
.conn-disconnected { background: #757575; }
.conn-error        { background: #e53935; }

.conn-label {
  color: #b0bec5;
}

/* ===== Main Layout ===== */
.main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
}

/* ===== Unified Table Wrapper ===== */
.unified-table-wrap {
  flex: 1;
  overflow: auto;
}

.unified-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  white-space: nowrap;
}

/* ===== Panel Common ===== */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #16213e;
  padding: 5px 10px;
  border-bottom: 1px solid #333;
  font-size: 12px;
  font-weight: bold;
  color: #90caf9;
}

.panel-header-icon {
  cursor: pointer;
  color: #888;
  font-size: 14px;
  padding: 2px 6px;
  border: 1px solid #555;
  border-radius: 3px;
}

.table-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
}

/* ===== Left: Game Panel ===== */
.game-panel {
  flex: 0 0 560px;
  display: flex;
  flex-direction: column;
  border-right: 2px solid #333;
  overflow: hidden;
}

/* ===== Right: Stream Panel ===== */
.stream-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== Tables ===== */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

thead tr {
  background: #1a1a3e;
  position: sticky;
  top: 0;
  z-index: 10;
}

th {
  padding: 3px 4px;
  text-align: center;
  color: #b0bec5;
  font-weight: normal;
  border: 1px solid #2a2a4e;
  white-space: nowrap;
  line-height: 1.2;
}

td {
  padding: 2px 4px;
  border: 1px solid #1e1e3e;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.2;
}

tbody tr                 { background: #0f0f22; }
tbody tr.game-group-inner { background: #12122a; }
tbody tr:hover           { background: #1a2a4e !important; }
tbody tr.selected        { background: #0d3b6e !important; outline: 1px solid #42a5f5; }

/* Group separator between game info and stream columns */
.col-separator {
  border-right: 2px solid #3a3a6e !important;
}

/* Top-level group header row */
.unified-table thead tr:first-child th {
  background: #0f1a30;
  color: #90caf9;
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* Sub-header row (column names) */
.subheader-row th {
  background: #1a1a3e;
  font-size: 10px;
}

.subheader-stream {
  /* Stream columns have no sub-label text; keep minimal height */
  padding: 2px !important;
}

/* ===== Category Badge ===== */
.cat-badge {
  display: inline-block;
  color: #fff;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 10px;
  min-width: 22px;
  text-align: center;
}

.cat-j1  { background: #c62828; }
.cat-j2  { background: #1565c0; }
.cat-j3  { background: #2e7d32; }
.cat-ybc { background: #6a1b9a; }
.cat-lc  { background: #e65100; }

/* Bリーグ カテゴリ */
.cat-pre  { background: #0277bd; }   /* B.LEAGUE Premier: 青 */
.cat-one  { background: #2e7d32; }   /* B.LEAGUE ONE: 緑 */
.cat-next { background: #6a1b9a; }   /* B.LEAGUE NEXT: 紫 */
.cat-other { background: #37474f; }

/* ===== Status Badge ===== */
.status-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: bold;
}

.status-scheduled { background: #37474f; color: #90a4ae; }
.status-live      { background: #1b5e20; color: #a5d6a7; animation: pulse 1.5s infinite; }
.status-finished  { background: #263238; color: #607d8b; }
.status-prematch  { background: #4a148c; color: #ce93d8; }

/* ===== Team Cell ===== */
.team-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}

/* ===== Stadium Icon ===== */
.stadium-pin {
  color: #ef9a9a;
  font-size: 12px;
}

/* ===== Table cells: monospace values ===== */
.cell-mono {
  color: #90caf9;
  font-family: monospace;
  font-size: 10px;
}

/* ===== Stream Status Dots ===== */
.stream-dot {
  display: inline-block;
  width: 14px;
  height: 11px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
  vertical-align: middle;
}

.stream-dot:hover {
  filter: brightness(1.2);
  border-color: #888;
}

.dot-connected    { background: #2e7d32; }
.dot-disconnected { background: #37474f; }
.dot-error        { background: #b71c1c; animation: errorPulse 0.8s infinite; }

/* ===== Spalk Flag ===== */
.spalk-flag {
  display: inline-block;
  color: #fff;
  font-size: 7px;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: bold;
  margin-left: 1px;
  vertical-align: middle;
  line-height: 1.4;
}

.spalk-primary   { background: #e65100; }
.spalk-secondary { background: #6a1b9a; }

/* ===== Action Buttons ===== */
.btn-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 13px;
  border-radius: 2px;
  background: #b71c1c;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 10px;
  transition: all 0.2s;
}

.btn-stop:hover {
  background: #d32f2f;
}

.btn-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 13px;
  border-radius: 2px;
  background: #1565c0;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 9px;
  transition: all 0.2s;
}

.btn-view:hover {
  background: #1976d2;
}

/* ===== Detail / Control Panel ===== */
.detail-panel {
  background: #0a0a1a;
  border-top: 2px solid #333;
  padding: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  max-height: 240px;
  overflow-y: auto;
  flex-shrink: 0;
}

.detail-panel--empty {
  color: #455a64;
  font-size: 12px;
  align-items: center;
  justify-content: center;
}

.control-group {
  background: #12122a;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 8px 10px;
  min-width: 175px;
}

.control-group--wide {
  min-width: 200px;
}

.control-group-title {
  font-size: 10px;
  color: #90caf9;
  font-weight: bold;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #1e1e3e;
  padding-bottom: 4px;
}

.control-btn {
  display: block;
  width: 100%;
  padding: 5px 8px;
  margin-bottom: 4px;
  background: #1a1a3e;
  border: 1px solid #444;
  border-radius: 3px;
  color: #e0e0e0;
  cursor: pointer;
  font-size: 11px;
  text-align: left;
  transition: all 0.2s;
  font-family: inherit;
}

.control-btn:hover          { background: #2a2a5e; border-color: #666; }
.control-btn.danger         { border-color: #c62828; color: #ef9a9a; }
.control-btn.danger:hover   { background: #3a1010; }
.control-btn.warning        { border-color: #e65100; color: #ffcc80; }
.control-btn.warning:hover  { background: #3a2010; }
.control-btn.success        { border-color: #2e7d32; color: #a5d6a7; }
.control-btn.success:hover  { background: #0a2a0a; }

/* ===== Stream State List (in control panel) ===== */
.stream-state-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.stream-state-label {
  flex: 1;
  color: #b0bec5;
}

.stream-state-value {
  font-size: 10px;
}

.stream-state-value--connected    { color: #a5d6a7; }
.stream-state-value--disconnected { color: #546e7a; }
.stream-state-value--error        { color: #ef9a9a; }

/* ===== Auto Refresh Indicator ===== */
.refresh-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #90caf9;
  padding: 2px 8px;
  background: #0d1b2a;
  border-radius: 10px;
  border: 1px solid #1e4060;
  margin-left: 12px;
}

.refresh-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #43a047;
  display: inline-block;
  animation: blink 1s step-end infinite;
}

.refresh-dot.spinning {
  animation: spin 0.6s linear infinite;
  background: #ff9800;
}

/* ===== Modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal {
  background: #12122a;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 20px;
  min-width: 340px;
  max-width: 480px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

.modal-title {
  font-size: 14px;
  font-weight: bold;
  color: #90caf9;
  margin-bottom: 12px;
}

.modal-body {
  font-size: 12px;
  color: #e0e0e0;
  margin-bottom: 16px;
  line-height: 1.7;
  white-space: pre-line;
}

.modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.modal-btn {
  padding: 6px 16px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
}

.modal-btn-cancel      { background: #37474f; color: #fff; }
.modal-btn-ok          { background: #c62828; color: #fff; }
.modal-btn-ok:hover    { background: #e53935; }

/* ===== Tooltip ===== */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 3px 7px;
  border-radius: 3px;
  font-size: 10px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 1001;
}

[data-tooltip]:hover::after {
  opacity: 1;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0a1a; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* ===== Animations ===== */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

@keyframes errorPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===== App Root ===== */
.app-root {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ===== Conn Bar extras ===== */
.conn-bar-label {
  color: #607d8b;
  font-weight: bold;
  margin-right: 4px;
}

.conn-bar-spacer {
  flex: 1;
}

.conn-label--error {
  color: #ef9a9a;
}

.spalk-flag--ml {
  margin-left: 8px;
}

/* ===== Stream Panel Inner ===== */
.stream-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Table scroll with flex-grow */
.table-scroll--flex {
  flex: 1;
}

/* ===== Control Panel: Game Info group ===== */
.control-group--info {
  min-width: 190px;
}

.control-game-title {
  margin-bottom: 4px;
}

.team-name {
  color: #fff;
}

.control-game-meta {
  color: #90a4ae;
  line-height: 1.8;
}

.control-game-status {
  margin-top: 6px;
}

/* ===== Stream Dot Wrapper ===== */
.stream-dot-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  position: relative;
}

/* ツールチップ表示中は、その要素を sticky ヘッダ(z-index:10)より前面へ出す */
.stream-dot:hover {
  z-index: 1000;
}
.stream-dot-wrapper:hover {
  z-index: 1000;
}

/* ===== Table Row: clickable ===== */
.game-row {
  cursor: pointer;
}

/* ===== Team Icon ===== */
.team-icon {
  font-size: 11px;
}

/* ===== Stream Column Header ===== */
.stream-col-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

/* ===== All-Stop Group ===== */
.control-group--all-stop {
  border-color: #7f1010;
  background: #1a0a0a;
}

.btn-stop-all {
  display: block;
  width: 100%;
  padding: 8px 10px;
  background: #7f0000;
  border: 1px solid #c62828;
  border-radius: 4px;
  color: #ffcdd2;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.5px;
  transition: all 0.2s;
  font-family: inherit;
  margin-bottom: 6px;
}

.btn-stop-all:hover {
  background: #b71c1c;
  border-color: #ef5350;
  color: #fff;
  box-shadow: 0 0 8px rgba(229, 57, 53, 0.5);
}

.stop-all-hint {
  font-size: 10px;
  color: #78909c;
  line-height: 1.5;
}

/* ===== Modal: stop-all variant ===== */
.modal-btn-stop-all {
  background: #7f0000;
  color: #ffcdd2;
  border: 1px solid #c62828;
}

.modal-btn-stop-all:hover {
  background: #c62828;
  color: #fff;
}

/* ===== Spalk Active Highlighting ===== */

/* セル背景をハイライト */
.td-spalk-active {
  background: rgba(230, 81, 0, 0.15) !important;
}

/* アクティブ系統のdotを明るく */
.spalk-active-dot {
  box-shadow: 0 0 6px 2px rgba(76, 175, 80, 0.7);
  border-color: #66bb6a !important;
}

/* アクティブ時のwrapperに下線 */
.spalk-active-wrapper {
  border-bottom: 2px solid #e65100;
  padding-bottom: 1px;
}

/* アクティブフラグを大きく */
.spalk-flag-active {
  font-size: 9px;
  padding: 1px 4px;
  box-shadow: 0 0 4px rgba(230, 81, 0, 0.8);
}

/* LIVE バッジ */
.spalk-active-badge {
  display: inline-block;
  background: #e65100;
  color: #fff;
  font-size: 6px;
  font-weight: bold;
  padding: 0 2px;
  border-radius: 2px;
  margin-left: 1px;
  vertical-align: middle;
  letter-spacing: 0.5px;
  animation: pulse 1.5s infinite;
}

/* ===== M2A 自動停止通知バナー ===== */
.m2a-notice-container {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
  max-width: 420px;
}

.m2a-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1a1500;
  border: 1px solid #f9a825;
  border-left: 4px solid #f9a825;
  border-radius: 4px;
  padding: 10px 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.m2a-notice-icon {
  font-size: 18px;
  color: #ff9800;
  flex-shrink: 0;
}

.m2a-notice-text {
  flex: 1;
  font-size: 11px;
  color: #ffe0b2;
  line-height: 1.6;
}

.m2a-notice-time {
  display: inline-block;
  margin-left: 8px;
  color: #78909c;
  font-size: 10px;
}

.m2a-notice-close {
  background: none;
  border: none;
  color: #78909c;
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  flex-shrink: 0;
  line-height: 1;
}

.m2a-notice-close:hover {
  color: #fff;
}

/* ===== Vertical Game Table ===== */

/* 試合グループの最初の行: 上部に太めの区切り線 */
.game-group-first td {
  border-top: 2px solid #333 !important;
}

/* 試合グループ内部の行: 細い区切り線 */
.game-group-inner td {
  border-top: 1px solid #1e1e3e;
}

/* 試合情報セル (rowspan) の縦揃え */
.game-info-cell {
  vertical-align: middle;
}

/* selected行のgame-info-cellも正しく選択色が出るよう */
tr.selected .game-info-cell {
  background: #0d3b6e !important;
}

/* In 列: 系統ラベル + In dotを横並び */
/* 系統ラベル列: 系統ラベル(+Spalk) を左寄せで表示。ドットは別セル。 */
.line-label-col {
  white-space: nowrap;
  padding: 2px 8px !important;
  vertical-align: middle;
  text-align: left;
  width: 1%;
}

.line-label-inner {
  display: flex;
  align-items: center;
  gap: 5px;
}
.line-label-inner .in-label,
.line-label-inner .spalk-assign-label {
  flex: 0 0 auto;
}

/* In 系統ラベル */
.in-label {
  display: inline-block;
  font-size: 9px;
  font-weight: bold;
  padding: 0 4px;
  border-radius: 2px;
  min-width: 28px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.6;
}

.in-label--jpn   { background: #37474f; color: #fff; }
.in-label--jpn2h { background: #006064; color: #e0f7fa; }
.in-label--eng   { background: #bf360c; color: #fff; }
.in-label--engs1 { background: #4a148c; color: #e1bee7; }

/* group header row */
.th-group {
  background: #0f1a30;
  color: #90caf9;
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* Gen/M2A を colSpan=2 で一括ヘッダー */
.th-gen-m2a {
  border-right: 1px dashed #2a2a4e;
}

/* ===== Spalk Toggle ===== */
.spalk-toggle-group {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.spalk-toggle-btn {
  flex: 1;
  padding: 6px 8px;
  border-radius: 3px;
  border: 1px solid #444;
  background: #1a1a3e;
  color: #90a4ae;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.2s;
}

.spalk-toggle-btn:hover {
  background: #2a2a5e;
  border-color: #666;
}

/* 主系統アクティブ */
.spalk-toggle-primary.spalk-toggle-active {
  background: #1a3a1a;
  border-color: #43a047;
  color: #a5d6a7;
  font-weight: bold;
  box-shadow: 0 0 6px rgba(67, 160, 71, 0.4);
}

/* 副系統アクティブ */
.spalk-toggle-secondary.spalk-toggle-active {
  background: #2a1a3a;
  border-color: #7b1fa2;
  color: #ce93d8;
  font-weight: bold;
  box-shadow: 0 0 6px rgba(123, 31, 162, 0.4);
}

.spalk-toggle-indicator {
  font-size: 8px;
  animation: pulse 1.5s infinite;
}

/* ===== Spalk Assign Label (In列のインジケータ隣) ===== */
.spalk-assign-label {
  display: inline-block;
  background: #e65100;
  color: #fff;
  font-size: 8px;
  font-weight: bold;
  padding: 0 4px;
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1.6;
  letter-spacing: 0.3px;
}

/* ===== Spalk Info Row (コントロールパネル内) ===== */
.spalk-info-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 6px 8px;
  background: #1a1a3e;
  border-radius: 3px;
  border: 1px solid #333;
}

.spalk-info-label {
  display: inline-block;
  background: #e65100;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 1px 7px;
  border-radius: 3px;
  min-width: 28px;
  text-align: center;
}

.spalk-info-arrow {
  color: #78909c;
  font-size: 12px;
}

/* ===== Stream Status Group (in control panel) ===== */
.stream-status-group {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #1e1e3e;
}
.stream-status-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.stream-status-group-label {
  margin-bottom: 4px;
}