/* Phân tích phiên live — styles riêng cho trang (block upload header dùng chung .analysis-* trong analysis.css) */

/* Chỉ creator đang được phân tích — hiển thị cạnh tiêu đề trang */
.live-analysis-creator-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--emerald-50, #ecfdf5);
  border: 1px solid var(--emerald-200, #a7f3d0);
  border-radius: 999px;
  font-size: 13px;
  color: var(--emerald-700, #047857);
  white-space: nowrap;
}

.live-analysis-creator-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--emerald-600, #059669);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.live-analysis-creator-clear svg {
  width: 10px;
  height: 10px;
}

.live-analysis-creator-clear:hover {
  background: var(--emerald-100, #d1fae5);
  color: var(--emerald-800, #065f46);
}

/* Grid KPI — 6 card phía trên: mặc định 1 cột, từ 768px trở lên 3 cột (2 hàng) */
#live-analysis-page .list-page-stats-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  #live-analysis-page .list-page-stats-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  #live-analysis-page .list-page-stats-grid > :nth-child(-n+3) {
    grid-column: span 2;
  }

  #live-analysis-page .list-page-stats-grid > :nth-child(n+4) {
    grid-column: span 3;
  }
}

/* Hàng 3 biểu đồ: phễu chuyển đổi, khung giờ, theo ngày — cùng hàng, phễu nằm đầu */
#live-analysis-page .analysis-charts-row {
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 1200px) {
  #live-analysis-page .analysis-charts-row {
    grid-template-columns: 1fr 1fr;
  }

  #live-analysis-page .analysis-charts-row > :nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  #live-analysis-page .analysis-charts-row {
    grid-template-columns: 1fr;
  }
}

/* Chú thật của biểu đồ khung giờ / theo ngày nằm dưới biểu đồ (thay vì bên cạnh) */
#live-analysis-page .db-cost-inner-row {
  flex-direction: column;
  flex: 1;
}

#live-analysis-page .db-cost-chart-area {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

#live-analysis-page .db-chart-svg {
  flex: 1 1 auto;
  min-height: 220px;
}

#live-analysis-page .db-cost-types-panel {
  flex: none;
  border-left: none;
  border-top: 1px solid var(--border-lt);
  padding: 10px 0 0;
}

/* ── Đồng bộ lề nội bộ 3 panel biểu đồ: cùng gutter trái/phải 16px với header, khoảng cách top/bottom đồng nhất ── */
#live-analysis-page .analysis-charts-row .db-panel-inner {
  padding: 4px 16px 14px;
  flex: 1;
}

/* Nút chọn creator — bấm để phân tích toàn bộ trang theo creator */
.creator-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 2px 6px;
  margin: -2px 0;
  border: 1px dashed transparent;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.creator-filter-btn:hover {
  border-color: var(--emerald-400, #34d399);
  background: var(--emerald-50, #ecfdf5);
  color: var(--emerald-700, #047857);
}

.creator-filter-btn.active {
  border-color: var(--emerald-500, #10b981);
  background: var(--emerald-50, #ecfdf5);
  color: var(--emerald-700, #047857);
  font-weight: 600;
}

.creator-filter-check {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--emerald-600, #059669);
  font-size: 12px;
}

/* Hàng đang chọn trong bảng Top creator theo GMV */
.analysis-top-table tbody tr.table-row-active {
  background: var(--emerald-50, #ecfdf5);
}